refactor: rename variant and enum values to shared names

apps/www/src/components/docs/search.tsx

@@ -231,7 +231,7 @@ export default function DocsSearch({ pageTree }: { pageTree: Root }) {
                 <Spinner size={5} aria-label='Searching docs' />
               ) : (
                 <EmptyState
-                  variant='empty1'
+                  variant='compact'
                   heading='No result found'
                   subHeading='The keyword you’re searching for isn’t in the document. Try a different term.'
                   icon={<WarningIcon />}

apps/www/src/content/docs/(overview)/upgrading.mdx

@@ -7,6 +7,43 @@ One section per release, newest first, with only the changes that need action
 from you. The full record of every release, features and fixes included, is
 on [GitHub releases](https://github.com/raystack/apsara/releases).
 
+## Unreleased: variant and enum values are renamed
+
+Prop values are kebab-case, and a variant uses the same name as on other
+components. `Grid` takes `align` and `justify`, as `Flex` does.
+
+| Component | Before | After |
+|---|---|---|
+| `Input`, `TextArea`, `Search` `variant` | `default`, `borderless` | `outline`, `text` |
+| `FilterChip` `variant` | `default`, `text` | `outline`, `text` |
+| `Chip` `variant` | `outline`, `filled` | `outline`, `solid` |
+| `EmptyState` `variant` | `empty1`, `empty2` | `compact`, `page` |
+| `Grid` props | `alignItems`, `justifyContent` | `align`, `justify` |
+| `Grid` `justify` and `alignContent` values | `space-between`, `space-around`, `space-evenly` | `between`, `around`, `evenly` |
+| `CalendarPreview` scale | `halfYear` | `half-year` |
+
+```tsx
+// Before
+<Search variant="borderless" />
+<Chip variant="filled">Label</Chip>
+<EmptyState variant="empty2" icon={<Bell />} heading="No projects" />
+<Grid alignItems="center" justifyContent="space-between" />
+<CalendarPreview scales={['quarter', 'halfYear']} />
+
+// After
+<Search variant="text" />
+<Chip variant="solid">Label</Chip>
+<EmptyState variant="page" icon={<Bell />} heading="No projects" />
+<Grid align="center" justify="between" />
+<CalendarPreview scales={['quarter', 'half-year']} />
+```
+
+The scale name changes in `scales`, `scale`, `defaultScale`, `onScaleChange`,
+the `scale` field of a value, and the `data-scale` attribute. `scales` drops a
+name it does not know, so `'halfYear'` hides the half-year view without an
+error. Convert stored values that hold `scale: 'halfYear'`, and update CSS that
+selects `[data-scale="halfYear"]`.
+
 ## Unreleased: date filters compare whole days
 
 `DataView`, `DataTable` and `FilterChip` read and compare dates as calendar

apps/www/src/content/docs/ai-elements/prompt-input/index.mdx

@@ -215,7 +215,7 @@ arrive with their ids and your own `data` next to the text:
 
 ### Textarea
 
-The text field, built on `TextArea variant="borderless"`. It grows with its
+The text field, built on `TextArea variant="text"`. It grows with its
 content up to a max-height cap (override with
 `--prompt-input-textarea-max-height`), then scrolls.
 
@@ -308,7 +308,7 @@ Every rendered part carries a stable `data-slot` attribute for [styling and test
   usual.
 - Each chip has an accessible name, like `"mention: DataTable"`.
 - The composer frame carries the focus treatment, so the border tints when a
-  child has visible focus (`:has(:focus-visible)`), while the borderless
+  child has visible focus (`:has(:focus-visible)`), while the `text` variant
   input suppresses its own duplicate focus ring.
 - Click-to-focus runs on `mousedown` and cancels the default focus shift, so
   focus never leaves the input and back again, a round trip that would dismiss

apps/www/src/content/docs/components/calendar-preview/demo.ts

@@ -173,7 +173,7 @@ export const periodsDemo = {
     {
       name: 'All scales',
       code: `<CalendarPreview
-              scales={['day', 'month', 'quarter', 'halfYear', 'year']}
+              scales={['day', 'month', 'quarter', 'half-year', 'year']}
               defaultMonth={new Date(2026, 7, 1)}
               defaultScale="quarter"
             >
@@ -183,7 +183,7 @@ export const periodsDemo = {
     {
       name: 'In a popover',
       code: `<CalendarPreview
-              scales={['day', 'month', 'quarter', 'halfYear', 'year']}
+              scales={['day', 'month', 'quarter', 'half-year', 'year']}
               defaultMonth={new Date(2026, 7, 1)}
             >
               <CalendarPreview.Trigger placeholder="Add start date" />
@@ -218,7 +218,7 @@ export const periodsDemo = {
     {
       name: 'Trailing value',
       code: `function CalendarPreviewTrailingExample() {
-  const scales = ['day', 'month', 'quarter', 'halfYear', 'year'];
+  const scales = ['day', 'month', 'quarter', 'half-year', 'year'];
   const [start, setStart] = React.useState({ date: '2026-07-01', scale: 'quarter' });
   const [end, setEnd] = React.useState({ date: '2026-09-30', scale: 'quarter' });
 
@@ -294,7 +294,7 @@ export const limitsDemo = {
     {
       name: 'Bounded periods',
       code: `<CalendarPreview
-              scales={['month', 'quarter', 'halfYear']}
+              scales={['month', 'quarter', 'half-year']}
               defaultScale="quarter"
               trailingValue
               minDate={new Date(2026, 6, 15)}

apps/www/src/content/docs/components/calendar-preview/props.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 
-type Scale = 'day' | 'month' | 'quarter' | 'halfYear' | 'year';
+type Scale = 'day' | 'month' | 'quarter' | 'half-year' | 'year';
 
 export interface CalendarPreviewProps {
   /**
@@ -331,7 +331,7 @@ export interface UseCalendarReturn {
    * The granularity the value is committed at. Read-only — switching scale is
    * `.Scales` and `.Scale`, which take `render` for custom chrome.
    */
-  scale: 'day' | 'month' | 'quarter' | 'halfYear' | 'year';
+  scale: 'day' | 'month' | 'quarter' | 'half-year' | 'year';
 
   /** The range mid-build, at `selection="range"`. Never emitted. */
   draft: { from?: Date; to?: Date } | null;

apps/www/src/content/docs/components/chip/demo.ts

@@ -14,7 +14,7 @@ export const playground = {
   controls: {
     variant: {
       type: 'select',
-      options: ['outline', 'filled'],
+      options: ['outline', 'solid'],
       defaultValue: 'outline'
     },
     size: {
@@ -46,7 +46,7 @@ export const variantsDemo = {
   code: `
   <Flex gap={9}>
     <Chip variant="outline">Outline</Chip>
-    <Chip variant="filled">Filled</Chip>
+    <Chip variant="solid">Solid</Chip>
   </Flex>`
 };
 
@@ -71,11 +71,11 @@ export const colorDemo = {
       <Chip color="warning" variant="outline">Warning</Chip>
     </Flex>
     <Flex gap={9}>
-      <Chip color="neutral" variant="filled">Neutral</Chip>
-      <Chip color="accent" variant="filled">Accent</Chip>
-      <Chip color="danger" variant="filled">Danger</Chip>
-      <Chip color="success" variant="filled">Success</Chip>
-      <Chip color="warning" variant="filled">Warning</Chip>
+      <Chip color="neutral" variant="solid">Neutral</Chip>
+      <Chip color="accent" variant="solid">Accent</Chip>
+      <Chip color="danger" variant="solid">Danger</Chip>
+      <Chip color="success" variant="solid">Success</Chip>
+      <Chip color="warning" variant="solid">Warning</Chip>
     </Flex>
   </Flex>`
 };
@@ -86,7 +86,7 @@ export const dismissableDemo = {
   <Flex gap={9}>
     <Chip isDismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
     <Chip variant="outline" color="accent" isDismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
-    <Chip variant="filled" color="accent" isDismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
+    <Chip variant="solid" color="accent" isDismissible onDismiss={() => alert('dismissed')} aria-label="Dismissible chip">Dismissable Chip</Chip>
   </Flex>`
 };
 
@@ -98,23 +98,23 @@ export const iconsDemo = {
       code: `
       <div style={{ display: 'flex', gap: '10px' }}>
         <Chip leadingIcon={'O'}>Add Item</Chip>
-        <Chip variant="filled" leadingIcon={'O'} data-state="active">Selected</Chip>
+        <Chip variant="solid" leadingIcon={'O'} data-state="active">Selected</Chip>
       </div>`
     },
     {
       name: 'Trailing Icon',
       code: `
       <div style={{ display: 'flex', gap: '10px' }}>
         <Chip trailingIcon={'O'}>Next</Chip>
-        <Chip variant="filled" trailingIcon={'O'}>Open</Chip>
+        <Chip variant="solid" trailingIcon={'O'}>Open</Chip>
       </div>`
     },
     {
       name: 'Both Icons',
       code: `
       <div style={{ display: 'flex', gap: '10px' }}>
         <Chip leadingIcon={'O'} trailingIcon={'O'}>Download</Chip>
-        <Chip variant="filled" leadingIcon={'O'} trailingIcon={'O'}>Edit Profile</Chip>
+        <Chip variant="solid" leadingIcon={'O'} trailingIcon={'O'}>Edit Profile</Chip>
       </div>`
     }
   ]

apps/www/src/content/docs/components/chip/index.mdx

@@ -31,7 +31,7 @@ Appearance first, meaning variant, size and color, then the two things a chip ca
 
 ### Variant
 
-Choose between outline and filled variants to match your design needs.
+Choose between `outline` and `solid` variants. `solid` fills the chip with the base background.
 
 <Demo data={variantsDemo} />
 

apps/www/src/content/docs/components/chip/props.ts

@@ -3,7 +3,7 @@ export interface ChipProps {
    * Visual style variant
    * @defaultValue "outline"
    */
-  variant?: 'outline' | 'filled';
+  variant?: 'outline' | 'solid';
 
   /**
    * Size of the chip

apps/www/src/content/docs/components/empty-state/demo.ts

@@ -22,8 +22,8 @@ export const playground = {
   controls: {
     variant: {
       type: 'select',
-      initialValue: 'empty1',
-      options: ['empty1', 'empty2']
+      defaultValue: 'compact',
+      options: ['compact', 'page']
     },
     heading: {
       type: 'text',
@@ -57,7 +57,7 @@ export const variantsDemo = {
   code: `
   <Flex gap={9}>
     <EmptyState
-      variant="empty1"
+      variant="compact"
       icon={<Bell size={16} strokeWidth={1.5} />}
       heading="No notifications yet"
       subHeading="When you have notifications, they will appear here"
@@ -69,7 +69,7 @@ export const variantsDemo = {
       }
     />
     <EmptyState
-      variant="empty2"
+      variant="page"
       icon={<Bell size={16} strokeWidth={1.5} />}
       heading="Organization"
       subHeading="An organization in Aurora is a shared workspace where teams manage projects, AOIs, and image orders. It streamlines collaboration, analysis, and decision-making across industries."

apps/www/src/content/docs/components/empty-state/index.mdx

@@ -14,7 +14,7 @@ import { playground, variantsDemo,
 
 `EmptyState` fills a view that has no content yet: an empty inbox, zero search results, a feature that needs setup. It pairs a required `icon` with an optional `heading`, `subHeading`, and up to two action slots (`primaryAction`, `secondaryAction`) so users always have a next step.
 
-Use `empty1`, the default, for compact centered placeholders inside panels and lists. Use `empty2` for full-page states, which left-align the content and put the actions in a side-by-side row.
+Use `compact`, the default, for centered placeholders inside panels and lists. Use `page` for full-page states, which left-align the content and put the actions in a side-by-side row.
 
 ## Anatomy
 
@@ -33,7 +33,7 @@ Pick the variant that suits the space, then fill in the icon, the message and up
 
 ### Variants
 
-`empty1` (the default) centers everything and stacks the actions vertically, which suits panels, tables, and lists. `empty2` left-aligns the content, uses a larger icon, and places both actions in a row, which suits full-page states.
+`compact` (the default) centers everything and stacks the actions vertically, which suits panels, tables, and lists. `page` left-aligns the content, uses a larger icon, and places both actions in a row, which suits full-page states.
 
 <Demo data={variantsDemo} />
 
@@ -61,7 +61,7 @@ Every rendered part carries a stable `data-slot` attribute for [styling and test
 | `empty-state-content` | Wrapper around the heading and subheading |
 | `empty-state-heading` | The heading text (when `heading` is set) |
 | `empty-state-subheading` | The subheading text (when `subHeading` is set) |
-| `empty-state-actions` | Wrapper around the action buttons (`empty2` variant only) |
+| `empty-state-actions` | Wrapper around the action buttons (`page` variant only) |
 
 ## Accessibility
 

apps/www/src/content/docs/components/empty-state/props.ts

@@ -14,8 +14,8 @@ export interface EmptyStateProps {
   /** Secondary action to show in empty state like button or link */
   secondaryAction?: React.ReactNode;
 
-  /** Visual style variant of the empty state
-   * @default "empty1"
+  /** Layout of the empty state
+   * @default "compact"
    */
-  variant?: 'empty1' | 'empty2';
+  variant?: 'compact' | 'page';
 }

apps/www/src/content/docs/components/filter-chip/demo.ts

@@ -29,8 +29,8 @@ export const playground = {
     },
     variant: {
       type: 'select',
-      options: ['default', 'text'],
-      defaultValue: 'default'
+      options: ['outline', 'text'],
+      defaultValue: 'outline'
     },
     label: {
       type: 'text',

apps/www/src/content/docs/components/filter-chip/props.ts

@@ -16,9 +16,9 @@ export interface FilterChipProps {
   columnType?: 'select' | 'multiselect' | 'date' | 'string' | 'number';
 
   /** Filterchip variant
-   * @default "default"
+   * @default "outline"
    */
-  variant?: 'default' | 'text';
+  variant?: 'outline' | 'text';
 
   /** Array of options for the select and multiselect type inputs */
   options?: { label: string; value: string | number | boolean }[];

apps/www/src/content/docs/components/grid/demo.ts

@@ -41,7 +41,7 @@ export const playground = {
       options: ['start', 'end', 'center', 'stretch'],
       initialValue: 'center'
     },
-    alignItems: {
+    align: {
       type: 'select',
       options: ['start', 'end', 'center', 'stretch'],
       initialValue: 'center'
@@ -94,7 +94,7 @@ export const areasDemo = {
 export const alignmentDemo = {
   type: 'code',
   code: `
-<Grid columns={3} gap={3} rows="80px" alignItems="center" justifyItems="center">
+<Grid columns={3} gap={3} rows="80px" align="center" justifyItems="center">
   <Grid.Item style={{ background: 'var(--rs-color-background-base-primary-hover)', border: '1px solid var(--rs-color-border-base-primary)', borderRadius: 4, padding: 12, fontSize: 13 }}>centered</Grid.Item>
   <Grid.Item alignSelf="start" style={{ background: 'var(--rs-color-background-base-primary-hover)', border: '1px solid var(--rs-color-border-base-primary)', borderRadius: 4, padding: 12, fontSize: 13 }}>alignSelf start</Grid.Item>
   <Grid.Item alignSelf="end" style={{ background: 'var(--rs-color-background-base-primary-hover)', border: '1px solid var(--rs-color-border-base-primary)', borderRadius: 4, padding: 12, fontSize: 13 }}>alignSelf end</Grid.Item>

apps/www/src/content/docs/components/grid/index.mdx

@@ -60,7 +60,7 @@ Reach for Grid when the layout is two-dimensional: rows *and* columns that have
 
 ### Alignment
 
-`justifyItems` and `alignItems` position every item inside its own cell. `justifySelf` and `alignSelf` override that for one item.
+`justifyItems` and `align` position every item inside its own cell. `justifySelf` and `alignSelf` override that for one item.
 
 <Demo data={alignmentDemo} />
 

apps/www/src/content/docs/components/grid/props.ts

@@ -111,21 +111,21 @@ export interface GridProps {
   justifyItems?: 'start' | 'end' | 'center' | 'stretch';
 
   /**
-   * Aligns grid items along the block (column) axis.
+   * Aligns grid items along the block (column) axis. Sets `align-items`.
    */
-  alignItems?: 'start' | 'end' | 'center' | 'stretch';
+  align?: 'start' | 'end' | 'center' | 'stretch';
 
   /**
-   * Aligns the entire grid along the inline (row) axis.
+   * Aligns the entire grid along the inline (row) axis. Sets `justify-content`.
    */
-  justifyContent?:
+  justify?:
     | 'start'
     | 'end'
     | 'center'
     | 'stretch'
-    | 'space-around'
-    | 'space-between'
-    | 'space-evenly';
+    | 'between'
+    | 'around'
+    | 'evenly';
 
   /**
    * Aligns the entire grid along the block (column) axis.
@@ -135,9 +135,9 @@ export interface GridProps {
     | 'end'
     | 'center'
     | 'stretch'
-    | 'space-around'
-    | 'space-between'
-    | 'space-evenly';
+    | 'between'
+    | 'around'
+    | 'evenly';
 
   /**
    * Renders the grid as an inline element instead of a block element.

apps/www/src/content/docs/components/input/props.ts

@@ -33,9 +33,9 @@ export interface InputProps {
 
   /**
    * Visual variant of the input.
-   * @defaultValue "default"
+   * @defaultValue "outline"
    */
-  variant?: 'default' | 'borderless';
+  variant?: 'outline' | 'text';
 
   /** Ref to the outer container div. */
   containerRef?: React.RefObject<HTMLDivElement | null>;

apps/www/src/content/docs/components/search/props.ts

@@ -11,6 +11,12 @@ export interface SearchProps {
   /** Whether the search input is disabled. */
   disabled?: boolean;
 
+  /**
+   * Visual variant of the search input.
+   * @default outline
+   */
+  variant?: 'outline' | 'text';
+
   /**
    * Icon before the input. Pass `null` to hide it.
    * @default <SearchIcon />