@dxos/react-ui 0.8.4-staging.ac66bdf99f → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.8.4-staging.ac66bdf99f",
+  "version": "0.9.0",
   "description": "Low-level React components for DXOS, applying a theme to a core group of primitives",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,10 +8,13 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "sideEffects": false,
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
@@ -24,16 +27,15 @@
       "browser": "./dist/lib/browser/testing/index.mjs",
       "node": "./dist/lib/node-esm/testing/index.mjs",
       "types": "./dist/types/src/testing/index.d.ts"
+    },
+    "./translations": {
+      "source": "./src/translations.ts",
+      "types": "./dist/types/src/translations.d.ts",
+      "browser": "./dist/lib/browser/translations.mjs",
+      "node": "./dist/lib/node-esm/translations.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "testing": [
-        "./dist/types/src/testing/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src"
@@ -42,6 +44,7 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
     "@effect-atom/atom-react": "^0.5.0",
     "@fluentui/react-tabster": "9.26.11",
+    "@internationalized/date": "^3.12.1",
     "@radix-ui/primitive": "1.1.1",
     "@radix-ui/react-alert-dialog": "1.1.6",
     "@radix-ui/react-avatar": "1.1.3",
@@ -78,20 +81,21 @@
     "error-stack-parser": "^2.1.4",
     "i18next": "^21.10.0",
     "keyborg": "^2.5.0",
+    "react-aria-components": "^1.17.0",
     "react-error-boundary": "^4.0.13",
     "react-i18next": "^11.18.6",
     "react-remove-scroll": "^2.6.0",
-    "@dxos/debug": "0.8.4-staging.ac66bdf99f",
-    "@dxos/lit-ui": "0.8.4-staging.ac66bdf99f",
-    "@dxos/async": "0.8.4-staging.ac66bdf99f",
-    "@dxos/invariant": "0.8.4-staging.ac66bdf99f",
-    "@dxos/log": "0.8.4-staging.ac66bdf99f",
-    "@dxos/react-error-boundary": "0.8.4-staging.ac66bdf99f",
-    "@dxos/react-hooks": "0.8.4-staging.ac66bdf99f",
-    "@dxos/react-input": "0.8.4-staging.ac66bdf99f",
-    "@dxos/react-list": "0.8.4-staging.ac66bdf99f",
-    "@dxos/util": "0.8.4-staging.ac66bdf99f",
-    "@dxos/ui-types": "0.8.4-staging.ac66bdf99f"
+    "@dxos/async": "0.9.0",
+    "@dxos/invariant": "0.9.0",
+    "@dxos/lit-ui": "0.9.0",
+    "@dxos/react-error-boundary": "0.9.0",
+    "@dxos/log": "0.9.0",
+    "@dxos/react-hooks": "0.9.0",
+    "@dxos/debug": "0.9.0",
+    "@dxos/react-input": "0.9.0",
+    "@dxos/ui-types": "0.9.0",
+    "@dxos/react-list": "0.9.0",
+    "@dxos/util": "0.9.0"
   },
   "devDependencies": {
     "@dnd-kit/core": "^6.0.5",
@@ -104,15 +108,15 @@
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
     "tabster": "^8.5.5",
-    "vite": "^7.1.11",
-    "@dxos/util": "0.8.4-staging.ac66bdf99f",
-    "@dxos/random": "0.8.4-staging.ac66bdf99f",
-    "@dxos/ui-theme": "0.8.4-staging.ac66bdf99f"
+    "vite": "^8.0.16",
+    "@dxos/random": "0.9.0",
+    "@dxos/ui-theme": "0.9.0",
+    "@dxos/util": "0.9.0"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-staging.ac66bdf99f"
+    "@dxos/ui-theme": "0.9.0"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Avatars/Avatar.theme.ts

@@ -0,0 +1,93 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx, getSize, getHeight } from '@dxos/ui-theme';
+import { type ComponentFunction, type Size, type Theme } from '@dxos/ui-types';
+
+export type AvatarStyleProps = Partial<{
+  size: Size;
+  srOnly: boolean;
+  status: 'active' | 'inactive' | 'current' | 'error' | 'warning' | 'internal';
+  animation: 'pulse' | 'none';
+  variant: 'circle' | 'square';
+  inGroup: boolean;
+}>;
+
+const root: ComponentFunction<AvatarStyleProps> = ({ size = 10, inGroup }, ...etc) =>
+  mx(
+    'relative inline-flex shrink-0',
+    getSize(size),
+    inGroup && (size === 'px' || size <= 3 ? '-mr-1' : '-mr-2'),
+    ...etc,
+  );
+
+const label: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) => mx(srOnly && 'sr-only', ...etc);
+
+const description: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) =>
+  mx('text-description', srOnly && 'sr-only', ...etc);
+
+const frame: ComponentFunction<AvatarStyleProps> = ({ variant }, ...etc) =>
+  mx('h-full w-full bg-(--surface-bg)', variant === 'circle' ? 'rounded-full' : 'rounded-sm', ...etc);
+
+const statusIcon: ComponentFunction<AvatarStyleProps> = ({ status, size = 3 }, ...etc) =>
+  mx(
+    'absolute bottom-0 end-0',
+    getSize(size),
+    status === 'inactive'
+      ? 'text-amber-400 dark:text-amber-300'
+      : status === 'active'
+        ? 'text-emerald-400 dark:text-emerald-300'
+        : 'text-neutral-400 dark:text-neutral-300',
+    ...etc,
+  );
+
+const ring: ComponentFunction<AvatarStyleProps> = ({ status, variant, animation }, ...etc) =>
+  mx(
+    'absolute inset-0 border-2',
+    variant === 'circle' ? 'rounded-full' : 'rounded-sm',
+    status === 'current'
+      ? 'border-primary-400 dark:border-primary-500'
+      : status === 'active'
+        ? 'border-emerald-400 dark:border-emerald-400'
+        : status === 'error'
+          ? 'border-rose-400 dark:border-rose-500'
+          : status === 'warning'
+            ? 'border-amber-400 dark:border-amber-500'
+            : status === 'inactive'
+              ? 'border-separator'
+              : status === 'internal'
+                ? 'border-fuchsia-600'
+                : 'border-[color:var(--surface-bg)]',
+    animation === 'pulse' ? 'animate-halo-pulse' : '',
+    ...etc,
+  );
+
+const fallbackText: ComponentFunction<AvatarStyleProps> = (_props, ...etc) => mx('fill-white', ...etc);
+
+const group: ComponentFunction<AvatarStyleProps> = (_props, ...etc) => mx('inline-flex items-center', ...etc);
+
+const groupLabel: ComponentFunction<AvatarStyleProps> = ({ size, srOnly }, ...etc) =>
+  mx(
+    srOnly
+      ? 'sr-only'
+      : 'rounded-full truncate text-sm leading-none py-1 px-2 relative z-[1] flex items-center justify-center',
+    size && getHeight(size),
+    ...etc,
+  );
+
+const groupDescription: ComponentFunction<AvatarStyleProps> = ({ srOnly }, ...etc) =>
+  mx(srOnly ? 'sr-only' : 'text-description', ...etc);
+
+export const avatarTheme: Theme<AvatarStyleProps> = {
+  root,
+  label,
+  description,
+  statusIcon,
+  frame,
+  ring,
+  fallbackText,
+  group,
+  groupLabel,
+  groupDescription,
+};

package/src/components/Breadcrumb/Breadcrumb.stories.tsx

@@ -15,7 +15,7 @@ const DefaultStory = (props: BreadcrumbRootProps) => {
       <Breadcrumb.List>
         <Breadcrumb.ListItem>
           <Breadcrumb.Link asChild>
-            <Button variant='ghost' classNames='px-0 text-base-surface-text font-normal'>
+            <Button variant='ghost' classNames='px-0 text-base-fg font-normal'>
               Grocery
             </Button>
           </Breadcrumb.Link>

package/src/components/Breadcrumb/Breadcrumb.theme.ts

@@ -0,0 +1,26 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+export type breadcrumbStyleProps = {};
+
+const root: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('shrink-0 flex items-center', ...etc);
+
+const list: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('contents', ...etc);
+
+const listItem: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('contents', ...etc);
+
+const current: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx(...etc);
+
+const separator: ComponentFunction<breadcrumbStyleProps> = (_props, ...etc) => mx('opacity-50', ...etc);
+
+export const breadcrumbTheme: Theme<breadcrumbStyleProps> = {
+  root,
+  list,
+  listItem,
+  current,
+  separator,
+};

package/src/components/Breadcrumb/Breadcrumb.tsx

@@ -24,6 +24,8 @@ const BreadcrumbRoot = forwardRef<HTMLDivElement, BreadcrumbRootProps>(
   },
 );
 
+BreadcrumbRoot.displayName = 'Breadcrumb.Root';
+
 type BreadcrumbListProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.ol>> & { asChild?: boolean };
 
 const BreadcrumbList = forwardRef<HTMLOListElement, BreadcrumbListProps>(
@@ -34,6 +36,8 @@ const BreadcrumbList = forwardRef<HTMLOListElement, BreadcrumbListProps>(
   },
 );
 
+BreadcrumbList.displayName = 'Breadcrumb.List';
+
 type BreadcrumbListItemProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.li>> & { asChild?: boolean };
 
 const BreadcrumbListItem = forwardRef<HTMLLIElement, BreadcrumbListItemProps>(
@@ -44,6 +48,8 @@ const BreadcrumbListItem = forwardRef<HTMLLIElement, BreadcrumbListItemProps>(
   },
 );
 
+BreadcrumbListItem.displayName = 'Breadcrumb.ListItem';
+
 type BreadcrumbLinkProps = LinkProps;
 
 const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(({ asChild, ...props }, forwardedRef) => {
@@ -51,6 +57,8 @@ const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(({ asC
   return <Comp {...props} ref={forwardedRef} />;
 });
 
+BreadcrumbLink.displayName = 'Breadcrumb.Link';
+
 type BreadcrumbCurrentProps = ThemedClassName<ComponentPropsWithRef<'h1'>> & { asChild?: boolean };
 
 const BreadcrumbCurrent = forwardRef<HTMLHeadingElement, BreadcrumbCurrentProps>(
@@ -63,9 +71,11 @@ const BreadcrumbCurrent = forwardRef<HTMLHeadingElement, BreadcrumbCurrentProps>
   },
 );
 
+BreadcrumbCurrent.displayName = 'Breadcrumb.Current';
+
 type BreadcrumbSeparatorProps = ThemedClassName<ComponentPropsWithoutRef<typeof Primitive.span>>;
 
-const BreadcrumbSeparator = ({ children, classNames, ...props }: BreadcrumbSeparatorProps) => {
+function BreadcrumbSeparator({ children, classNames, ...props }: BreadcrumbSeparatorProps) {
   const { tx } = useThemeContext();
   return (
     <Primitive.span
@@ -77,7 +87,9 @@ const BreadcrumbSeparator = ({ children, classNames, ...props }: BreadcrumbSepar
       {children ?? <Icon icon='ph--dot--bold' />}
     </Primitive.span>
   );
-};
+}
+
+BreadcrumbSeparator.displayName = 'Breadcrumb.Separator';
 
 export const Breadcrumb = {
   Root: BreadcrumbRoot,

package/src/components/Button/Button.theme.ts

@@ -0,0 +1,31 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import type { ComponentFunction, Density, Elevation, Theme } from '@dxos/ui-types';
+
+export type ButtonStyleProps = Partial<{
+  inGroup?: boolean;
+  textWrap?: boolean;
+  density: Density;
+  elevation: Elevation;
+  disabled: boolean;
+  variant: 'default' | 'primary' | 'ghost' | 'outline';
+}>;
+
+const root: ComponentFunction<ButtonStyleProps> = (_props, ...etc) => {
+  return mx('dx-button dx-focus-ring group gap-1 [&_span]:truncate', ...etc);
+};
+
+const group: ComponentFunction<{ elevation?: Elevation }> = (_props, ...etc) => {
+  return mx(
+    'inline-flex rounded-xs [&>:first-child]:rounded-w-sm [&>:last-child]:rounded-ie-sm [&>button]:relative',
+    ...etc,
+  );
+};
+
+export const buttonTheme: Theme<ButtonStyleProps> = {
+  root,
+  group,
+};

package/src/components/Button/Button.tsx

@@ -13,7 +13,7 @@ import { useDensityContext, useElevationContext, useThemeContext } from '../../h
 import { type ThemedClassName } from '../../util';
 
 type ButtonProps = ThemedClassName<ComponentPropsWithRef<typeof Primitive.button>> & {
-  variant?: 'default' | 'primary' | 'outline' | 'ghost' | 'destructive';
+  variant?: 'default' | 'primary' | 'outline' | 'ghost' | 'destructive' | 'valence';
   density?: Density;
   elevation?: Elevation;
   asChild?: boolean;
@@ -79,7 +79,7 @@ const ButtonGroup = forwardRef<HTMLDivElement, ButtonGroupProps>(
     const elevation = useElevationContext(propsElevation);
     const Comp = asChild ? Slot : Primitive.div;
     return (
-      <Comp role='none' {...props} className={tx('button.group', { elevation }, classNames)} ref={forwardedRef}>
+      <Comp {...props} className={tx('button.group', { elevation }, classNames)} ref={forwardedRef}>
         <ButtonGroupProvider inGroup>{children}</ButtonGroupProvider>
       </Comp>
     );

package/src/components/Button/IconButton.stories.tsx

@@ -5,6 +5,8 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
+import { type Density } from '@dxos/ui-types';
+
 import { withTheme } from '../../testing';
 import { Tooltip } from '../Tooltip';
 import { Button } from './Button';
@@ -13,7 +15,7 @@ import { IconButton, type IconButtonProps } from './IconButton';
 const DefaultStory = (props: IconButtonProps) => {
   return (
     <Tooltip.Provider>
-      <div role='none' className='flex gap-4'>
+      <div className='flex gap-4'>
         <IconButton {...props} />
         <IconButton iconOnly {...props} />
         <Button>{props.label}</Button>
@@ -22,6 +24,42 @@ const DefaultStory = (props: IconButtonProps) => {
   );
 };
 
+const densities: Density[] = ['lg', 'md', 'sm', 'xs'];
+const densityIconSize: Record<Density, IconButtonProps['size']> = {
+  lg: 5,
+  md: 4,
+  sm: 4,
+  xs: 4,
+};
+
+const DensitiesStory = (props: Omit<IconButtonProps, 'density' | 'size'>) => {
+  return (
+    <Tooltip.Provider>
+      <div className='grid grid-cols-[auto_1fr_1fr_1fr] gap-4 items-center'>
+        <div />
+        <div className='text-xs text-subdued uppercase'>iconOnly</div>
+        <div className='text-xs text-subdued uppercase'>label + icon</div>
+        <div className='text-xs text-subdued uppercase'>Button (reference)</div>
+        {densities.map((density) => (
+          <React.Fragment key={density}>
+            <div className='text-xs font-mono'>density={density}</div>
+            <IconButton
+              square
+              classNames='w-fit'
+              density={density}
+              size={densityIconSize[density]}
+              iconOnly
+              {...props}
+            />
+            <IconButton classNames='w-fit' density={density} size={densityIconSize[density]} {...props} />
+            <Button density={density}>{props.label}</Button>
+          </React.Fragment>
+        ))}
+      </div>
+    </Tooltip.Provider>
+  );
+};
+
 const meta = {
   title: 'ui/react-ui-core/components/IconButton',
   component: IconButton,
@@ -37,8 +75,18 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  render: DensitiesStory as any,
+  args: {
+    label: 'Close',
+    icon: 'ph--x--regular',
+  },
+};
+
+export const Ghost: Story = {
+  render: DensitiesStory as any,
   args: {
-    label: 'Bold',
-    icon: 'ph--text-b--regular',
+    label: 'Close',
+    icon: 'ph--x--regular',
+    variant: 'ghost',
   },
 };

package/src/components/Button/IconButton.theme.ts

@@ -0,0 +1,21 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import type { ComponentFunction, Theme } from '@dxos/ui-types';
+
+import { type ButtonStyleProps } from './Button.theme';
+
+export type IconButtonStyleProps = ButtonStyleProps & {
+  iconOnly?: boolean;
+  square?: boolean;
+};
+
+const root: ComponentFunction<IconButtonStyleProps> = ({ iconOnly, square }, ...etc) => {
+  return mx('px-1.5', !iconOnly && 'gap-1.5', square && 'aspect-square', ...etc);
+};
+
+export const iconButtonTheme: Theme<IconButtonStyleProps> = {
+  root,
+};

package/src/components/Button/IconButton.tsx

@@ -16,6 +16,7 @@ type IconButtonProps = Omit<ButtonProps, 'children'> &
     noTooltip?: boolean;
     caretDown?: boolean;
     iconOnly?: boolean;
+    square?: boolean; // TODO(burdon): Handle more uniformly.
     iconEnd?: boolean;
     iconClassNames?: ThemedClassName<any>['classNames'];
     tooltipSide?: TooltipSide;
@@ -45,12 +46,12 @@ const IconOnlyButton = forwardRef<HTMLButtonElement, IconButtonProps>(
 
 const LabelledIconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
   (
-    { size, icon, iconOnly, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props },
+    { size, icon, iconOnly, square, iconEnd, iconClassNames, label, caretDown, noTooltip: _, classNames, ...props },
     forwardedRef,
   ) => {
     const { tx } = useThemeContext();
     return (
-      <Button {...props} classNames={tx('iconButton.root', { iconOnly }, classNames)} ref={forwardedRef}>
+      <Button {...props} classNames={tx('iconButton.root', { iconOnly, square }, classNames)} ref={forwardedRef}>
         {icon && !iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}
         <span className={iconOnly ? 'sr-only' : undefined}>{label}</span>
         {icon && iconEnd && <Icon icon={icon} size={size} classNames={iconClassNames} />}

package/src/components/Calendar/Calendar.stories.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { withLayout, withTheme } from '../../testing';
+import { Calendar, type DateRange } from './Calendar';
+
+const meta: Meta<typeof Calendar.Root> = {
+  title: 'ui/react-ui-core/components/Calendar',
+  component: Calendar.Root,
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'flex flex-row p-4 justify-center' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Calendar.Root>;
+
+export const Single: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>(new Date());
+    return <Calendar.Root mode='single' selected={date} onSelect={setDate} />;
+  },
+};
+
+export const Range: Story = {
+  render: () => {
+    const [range, setRange] = useState<DateRange | undefined>();
+    return <Calendar.Root mode='range' selected={range} onSelect={setRange} />;
+  },
+};
+
+export const WithMinDate: Story = {
+  render: () => {
+    const [date, setDate] = useState<Date | undefined>();
+    return <Calendar.Root mode='single' selected={date} onSelect={setDate} minValue={new Date()} />;
+  },
+};

package/src/components/Calendar/Calendar.theme.ts

@@ -0,0 +1,74 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { mx } from '@dxos/ui-theme';
+import { type ComponentFunction, type Theme } from '@dxos/ui-types';
+
+export type CalendarStyleProps = Partial<{}>;
+
+//
+// Theme slots target react-aria-components elements. RAC attaches `data-*` attributes to its
+// rendered nodes (`data-selected`, `data-focused`, `data-disabled`, `data-outside-month`,
+// `data-selection-start`, `data-selection-end`, `data-hovered`, etc.) which we hook into via
+// Tailwind's `data-[…]:` modifiers.
+//
+
+const root: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx('relative w-fit h-fit self-start p-2 select-none bg-group-surface text-base-fg', ...etc);
+
+const nav: ComponentFunction<CalendarStyleProps> = (_p, ...etc) => mx('flex items-center justify-between pb-1', ...etc);
+
+const caption_label: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx('flex-1 text-center text-sm font-medium', ...etc);
+
+const button_previous: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx(
+    'h-7 w-7 inline-flex items-center justify-center rounded-sm shrink-0',
+    'text-description hover:bg-hover-surface',
+    'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+    ...etc,
+  );
+
+const button_next: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx(
+    'h-7 w-7 inline-flex items-center justify-center rounded-sm shrink-0',
+    'text-description hover:bg-hover-surface',
+    'data-[disabled]:opacity-50 data-[disabled]:cursor-not-allowed',
+    ...etc,
+  );
+
+const month_grid: ComponentFunction<CalendarStyleProps> = (_p, ...etc) => mx('w-full border-collapse', ...etc);
+
+const weekdays: ComponentFunction<CalendarStyleProps> = (_p, ...etc) => mx('', ...etc);
+
+const weekday: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx('w-9 h-7 text-xs font-thin text-description', ...etc);
+
+const day: ComponentFunction<CalendarStyleProps> = (_p, ...etc) =>
+  mx(
+    'relative w-9 h-9 p-0 text-center text-sm rounded-sm inline-flex items-center justify-center cursor-pointer',
+    'outline-none',
+    'data-[hovered]:bg-hover-surface',
+    'data-[focus-visible]:outline-2 data-[focus-visible]:outline-primary-500',
+    'data-[selected]:bg-primary-500 data-[selected]:text-primary-fg data-[selected]:hover:bg-primary-500',
+    'data-[outside-month]:text-description/40',
+    'data-[disabled]:text-description/40 data-[disabled]:cursor-not-allowed data-[disabled]:hover:bg-transparent',
+    'data-[unavailable]:line-through data-[unavailable]:text-description/50 data-[unavailable]:cursor-not-allowed',
+    // Range selection visual layer.
+    'data-[selection-start]:rounded-l-sm data-[selection-end]:rounded-r-sm',
+    'data-[selection-start]:bg-primary-500 data-[selection-end]:bg-primary-500',
+    ...etc,
+  );
+
+export const calendarTheme: Theme<CalendarStyleProps> = {
+  root,
+  nav,
+  caption_label,
+  button_previous,
+  button_next,
+  month_grid,
+  weekdays,
+  weekday,
+  day,
+};