feat: add datetime design system components

packages/design-system/.ladle/components.css.ts

@@ -12,6 +12,8 @@ import {
   Checkbox,
   Chip,
   ComboBox,
+  DateField,
+  DateInput,
   Dialog,
   Drawer,
   Group,
@@ -30,6 +32,7 @@ import {
   Tabs,
   TextArea,
   TextField,
+  TimeField,
   Tooltip,
   Tree,
 } from './theme';
@@ -62,6 +65,8 @@ export const theme: ThemeContext = {
   Checkbox,
   Chip,
   ComboBox,
+  DateField,
+  DateInput,
   Dialog,
   Drawer,
   Group,
@@ -80,6 +85,7 @@ export const theme: ThemeContext = {
   Tabs,
   TextArea,
   TextField,
+  TimeField,
   Tooltip,
   Tree,
 };

packages/design-system/.ladle/theme/date-field.css.ts

@@ -0,0 +1,64 @@
+import { style } from '@vanilla-extract/css';
+import {
+  type ThemeContext,
+  applyThemeVars,
+  assignPartialVars,
+  dateFieldColorVars,
+  dateFieldSpaceVars,
+  dateFieldStateVars,
+  genericColorVars,
+  semanticColorVars,
+  sizeVars,
+} from '../../src';
+import type { DateFieldState } from '../../src/components/date-field/types';
+
+export const DateField: ThemeContext['DateField'] = {
+  input: style(
+    applyThemeVars<DateFieldState>(dateFieldStateVars, [
+      {
+        vars: assignPartialVars(dateFieldSpaceVars, {
+          gap: sizeVars.v03,
+        }),
+      },
+    ]),
+  ),
+  group: style(
+    applyThemeVars<DateFieldState>(dateFieldStateVars, [
+      {
+        vars: assignPartialVars(dateFieldColorVars, {
+          border: semanticColorVars.border.interactive.default,
+        }),
+      },
+    ]),
+  ),
+  description: style(
+    applyThemeVars<DateFieldState>(dateFieldStateVars, [
+      {
+        vars: assignPartialVars(dateFieldColorVars, {
+          description: {
+            color: genericColorVars.neutral.v03,
+          },
+        }),
+      },
+      {
+        query: { isDisabled: true },
+        vars: assignPartialVars(dateFieldColorVars, {
+          description: {
+            color: semanticColorVars.foreground.interactive.disabled,
+          },
+        }),
+      },
+    ]),
+  ),
+  error: style(
+    applyThemeVars<DateFieldState>(dateFieldStateVars, [
+      {
+        vars: assignPartialVars(dateFieldColorVars, {
+          error: {
+            color: semanticColorVars.border.serious,
+          },
+        }),
+      },
+    ]),
+  ),
+};

packages/design-system/.ladle/theme/date-input.css.ts

@@ -0,0 +1,75 @@
+import { style } from '@vanilla-extract/css';
+import {
+  type DateInputState,
+  type ThemeContext,
+  applyThemeVars,
+  assignPartialVars,
+  dateInputColorVars,
+  dateInputSpaceVars,
+  dateInputStateVars,
+  semanticColorVars,
+  sizeVars,
+} from '../../src';
+
+export const DateInput: ThemeContext['DateInput'] = {
+  input: {
+    input: style(
+      applyThemeVars<DateInputState>(dateInputStateVars, [
+        {
+          vars: assignPartialVars(
+            { color: dateInputColorVars, space: dateInputSpaceVars },
+            {
+              color: {
+                border: semanticColorVars.border.interactive.default,
+              },
+              space: {
+                input: {
+                  gap: sizeVars.v03,
+                  y: sizeVars.v04,
+                  x: sizeVars.v04,
+                },
+              },
+            },
+          ),
+        },
+        {
+          query: { size: 'sm' },
+          vars: assignPartialVars(dateInputSpaceVars, {
+            input: {
+              maxWidth: '200px',
+              x: sizeVars.v03,
+              y: sizeVars.v02,
+            },
+          }),
+        },
+        {
+          query: { size: 'lg' },
+          vars: assignPartialVars(dateInputSpaceVars, {
+            input: {
+              maxWidth: '400px',
+              x: sizeVars.v04,
+              y: sizeVars.v03,
+            },
+          }),
+        },
+        {
+          query: { isHovered: true },
+          vars: assignPartialVars(dateInputColorVars, {
+            border: semanticColorVars.border.interactive.hover,
+          }),
+        },
+      ]),
+    ),
+    segments: style(
+      applyThemeVars<DateInputState>(dateInputStateVars, [
+        {
+          vars: assignPartialVars(dateInputSpaceVars, {
+            segments: {
+              gap: sizeVars.v03,
+            },
+          }),
+        },
+      ]),
+    ),
+  },
+};

packages/design-system/.ladle/theme/index.ts

@@ -2,6 +2,8 @@ export { Button } from './button.css';
 export { Checkbox } from './checkbox.css';
 export { Chip } from './chip.css';
 export { ComboBox } from './combo-box.css';
+export { DateField } from './date-field.css';
+export { DateInput } from './date-input.css';
 export { Dialog } from './dialog.css';
 export { Drawer } from './drawer.css';
 export { Group } from './group.css';
@@ -20,5 +22,6 @@ export { Switch } from './switch.css';
 export { Tabs } from './tabs.css';
 export { TextArea } from './textarea.css';
 export { TextField } from './text-field.css';
+export { TimeField } from './time-field.css';
 export { Tooltip } from './tooltip.css';
 export { Tree } from './tree.css';

packages/design-system/.ladle/theme/time-field.css.ts

@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+import {
+  type ThemeContext,
+  type TimeFieldState,
+  applyThemeVars,
+  assignPartialVars,
+  sizeVars,
+  timeFieldSpaceVars,
+  timeFieldStateVars,
+} from '../../src';
+
+export const TimeField: ThemeContext['TimeField'] = {
+  input: style(
+    applyThemeVars<TimeFieldState>(timeFieldStateVars, [
+      {
+        vars: assignPartialVars(timeFieldSpaceVars, {
+          gap: sizeVars.v03,
+        }),
+      },
+    ]),
+  ),
+};

packages/design-system/package.json

@@ -63,6 +63,7 @@
   },
   "dependencies": {
     "@accelint/converters": "workspace:*",
+    "@internationalized/date": "^3.5.6",
     "@react-aria/collections": "3.0.0-alpha.5",
     "@react-aria/ssr": "^3.9.6",
     "@react-aria/utils": "^3.25.3",

packages/design-system/src/components/aria/aria.tsx

@@ -1,24 +1,25 @@
 import {
-  createContext,
-  forwardRef,
   type ForwardedRef,
-  type RefAttributes,
   type ReactNode,
+  type RefAttributes,
+  createContext,
+  forwardRef,
 } from 'react';
 import {
+  type ContextValue,
+  DateInput,
   FieldError,
   Group,
   Header,
   Heading,
   Keyboard,
   Label,
   Section,
+  type SectionProps,
   SelectValue,
+  type SelectValueProps,
   Separator,
   Text,
-  type ContextValue,
-  type SectionProps,
-  type SelectValueProps,
 } from 'react-aria-components';
 import { useContextProps } from '../../hooks';
 
@@ -44,6 +45,9 @@ function wrap<P extends object, E extends HTMLElement>(
   };
 }
 
+export const { Component: AriaDateInput, Context: AriaDateInputContext } =
+  wrap(DateInput);
+
 export const { Component: AriaFieldError, Context: AriaFieldErrorContext } =
   wrap(FieldError);
 

packages/design-system/src/components/aria/index.ts

@@ -1,5 +1,7 @@
 // __private-exports
 export {
+  AriaDateInput,
+  AriaDateInputContext,
   AriaFieldError,
   AriaFieldErrorContext,
   AriaGroup,

packages/design-system/src/components/checkbox/checkbox.tsx

@@ -1,17 +1,17 @@
 import {
+  type ForwardedRef,
   createContext,
   forwardRef,
   useCallback,
   useMemo,
-  type ForwardedRef,
 } from 'react';
 import {
+  type ContextValue,
+  type LabelProps,
   Provider,
   Checkbox as RACCheckbox,
   CheckboxGroup as RACCheckboxGroup,
   TextContext,
-  type ContextValue,
-  type LabelProps,
   type TextProps,
 } from 'react-aria-components';
 import {
@@ -62,7 +62,7 @@ export const Checkbox = forwardRef(function Checkbox(
   );
 
   const style = useCallback(
-    ({ ...renderProps }: CheckboxRenderProps) =>
+    (renderProps: CheckboxRenderProps) =>
       inlineVars(checkboxStateVars, {
         ...renderProps,
         alignInput,

packages/design-system/src/components/date-field/date-field.css.ts

@@ -0,0 +1,73 @@
+import {
+  createContainer,
+  createThemeContract,
+  style,
+} from '@vanilla-extract/css';
+import { label, layers } from '../../styles';
+import type { DateFieldClassNames } from './types';
+
+export const dateFieldContainer = createContainer();
+
+export const dateFieldSpaceVars = createThemeContract({
+  x: '',
+  y: '',
+  gap: '',
+  minWidth: '',
+  width: '',
+  maxWidth: '',
+});
+
+export const dateFieldColorVars = createThemeContract({
+  border: '',
+  description: {
+    color: '',
+  },
+  error: {
+    color: '',
+  },
+});
+
+export const dateFieldStateVars = createThemeContract({
+  size: '',
+  isDisabled: '',
+  isFocused: '',
+  isHovered: '',
+  isInvalid: '',
+  isReadOnly: '',
+  isRequired: '',
+});
+
+export const dateFieldClassNames: DateFieldClassNames = {
+  container: style({
+    '@layer': {
+      [layers.components.l1]: {
+        containerName: dateFieldContainer,
+      },
+    },
+  }),
+  dateField: style({
+    '@layer': {
+      [layers.components.l1]: {
+        width: 'fit-content',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-start',
+      },
+    },
+  }),
+  label: style([label]),
+  description: style({
+    '@layer': {
+      [layers.components.l1]: {
+        color: dateFieldColorVars.description.color,
+      },
+    },
+  }),
+  error: style({
+    '@layer': {
+      [layers.components.l1]: {
+        color: dateFieldColorVars.error.color,
+      },
+    },
+  }),
+};