@x12i/ui 1.0.0 → 1.1.0

package/README.md

@@ -2,13 +2,24 @@
 
 React components for the Unified UI Kit, styled by kit tokens only.
 
-This is the starter set. The full catalog (about 100 components) is on the
-roadmap in the product spec.
+Behavior (focus, keyboard, ARIA, positioning) comes from
+[Base UI](https://base-ui.com) (`@base-ui/react`, MIT). The kit adds the tokens,
+the visual design and a consistent API on top. Dates and times use
+[React Aria Components](https://react-spectrum.adobe.com/react-aria/) (Apache-2.0),
+and they load only from the separate `@x12i/ui/date` entry, so an app that does
+not use them does not pay for them.
+
+This is a working foundation, not the whole catalog from the product spec.
 
 | Family | Components |
 | --- | --- |
-| Actions | `Button`, `IconButton` |
-| Feedback and status | `Badge`, `Spinner` |
+| Actions | `Button`, `IconButton`, `ButtonGroup`, `SplitButton`, `Toggle`, `ToggleGroup`, `Link`, `Kbd`, `CopyButton` |
+| Form controls | `Field`, `Fieldset`, `Input`, `InputGroup`, `PasswordInput`, `Textarea`, `NumberInput`, `Checkbox`, `CheckboxGroup`, `Radio`, `RadioGroup`, `Switch`, `Slider`, `Select`, `Combobox`, `MultiCombobox`, `OTPInput` |
+| Date and time (`@x12i/ui/date`) | `DateField`, `TimeField`, `DatePicker`, `DateRangePicker`, `Calendar`, `RangeCalendar`, `LocaleProvider` |
+| Feedback and status | `Alert`, `Callout`, `Badge`, `Progress`, `ProgressCircle`, `Meter`, `Skeleton`, `EmptyState`, `Spinner`, `ToastProvider` and `useToast` |
+| Data display | `Card`, `Avatar`, `AvatarGroup`, `Tag`, `Stat`, `AnimatedNumber`, `Table`, `ScrollArea`, `Collapsible` |
+| Navigation | `Tabs`, `Breadcrumb`, `Pagination`, `Accordion`, `SegmentedControl`, `Stepper`, `Toolbar` |
+| Overlays | `Dialog`, `AlertDialog`, `Drawer`, `Popover`, `Tooltip`, `Menu`, `ContextMenu` |
 | Layout | `Stack`, `Inline`, `Divider` |
 | Utilities | `VisuallyHidden`, `ThemeProvider`, `DensityProvider` |
 
@@ -40,6 +51,48 @@ export function App() {
 }
 ```
 
+## A small form
+
+```tsx
+import { Button, Field, Input, ToastProvider, useToast } from "@x12i/ui";
+
+function Rename() {
+  const toast = useToast();
+  return (
+    <>
+      <Field label="Project name" description="Everyone on the team sees it.">
+        <Input defaultValue="Apollo" />
+      </Field>
+      <Button onClick={() => toast.show({ tone: "success", title: "Renamed" })}>Save</Button>
+    </>
+  );
+}
+
+export const App = () => (
+  <ToastProvider closeLabel="Dismiss notification" regionLabel="Notifications">
+    <Rename />
+  </ToastProvider>
+);
+```
+
+Every label, hint and error is a prop you pass, so translating the app never
+means patching the kit.
+
+## Dates and times
+
+```tsx
+import { DatePicker, LocaleProvider, parseDate } from "@x12i/ui/date";
+
+<LocaleProvider locale="de-DE">
+  <DatePicker label="Anreise" defaultValue={parseDate("2026-12-01")} />
+</LocaleProvider>;
+```
+
+The order of day, month and year, the month and weekday names, the numerals and
+the first day of the week follow the locale. The entry re-exports the date value
+helpers (`parseDate`, `today`, `CalendarDate`, ...), so you do not install
+`@internationalized/date` yourself.
+
 ## Conventions
 
 - **Tokens only.** A lint rule and a test ban hard-coded colors, spacing and font
@@ -47,16 +100,22 @@ export function App() {
 - **Zero specificity.** Every selector in `styles.css` sits inside `:where()`, so
   your own classes always win.
 - **Styling hooks are data attributes**: `data-variant`, `data-tone`, `data-size`,
-  `data-loading`, `data-disabled`. Internal class names are not a public API.
+  `data-loading`, `data-disabled`, plus the state attributes of the behavior layer
+  (`data-open`, `data-checked`, `data-selected`, ...). Internal class names are not
+  a public API.
 - **No user-facing strings.** Anything announced to assistive technology, such as
-  `Spinner`'s `label` or `IconButton`'s `label`, is passed in by the app.
-- **`asChild`** renders your element with the component's behavior and styling:
+  `Spinner`'s `label`, `IconButton`'s `label`, a dialog's `closeLabel` or a
+  pagination's `getPageLabel`, is passed in by the app. TypeScript requires the
+  ones a screen reader would otherwise miss.
+- **`render` and `asChild`** put your element in place of the default one while
+  keeping the component's behavior and styling:
+  `<DialogTrigger render={<Button />}>Open</DialogTrigger>`,
   `<Button asChild><a href="/docs">Docs</a></Button>`.
 - **Density** follows `data-density`, so the same components fit compact tables
   and comfortable forms.
 - **Logical CSS properties** keep right-to-left layouts working without a second
-  stylesheet.
-- **Server rendering.** The bundle is marked `"use client"`. Providers read
+  stylesheet. Drawers, submenus, tab indicators and the calendar mirror by themselves.
+- **Server rendering.** The bundles are marked `"use client"`. Providers read
   storage after mount, so server and client first renders agree.
 
 ## Theme and density
@@ -74,6 +133,11 @@ page. An explicit theme on a subtree paints its own surface.
 Pair a `root` provider with `getNoFlashScript()` from `@x12i/themes` to avoid a
 flash of the wrong theme on first paint.
 
+## Try it
+
+`apps/playground` in this repository shows every component in every theme and
+density, in left-to-right and right-to-left. Run `pnpm --filter @x12i/playground dev`.
+
 ## Status
 
 `@x12i/ui` ships as an npm build today. Registry distribution (installing

package/dist/date.d.ts

@@ -0,0 +1,69 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { DateValue, CalendarProps as CalendarProps$1, RangeCalendarProps as RangeCalendarProps$1, DateFieldProps as DateFieldProps$1, ValidationResult, TimeValue, TimeFieldProps as TimeFieldProps$1, DatePickerProps as DatePickerProps$1, DateRangePickerProps as DateRangePickerProps$1 } from 'react-aria-components';
+export { DateRange, DateValue, I18nProvider as LocaleProvider, TimeValue, ValidationResult } from 'react-aria-components';
+import { ControlSize } from './index.js';
+export { CalendarDate, CalendarDateTime, DateDuration, Time, ZonedDateTime, getLocalTimeZone, now, parseDate, parseDateTime, parseTime, parseZonedDateTime, today } from '@internationalized/date';
+
+type OwnProps$2 = "children" | "className" | "style" | "aria-label";
+interface CalendarProps<T extends DateValue> extends Omit<CalendarProps$1<T>, OwnProps$2> {
+    /** Name of the calendar, for example "Appointment date". Pass a translated string. */
+    "aria-label": string;
+}
+interface RangeCalendarProps<T extends DateValue> extends Omit<RangeCalendarProps$1<T>, OwnProps$2> {
+    /** Name of the calendar, for example "Trip dates". Pass a translated string. */
+    "aria-label": string;
+}
+/**
+ * A month grid for picking one date. Arrow keys move by day and week, Page
+ * Up/Down by month, Home/End to the start and end of the week. Dates are
+ * `@internationalized/date` values (`CalendarDate`, `parseDate`, `today`), so
+ * calendar systems, locales and time zones are handled by the library.
+ */
+declare function Calendar<T extends DateValue>(props: CalendarProps<T>): react.JSX.Element;
+/** A month grid for picking a start and an end date. */
+declare function RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>): react.JSX.Element;
+
+type OwnProps$1 = "children" | "className" | "style";
+/** The label, help text and error shared by every date and time field. */
+interface DateFieldChrome {
+    /** The visible label. It names the field for assistive technology. */
+    label: ReactNode;
+    /** Help text under the label, announced with the field. */
+    description?: ReactNode;
+    /**
+     * Shown when the value is invalid (out of range, unavailable, or rejected
+     * by `validate`). A function receives the validation result.
+     */
+    errorMessage?: ReactNode | ((validation: ValidationResult) => ReactNode);
+    size?: ControlSize;
+}
+interface DateFieldProps<T extends DateValue> extends Omit<DateFieldProps$1<T>, OwnProps$1 | "label">, DateFieldChrome {
+}
+/**
+ * A date typed into segments (day, month, year in the locale's order). Arrow
+ * keys step a segment, digits fill it and move on. Pair it with a `Calendar`
+ * or use `DatePicker` for both.
+ */
+declare function DateField<T extends DateValue>({ label, description, errorMessage, size, ...props }: DateFieldProps<T>): react.JSX.Element;
+interface TimeFieldProps<T extends TimeValue> extends Omit<TimeFieldProps$1<T>, OwnProps$1 | "label">, DateFieldChrome {
+}
+/** A time typed into segments (hour, minute, optional second and day period). */
+declare function TimeField<T extends TimeValue>({ label, description, errorMessage, size, ...props }: TimeFieldProps<T>): react.JSX.Element;
+
+type OwnProps = "children" | "className" | "style";
+interface DatePickerProps<T extends DateValue> extends Omit<DatePickerProps$1<T>, OwnProps | "label">, DateFieldChrome {
+}
+/**
+ * A date field with a calendar popover. Type the date into the segments or
+ * open the calendar from the button; both stay in sync. The calendar button
+ * is named by the library in the user's language.
+ */
+declare function DatePicker<T extends DateValue>({ label, description, errorMessage, size, ...props }: DatePickerProps<T>): react.JSX.Element;
+interface DateRangePickerProps<T extends DateValue> extends Omit<DateRangePickerProps$1<T>, OwnProps | "label">, DateFieldChrome {
+}
+/** Two date fields (start and end) with one range calendar popover. */
+declare function DateRangePicker<T extends DateValue>({ label, description, errorMessage, size, ...props }: DateRangePickerProps<T>): react.JSX.Element;
+
+export { Calendar, DateField, DatePicker, DateRangePicker, RangeCalendar, TimeField };
+export type { CalendarProps, DateFieldChrome, DateFieldProps, DatePickerProps, DateRangePickerProps, RangeCalendarProps, TimeFieldProps };

package/dist/date.js

@@ -0,0 +1,223 @@
+"use client";
+
+// src/date/calendar.tsx
+import { Icon } from "@x12i/icons";
+import {
+  Button as AriaButton,
+  Calendar as AriaCalendar,
+  CalendarCell,
+  CalendarGrid,
+  CalendarGridBody,
+  CalendarGridHeader,
+  CalendarHeaderCell,
+  Heading,
+  RangeCalendar as AriaRangeCalendar
+} from "react-aria-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function NavButton({ slot, icon }) {
+  return /* @__PURE__ */ jsx(
+    AriaButton,
+    {
+      slot,
+      "data-kit": "button",
+      "data-variant": "ghost",
+      "data-tone": "neutral",
+      "data-size": "sm",
+      "data-icon-only": "",
+      "data-kit-slot": "calendar-nav",
+      children: /* @__PURE__ */ jsx("span", { "data-kit-slot": "content", children: /* @__PURE__ */ jsx(Icon, { name: icon }) })
+    }
+  );
+}
+function CalendarContents() {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { "data-kit-slot": "calendar-header", children: [
+      /* @__PURE__ */ jsx(NavButton, { slot: "previous", icon: "chevron-left" }),
+      /* @__PURE__ */ jsx(Heading, { "data-kit-slot": "calendar-heading" }),
+      /* @__PURE__ */ jsx(NavButton, { slot: "next", icon: "chevron-right" })
+    ] }),
+    /* @__PURE__ */ jsxs(CalendarGrid, { "data-kit-slot": "calendar-grid", children: [
+      /* @__PURE__ */ jsx(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx(CalendarHeaderCell, { "data-kit-slot": "calendar-weekday", children: day }) }),
+      /* @__PURE__ */ jsx(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx(CalendarCell, { date, "data-kit-slot": "calendar-cell", children: ({ formattedDate }) => /* @__PURE__ */ jsx("span", { "data-kit-slot": "calendar-day", children: formattedDate }) }) })
+    ] })
+  ] });
+}
+function PickerCalendar() {
+  return /* @__PURE__ */ jsx(AriaCalendar, { "data-kit": "calendar", children: /* @__PURE__ */ jsx(CalendarContents, {}) });
+}
+function PickerRangeCalendar() {
+  return /* @__PURE__ */ jsx(AriaRangeCalendar, { "data-kit": "calendar", "data-range": "", children: /* @__PURE__ */ jsx(CalendarContents, {}) });
+}
+function Calendar(props) {
+  return /* @__PURE__ */ jsx(AriaCalendar, { "data-kit": "calendar", ...props, children: /* @__PURE__ */ jsx(CalendarContents, {}) });
+}
+function RangeCalendar(props) {
+  return /* @__PURE__ */ jsx(AriaRangeCalendar, { "data-kit": "calendar", "data-range": "", ...props, children: /* @__PURE__ */ jsx(CalendarContents, {}) });
+}
+
+// src/date/date-field.tsx
+import {
+  DateField as AriaDateField,
+  DateInput,
+  DateSegment,
+  FieldError,
+  Label,
+  Text,
+  TimeField as AriaTimeField
+} from "react-aria-components";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function DateSegments({
+  size,
+  bare = false,
+  slot
+}) {
+  return /* @__PURE__ */ jsx2(
+    DateInput,
+    {
+      slot,
+      "data-kit": bare ? void 0 : "input-group",
+      "data-kit-slot": "date-segments",
+      "data-size": bare ? void 0 : size,
+      children: (segment) => /* @__PURE__ */ jsx2(DateSegment, { segment, "data-kit-slot": "date-segment" })
+    }
+  );
+}
+function FieldLabel({ children, required }) {
+  return /* @__PURE__ */ jsxs2(Label, { "data-kit-slot": "field-label", children: [
+    children,
+    required ? /* @__PURE__ */ jsx2("span", { "aria-hidden": "true", "data-kit-slot": "field-required", children: "*" }) : null
+  ] });
+}
+function FieldFooter({
+  description,
+  errorMessage
+}) {
+  return /* @__PURE__ */ jsxs2(Fragment2, { children: [
+    description ? /* @__PURE__ */ jsx2(Text, { slot: "description", "data-kit-slot": "field-description", children: description }) : null,
+    /* @__PURE__ */ jsx2(FieldError, { "data-kit-slot": "field-error", children: errorMessage })
+  ] });
+}
+function DateField({
+  label,
+  description,
+  errorMessage,
+  size = "md",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(AriaDateField, { "data-kit": "field", ...props, children: [
+    /* @__PURE__ */ jsx2(FieldLabel, { required: props.isRequired, children: label }),
+    /* @__PURE__ */ jsx2(DateSegments, { size }),
+    /* @__PURE__ */ jsx2(FieldFooter, { description, errorMessage })
+  ] });
+}
+function TimeField({
+  label,
+  description,
+  errorMessage,
+  size = "md",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs2(AriaTimeField, { "data-kit": "field", ...props, children: [
+    /* @__PURE__ */ jsx2(FieldLabel, { required: props.isRequired, children: label }),
+    /* @__PURE__ */ jsx2(DateSegments, { size }),
+    /* @__PURE__ */ jsx2(FieldFooter, { description, errorMessage })
+  ] });
+}
+
+// src/date/date-picker.tsx
+import { Icon as Icon2 } from "@x12i/icons";
+import {
+  Button as AriaButton2,
+  DatePicker as AriaDatePicker,
+  DateRangePicker as AriaDateRangePicker,
+  Dialog,
+  Group,
+  Popover
+} from "react-aria-components";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function CalendarButton() {
+  return /* @__PURE__ */ jsx3(
+    AriaButton2,
+    {
+      "data-kit": "button",
+      "data-variant": "ghost",
+      "data-tone": "neutral",
+      "data-size": "xs",
+      "data-icon-only": "",
+      children: /* @__PURE__ */ jsx3("span", { "data-kit-slot": "content", children: /* @__PURE__ */ jsx3(Icon2, { name: "calendar" }) })
+    }
+  );
+}
+function DatePicker({
+  label,
+  description,
+  errorMessage,
+  size = "md",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs3(AriaDatePicker, { "data-kit": "field", ...props, children: [
+    /* @__PURE__ */ jsx3(FieldLabel, { required: props.isRequired, children: label }),
+    /* @__PURE__ */ jsxs3(Group, { "data-kit": "input-group", "data-size": size, children: [
+      /* @__PURE__ */ jsx3(DateSegments, { size, bare: true }),
+      /* @__PURE__ */ jsx3(CalendarButton, {})
+    ] }),
+    /* @__PURE__ */ jsx3(FieldFooter, { description, errorMessage }),
+    /* @__PURE__ */ jsx3(Popover, { "data-kit": "date-popover", placement: "bottom start", offset: 4, children: /* @__PURE__ */ jsx3(Dialog, { "data-kit-slot": "date-dialog", children: /* @__PURE__ */ jsx3(PickerCalendar, {}) }) })
+  ] });
+}
+function DateRangePicker({
+  label,
+  description,
+  errorMessage,
+  size = "md",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs3(AriaDateRangePicker, { "data-kit": "field", ...props, children: [
+    /* @__PURE__ */ jsx3(FieldLabel, { required: props.isRequired, children: label }),
+    /* @__PURE__ */ jsxs3(Group, { "data-kit": "input-group", "data-size": size, children: [
+      /* @__PURE__ */ jsx3(DateSegments, { size, bare: true, slot: "start" }),
+      /* @__PURE__ */ jsx3("span", { "aria-hidden": "true", "data-kit-slot": "date-range-separator", children: "\u2013" }),
+      /* @__PURE__ */ jsx3(DateSegments, { size, bare: true, slot: "end" }),
+      /* @__PURE__ */ jsx3(CalendarButton, {})
+    ] }),
+    /* @__PURE__ */ jsx3(FieldFooter, { description, errorMessage }),
+    /* @__PURE__ */ jsx3(Popover, { "data-kit": "date-popover", placement: "bottom start", offset: 4, children: /* @__PURE__ */ jsx3(Dialog, { "data-kit-slot": "date-dialog", children: /* @__PURE__ */ jsx3(PickerRangeCalendar, {}) }) })
+  ] });
+}
+
+// src/date.ts
+import {
+  CalendarDate,
+  CalendarDateTime,
+  Time,
+  ZonedDateTime,
+  getLocalTimeZone,
+  now,
+  parseDate,
+  parseDateTime,
+  parseTime,
+  parseZonedDateTime,
+  today
+} from "@internationalized/date";
+import { I18nProvider } from "react-aria-components";
+export {
+  Calendar,
+  CalendarDate,
+  CalendarDateTime,
+  DateField,
+  DatePicker,
+  DateRangePicker,
+  I18nProvider as LocaleProvider,
+  RangeCalendar,
+  Time,
+  TimeField,
+  ZonedDateTime,
+  getLocalTimeZone,
+  now,
+  parseDate,
+  parseDateTime,
+  parseTime,
+  parseZonedDateTime,
+  today
+};
+//# sourceMappingURL=date.js.map

package/dist/date.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/date/calendar.tsx","../src/date/date-field.tsx","../src/date/date-picker.tsx","../src/date.ts"],"sourcesContent":["import { Icon } from \"@x12i/icons\";\nimport {\n  Button as AriaButton,\n  Calendar as AriaCalendar,\n  CalendarCell,\n  CalendarGrid,\n  CalendarGridBody,\n  CalendarGridHeader,\n  CalendarHeaderCell,\n  type CalendarProps as AriaCalendarProps,\n  type DateValue,\n  Heading,\n  RangeCalendar as AriaRangeCalendar,\n  type RangeCalendarProps as AriaRangeCalendarProps,\n} from \"react-aria-components\";\n\ntype OwnProps = \"children\" | \"className\" | \"style\" | \"aria-label\";\n\nexport interface CalendarProps<T extends DateValue> extends Omit<AriaCalendarProps<T>, OwnProps> {\n  /** Name of the calendar, for example \"Appointment date\". Pass a translated string. */\n  \"aria-label\": string;\n}\n\nexport interface RangeCalendarProps<T extends DateValue> extends Omit<AriaRangeCalendarProps<T>, OwnProps> {\n  /** Name of the calendar, for example \"Trip dates\". Pass a translated string. */\n  \"aria-label\": string;\n}\n\n/**\n * The previous and next month buttons. They are React Aria buttons, so they\n * receive their localized names (\"Previous\", \"Next\") and disabled state from\n * the calendar, and look like a ghost icon `Button`.\n */\nfunction NavButton({ slot, icon }: { slot: \"previous\" | \"next\"; icon: \"chevron-left\" | \"chevron-right\" }) {\n  return (\n    <AriaButton\n      slot={slot}\n      data-kit=\"button\"\n      data-variant=\"ghost\"\n      data-tone=\"neutral\"\n      data-size=\"sm\"\n      data-icon-only=\"\"\n      data-kit-slot=\"calendar-nav\"\n    >\n      <span data-kit-slot=\"content\">\n        <Icon name={icon} />\n      </span>\n    </AriaButton>\n  );\n}\n\n/** Header, weekday row and day grid shared by single and range calendars. */\nexport function CalendarContents() {\n  return (\n    <>\n      {/* A div, not a header: inside a landmark a header would become a nested banner. */}\n      <div data-kit-slot=\"calendar-header\">\n        <NavButton slot=\"previous\" icon=\"chevron-left\" />\n        <Heading data-kit-slot=\"calendar-heading\" />\n        <NavButton slot=\"next\" icon=\"chevron-right\" />\n      </div>\n      <CalendarGrid data-kit-slot=\"calendar-grid\">\n        <CalendarGridHeader>\n          {(day) => <CalendarHeaderCell data-kit-slot=\"calendar-weekday\">{day}</CalendarHeaderCell>}\n        </CalendarGridHeader>\n        <CalendarGridBody>\n          {(date) => (\n            <CalendarCell date={date} data-kit-slot=\"calendar-cell\">\n              {({ formattedDate }) => <span data-kit-slot=\"calendar-day\">{formattedDate}</span>}\n            </CalendarCell>\n          )}\n        </CalendarGridBody>\n      </CalendarGrid>\n    </>\n  );\n}\n\n/**\n * The calendars inside `DatePicker` and `DateRangePicker`. The picker supplies\n * their name and value through context, so they take no props.\n */\nexport function PickerCalendar() {\n  return (\n    <AriaCalendar data-kit=\"calendar\">\n      <CalendarContents />\n    </AriaCalendar>\n  );\n}\n\nexport function PickerRangeCalendar() {\n  return (\n    <AriaRangeCalendar data-kit=\"calendar\" data-range=\"\">\n      <CalendarContents />\n    </AriaRangeCalendar>\n  );\n}\n\n/**\n * A month grid for picking one date. Arrow keys move by day and week, Page\n * Up/Down by month, Home/End to the start and end of the week. Dates are\n * `@internationalized/date` values (`CalendarDate`, `parseDate`, `today`), so\n * calendar systems, locales and time zones are handled by the library.\n */\nexport function Calendar<T extends DateValue>(props: CalendarProps<T>) {\n  return (\n    <AriaCalendar data-kit=\"calendar\" {...props}>\n      <CalendarContents />\n    </AriaCalendar>\n  );\n}\n\n/** A month grid for picking a start and an end date. */\nexport function RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>) {\n  return (\n    <AriaRangeCalendar data-kit=\"calendar\" data-range=\"\" {...props}>\n      <CalendarContents />\n    </AriaRangeCalendar>\n  );\n}\n","import type { ReactNode } from \"react\";\nimport {\n  DateField as AriaDateField,\n  type DateFieldProps as AriaDateFieldProps,\n  DateInput,\n  DateSegment,\n  type DateValue,\n  FieldError,\n  Label,\n  Text,\n  TimeField as AriaTimeField,\n  type TimeFieldProps as AriaTimeFieldProps,\n  type TimeValue,\n  type ValidationResult,\n} from \"react-aria-components\";\nimport type { ControlSize } from \"../types\";\n\ntype OwnProps = \"children\" | \"className\" | \"style\";\n\n/** The label, help text and error shared by every date and time field. */\nexport interface DateFieldChrome {\n  /** The visible label. It names the field for assistive technology. */\n  label: ReactNode;\n  /** Help text under the label, announced with the field. */\n  description?: ReactNode;\n  /**\n   * Shown when the value is invalid (out of range, unavailable, or rejected\n   * by `validate`). A function receives the validation result.\n   */\n  errorMessage?: ReactNode | ((validation: ValidationResult) => ReactNode);\n  size?: ControlSize;\n}\n\n/** The editable year, month, day, hour... segments. Each one is a spin button. */\nexport function DateSegments({\n  size,\n  bare = false,\n  slot,\n}: {\n  size: ControlSize;\n  /** Inside a picker the surrounding group draws the border, so the segments go bare. */\n  bare?: boolean;\n  /** `start` or `end` inside a range picker. */\n  slot?: \"start\" | \"end\";\n}) {\n  return (\n    <DateInput\n      slot={slot}\n      data-kit={bare ? undefined : \"input-group\"}\n      data-kit-slot=\"date-segments\"\n      data-size={bare ? undefined : size}\n    >\n      {(segment) => <DateSegment segment={segment} data-kit-slot=\"date-segment\" />}\n    </DateInput>\n  );\n}\n\nexport function FieldLabel({ children, required }: { children: ReactNode; required?: boolean }) {\n  return (\n    <Label data-kit-slot=\"field-label\">\n      {children}\n      {required ? (\n        <span aria-hidden=\"true\" data-kit-slot=\"field-required\">\n          *\n        </span>\n      ) : null}\n    </Label>\n  );\n}\n\nexport function FieldFooter({\n  description,\n  errorMessage,\n}: Pick<DateFieldChrome, \"description\" | \"errorMessage\">) {\n  return (\n    <>\n      {description ? (\n        <Text slot=\"description\" data-kit-slot=\"field-description\">\n          {description}\n        </Text>\n      ) : null}\n      <FieldError data-kit-slot=\"field-error\">{errorMessage}</FieldError>\n    </>\n  );\n}\n\nexport interface DateFieldProps<T extends DateValue>\n  extends Omit<AriaDateFieldProps<T>, OwnProps | \"label\">,\n    DateFieldChrome {}\n\n/**\n * A date typed into segments (day, month, year in the locale's order). Arrow\n * keys step a segment, digits fill it and move on. Pair it with a `Calendar`\n * or use `DatePicker` for both.\n */\nexport function DateField<T extends DateValue>({\n  label,\n  description,\n  errorMessage,\n  size = \"md\",\n  ...props\n}: DateFieldProps<T>) {\n  return (\n    <AriaDateField data-kit=\"field\" {...props}>\n      <FieldLabel required={props.isRequired}>{label}</FieldLabel>\n      <DateSegments size={size} />\n      <FieldFooter description={description} errorMessage={errorMessage} />\n    </AriaDateField>\n  );\n}\n\nexport interface TimeFieldProps<T extends TimeValue>\n  extends Omit<AriaTimeFieldProps<T>, OwnProps | \"label\">,\n    DateFieldChrome {}\n\n/** A time typed into segments (hour, minute, optional second and day period). */\nexport function TimeField<T extends TimeValue>({\n  label,\n  description,\n  errorMessage,\n  size = \"md\",\n  ...props\n}: TimeFieldProps<T>) {\n  return (\n    <AriaTimeField data-kit=\"field\" {...props}>\n      <FieldLabel required={props.isRequired}>{label}</FieldLabel>\n      <DateSegments size={size} />\n      <FieldFooter description={description} errorMessage={errorMessage} />\n    </AriaTimeField>\n  );\n}\n","import { Icon } from \"@x12i/icons\";\nimport {\n  Button as AriaButton,\n  DatePicker as AriaDatePicker,\n  type DatePickerProps as AriaDatePickerProps,\n  DateRangePicker as AriaDateRangePicker,\n  type DateRangePickerProps as AriaDateRangePickerProps,\n  type DateValue,\n  Dialog,\n  Group,\n  Popover,\n} from \"react-aria-components\";\nimport { PickerCalendar, PickerRangeCalendar } from \"./calendar\";\nimport { type DateFieldChrome, DateSegments, FieldFooter, FieldLabel } from \"./date-field\";\n\ntype OwnProps = \"children\" | \"className\" | \"style\";\n\n/** The button that opens the calendar. React Aria names it and wires it to the popover. */\nfunction CalendarButton() {\n  return (\n    <AriaButton\n      data-kit=\"button\"\n      data-variant=\"ghost\"\n      data-tone=\"neutral\"\n      data-size=\"xs\"\n      data-icon-only=\"\"\n    >\n      <span data-kit-slot=\"content\">\n        <Icon name=\"calendar\" />\n      </span>\n    </AriaButton>\n  );\n}\n\nexport interface DatePickerProps<T extends DateValue>\n  extends Omit<AriaDatePickerProps<T>, OwnProps | \"label\">,\n    DateFieldChrome {}\n\n/**\n * A date field with a calendar popover. Type the date into the segments or\n * open the calendar from the button; both stay in sync. The calendar button\n * is named by the library in the user's language.\n */\nexport function DatePicker<T extends DateValue>({\n  label,\n  description,\n  errorMessage,\n  size = \"md\",\n  ...props\n}: DatePickerProps<T>) {\n  return (\n    <AriaDatePicker data-kit=\"field\" {...props}>\n      <FieldLabel required={props.isRequired}>{label}</FieldLabel>\n      <Group data-kit=\"input-group\" data-size={size}>\n        <DateSegments size={size} bare />\n        <CalendarButton />\n      </Group>\n      <FieldFooter description={description} errorMessage={errorMessage} />\n      <Popover data-kit=\"date-popover\" placement=\"bottom start\" offset={4}>\n        <Dialog data-kit-slot=\"date-dialog\">\n          <PickerCalendar />\n        </Dialog>\n      </Popover>\n    </AriaDatePicker>\n  );\n}\n\nexport interface DateRangePickerProps<T extends DateValue>\n  extends Omit<AriaDateRangePickerProps<T>, OwnProps | \"label\">,\n    DateFieldChrome {}\n\n/** Two date fields (start and end) with one range calendar popover. */\nexport function DateRangePicker<T extends DateValue>({\n  label,\n  description,\n  errorMessage,\n  size = \"md\",\n  ...props\n}: DateRangePickerProps<T>) {\n  return (\n    <AriaDateRangePicker data-kit=\"field\" {...props}>\n      <FieldLabel required={props.isRequired}>{label}</FieldLabel>\n      <Group data-kit=\"input-group\" data-size={size}>\n        <DateSegments size={size} bare slot=\"start\" />\n        <span aria-hidden=\"true\" data-kit-slot=\"date-range-separator\">\n          –\n        </span>\n        <DateSegments size={size} bare slot=\"end\" />\n        <CalendarButton />\n      </Group>\n      <FieldFooter description={description} errorMessage={errorMessage} />\n      <Popover data-kit=\"date-popover\" placement=\"bottom start\" offset={4}>\n        <Dialog data-kit-slot=\"date-dialog\">\n          <PickerRangeCalendar />\n        </Dialog>\n      </Popover>\n    </AriaDateRangePicker>\n  );\n}\n","/**\n * Date and time components: `@x12i/ui/date`.\n *\n * Kept in its own entry because it is built on React Aria Components and\n * `@internationalized/date`, which add real weight. Apps that never show a\n * calendar do not pay for them.\n *\n * Dates are `@internationalized/date` values (`CalendarDate`, `Time`...), not\n * JavaScript `Date`s, so calendar systems, locales and time zones are handled\n * correctly. The library localizes its own built-in labels (\"Previous month\",\n * \"Calendar\"); set the locale with `LocaleProvider`.\n */\nexport { Calendar, RangeCalendar } from \"./date/calendar\";\nexport type { CalendarProps, RangeCalendarProps } from \"./date/calendar\";\nexport { DateField, TimeField } from \"./date/date-field\";\nexport type { DateFieldChrome, DateFieldProps, TimeFieldProps } from \"./date/date-field\";\nexport { DatePicker, DateRangePicker } from \"./date/date-picker\";\nexport type { DatePickerProps, DateRangePickerProps } from \"./date/date-picker\";\n\nexport {\n  CalendarDate,\n  CalendarDateTime,\n  Time,\n  ZonedDateTime,\n  getLocalTimeZone,\n  now,\n  parseDate,\n  parseDateTime,\n  parseTime,\n  parseZonedDateTime,\n  today,\n} from \"@internationalized/date\";\nexport type { DateDuration } from \"@internationalized/date\";\nexport { I18nProvider as LocaleProvider } from \"react-aria-components\";\nexport type { DateRange, DateValue, TimeValue, ValidationResult } from \"react-aria-components\";\n"],"mappings":"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","names":["Fragment","jsx","jsxs","Icon","AriaButton","jsx","jsxs","AriaButton","Icon"]}