@kanzo-tech/ui 0.0.1-alpha

package/dist/simples/steps.js

@@ -0,0 +1,171 @@
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { ark as i } from "@ark-ui/react/factory";
+import { useStepsContext as p, Steps as r } from "@ark-ui/react/steps";
+import { CheckIcon as d } from "lucide-react";
+import { cn as n } from "../lib/cn.js";
+const v = p, N = (t) => {
+  const { className: e, slot: s, ...a } = t;
+  return /* @__PURE__ */ o(
+    r.Root,
+    {
+      className: n(
+        "flex flex-col gap-4",
+        "data-[orientation=vertical]:min-h-32 data-[orientation=vertical]:flex-row data-[orientation=vertical]:gap-8",
+        e
+      ),
+      ...a,
+      "data-slot": s ?? "steps"
+    }
+  );
+}, h = (t) => {
+  const { className: e, slot: s, ...a } = t;
+  return /* @__PURE__ */ o(
+    r.List,
+    {
+      className: n(
+        "[--steps-gutter:--spacing(2)] [--steps-icon-size:--spacing(4)] [--steps-size:--spacing(8)]",
+        "flex",
+        "data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start",
+        "data-[orientation=horizontal]:items-center data-[orientation=horizontal]:justify-between",
+        e
+      ),
+      ...a,
+      "data-slot": s ?? "steps-list"
+    }
+  );
+}, S = (t) => {
+  const { className: e, slot: s, ...a } = t;
+  return /* @__PURE__ */ o(
+    r.Item,
+    {
+      className: n(
+        "group/step",
+        "relative flex flex-1",
+        "data-[orientation=vertical]:items-start",
+        "data-[orientation=horizontal]:items-center",
+        "last:flex-initial last:**:data-[slot=steps-separator]:hidden",
+        e
+      ),
+      ...a,
+      "data-slot": s ?? "steps-item"
+    }
+  );
+}, b = (t) => {
+  const { className: e, slot: s, ...a } = t;
+  return /* @__PURE__ */ o(
+    r.Trigger,
+    {
+      className: n(
+        "inline-flex items-center gap-3",
+        "cursor-pointer rounded-full outline-none",
+        "disabled:pointer-events-none disabled:opacity-64",
+        e
+      ),
+      ...a,
+      "data-slot": s ?? "steps-trigger"
+    }
+  );
+}, z = (t) => {
+  const { className: e, children: s, slot: a, ...l } = t;
+  return /* @__PURE__ */ c(
+    r.Indicator,
+    {
+      className: n(
+        "flex shrink-0 items-center justify-center tabular-nums",
+        "size-(--steps-size)",
+        "bg-muted text-muted-foreground",
+        "font-medium text-sm",
+        "rounded-full border",
+        "transition-colors",
+        "in-focus-visible:ring-[3px] in-focus-visible:ring-ring",
+        "data-current:border-primary data-current:bg-primary data-current:text-primary-foreground",
+        "data-complete:border-primary data-complete:bg-primary data-complete:text-primary-foreground",
+        "[&_svg]:size-(--steps-icon-size) [&_svg]:shrink-0",
+        "motion-reduce:transition-none!",
+        e
+      ),
+      ...l,
+      "data-slot": a ?? "steps-indicator",
+      children: [
+        /* @__PURE__ */ o("span", { className: "group-data-complete/step:hidden", children: s }),
+        /* @__PURE__ */ o(d, { className: "hidden group-data-complete/step:block" })
+      ]
+    }
+  );
+}, y = (t) => {
+  const { className: e, slot: s, ...a } = t;
+  return /* @__PURE__ */ o(
+    r.Separator,
+    {
+      className: n(
+        "flex-1",
+        "bg-border",
+        "rounded-full",
+        "transition-colors",
+        "data-complete:bg-primary",
+        "data-[orientation=horizontal]:mx-(--steps-gutter) data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-full",
+        "data-[orientation=vertical]:absolute data-[orientation=vertical]:top-[calc(var(--steps-size)+var(--steps-gutter))] data-[orientation=vertical]:start-[calc(var(--steps-size)/2-1px)] data-[orientation=vertical]:h-full data-[orientation=vertical]:max-h-[calc(100%-(var(--steps-size)+var(--steps-gutter)*2))] data-[orientation=vertical]:w-0.5",
+        "motion-reduce:transition-none!",
+        e
+      ),
+      ...a,
+      "data-slot": s ?? "steps-separator"
+    }
+  );
+}, C = (t) => {
+  const { className: e, slot: s, ...a } = t;
+  return /* @__PURE__ */ o(
+    i.span,
+    {
+      className: n("font-medium text-sm leading-none", e),
+      ...a,
+      "data-slot": s ?? "steps-title"
+    }
+  );
+}, k = (t) => {
+  const { className: e, slot: s, ...a } = t;
+  return /* @__PURE__ */ o(
+    i.span,
+    {
+      className: n("text-muted-foreground text-xs", e),
+      ...a,
+      "data-slot": s ?? "steps-description"
+    }
+  );
+}, I = (t) => {
+  const { className: e, slot: s, ...a } = t;
+  return /* @__PURE__ */ o(
+    r.Content,
+    {
+      className: n("data-[orientation=vertical]:flex-1", e),
+      ...a,
+      "data-slot": s ?? "steps-content"
+    }
+  );
+}, T = (t) => {
+  const { className: e, slot: s, ...a } = t;
+  return /* @__PURE__ */ o(
+    r.CompletedContent,
+    {
+      className: n("data-[orientation=vertical]:flex-1", e),
+      ...a,
+      "data-slot": s ?? "steps-completed-content"
+    }
+  );
+}, j = ({ slot: t, ...e }) => /* @__PURE__ */ o(r.PrevTrigger, { ...e, "data-slot": t ?? "steps-previous" }), w = ({ slot: t, ...e }) => /* @__PURE__ */ o(r.NextTrigger, { ...e, "data-slot": t ?? "steps-next" });
+export {
+  N as Steps,
+  T as StepsCompletedContent,
+  I as StepsContent,
+  k as StepsDescription,
+  z as StepsIndicator,
+  S as StepsItem,
+  h as StepsList,
+  w as StepsNext,
+  j as StepsPrevious,
+  y as StepsSeparator,
+  C as StepsTitle,
+  b as StepsTrigger,
+  v as useSteps
+};
+//# sourceMappingURL=steps.js.map

package/dist/simples/steps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"steps.js","sources":["../../src/simples/steps.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport { Steps as ArkSteps, useStepsContext } from \"@ark-ui/react/steps\";\nimport { CheckIcon } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport const useSteps = useStepsContext;\n\nexport const Steps = (props: React.ComponentProps<typeof ArkSteps.Root>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSteps.Root\n      className={cn(\n        \"flex flex-col gap-4\",\n        \"data-[orientation=vertical]:min-h-32 data-[orientation=vertical]:flex-row data-[orientation=vertical]:gap-8\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"steps\"}\n    />\n  );\n};\n\nexport const StepsList = (\n  props: React.ComponentProps<typeof ArkSteps.List>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSteps.List\n      className={cn(\n        \"[--steps-gutter:--spacing(2)] [--steps-icon-size:--spacing(4)] [--steps-size:--spacing(8)]\",\n        \"flex\",\n        \"data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-start\",\n        \"data-[orientation=horizontal]:items-center data-[orientation=horizontal]:justify-between\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"steps-list\"}\n    />\n  );\n};\n\nexport const StepsItem = (\n  props: React.ComponentProps<typeof ArkSteps.Item>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSteps.Item\n      className={cn(\n        \"group/step\",\n        \"relative flex flex-1\",\n        \"data-[orientation=vertical]:items-start\",\n        \"data-[orientation=horizontal]:items-center\",\n        \"last:flex-initial last:**:data-[slot=steps-separator]:hidden\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"steps-item\"}\n    />\n  );\n};\n\ninterface StepsTriggerProps\n  extends React.ComponentProps<typeof ArkSteps.Trigger> {}\n\nexport const StepsTrigger = (props: StepsTriggerProps) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSteps.Trigger\n      className={cn(\n        \"inline-flex items-center gap-3\",\n        \"cursor-pointer rounded-full outline-none\",\n        \"disabled:pointer-events-none disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"steps-trigger\"}\n    />\n  );\n};\n\nexport const StepsIndicator = (\n  props: React.ComponentProps<typeof ArkSteps.Indicator>\n) => {\n  const { className, children, slot, ...rest } = props;\n\n  return (\n    <ArkSteps.Indicator\n      className={cn(\n        \"flex shrink-0 items-center justify-center tabular-nums\",\n        \"size-(--steps-size)\",\n        \"bg-muted text-muted-foreground\",\n        \"font-medium text-sm\",\n        \"rounded-full border\",\n        \"transition-colors\",\n        \"in-focus-visible:ring-[3px] in-focus-visible:ring-ring\",\n        \"data-current:border-primary data-current:bg-primary data-current:text-primary-foreground\",\n        \"data-complete:border-primary data-complete:bg-primary data-complete:text-primary-foreground\",\n        \"[&_svg]:size-(--steps-icon-size) [&_svg]:shrink-0\",\n        \"motion-reduce:transition-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"steps-indicator\"}\n    >\n      <span className=\"group-data-complete/step:hidden\">{children}</span>\n      <CheckIcon className=\"hidden group-data-complete/step:block\" />\n    </ArkSteps.Indicator>\n  );\n};\n\nexport const StepsSeparator = (\n  props: React.ComponentProps<typeof ArkSteps.Separator>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSteps.Separator\n      className={cn(\n        \"flex-1\",\n        \"bg-border\",\n        \"rounded-full\",\n        \"transition-colors\",\n        \"data-complete:bg-primary\",\n        \"data-[orientation=horizontal]:mx-(--steps-gutter) data-[orientation=horizontal]:h-0.5 data-[orientation=horizontal]:w-full\",\n        \"data-[orientation=vertical]:absolute data-[orientation=vertical]:top-[calc(var(--steps-size)+var(--steps-gutter))] data-[orientation=vertical]:start-[calc(var(--steps-size)/2-1px)] data-[orientation=vertical]:h-full data-[orientation=vertical]:max-h-[calc(100%-(var(--steps-size)+var(--steps-gutter)*2))] data-[orientation=vertical]:w-0.5\",\n        \"motion-reduce:transition-none!\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"steps-separator\"}\n    />\n  );\n};\n\nexport const StepsTitle = (props: React.ComponentProps<typeof ark.span>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.span\n      className={cn(\"font-medium text-sm leading-none\", className)}\n      {...rest}\n      data-slot={slot ?? \"steps-title\"}\n    />\n  );\n};\n\nexport const StepsDescription = (\n  props: React.ComponentProps<typeof ark.span>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.span\n      className={cn(\"text-muted-foreground text-xs\", className)}\n      {...rest}\n      data-slot={slot ?? \"steps-description\"}\n    />\n  );\n};\n\nexport const StepsContent = (\n  props: React.ComponentProps<typeof ArkSteps.Content>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSteps.Content\n      className={cn(\"data-[orientation=vertical]:flex-1\", className)}\n      {...rest}\n      data-slot={slot ?? \"steps-content\"}\n    />\n  );\n};\n\nexport const StepsCompletedContent = (\n  props: React.ComponentProps<typeof ArkSteps.CompletedContent>\n) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ArkSteps.CompletedContent\n      className={cn(\"data-[orientation=vertical]:flex-1\", className)}\n      {...rest}\n      data-slot={slot ?? \"steps-completed-content\"}\n    />\n  );\n};\n\nexport const StepsPrevious = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkSteps.PrevTrigger>\n) => <ArkSteps.PrevTrigger {...rest} data-slot={slot ?? \"steps-previous\"} />;\n\nexport const StepsNext = (\n  { slot, ...rest }: React.ComponentProps<typeof ArkSteps.NextTrigger>\n) => <ArkSteps.NextTrigger {...rest} data-slot={slot ?? \"steps-next\"} />;\n"],"names":["useSteps","useStepsContext","Steps","props","className","slot","rest","jsx","ArkSteps","cn","StepsList","StepsItem","StepsTrigger","StepsIndicator","children","jsxs","CheckIcon","StepsSeparator","StepsTitle","ark","StepsDescription","StepsContent","StepsCompletedContent","StepsPrevious","StepsNext"],"mappings":"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"}

package/dist/simples/suggestions.d.ts

@@ -0,0 +1,43 @@
+import { ark } from '@ark-ui/react/factory';
+import { default as React } from 'react';
+import { ButtonProps } from './button';
+/**
+ * A row of values on offer. **It does not know where they came from.**
+ *
+ * That is the whole reason it is here and not in `@kanzo-tech/ai`: the line that package draws is
+ * *does the component know a model exists*, and a strip of buttons that each commit a string does
+ * not. Recent searches, saved filters, a questionnaire's quick answers and a model's candidates are
+ * one component; the ✨ beside it is what says a model wrote these, and that stays next door.
+ *
+ * **Not a listbox, and this is the correction it exists to make.** Picking one leaves an *effect* —
+ * a value in a field — not a selection in a list, which makes it a command surface rather than a
+ * value surface. The version this replaces was an Ark listbox whose
+ * `value` was pinned to a hoisted empty array forever, with a comment explaining why; that comment
+ * was the rule being noticed and worked around instead of read.
+ *
+ * ARIA: nothing is declared. Each pill is a `<button>` with its own accessible name, in document
+ * order, so Tab reaches every one and a screen reader announces them as what they are. A
+ * `role="listbox"` here would promise a navigation model that is not implemented — the failure a
+ * composite role without its keyboard contract always is.
+ *
+ * Wraps by default. A caller that wants one scrolling line passes `flex-nowrap overflow-x-auto`.
+ */
+export declare const Suggestions: (props: React.ComponentProps<typeof ark.div>) => React.JSX.Element;
+export interface SuggestionProps extends Omit<ButtonProps, "onSelect" | "value"> {
+    /** What this pill commits. Also its identity — a strip never offers one value twice. */
+    value: string;
+    /** Given the value, so a handler needs no closure per pill. */
+    onSelect?: (value: string) => void;
+}
+/**
+ * One value on offer, as a pill.
+ *
+ * `onSelect` takes the value rather than the event, which is what lets a caller write one handler
+ * for the whole strip. `onClick` still fires first and still wins: calling `preventDefault` on it
+ * stops the select, so a pill can be intercepted without being rebuilt.
+ *
+ * Children default to the value. Give it children when the label and the value differ — the value
+ * is what gets committed either way.
+ */
+export declare const Suggestion: (props: SuggestionProps) => React.JSX.Element;
+//# sourceMappingURL=suggestions.d.ts.map

package/dist/simples/suggestions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestions.d.ts","sourceRoot":"","sources":["../../src/simples/suggestions.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,GAAG,CAAC,sBAUtE,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,CAAC;IAC9E,wFAAwF;IACxF,KAAK,EAAE,MAAM,CAAC;IACd,+DAA+D;IAC/D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,UAAU,GAAI,OAAO,eAAe,sBAoBhD,CAAC"}

package/dist/simples/suggestions.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import { ark as g } from "@ark-ui/react/factory";
+import { cn as n } from "../lib/cn.js";
+import { Button as p } from "./button.js";
+const v = (t) => {
+  const { className: e, slot: o, ...s } = t;
+  return /* @__PURE__ */ l(
+    g.div,
+    {
+      className: n("flex min-w-0 flex-wrap items-center gap-1.5", e),
+      ...s,
+      "data-slot": o ?? "suggestions"
+    }
+  );
+}, w = (t) => {
+  const { children: e, className: o, onClick: s, onSelect: r, size: m = "sm", slot: u, value: a, variant: c = "outline", ...f } = t;
+  return /* @__PURE__ */ l(
+    p,
+    {
+      className: n("h-auto max-w-full py-1", o),
+      onClick: (i) => {
+        s == null || s(i), i.defaultPrevented || r == null || r(a);
+      },
+      pill: !0,
+      size: m,
+      variant: c,
+      ...f,
+      slot: u ?? "suggestion",
+      children: e ?? a
+    }
+  );
+};
+export {
+  w as Suggestion,
+  v as Suggestions
+};
+//# sourceMappingURL=suggestions.js.map

package/dist/simples/suggestions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"suggestions.js","sources":["../../src/simples/suggestions.tsx"],"sourcesContent":["\"use client\";\n\nimport { ark } from \"@ark-ui/react/factory\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\nimport { Button, type ButtonProps } from \"./button\";\n\n/**\n * A row of values on offer. **It does not know where they came from.**\n *\n * That is the whole reason it is here and not in `@kanzo-tech/ai`: the line that package draws is\n * *does the component know a model exists*, and a strip of buttons that each commit a string does\n * not. Recent searches, saved filters, a questionnaire's quick answers and a model's candidates are\n * one component; the ✨ beside it is what says a model wrote these, and that stays next door.\n *\n * **Not a listbox, and this is the correction it exists to make.** Picking one leaves an *effect* —\n * a value in a field — not a selection in a list, which makes it a command surface rather than a\n * value surface. The version this replaces was an Ark listbox whose\n * `value` was pinned to a hoisted empty array forever, with a comment explaining why; that comment\n * was the rule being noticed and worked around instead of read.\n *\n * ARIA: nothing is declared. Each pill is a `<button>` with its own accessible name, in document\n * order, so Tab reaches every one and a screen reader announces them as what they are. A\n * `role=\"listbox\"` here would promise a navigation model that is not implemented — the failure a\n * composite role without its keyboard contract always is.\n *\n * Wraps by default. A caller that wants one scrolling line passes `flex-nowrap overflow-x-auto`.\n */\nexport const Suggestions = (props: React.ComponentProps<typeof ark.div>) => {\n  const { className, slot, ...rest } = props;\n\n  return (\n    <ark.div\n      className={cn(\"flex min-w-0 flex-wrap items-center gap-1.5\", className)}\n      {...rest}\n      data-slot={slot ?? \"suggestions\"}\n    />\n  );\n};\n\nexport interface SuggestionProps extends Omit<ButtonProps, \"onSelect\" | \"value\"> {\n  /** What this pill commits. Also its identity — a strip never offers one value twice. */\n  value: string;\n  /** Given the value, so a handler needs no closure per pill. */\n  onSelect?: (value: string) => void;\n}\n\n/**\n * One value on offer, as a pill.\n *\n * `onSelect` takes the value rather than the event, which is what lets a caller write one handler\n * for the whole strip. `onClick` still fires first and still wins: calling `preventDefault` on it\n * stops the select, so a pill can be intercepted without being rebuilt.\n *\n * Children default to the value. Give it children when the label and the value differ — the value\n * is what gets committed either way.\n */\nexport const Suggestion = (props: SuggestionProps) => {\n  const { children, className, onClick, onSelect, size = \"sm\", slot, value, variant = \"outline\", ...rest } =\n    props;\n\n  return (\n    <Button\n      className={cn(\"h-auto max-w-full py-1\", className)}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) onSelect?.(value);\n      }}\n      pill\n      size={size}\n      variant={variant}\n      {...rest}\n      slot={slot ?? \"suggestion\"}\n    >\n      {children ?? value}\n    </Button>\n  );\n};\n"],"names":[],"mappings":";;;;;AA4BO;AACL;AAEA;AACE;AAAK;AAAJ;AACuE;AAClE;AACe;AAAA;AAGzB;AAoBE;AAGA;AACE;AAAC;AAAA;AACkD;AAE/C;AACwC;AAC1C;AACI;AACJ;AACA;AACI;AACU;AAED;AAAA;AAGnB;;;;;"}

package/dist/simples/swatch.d.ts

@@ -0,0 +1,73 @@
+import { ark } from '@ark-ui/react/factory';
+import { default as React } from 'react';
+import { VariantProps } from 'tailwind-variants';
+/**
+ * A colour, drawn.
+ *
+ * Ark has no machine for this and should not: a swatch has no behaviour. What it does have is an
+ * ARIA contract, and stating it is the whole reason this is a component rather than a `<span>` at
+ * each call site — colour is never an identity channel on its own, so a swatch always sits beside
+ * text that names the thing it depicts. It is `aria-hidden`, carries no role and is never
+ * focusable. Wanting a focusable one means wanting something else: `ColorPickerSwatchTrigger` if
+ * the colour *is* the value, or a `RadioGroupCard` around this if the colour merely pictures a
+ * value that has a name.
+ *
+ * That distinction is load-bearing and was checked rather than assumed. Ark's swatch parts cannot
+ * serve as a display strip: all of them call `useColorPickerContext`, which is `strict` and throws
+ * outside a picker; `data-state="checked"` is computed as `color.isEqual(value)` against the one
+ * colour the machine holds, so in a strip of sixteen the highlight would land on whichever slot
+ * happened to match; and every trigger is a button labelled `select #2e3440 as the color`, which is
+ * the wrong sentence when what the reader is choosing is "Nord".
+ */
+declare const swatchVariants: import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    shape: {
+        square: string;
+        round: string;
+    };
+}, undefined, "shrink-0", {
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    shape: {
+        square: string;
+        round: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    shape: {
+        square: string;
+        round: string;
+    };
+}, undefined, "shrink-0", unknown, unknown, undefined>>;
+export interface SwatchProps extends Omit<React.ComponentProps<typeof ark.span>, "color">, VariantProps<typeof swatchVariants> {
+    /** The colour to paint. Data, not a variant — the sanctioned inline-style case. */
+    color: string;
+}
+export declare const Swatch: ({ color, size, shape, className, style, slot, ...rest }: SwatchProps) => React.JSX.Element;
+export interface SwatchGroupProps extends Omit<React.ComponentProps<typeof ark.span>, "color">, VariantProps<typeof swatchVariants> {
+    /**
+     * The colours, in order.
+     *
+     * Order is meaning, so this never sorts: for a categorical scheme the sequence *is* the
+     * colour-blindness mechanism (`orderScheme` derives it), and for a palette it is base16's slot
+     * order. A strip that tidied its input would be quietly discarding the reason it was ordered.
+     */
+    colors: readonly string[];
+}
+export declare const SwatchGroup: ({ colors, size, shape, className, slot, ...rest }: SwatchGroupProps) => React.JSX.Element;
+export {};
+//# sourceMappingURL=swatch.d.ts.map

package/dist/simples/swatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swatch.d.ts","sourceRoot":"","sources":["../../src/simples/swatch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAM,KAAK,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAG1D;;;;;;;;;;;;;;;;;GAiBG;AACH,QAAA,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uDAOlB,CAAC;AAEH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,EAC1D,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,mFAAmF;IACnF,KAAK,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,MAAM,GAAI,yDAAyD,WAAW,sBAQ1F,CAAC;AAEF,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,EAAE,OAAO,CAAC,EAC1D,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC;;;;;;OAMG;IACH,MAAM,EAAE,SAAS,MAAM,EAAE,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW,GAAI,mDAAmD,gBAAgB,sBAW9F,CAAC"}

package/dist/simples/swatch.js

@@ -0,0 +1,35 @@
+import { jsx as n } from "react/jsx-runtime";
+import { ark as d } from "@ark-ui/react/factory";
+import { tv as p } from "tailwind-variants";
+import { cn as m } from "../lib/cn.js";
+const l = p({
+  base: "shrink-0",
+  variants: {
+    size: { xs: "size-2.5", sm: "size-3", md: "size-4", lg: "size-5" },
+    shape: { square: "rounded-[2px]", round: "rounded-full" }
+  },
+  defaultVariants: { size: "sm", shape: "square" }
+}), u = ({ color: s, size: r, shape: e, className: t, style: o, slot: i, ...a }) => /* @__PURE__ */ n(
+  d.span,
+  {
+    "aria-hidden": !0,
+    className: m(l({ size: r, shape: e }), t),
+    style: { background: s, ...o },
+    ...a,
+    "data-slot": i ?? "swatch"
+  }
+), x = ({ colors: s, size: r, shape: e, className: t, slot: o, ...i }) => /* @__PURE__ */ n(
+  d.span,
+  {
+    "aria-hidden": !0,
+    className: m("flex items-center gap-0.5", t),
+    ...i,
+    "data-slot": o ?? "swatch-group",
+    children: s.map((a, c) => /* @__PURE__ */ n(u, { color: a, shape: e, size: r }, `${c}-${a}`))
+  }
+);
+export {
+  u as Swatch,
+  x as SwatchGroup
+};
+//# sourceMappingURL=swatch.js.map

package/dist/simples/swatch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swatch.js","sources":["../../src/simples/swatch.tsx"],"sourcesContent":["import { ark } from \"@ark-ui/react/factory\";\nimport type React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"../lib/cn\";\n\n/**\n * A colour, drawn.\n *\n * Ark has no machine for this and should not: a swatch has no behaviour. What it does have is an\n * ARIA contract, and stating it is the whole reason this is a component rather than a `<span>` at\n * each call site — colour is never an identity channel on its own, so a swatch always sits beside\n * text that names the thing it depicts. It is `aria-hidden`, carries no role and is never\n * focusable. Wanting a focusable one means wanting something else: `ColorPickerSwatchTrigger` if\n * the colour *is* the value, or a `RadioGroupCard` around this if the colour merely pictures a\n * value that has a name.\n *\n * That distinction is load-bearing and was checked rather than assumed. Ark's swatch parts cannot\n * serve as a display strip: all of them call `useColorPickerContext`, which is `strict` and throws\n * outside a picker; `data-state=\"checked\"` is computed as `color.isEqual(value)` against the one\n * colour the machine holds, so in a strip of sixteen the highlight would land on whichever slot\n * happened to match; and every trigger is a button labelled `select #2e3440 as the color`, which is\n * the wrong sentence when what the reader is choosing is \"Nord\".\n */\nconst swatchVariants = tv({\n  base: \"shrink-0\",\n  variants: {\n    size: { xs: \"size-2.5\", sm: \"size-3\", md: \"size-4\", lg: \"size-5\" },\n    shape: { square: \"rounded-[2px]\", round: \"rounded-full\" },\n  },\n  defaultVariants: { size: \"sm\", shape: \"square\" },\n});\n\nexport interface SwatchProps\n  extends Omit<React.ComponentProps<typeof ark.span>, \"color\">,\n    VariantProps<typeof swatchVariants> {\n  /** The colour to paint. Data, not a variant — the sanctioned inline-style case. */\n  color: string;\n}\n\nexport const Swatch = ({ color, size, shape, className, style, slot, ...rest }: SwatchProps) => (\n  <ark.span\n    aria-hidden\n    className={cn(swatchVariants({ size, shape }), className)}\n    style={{ background: color, ...style }}\n    {...rest}\n    data-slot={slot ?? \"swatch\"}\n  />\n);\n\nexport interface SwatchGroupProps\n  extends Omit<React.ComponentProps<typeof ark.span>, \"color\">,\n    VariantProps<typeof swatchVariants> {\n  /**\n   * The colours, in order.\n   *\n   * Order is meaning, so this never sorts: for a categorical scheme the sequence *is* the\n   * colour-blindness mechanism (`orderScheme` derives it), and for a palette it is base16's slot\n   * order. A strip that tidied its input would be quietly discarding the reason it was ordered.\n   */\n  colors: readonly string[];\n}\n\nexport const SwatchGroup = ({ colors, size, shape, className, slot, ...rest }: SwatchGroupProps) => (\n  <ark.span\n    aria-hidden\n    className={cn(\"flex items-center gap-0.5\", className)}\n    {...rest}\n    data-slot={slot ?? \"swatch-group\"}\n  >\n    {colors.map((c, i) => (\n      <Swatch color={c} key={`${i}-${c}`} shape={shape} size={size} />\n    ))}\n  </ark.span>\n);\n"],"names":["swatchVariants","tv","Swatch","color","size","shape","className","style","slot","rest","jsx","ark","cn","SwatchGroup","colors","c","i"],"mappings":";;;;AAuBA,MAAMA,IAAiBC,EAAG;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,MAAM,EAAE,IAAI,YAAY,IAAI,UAAU,IAAI,UAAU,IAAI,SAAA;AAAA,IACxD,OAAO,EAAE,QAAQ,iBAAiB,OAAO,eAAA;AAAA,EAAe;AAAA,EAE1D,iBAAiB,EAAE,MAAM,MAAM,OAAO,SAAA;AACxC,CAAC,GASYC,IAAS,CAAC,EAAE,OAAAC,GAAO,MAAAC,GAAM,OAAAC,GAAO,WAAAC,GAAW,OAAAC,GAAO,MAAAC,GAAM,GAAGC,EAAA,MACtE,gBAAAC;AAAA,EAACC,EAAI;AAAA,EAAJ;AAAA,IACC,eAAW;AAAA,IACX,WAAWC,EAAGZ,EAAe,EAAE,MAAAI,GAAM,OAAAC,EAAA,CAAO,GAAGC,CAAS;AAAA,IACxD,OAAO,EAAE,YAAYH,GAAO,GAAGI,EAAA;AAAA,IAC9B,GAAGE;AAAA,IACJ,aAAWD,KAAQ;AAAA,EAAA;AACrB,GAgBWK,IAAc,CAAC,EAAE,QAAAC,GAAQ,MAAAV,GAAM,OAAAC,GAAO,WAAAC,GAAW,MAAAE,GAAM,GAAGC,EAAA,MACrE,gBAAAC;AAAA,EAACC,EAAI;AAAA,EAAJ;AAAA,IACC,eAAW;AAAA,IACX,WAAWC,EAAG,6BAA6BN,CAAS;AAAA,IACnD,GAAGG;AAAA,IACJ,aAAWD,KAAQ;AAAA,IAElB,YAAO,IAAI,CAACO,GAAGC,wBACbd,GAAA,EAAO,OAAOa,GAAqB,OAAAV,GAAc,MAAAD,KAA3B,GAAGY,CAAC,IAAID,CAAC,EAA8B,CAC/D;AAAA,EAAA;AACH;"}

package/dist/simples/switch.d.ts

@@ -0,0 +1,5 @@
+import { Switch as ArkSwitch } from '@ark-ui/react/switch';
+import { default as React } from 'react';
+export declare const useSwitch: () => import('@ark-ui/react').UseSwitchContext;
+export declare const Switch: (props: React.ComponentProps<typeof ArkSwitch.Root>) => React.JSX.Element;
+//# sourceMappingURL=switch.d.ts.map

package/dist/simples/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/simples/switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,SAAS,EAAoB,MAAM,sBAAsB,CAAC;AAC7E,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,SAAS,gDAAmB,CAAC;AAE1C,eAAO,MAAM,MAAM,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,IAAI,CAAC,sBAwExE,CAAC"}

package/dist/simples/switch.js

@@ -0,0 +1,71 @@
+import { jsxs as d, jsx as a } from "react/jsx-runtime";
+import { useSwitchContext as l, Switch as t } from "@ark-ui/react/switch";
+import { cn as e } from "../lib/cn.js";
+const m = l, g = (s) => {
+  const { children: i, className: r, tabIndex: n, slot: o, ...c } = s;
+  return /* @__PURE__ */ d(
+    t.Root,
+    {
+      className: e(
+        "group/switch",
+        "[--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)]",
+        "inline-flex w-fit items-center gap-2",
+        "data-disabled:pointer-events-none data-disabled:opacity-64",
+        r
+      ),
+      ...c,
+      "data-slot": o ?? "switch",
+      children: [
+        /* @__PURE__ */ a(
+          t.Control,
+          {
+            className: e(
+              "h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)]",
+              "p-px",
+              "flex shrink-0 items-center",
+              "rounded-full border border-transparent",
+              "transition-all",
+              "outline-none group-data-[focus-visible]/switch:ring-[3px] group-data-invalid/switch:ring-[3px]",
+              "group-data-[focus-visible]/switch:border-primary group-data-[focus-visible]/switch:ring-ring",
+              "group-data-invalid/switch:border-destructive group-data-invalid/switch:ring-destructive/24",
+              "group-data-[state=checked]/switch:bg-primary",
+              // The track IS this control's boundary — `border` is transparent — and the thumb is
+              // `bg-background`, so the track is the only thing that says the switch is off. A surface
+              // step puts the thumb at ~1.07:1 against it and the off state stops being readable, which
+              // is 1.4.11 asking about a *state*, not about a fill. Boundary contrast, spelled as a fill.
+              "group-data-[state=unchecked]/switch:bg-input",
+              "motion-reduce:transition-none!"
+            ),
+            "data-slot": "switch-control",
+            children: /* @__PURE__ */ a(
+              t.Thumb,
+              {
+                className: e(
+                  "block",
+                  "aspect-square h-full w-auto",
+                  "bg-background",
+                  "rounded-full ring-0",
+                  "pointer-events-none",
+                  "transition-transform",
+                  "data-[state=checked]:translate-x-[calc(var(--thumb-size)-4px)]",
+                  "dark:data-[state=checked]:bg-primary-foreground",
+                  "data-[state=unchecked]:translate-x-0",
+                  "dark:data-[state=unchecked]:bg-foreground",
+                  "motion-reduce:transition-none!"
+                ),
+                "data-slot": "switch-thumb"
+              }
+            )
+          }
+        ),
+        i === void 0 ? null : /* @__PURE__ */ a(t.Label, { className: "text-sm leading-none", "data-slot": "switch-label", children: i }),
+        /* @__PURE__ */ a(t.HiddenInput, { tabIndex: n })
+      ]
+    }
+  );
+};
+export {
+  g as Switch,
+  m as useSwitch
+};
+//# sourceMappingURL=switch.js.map

package/dist/simples/switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.js","sources":["../../src/simples/switch.tsx"],"sourcesContent":["import { Switch as ArkSwitch, useSwitchContext } from \"@ark-ui/react/switch\";\nimport type React from \"react\";\nimport { cn } from \"../lib/cn\";\n\nexport const useSwitch = useSwitchContext;\n\nexport const Switch = (props: React.ComponentProps<typeof ArkSwitch.Root>) => {\n  const { children, className, tabIndex, slot, ...rest } = props;\n\n  return (\n    <ArkSwitch.Root\n      className={cn(\n        \"group/switch\",\n        \"[--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)]\",\n        \"inline-flex w-fit items-center gap-2\",\n        \"data-disabled:pointer-events-none data-disabled:opacity-64\",\n        className\n      )}\n      {...rest}\n      data-slot={slot ?? \"switch\"}\n    >\n      {/* The track, and everything that used to be on the root.\n          **It moved because the root has to be able to hold a label.** `children` were accepted by\n          the type and rendered nowhere: the root is Ark's `<label for=…>` and carried the track's\n          own box, so a caller passing text got a bare toggle with **no accessible name at all** —\n          measured on `/docs/forms/switch`, whose own example passes one. WCAG 4.1.2, and the ring\n          is the reason this is a part rather than a wrapper: on the root it would have drawn around\n          the label too. */}\n      <ArkSwitch.Control\n        className={cn(\n          \"h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)]\",\n          \"p-px\",\n          \"flex shrink-0 items-center\",\n          \"rounded-full border border-transparent\",\n          \"transition-all\",\n          \"outline-none group-data-[focus-visible]/switch:ring-[3px] group-data-invalid/switch:ring-[3px]\",\n          \"group-data-[focus-visible]/switch:border-primary group-data-[focus-visible]/switch:ring-ring\",\n          \"group-data-invalid/switch:border-destructive group-data-invalid/switch:ring-destructive/24\",\n          \"group-data-[state=checked]/switch:bg-primary\",\n          // The track IS this control's boundary — `border` is transparent — and the thumb is\n          // `bg-background`, so the track is the only thing that says the switch is off. A surface\n          // step puts the thumb at ~1.07:1 against it and the off state stops being readable, which\n          // is 1.4.11 asking about a *state*, not about a fill. Boundary contrast, spelled as a fill.\n          \"group-data-[state=unchecked]/switch:bg-input\",\n          \"motion-reduce:transition-none!\"\n        )}\n        data-slot=\"switch-control\"\n      >\n        <ArkSwitch.Thumb\n          className={cn(\n            \"block\",\n            \"aspect-square h-full w-auto\",\n            \"bg-background\",\n            \"rounded-full ring-0\",\n            \"pointer-events-none\",\n            \"transition-transform\",\n            \"data-[state=checked]:translate-x-[calc(var(--thumb-size)-4px)]\",\n            \"dark:data-[state=checked]:bg-primary-foreground\",\n            \"data-[state=unchecked]:translate-x-0\",\n            \"dark:data-[state=unchecked]:bg-foreground\",\n            \"motion-reduce:transition-none!\"\n          )}\n          data-slot=\"switch-thumb\"\n        />\n      </ArkSwitch.Control>\n\n      {/* Not a second export: Shark ships `Switch` and `useSwitch` and nothing else, and this stays\n          one component that renders its own parts — the same argument the docs page already makes\n          about Control, Thumb and HiddenInput. */}\n      {children === undefined ? null : (\n        <ArkSwitch.Label className=\"text-sm leading-none\" data-slot=\"switch-label\">\n          {children}\n        </ArkSwitch.Label>\n      )}\n\n      <ArkSwitch.HiddenInput tabIndex={tabIndex} />\n    </ArkSwitch.Root>\n  );\n};\n"],"names":["useSwitch","useSwitchContext","Switch","props","children","className","tabIndex","slot","rest","jsxs","ArkSwitch","cn","jsx"],"mappings":";;;AAIO,MAAMA,IAAYC,GAEZC,IAAS,CAACC,MAAuD;AAC5E,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,UAAAC,GAAU,MAAAC,GAAM,GAAGC,MAASL;AAEzD,SACE,gBAAAM;AAAA,IAACC,EAAU;AAAA,IAAV;AAAA,MACC,WAAWC;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MACJ,aAAWD,KAAQ;AAAA,MASnB,UAAA;AAAA,QAAA,gBAAAK;AAAA,UAACF,EAAU;AAAA,UAAV;AAAA,YACC,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA,cACA;AAAA;AAAA;AAAA;AAAA;AAAA,cAKA;AAAA,cACA;AAAA,YAAA;AAAA,YAEF,aAAU;AAAA,YAEV,UAAA,gBAAAC;AAAA,cAACF,EAAU;AAAA,cAAV;AAAA,gBACC,WAAWC;AAAA,kBACT;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,kBACA;AAAA,gBAAA;AAAA,gBAEF,aAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,QAMDP,MAAa,SAAY,OACxB,gBAAAQ,EAACF,EAAU,OAAV,EAAgB,WAAU,wBAAuB,aAAU,gBACzD,UAAAN,EAAA,CACH;AAAA,QAGF,gBAAAQ,EAACF,EAAU,aAAV,EAAsB,UAAAJ,EAAA,CAAoB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjD;"}

package/dist/simples/table.d.ts

@@ -0,0 +1,55 @@
+import { ark } from '@ark-ui/react/factory';
+import { default as React } from 'react';
+interface TableProps extends React.ComponentProps<typeof ark.table> {
+    /**
+     * Whether the table rows are hoverable.
+     *
+     * @default true
+     */
+    isHoverable?: boolean;
+    /**
+     * The variant of the table.
+     *
+     * @default "plain"
+     */
+    variant?: "plain" | "striped";
+    /**
+     * Pin the header row while the rows scroll under it.
+     *
+     * This has to change the wrapper, not just the cells: `position: sticky` resolves against the
+     * nearest scroll container, and the wrapper's `overflow-auto` is one — so a sticky `th` pins to
+     * a box exactly as tall as its own content, which never moves. WHICH scroll container it should
+     * pin to is what `maxHeight` decides, and the two answers behave differently enough to choose
+     * between deliberately.
+     *
+     * The pinned cells need to be opaque or the rows read through them; `bg-background` assumes the
+     * table sits on the page surface, so on a `Card` pass `className="bg-card"` to `TableHead`.
+     *
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * Give the table its own scroll region, and pin the header to that.
+     *
+     * With it, the wrapper stays a scroll container and simply gains a height: the header pins to
+     * the table's own scrollport and a table wider than its box still scrolls sideways. Without it,
+     * `stickyHeader` stands the wrapper's overflow down so the header pins to whatever encloses the
+     * table — a `ShellMain`, a dialog body, the page — which reads better, one scrollbar instead of
+     * two, but gives up that sideways scroll: CSS cannot keep one axis scrollable while the other
+     * stays sticky. Set it whenever the columns may not fit, which on a narrow viewport is most
+     * tables.
+     */
+    maxHeight?: string | number;
+}
+export declare const Table: (props: TableProps) => React.JSX.Element;
+export declare const TableHeader: (props: React.ComponentProps<typeof ark.thead>) => React.JSX.Element;
+export interface TableBodyProps extends React.ComponentProps<typeof ark.tbody> {
+}
+export declare const TableBody: (props: TableBodyProps) => React.JSX.Element;
+export declare const TableFooter: (props: React.ComponentProps<typeof ark.tfoot>) => React.JSX.Element;
+export declare const TableRow: (props: React.ComponentProps<typeof ark.tr>) => React.JSX.Element;
+export declare const TableHead: (props: React.ComponentProps<typeof ark.th>) => React.JSX.Element;
+export declare const TableCell: (props: React.ComponentProps<typeof ark.td>) => React.JSX.Element;
+export declare const TableCaption: (props: React.ComponentProps<typeof ark.caption>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=table.d.ts.map

package/dist/simples/table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["../../src/simples/table.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC5C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,UAAU,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,KAAK,CAAC;IACjE;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B;;;;;;;;;;;;;OAaG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;;;;;;OAUG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,KAAK,GAAI,OAAO,UAAU,sBAkDtC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,KAAK,CAAC,sBAUxE,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,KAAK,CAAC;CAAG;AAEnD,eAAO,MAAM,SAAS,GAAI,OAAO,cAAc,sBAU9C,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,KAAK,CAAC,sBAgBxE,CAAC;AAEF,eAAO,MAAM,QAAQ,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,CAAC,sBAyBlE,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,CAAC,sBAiBnE,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,CAAC,sBAcnE,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,KAAK,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,OAAO,CAAC,sBAWhD,CAAC"}