@dxos/react-ui-calendar 0.8.4-main.fffef41 → 0.8.4-staging.60fe92afc8

package/package.json

@@ -1,62 +1,69 @@
 {
   "name": "@dxos/react-ui-calendar",
-  "version": "0.8.4-main.fffef41",
+  "version": "0.8.4-staging.60fe92afc8",
   "description": "A calendar component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
-  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
+  "license": "FSL-1.1-Apache-2.0",
   "author": "DXOS.org",
   "type": "module",
+  "imports": {
+    "#translations": "./src/translations.ts"
+  },
   "exports": {
     ".": {
       "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
+    },
+    "./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": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
   ],
   "dependencies": {
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.12.1",
     "@radix-ui/react-context": "1.1.1",
-    "date-fns": "^3.3.1",
+    "date-fns": "^3.6.0",
     "react-resize-detector": "^11.0.1",
     "react-virtualized": "^9.22.6",
     "react-window": "^2.2.3",
-    "@dxos/async": "0.8.4-main.fffef41",
-    "@dxos/debug": "0.8.4-main.fffef41",
-    "@dxos/invariant": "0.8.4-main.fffef41",
-    "@dxos/util": "0.8.4-main.fffef41",
-    "@dxos/log": "0.8.4-main.fffef41"
+    "@dxos/async": "0.8.4-staging.60fe92afc8",
+    "@dxos/debug": "0.8.4-staging.60fe92afc8",
+    "@dxos/invariant": "0.8.4-staging.60fe92afc8",
+    "@dxos/log": "0.8.4-staging.60fe92afc8",
+    "@dxos/util": "0.8.4-staging.60fe92afc8"
   },
   "devDependencies": {
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.2",
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
     "@types/react-virtualized": "^9.22.3",
-    "@types/react-window": "^2.0.0",
-    "effect": "3.18.3",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.fffef41",
-    "@dxos/react-ui": "0.8.4-main.fffef41",
-    "@dxos/react-ui-theme": "0.8.4-main.fffef41",
-    "@dxos/storybook-utils": "0.8.4-main.fffef41"
+    "effect": "3.21.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^8.0.16",
+    "@dxos/react-ui": "0.8.4-staging.60fe92afc8",
+    "@dxos/random": "0.8.4-staging.60fe92afc8",
+    "@dxos/ui-theme": "0.8.4-staging.60fe92afc8",
+    "@dxos/storybook-utils": "0.8.4-staging.60fe92afc8"
   },
   "peerDependencies": {
-    "effect": "3.13.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui-theme": "0.8.4-main.fffef41",
-    "@dxos/react-ui": "0.8.4-main.fffef41"
+    "effect": "3.21.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/ui-theme": "0.8.4-staging.60fe92afc8",
+    "@dxos/react-ui": "0.8.4-staging.60fe92afc8"
   },
   "publishConfig": {
     "access": "public"

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

@@ -3,20 +3,20 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
+import { format } from 'date-fns';
+import React, { useState } from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { Panel } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
+import { translations } from '#translations';
 
-import { Calendar } from './Calendar';
+import { Calendar, type Range as DateRange } from './Calendar';
 
 const meta = {
   title: 'ui/react-ui-calendar/Calendar',
   component: Calendar.Grid,
-  decorators: [withTheme],
   parameters: {
-    layout: 'centered',
     translations,
   },
 } satisfies Meta<typeof Calendar.Grid>;
@@ -26,51 +26,45 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
+  decorators: [withTheme(), withLayout({ layout: 'centered' })],
   render: () => (
     <Calendar.Root>
-      <Calendar.Viewport>
-        <Calendar.Toolbar />
-        <Calendar.Grid rows={6} />
-      </Calendar.Viewport>
+      <Calendar.Toolbar />
+      <Calendar.Grid rows={6} />
     </Calendar.Root>
   ),
 };
 
-export const Border: Story = {
-  render: () => (
-    <Calendar.Root>
-      <Calendar.Viewport classNames='bg-modalSurface border border-separator rounded'>
-        <Calendar.Toolbar />
-        <Calendar.Grid rows={6} />
-      </Calendar.Viewport>
-    </Calendar.Root>
-  ),
+export const Range: Story = {
+  decorators: [withTheme(), withLayout({ layout: 'centered' })],
+  render: () => {
+    const [range, setRange] = useState<DateRange | undefined>();
+    return (
+      <div className='flex flex-col gap-2'>
+        <Calendar.Root>
+          <Calendar.Toolbar />
+          <Calendar.Grid rows={6} onSelectRange={({ range }) => setRange(range)} />
+        </Calendar.Root>
+        <div className='text-sm text-description text-center'>
+          {range ? `${format(range.from, 'PP')} → ${format(range.to, 'PP')}` : 'Drag across days to select a range.'}
+        </div>
+      </div>
+    );
+  },
 };
 
 export const Column: Story = {
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'w-auto' })],
   render: () => (
-    <div className='absolute inset-0 flex bs-full justify-center'>
-      <Calendar.Root>
-        <Calendar.Viewport>
+    <Calendar.Root>
+      <Panel.Root>
+        <Panel.Toolbar asChild>
           <Calendar.Toolbar />
+        </Panel.Toolbar>
+        <Panel.Content asChild>
           <Calendar.Grid />
-        </Calendar.Viewport>
-      </Calendar.Root>
-    </div>
-  ),
-};
-
-export const Mobile: Story = {
-  render: () => (
-    <div className='absolute inset-0 flex bs-full justify-center'>
-      <div className='flex bs-full is-[400px] justify-center'>
-        <Calendar.Root>
-          <Calendar.Viewport classNames='is-full'>
-            <Calendar.Toolbar />
-            <Calendar.Grid />
-          </Calendar.Viewport>
-        </Calendar.Root>
-      </div>
-    </div>
+        </Panel.Content>
+      </Panel.Root>
+    </Calendar.Root>
   ),
 };