npm - @sixthshift/design-system - Versions diffs - 0.2.1 → 0.3.0 - Mend

@sixthshift/design-system 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (288) hide show

package/README.md CHANGED Viewed

@@ -8,7 +8,7 @@ A single package, `@sixthshift/design-system`: ~80 components (primitives, overl
 **Owns:** The component library — 80+ exports via subpath imports, design tokens, theme system (JSON-driven CSS generation), Tailwind config, and Storybook stories. Components span primitives, composites, typography, charts, and overlays.
-**Boundaries:** Bundles a `./date-time` module (`@sixthshift/design-system/date-time`, wrapping `@js-temporal/polyfill`) used by the date/time components, Floating UI (popover/tooltip positioning), and CVA (variant styling). Peer-depends on React 18 or 19. No app/domain coupling — domain-specific components live in consuming apps.
+**Boundaries:** Bundles a `./date-time` module (`@sixthshift/design-system/date-time`, wrapping `@js-temporal/polyfill`) used internally by the date/time components — those components exchange ISO 8601 strings, so consuming one does not require adopting Temporal. Also Floating UI (popover/tooltip positioning) and CVA (variant styling). Peer-depends on React 18 or 19. No app/domain coupling — domain-specific components live in consuming apps.
 **Surprise:** All components are imported via subpath exports (`@sixthshift/design-system/button`), never from a barrel root — there is no main export. Positioning uses Floating UI, not Radix. Variants use the `variant` (visual) + `intent` (semantic) orthogonal prop pattern via CVA, not className-based styling. Compound components (e.g. Tabs) use `Object.assign` to attach sub-components. Check `src/components/` before creating any new UI element.
@@ -18,22 +18,30 @@ A single package, `@sixthshift/design-system`: ~80 components (primitives, overl
 npm install @sixthshift/design-system
 ```
-```tsx
-// app entry — styles once
-import "@sixthshift/design-system/theme.css";   // CSS variables (light/dark via data-theme on <html>)
-import "@sixthshift/design-system/styles.css";  // compiled Tailwind + base styles
+```css
+/* your CSS entry — Tailwind 4 is a required peer */
+@import "tailwindcss";
+@import "@sixthshift/design-system/theme.css";
+```
+That second line is opinionated: it replaces Tailwind's default palette with this
+system's tokens and takes over a few globals. See
+[what the theme takes over](#what-the-theme-takes-over) before adopting it.
+```tsx
 // anywhere — components via subpath exports (no barrel root)
 import { Button } from "@sixthshift/design-system/button";
 ```
-**What ships:** compiled ESM (`.js`) plus type declarations (`.d.ts`) in `dist/`, alongside the prebuilt CSS — every export subpath resolves to build output, so no build runs on install and no consumer toolchain needs to transpile this package. The module tree is preserved rather than bundled, so subpath imports still tree-shake.
+**What ships:** compiled ESM (`.js`) plus type declarations (`.d.ts`) in `dist/`, and the tokens as CSS. No prebuilt stylesheet: the components are Tailwind classes, so your build compiles them from the `@theme` block `theme.css` brings with it. Nothing runs on install and no consumer toolchain has to transpile this package. The module tree is preserved rather than bundled, so subpath imports still tree-shake.
 TypeScript sources are published too, but only as the target of the declaration and source maps — nothing resolves to them. Go-to-definition lands on real `.tsx`, and stack traces map back to it.
+**Module resolution:** subpath types only resolve under `"moduleResolution": "bundler"`, `"node16"`, or `"nodenext"` in `tsconfig.json`. The older `"node"` setting ignores the `exports` map entirely and fails with `TS2307` on every subpath. The package is also ESM-only — every `exports` entry has an `"import"` condition and nothing else, so `require("@sixthshift/design-system/button")` fails with `ERR_PACKAGE_PATH_NOT_EXPORTED`. A CJS test runner (e.g. Jest without ESM configured) needs to be set up for ESM before it can import this package.
 ### Peer dependencies
-`react` and `react-dom` are the only required peers, at **18 or 19**. CI runs the type-check and the full unit suite against both on every change, so the range is verified rather than merely declared.
+`react`, `react-dom` and `tailwindcss` are the required peers — React at **18 or 19**, Tailwind at **4**. CI runs the type-check and the full unit suite against both React versions on every change, so that range is verified rather than merely declared.
 Everything else is an **optional** peer — install it only if you import the entry point that needs it. Nothing else in the library imports them, and package managers do not warn about a missing optional peer.
@@ -78,7 +86,8 @@ import { FormField } from "@sixthshift/design-system/form-field";
 // Charts (LineChart, BarChart, Sparkline, HeatMap)
 import { LineChart } from "@sixthshift/design-system/line-chart";
-// Pickers (Calendar, DatePicker, TimePicker, DateTimePicker, DateTimeRangePicker)
+// Pickers (Calendar, DatePicker, TimePicker, DateTimePicker, DateRangePicker, DateTimeRangePicker)
+// — all values are ISO 8601 strings, never date objects
 import { DatePicker } from "@sixthshift/design-system/date-picker";
 // Overlays (Modal, Sheet, Toast, Tooltip, Popover, HoverCard)
@@ -107,30 +116,125 @@ Components use two orthogonal props:
 <Badge variant="soft" intent="warning">Pending</Badge>
 ```
+## Dates and times
+Every date/time component takes and returns canonical ISO 8601 strings. There is no
+date library to adopt, and the engine behind the components stays an implementation
+detail.
+```tsx
+<DatePicker value="2026-08-26" onChange={(date) => save(date)} />
+<TimePicker value="09:30" onChange={(time) => save(time)} />
+<DateTimePicker value="2026-08-26T00:30:00Z" onChange={(instant) => save(instant)} />
+<DatePicker mode="range" value={{ from: "2026-08-01", to: "2026-08-07" }} onChange={setRange} />
+```
+| Type | Shape | Notes |
+| --- | --- | --- |
+| `ISODate` | `"2026-08-26"` | |
+| `ISOTime` | `"09:30"` or `"09:30:00"` | callbacks emit `HH:MM:SS` |
+| `ISOInstant` | `"2026-08-26T00:30:00Z"` | always UTC; an offset like `+10:00` is accepted and normalised |
+The types are template literals, so a literal in the wrong shape is a compile error
+— a datetime passed to a `DatePicker`, an offset where `Z` is required. Values
+arriving as `string` from an API are checked at runtime instead, and a value
+carrying a time where a date belongs throws rather than being silently truncated.
+Disabling dates is declarative, so the common cases need no date arithmetic:
+```tsx
+<DatePicker disabled={{ dayOfWeek: ["sat", "sun"] }} />
+<DatePicker disabled={[{ before: "2026-01-01" }, "2026-12-25"]} />
+```
+For building `presets` and bounds, `@sixthshift/design-system/date-time` carries
+ISO-native helpers (`todayISO`, `addDaysISO`, `startOfMonthISO`, `isWeekendISO`,
+`compareISO`, …) so you never need Temporal at a call site. It also still exports
+Temporal itself, for arithmetic the ISO surface deliberately does not carry —
+widen with `fromISODate`, compute, narrow back with `toISODate`.
+See [docs/component-catalog.md](docs/component-catalog.md#datetime-pickers) for the
+full prop tables.
+### Upgrading from 0.2.x
+The pickers previously took and returned `Temporal` objects. At a call site, wrap
+existing values with `serialize()` and parse what comes back, or — better — drop
+Temporal from your own code entirely:
+```tsx
+// before
+<DatePicker value={Temporal.PlainDate.from(dueDate)} onChange={(d) => save(d?.toString())} />
+// after
+<DatePicker value={dueDate} onChange={(d) => save(d)} />
+```
+`DateRangeValue` and `DisabledDateMatcher` are no longer exported; use
+`ISODateRange` and `DisabledDates`. `DateTimeRangeValue` survives as an alias of
+`ISOInstantRange`. The Temporal-typed helpers that `@sixthshift/design-system/calendar`
+re-exported (`isDateDisabled`, `temporalToISO`, and friends) are now internal — the
+ISO helpers above cover what they were reachable for.
 ## Theming
-Tokens are JSON (`src/theme/{palette,theme,typography}.json`) compiled to CSS variables (`theme.css`). Light/dark switch via `data-theme` attribute on the root element. Consumers restyle by overriding CSS variables at runtime — component source stays untouched. See [docs/design-tokens.md](docs/design-tokens.md) for the full token reference.
+Tokens are CSS (`src/theme/tokens.css`), published as `theme.css`. That one file
+holds the palette, the semantic tokens for each mode, and the `@theme` block that
+tells Tailwind which utilities exist — so a token and its utility can never
+disagree.
+Light/dark switch via the `data-theme` attribute on the root element. Consumers
+restyle by overriding CSS variables at runtime — component source stays
+untouched. See [docs/design-tokens.md](docs/design-tokens.md) for the full token
+reference.
 ### Tailwind integration
-If your app uses Tailwind and you want to extend the theme:
+The two `@import` lines above are the whole integration. That single theme import
+carries the token variables *and* the `@theme` block declaring the library's
+utilities, so `bg-bg-brand`, `z-modal`, `animate-fade-in` and `dark:*` compile in
+your build alongside your own classes — same pass, same tree-shaking, and
+`className="mt-8"` on a library component works like any other Tailwind class.
+Add the library to your `content` sources only if you scan explicitly; automatic
+detection already covers `node_modules` imports. There is no preset, no
+`@config`, and no prebuilt stylesheet to import.
+**Tailwind 4 is required, not optional.** Every component is a set of Tailwind
+classes, so without it they render unstyled. That is why `tailwindcss` is a
+non-optional peer dependency.
-```ts
-// tailwind.config.ts
-import uiConfig from "@sixthshift/design-system/tailwind.config";
+### What the theme takes over
-export default {
-  presets: [uiConfig],
-  content: ["./src/**/*.{ts,tsx}", "./node_modules/@sixthshift/design-system/dist/**/*.js"],
-};
+This is a design system, not a component grab-bag: importing `theme.css` adopts
+its opinions across your whole app, not just inside its components. All of it is
+deliberate, and all of it is worth knowing before you commit.
+| What | Effect on your app |
+| --- | --- |
+| **Tailwind's default palette is removed** | `bg-red-500`, `text-gray-700`, `border-gray-200` and the rest stop compiling — in your own markup too. What remains is this system's tokens (`bg-bg-brand`, `text-fg-subtle`, `border-border-normal`, …) plus `white`, `black`, `transparent` and `current`. A colour that was never designed should not be one class away. |
+| **`dark:` means `[data-theme="dark"]`** | Not `prefers-color-scheme`. Theming here is a runtime attribute swap, so every `dark:` utility in your app follows the attribute instead of the OS setting. |
+| **`font-sans` and `font-mono`** | Resolve to Inter Variable and JetBrains Mono. Install the [font peers](#fonts) or the stacks fall through to the system defaults. |
+| **Three global rules** | `*` gets `border-color: var(--border-normal)`, so a bare `border` is the token colour rather than `currentColor`; `:focus-visible` gets the system focus ring; and under `prefers-reduced-motion` every animation and transition is pinned to `0.01ms`. These apply to your elements as well as ours. |
+| **`--color-{emerald,sky,slate}-*`** | 33 variable names shared with Tailwind's palette hold this system's values. Only reachable if you read the variables directly in your own CSS. |
+If you want a specific stock colour back, re-declare it in your own `@theme`
+block after the import — everything you do not name stays gone:
+```css
+@import "tailwindcss";
+@import "@sixthshift/design-system/theme.css";
+@theme {
+  --color-red-500: oklch(63.7% 0.237 25.331);
+}
 ```
 ## Development
 ```bash
-bun install          # `prepare` builds JS, types, theme and styles into dist/
-bun run storybook    # component workbench on :6006
-bun run dev          # watch-rebuild theme + Tailwind CSS
+bun install          # `prepare` builds JS, types and styles into dist/
+bun run dev          # component workbench on :6006
 bun run test         # unit + date-time tests
 bun run type-check   # tsc --noEmit (src and tests)
 bun run check        # biome lint + format
@@ -195,9 +299,9 @@ bun run scripts/next-version.ts --explain
 The line between the two halves of that table is **whether the commit can reach
 the published tarball**, not whether it feels important. Every code subpath is
 compiled from `src/` into the tarball, so a `refactor:` still changes the bytes
-a consumer receives; `build:` changes what lands in `dist/`, and
-`tailwind.config.ts` is itself an exported subpath. Tests, workflows, formatting
-and prose either do not ship or are not user-visible, so they release nothing.
+a consumer receives, and `build:` changes what lands in `dist/`. Tests,
+workflows, formatting and prose either do not ship or are not user-visible, so
+they release nothing.
 Two consequences worth knowing:
@@ -206,11 +310,14 @@ Two consequences worth knowing:
 - A renamed or removed export needs `feat!:` or a `BREAKING CHANGE:` footer.
   Filed as `refactor:` it cuts a patch, which understates it.
-One repository secret is required:
-| Secret | Why |
-| --- | --- |
-| `NPM_TOKEN` | Publishing. Must be an npm **automation** token, so it works with 2FA. |
+No repository secret is required. Publishing goes through npm trusted
+publishing (OIDC): GitHub Actions mints a short-lived token scoped to the run,
+npm exchanges it against the trusted publisher configured on the package, and
+provenance is attached automatically. There is nothing to leak and nothing to
+rotate. npm authorises the *calling* workflow rather than the one containing
+the publish step, so `version.yml` has to stay the sole entry point — see
+[`.github/workflows/release.yml`](.github/workflows/release.yml) for the
+detail.
 Tagging by hand still works and goes through the same publish path:

package/dist/components/Badge/Badge.d.ts CHANGED Viewed

@@ -1,10 +1,13 @@
 import { type VariantProps } from "class-variance-authority";
-import type * as React from "react";
+import * as React from "react";
 declare const badgeVariants: (props?: ({
     variant?: "solid" | "soft" | "outline" | null | undefined;
     intent?: "neutral" | "primary" | "danger" | "success" | "warning" | "muted" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & VariantProps<typeof badgeVariants>;
-export declare const Badge: ({ className, variant, intent, ...props }: BadgeProps) => React.JSX.Element;
+export declare const Badge: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
+    variant?: "solid" | "soft" | "outline" | null | undefined;
+    intent?: "neutral" | "primary" | "danger" | "success" | "warning" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLSpanElement>>;
 export { badgeVariants };
 //# sourceMappingURL=Badge.d.ts.map

package/dist/components/Badge/Badge.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,~~KAAK,~~MAAM,OAAO,CAAC;~~AAEpC~~,QAAA,MAAM,aAAa;;;8EA8ClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAEpG,eAAO,MAAM,KAAK,~~6CAA8C,UAAU,sBAEzE,~~CAAC;~~AAEF~~,OAAO,EAAE,aAAa,EAAE,CAAC"}
1	+ {"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,QAAA,MAAM,aAAa;;;8EA8ClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC;AAEpG,eAAO,MAAM,KAAK;;;uHAEhB,CAAC;AAGH,OAAO,EAAE,aAAa,EAAE,CAAC"}

package/dist/components/Badge/Badge.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@sixthshift/design-system/utils";
 import { cva } from "class-variance-authority";
+import * as React from "react";
 const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold text-xs transition-colors focus:outline-hidden focus:ring-2 focus:ring-border-brand focus:ring-offset-2", {
     variants: {
         variant: {
@@ -45,8 +46,9 @@ const badgeVariants = cva("inline-flex items-center rounded-md border px-2.5 py-
         intent: "primary",
     },
 });
-export const Badge = ({ className, variant, intent, ...props }) => {
-    return _jsx("span", { className: cn(badgeVariants({ variant, intent }), className), ...props });
-};
+export const Badge = React.forwardRef(({ className, variant, intent, ...props }, ref) => {
+    return _jsx("span", { ref: ref, className: cn(badgeVariants({ variant, intent }), className), ...props });
+});
+Badge.displayName = "Badge";
 export { badgeVariants };
 //# sourceMappingURL=Badge.js.map

package/dist/components/Badge/Badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAC;~~AAGlE~~,MAAM,aAAa,GAAG,GAAG,CACvB,gLAAgL,EAChL;IACE,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,KAAK,EAAE,2BAA2B;YAClC,IAAI,EAAE,oBAAoB;YAC1B,OAAO,EAAE,EAAE;SACZ;QACD,MAAM,EAAE;YACN,OAAO,EAAE,EAAE;YACX,OAAO,EAAE,EAAE;YACX,MAAM,EAAE,EAAE;YACV,OAAO,EAAE,EAAE;YACX,OAAO,EAAE,EAAE;YACX,KAAK,EAAE,EAAE;SACV;KACF;IACD,gBAAgB,EAAE;QAChB,iBAAiB;QACjB,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,gCAAgC,EAAE;QACpF,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,8BAA8B,EAAE;QAClF,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,gCAAgC,EAAE;QACnF,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,kCAAkC,EAAE;QACtF,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,kCAAkC,EAAE;QACtF,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,6BAA6B,EAAE;QAC/E,gBAAgB;QAChB,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,6BAA6B,EAAE;QAChF,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,4CAA4C,EAAE;QAC/F,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,8CAA8C,EAAE;QAChG,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,gDAAgD,EAAE;QACnG,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,gDAAgD,EAAE;QACnG,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,6BAA6B,EAAE;QAC9E,mBAAmB;QACnB,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,kDAAkD,EAAE;QACxG,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,gDAAgD,EAAE;QACtG,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,kDAAkD,EAAE;QACvG,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,oDAAoD,EAAE;QAC1G,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,oDAAoD,EAAE;QAC1G,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,kDAAkD,EAAE;KACvG;IACD,eAAe,EAAE;QACf,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,SAAS;KAClB;CACF,CACF,CAAC;AAIF,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,EAAE,GAAG,KAAK,~~EAAc~~,EAAE,EAAE;~~IAC5E~~,OAAO,eAAM,SAAS,EAAE,EAAE,CAAC,aAAa,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC,EAAE,SAAS,CAAC,KAAM,KAAK,GAAI,CAAC;~~AAC3F~~,CAAC,CAAC;~~AAEF~~,OAAO,EAAE,aAAa,EAAE,CAAC"}
1	+ {"version":3,"file":"Badge.js","sourceRoot":"","sources":["../../../src/components/Badge/Badge.tsx"],"names":[],"mappings":"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"}

package/dist/components/BarChart/BarChart.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import type * as React from "react";
+import * as React from "react";
 export type BarChartItem = {
     label: string;
     value: number;
@@ -11,5 +11,11 @@ export type BarChartProps = React.HTMLAttributes<HTMLDivElement> & {
     formatValue?: (value: number) => string;
     barHeight?: number;
 };
-export declare const BarChart: ({ data, showValues, maxValue: maxValueProp, formatValue, barHeight, className, ...rest }: BarChartProps) => React.JSX.Element;
+export declare const BarChart: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    data: BarChartItem[];
+    showValues?: boolean;
+    maxValue?: number;
+    formatValue?: (value: number) => string;
+    barHeight?: number;
+} & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=BarChart.d.ts.map

package/dist/components/BarChart/BarChart.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,~~KAAK,~~MAAM,OAAO,CAAC;~~AAEpC~~,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACjE,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF,eAAO,MAAM,QAAQ,~~6FAQlB~~,~~aAAa~~,~~sBAuBf~~,CAAC"}
1	+ {"version":3,"file":"BarChart.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IACjE,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAIF,eAAO,MAAM,QAAQ;UATb,YAAY,EAAE;iBACP,OAAO;eACT,MAAM;kBACH,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM;gBAC3B,MAAM;wCA8BnB,CAAC"}

package/dist/components/BarChart/BarChart.js CHANGED Viewed

@@ -1,14 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "@sixthshift/design-system/utils";
+import * as React from "react";
 const DEFAULT_COLORS = ["var(--fg-brand)", "var(--fg-success)", "var(--fg-warning)", "var(--fg-danger)", "var(--fg-subtle)"];
-export const BarChart = ({ data, showValues = true, maxValue: maxValueProp, formatValue = (v) => String(v), barHeight = 24, className, ...rest }) => {
+export const BarChart = React.forwardRef(({ data, showValues = true, maxValue: maxValueProp, formatValue = (v) => String(v), barHeight = 24, className, ...rest }, ref) => {
     const maxValue = maxValueProp ?? Math.max(...data.map((d) => d.value), 1);
-    return (_jsx("div", { ...rest, className: cn("flex flex-col gap-2", className), children: data.map((item, i) => {
+    return (_jsx("div", { ref: ref, ...rest, className: cn("flex flex-col gap-2", className), children: data.map((item, i) => {
             // Clamp both ends: a negative value would otherwise emit an invalid
             // `width: -n%`, whose rendering is undefined.
             const percent = Math.min(Math.max((item.value / maxValue) * 100, 0), 100);
             const color = item.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
             return (_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("span", { className: "w-20 shrink-0 truncate text-right text-fg-subtle text-sm", children: item.label }), _jsx("div", { className: "flex-1 overflow-hidden rounded-sm bg-bg-subtle", style: { height: barHeight }, children: _jsx("div", { className: "h-full rounded-sm transition-all duration-300", style: { width: `${percent}%`, backgroundColor: color } }) }), showValues && _jsx("span", { className: "w-12 shrink-0 text-right font-medium text-fg-normal text-sm", children: formatValue(item.value) })] }, item.label));
         }) }));
-};
+});
+BarChart.displayName = "BarChart";
 //# sourceMappingURL=BarChart.js.map

package/dist/components/BarChart/BarChart.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;~~AAiBrD~~,MAAM,cAAc,GAAG,CAAC,iBAAiB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;AAE7H,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,~~EACvB~~,IAAI,~~EACJ~~,UAAU,GAAG,IAAI,~~EACjB~~,QAAQ,EAAE,YAAY,~~EACtB~~,WAAW,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,~~EAC9B~~,SAAS,GAAG,EAAE,~~EACd~~,SAAS,~~EACT~~,GAAG,IAAI,~~EACO~~,EAAE,EAAE;~~IAClB~~,MAAM,QAAQ,GAAG,YAAY,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAE1E,OAAO,CACL,~~iBAAS~~,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,~~YAC3D~~,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACpB,oEAAoE;YACpE,8CAA8C;YAC9C,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC1E,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,cAAc,CAAC,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;YAEtE,OAAO,CACL,eAAsB,SAAS,EAAC,yBAAyB,aACvD,eAAM,SAAS,EAAC,0DAA0D,YAAE,IAAI,CAAC,KAAK,GAAQ,EAC9F,cAAK,SAAS,EAAC,gDAAgD,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,YAC1F,cAAK,SAAS,EAAC,+CAA+C,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,OAAO,GAAG,EAAE,eAAe,EAAE,KAAK,EAAE,GAAI,GACtH,EACL,UAAU,IAAI,eAAM,SAAS,EAAC,6DAA6D,YAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAQ,KALrH,IAAI,CAAC,KAAK,CAMd,CACP,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC"}
1	+ {"version":3,"file":"BarChart.js","sourceRoot":"","sources":["../../../src/components/BarChart/BarChart.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,EAAE,EAAE,MAAM,iCAAiC,CAAC;AACrD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,MAAM,cAAc,GAAG,CAAC,iBAAiB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,kBAAkB,CAAC,CAAC;AAE7H,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,IAAI,EAAE,UAAU,GAAG,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,WAAW,GAAG,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/H,MAAM,QAAQ,GAAG,YAAY,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,CAAC;IAE1E,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,KAAM,IAAI,EAAE,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE,SAAS,CAAC,YACrE,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;YACpB,oEAAoE;YACpE,8CAA8C;YAC9C,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC,GAAG,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;YAC1E,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,cAAc,CAAC,CAAC,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC;YAEtE,OAAO,CACL,eAAsB,SAAS,EAAC,yBAAyB,aACvD,eAAM,SAAS,EAAC,0DAA0D,YAAE,IAAI,CAAC,KAAK,GAAQ,EAC9F,cAAK,SAAS,EAAC,gDAAgD,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,YAC1F,cAAK,SAAS,EAAC,+CAA+C,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,OAAO,GAAG,EAAE,eAAe,EAAE,KAAK,EAAE,GAAI,GACtH,EACL,UAAU,IAAI,eAAM,SAAS,EAAC,6DAA6D,YAAE,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GAAQ,KALrH,IAAI,CAAC,KAAK,CAMd,CACP,CAAC;QACJ,CAAC,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AACF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/components/Calendar/Calendar.d.ts CHANGED Viewed

@@ -1,4 +1,20 @@
+/**
+ * Calendar — the public, ISO-string-typed calendar.
+ *
+ * A thin adapter over {@link CalendarView}: it parses incoming ISO strings and
+ * serialises outgoing selections. All the behaviour lives in CalendarView.
+ *
+ * Every conversion is memoised on the string it came from, and every handler is
+ * stable. Temporal objects have no value identity — `PlainDate.from("2026-08-26")`
+ * is never `===` another PlainDate for the same day — and CalendarView keys
+ * `useMemo`/`useCallback` on these values directly, so converting unmemoised
+ * would invalidate the whole grid on every render.
+ *
+ * Props are read with `"key" in props` rather than destructured per mode,
+ * because every hook here has to run unconditionally.
+ */
+import * as React from "react";
 import type { CalendarProps } from "./calendar.types.js";
 export type { CalendarProps };
-export declare const Calendar: (props: CalendarProps) => import("react").JSX.Element;
+export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Calendar.d.ts.map

package/dist/components/Calendar/Calendar.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"~~AA2BA~~,OAAO,KAAK,EAAE,aAAa,~~EAAoE~~,MAAM,kBAAkB,CAAC;~~AAExH~~,YAAY,EAAE,aAAa,EAAE,CAAC;~~AAyB9B~~,eAAO,MAAM,QAAQ,~~UAAW~~,~~aAAa,gCA0X5C,~~CAAC"}
1	+ {"version":3,"file":"Calendar.d.ts","sourceRoot":"","sources":["../../../src/components/Calendar/Calendar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,KAAK,EAAE,aAAa,EAAmD,MAAM,kBAAkB,CAAC;AAEvG,YAAY,EAAE,aAAa,EAAE,CAAC;AAE9B,eAAO,MAAM,QAAQ,sFAsFnB,CAAC"}