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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-calendar",
-  "version": "0.8.4-main.fcfe5033a5",
+  "version": "0.8.4-staging.60fe92afc8",
   "description": "A calendar component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,21 +8,27 @@
     "type": "git",
     "url": "https://github.com/dxos/dxos"
   },
-  "license": "MIT",
+  "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"
@@ -33,31 +39,31 @@
     "react-resize-detector": "^11.0.1",
     "react-virtualized": "^9.22.6",
     "react-window": "^2.2.3",
-    "@dxos/debug": "0.8.4-main.fcfe5033a5",
-    "@dxos/async": "0.8.4-main.fcfe5033a5",
-    "@dxos/invariant": "0.8.4-main.fcfe5033a5",
-    "@dxos/log": "0.8.4-main.fcfe5033a5",
-    "@dxos/util": "0.8.4-main.fcfe5033a5"
+    "@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.7",
     "@types/react-dom": "~19.2.3",
     "@types/react-virtualized": "^9.22.3",
-    "effect": "3.20.0",
+    "effect": "3.21.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/random": "0.8.4-main.fcfe5033a5",
-    "@dxos/react-ui": "0.8.4-main.fcfe5033a5",
-    "@dxos/storybook-utils": "0.8.4-main.fcfe5033a5",
-    "@dxos/ui-theme": "0.8.4-main.fcfe5033a5"
+    "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.20.0",
+    "effect": "3.21.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.fcfe5033a5",
-    "@dxos/ui-theme": "0.8.4-main.fcfe5033a5"
+    "@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,13 +3,15 @@
 //
 
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import React from 'react';
+import { format } from 'date-fns';
+import React, { useState } from 'react';
 
 import { Panel } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
-import { translations } from '../../translations';
-import { Calendar } from './Calendar';
+import { translations } from '#translations';
+
+import { Calendar, type Range as DateRange } from './Calendar';
 
 const meta = {
   title: 'ui/react-ui-calendar/Calendar',
@@ -33,6 +35,24 @@ export const Default: Story = {
   ),
 };
 
+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: () => (