@evinvest/uikit 0.30.0 → 0.32.0

package/dist/components/derived/field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/derived/field.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Label } from \"../atomic/label\";\nimport { walkElements } from \"../../primitives/walk-elements\";\nimport { isLabelable, markLabelable } from \"../../primitives/labelable\";\nimport { FieldControlContext, useFieldClaims } from \"../atomic/field-context\";\nimport {\n  FIELD_BASE,\n  FIELD_SET,\n  FIELD_LEGEND,\n  FIELD_GROUP,\n  FIELD_CONTENT,\n  FIELD_LABEL,\n  FIELD_TITLE,\n  FIELD_DESCRIPTION,\n  FIELD_SEPARATOR,\n  FIELD_SEPARATOR_LINE,\n  FIELD_SEPARATOR_CONTENT,\n  FIELD_ERROR,\n  fieldOrientation,\n  type FieldOrientation,\n} from \"../../generated/field\";\n\nexport type { FieldOrientation };\n\nexport function FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(FIELD_SET, className)}\n      {...props}\n    />\n  );\n}\n\nexport function FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(FIELD_LEGEND, className)}\n      {...props}\n    />\n  );\n}\n\nexport function FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(FIELD_GROUP, className)}\n      {...props}\n    />\n  );\n}\n\n/**\n * A labelled control. `Field` mints one id and hands it to both ends: its\n * `FieldLabel` takes it as `for`, and the kit's `Input`, `Textarea`,\n * `NativeSelect`, `SelectTrigger`, `Checkbox` and `Switch` take it as `id` —\n * each only when the caller passed none. `controlId` names the id instead of\n * minting one. One control per `Field`: a field that holds two has to name\n * their ids by hand, or both would claim the one id (a development warning\n * says so).\n */\nexport function Field({\n  className,\n  orientation = \"vertical\",\n  controlId,\n  ...props\n}: React.ComponentProps<\"div\"> & { orientation?: FieldOrientation; controlId?: string }) {\n  const minted = React.useId();\n  const claim = useFieldClaims();\n  const id = controlId ?? minted;\n  const control = React.useMemo(() => ({ id, claim }), [id, claim]);\n  return (\n    <FieldControlContext.Provider value={control}>\n      <div\n        role=\"group\"\n        data-slot=\"field\"\n        data-orientation={orientation}\n        className={cn(FIELD_BASE, fieldOrientation[orientation], className)}\n        {...props}\n      />\n    </FieldControlContext.Provider>\n  );\n}\n\nmarkLabelable(Field);\n\nexport function FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(FIELD_CONTENT, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface FieldLabelProps extends Omit<React.ComponentProps<typeof Label>, \"htmlFor\"> {\n  /** `null` opts out of the `Field`'s id: the label then has no `for` at all. */\n  htmlFor?: string | null;\n}\n\n/**\n * Takes its `Field`'s id as `for` unless it wraps a control itself — a label\n * around an `<input>` already labels it, and a `for` pointing elsewhere would\n * steal the click. A control inside a component of yours is invisible to that\n * check; pass `htmlFor={null}` there.\n */\nexport function FieldLabel({ className, htmlFor, children, ...props }: FieldLabelProps) {\n  const field = React.useContext(FieldControlContext);\n  const target = htmlFor === null ? undefined : (htmlFor ?? (wrapsControl(children) ? undefined : field?.id));\n  return (\n    <Label\n      data-slot=\"field-label\"\n      htmlFor={target}\n      className={cn(FIELD_LABEL, className)}\n      {...props}\n    >\n      {children}\n    </Label>\n  );\n}\n\n// The labelable elements (HTML's list, less `output`/`meter`/`progress`, which a\n// field label never wraps) and the kit's controls that render one — plus a\n// nested `Field`, the choice-card shape, whose control is labelled by its own.\n// The kit's controls carry a mark (`primitives/labelable`) rather than sitting\n// in a set here: a set would import every control into every page with a Field.\nconst LABELABLE_TAGS = new Set([\"input\", \"select\", \"textarea\", \"button\"]);\n\nfunction wrapsControl(children: React.ReactNode): boolean {\n  let found = false;\n  walkElements(children, (element) => {\n    if (found) return false;\n    const { type } = element;\n    const props = element.props as { type?: unknown };\n    if (typeof type === \"string\" ? LABELABLE_TAGS.has(type) && props.type !== \"hidden\" : isLabelable(type)) {\n      found = true;\n    }\n    return !found;\n  });\n  return found;\n}\n\nexport function FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(FIELD_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(FIELD_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n\nexport function FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & { children?: React.ReactNode }) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(FIELD_SEPARATOR, className)}\n      {...props}\n    >\n      <div role=\"separator\" className={FIELD_SEPARATOR_LINE} />\n      {children && (\n        <span\n          className={FIELD_SEPARATOR_CONTENT}\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  );\n}\n\nexport function FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const content = React.useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    if (!errors) {\n      return null;\n    }\n\n    if (errors?.length === 1 && errors[0]?.message) {\n      return errors[0].message;\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {errors.map(\n          (error, index) => error?.message && <li key={index}>{error.message}</li>,\n        )}\n      </ul>\n    );\n  }, [children, errors]);\n\n  if (!content) {\n    return null;\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(FIELD_ERROR, className)}\n      {...props}\n    >\n      {content}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/{form.js → derived/form.js}

@@ -1,10 +1,10 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { Label } from "./label.js";
-import { Slot } from "../primitives/slot.js";
-import { FORM_DESCRIPTION, FORM_ITEM, FORM_MESSAGE } from "../generated/form.js";
+import { cn } from "../../lib/cn.js";
+import { Label } from "../atomic/label.js";
+import { Slot } from "../../primitives/slot.js";
+import { FORM_DESCRIPTION, FORM_ITEM, FORM_MESSAGE } from "../../generated/form.js";
 const FormItemContext = React.createContext(null);
 function useFormItem() {
   const ctx = React.useContext(FormItemContext);

package/dist/components/derived/form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/derived/form.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Label } from \"../atomic/label\";\nimport { Slot } from \"../../primitives/slot\";\nimport { FORM_DESCRIPTION, FORM_ITEM, FORM_MESSAGE } from \"../../generated/form\";\n\n/**\n * Dep-light, presentational form primitives. We keep the ARIA id-wiring of\n * shadcn's form (label/control/description/message share an id so\n * `aria-describedby`/`id` line up) but drop `react-hook-form`'s state engine:\n * validation and field state are the consumer's job. `FormItem` mints an id via\n * `React.useId` and exposes it through `FormItemContext`.\n */\ntype FormItemContextValue = {\n  id: string;\n  formItemId: string;\n  formDescriptionId: string;\n  formMessageId: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue | null>(null);\n\nfunction useFormItem(): FormItemContextValue {\n  const ctx = React.useContext(FormItemContext);\n  if (!ctx) {\n    throw new Error(\"Form parts must be used within <FormItem>\");\n  }\n  return ctx;\n}\n\nexport function Form({ ...props }: React.ComponentProps<\"form\">) {\n  return <form data-slot=\"form\" {...props} />;\n}\n\nexport function FormItem({ className, ...props }: React.ComponentProps<\"div\">) {\n  const id = React.useId();\n  const value = React.useMemo<FormItemContextValue>(\n    () => ({\n      id,\n      formItemId: `${id}-form-item`,\n      formDescriptionId: `${id}-form-item-description`,\n      formMessageId: `${id}-form-item-message`,\n    }),\n    [id],\n  );\n\n  return (\n    <FormItemContext.Provider value={value}>\n      <div data-slot=\"form-item\" className={cn(FORM_ITEM, className)} {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\nexport function FormLabel({\n  className,\n  error,\n  ...props\n}: React.ComponentProps<typeof Label> & { error?: boolean }) {\n  const { formItemId } = useFormItem();\n\n  return (\n    <Label\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-accent-error\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\nexport function FormControl({\n  error,\n  ...props\n}: React.ComponentProps<typeof Slot> & { error?: boolean }) {\n  const { formItemId, formDescriptionId, formMessageId } = useFormItem();\n\n  return (\n    <Slot\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={\n        !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`\n      }\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\nexport function FormDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { formDescriptionId } = useFormItem();\n\n  return (\n    <p\n      data-slot=\"form-description\"\n      id={formDescriptionId}\n      className={cn(FORM_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n\nexport function FormMessage({ className, children, ...props }: React.ComponentProps<\"p\">) {\n  const { formMessageId } = useFormItem();\n\n  if (!children) {\n    return null;\n  }\n\n  return (\n    <p\n      data-slot=\"form-message\"\n      id={formMessageId}\n      className={cn(FORM_MESSAGE, className)}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n}\n"],"mappings":";AAiCS;AA/BT,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,aAAa;AACtB,SAAS,YAAY;AACrB,SAAS,kBAAkB,WAAW,oBAAoB;AAgB1D,MAAM,kBAAkB,MAAM,cAA2C,IAAI;AAE7E,SAAS,cAAoC;AAC3C,QAAM,MAAM,MAAM,WAAW,eAAe;AAC5C,MAAI,CAAC,KAAK;AACR,UAAM,IAAI,MAAM,2CAA2C;AAAA,EAC7D;AACA,SAAO;AACT;AAEO,SAAS,KAAK,EAAE,GAAG,MAAM,GAAiC;AAC/D,SAAO,oBAAC,UAAK,aAAU,QAAQ,GAAG,OAAO;AAC3C;AAEO,SAAS,SAAS,EAAE,WAAW,GAAG,MAAM,GAAgC;AAC7E,QAAM,KAAK,MAAM,MAAM;AACvB,QAAM,QAAQ,MAAM;AAAA,IAClB,OAAO;AAAA,MACL;AAAA,MACA,YAAY,GAAG,EAAE;AAAA,MACjB,mBAAmB,GAAG,EAAE;AAAA,MACxB,eAAe,GAAG,EAAE;AAAA,IACtB;AAAA,IACA,CAAC,EAAE;AAAA,EACL;AAEA,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OACxB,8BAAC,SAAI,aAAU,aAAY,WAAW,GAAG,WAAW,SAAS,GAAI,GAAG,OAAO,GAC7E;AAEJ;AAEO,SAAS,UAAU;AAAA,EACxB;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAA6D;AAC3D,QAAM,EAAE,WAAW,IAAI,YAAY;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,CAAC,CAAC;AAAA,MACd,WAAW,GAAG,uCAAuC,SAAS;AAAA,MAC9D,SAAS;AAAA,MACR,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,GAAG;AACL,GAA4D;AAC1D,QAAM,EAAE,YAAY,mBAAmB,cAAc,IAAI,YAAY;AAErE,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,IAAI;AAAA,MACJ,oBACE,CAAC,QAAQ,GAAG,iBAAiB,KAAK,GAAG,iBAAiB,IAAI,aAAa;AAAA,MAEzE,gBAAc,CAAC,CAAC;AAAA,MACf,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,gBAAgB,EAAE,WAAW,GAAG,MAAM,GAA8B;AAClF,QAAM,EAAE,kBAAkB,IAAI,YAAY;AAE1C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,IAAI;AAAA,MACJ,WAAW,GAAG,kBAAkB,SAAS;AAAA,MACxC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,YAAY,EAAE,WAAW,UAAU,GAAG,MAAM,GAA8B;AACxF,QAAM,EAAE,cAAc,IAAI,YAAY;AAEtC,MAAI,CAAC,UAAU;AACb,WAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,IAAI;AAAA,MACJ,WAAW,GAAG,cAAc,SAAS;AAAA,MACpC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/components/derived/icon-button.js

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { ICON_BUTTON_BASE, ICON_BUTTON_PRESSED, iconButtonSizeClasses } from "../../generated/icon-button.js";
+import { buttonVariants } from "../atomic/button.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../atomic/tooltip.js";
+const IconButton = React.forwardRef(function IconButton2({ variant = "ghost", size = "md", pressed, tooltip, className, type = "button", ...props }, ref) {
+  const button = /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type,
+      "data-slot": "icon-button",
+      "data-variant": variant,
+      "aria-pressed": pressed,
+      className: cn(
+        buttonVariants({ variant, size, icon: true }),
+        iconButtonSizeClasses[size],
+        ICON_BUTTON_BASE,
+        pressed && ICON_BUTTON_PRESSED,
+        className
+      ),
+      ...props
+    }
+  );
+  if (tooltip === void 0) return button;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+  ] });
+});
+export {
+  IconButton
+};
+//# sourceMappingURL=icon-button.js.map

package/dist/components/derived/icon-button.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/derived/icon-button.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { ICON_BUTTON_BASE, ICON_BUTTON_PRESSED, iconButtonSizeClasses, type IconButtonSize } from \"../../generated/icon-button\";\nimport { buttonVariants } from \"../atomic/button\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"../atomic/tooltip\";\n\nexport type { IconButtonSize };\nexport type IconButtonVariant = \"outline\" | \"ghost\";\n\nexport interface IconButtonProps extends Omit<React.ComponentPropsWithoutRef<\"button\">, \"aria-label\" | \"children\"> {\n  /** Required: a glyph alone names nothing. */\n  \"aria-label\": string;\n  /** The glyph, 16 px. */\n  children: React.ReactNode;\n  variant?: IconButtonVariant;\n  size?: IconButtonSize;\n  /** Toggled on: the active fill, and `aria-pressed` for assistive tech. */\n  pressed?: boolean;\n  /** Shown in a Tooltip on hover and focus. */\n  tooltip?: React.ReactNode;\n}\n\n/**\n * A square button holding one glyph. It forwards its ref (also on React 18,\n * where function components drop `ref`) so it can be the child of any\n * `asChild` trigger; with a `tooltip` the same element anchors the tooltip.\n */\nexport const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { variant = \"ghost\", size = \"md\", pressed, tooltip, className, type = \"button\", ...props },\n  ref,\n) {\n  const button = (\n    <button\n      ref={ref}\n      type={type}\n      data-slot=\"icon-button\"\n      data-variant={variant}\n      aria-pressed={pressed}\n      className={cn(\n        buttonVariants({ variant, size, icon: true }),\n        iconButtonSizeClasses[size],\n        ICON_BUTTON_BASE,\n        pressed && ICON_BUTTON_PRESSED,\n        className,\n      )}\n      {...props}\n    />\n  );\n  if (tooltip === undefined) return button;\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent>{tooltip}</TooltipContent>\n    </Tooltip>\n  );\n});\n"],"mappings":"AAgCI,cAkBA,YAlBA;AAhCJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,kBAAkB,qBAAqB,6BAAkD;AAClG,SAAS,sBAAsB;AAC/B,SAAS,SAAS,gBAAgB,sBAAsB;AAuBjD,MAAM,aAAa,MAAM,WAA+C,SAASA,YACtF,EAAE,UAAU,SAAS,OAAO,MAAM,SAAS,SAAS,WAAW,OAAO,UAAU,GAAG,MAAM,GACzF,KACA;AACA,QAAM,SACJ;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,gBAAc;AAAA,MACd,WAAW;AAAA,QACT,eAAe,EAAE,SAAS,MAAM,MAAM,KAAK,CAAC;AAAA,QAC5C,sBAAsB,IAAI;AAAA,QAC1B;AAAA,QACA,WAAW;AAAA,QACX;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEF,MAAI,YAAY,OAAW,QAAO;AAClC,SACE,qBAAC,WACC;AAAA,wBAAC,kBAAe,SAAO,MAAE,kBAAO;AAAA,IAChC,oBAAC,kBAAgB,mBAAQ;AAAA,KAC3B;AAEJ,CAAC;","names":["IconButton"]}

package/dist/components/{input-group.js → derived/input-group.js}

@@ -1,10 +1,10 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { Button } from "./button.js";
-import { Input } from "./input.js";
-import { Textarea } from "./textarea.js";
+import { cn } from "../../lib/cn.js";
+import { Button } from "../atomic/button.js";
+import { Input } from "../atomic/input.js";
+import { Textarea } from "../atomic/textarea.js";
 import {
   INPUT_GROUP_ADDON_BASE,
   INPUT_GROUP_BASE,
@@ -14,7 +14,7 @@ import {
   INPUT_GROUP_TEXTAREA_CONTROL,
   inputGroupAddonAligns,
   inputGroupButtonSizes
-} from "../generated/input-group.js";
+} from "../../generated/input-group.js";
 function InputGroup({
   className,
   ...props

package/dist/components/derived/input-group.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/derived/input-group.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Button, type ButtonProps } from \"../atomic/button\";\nimport { Input } from \"../atomic/input\";\nimport { Textarea } from \"../atomic/textarea\";\nimport {\n  INPUT_GROUP_ADDON_BASE,\n  INPUT_GROUP_BASE,\n  INPUT_GROUP_BUTTON_BASE,\n  INPUT_GROUP_INPUT_CONTROL,\n  INPUT_GROUP_TEXT,\n  INPUT_GROUP_TEXTAREA_CONTROL,\n  inputGroupAddonAligns,\n  inputGroupButtonSizes,\n  type InputGroupAddonAlign,\n  type InputGroupButtonSize,\n} from \"../../generated/input-group\";\n\nexport type { InputGroupAddonAlign, InputGroupButtonSize };\n\nexport function InputGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(INPUT_GROUP_BASE, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface InputGroupAddonProps extends React.ComponentProps<\"div\"> {\n  align?: InputGroupAddonAlign;\n}\n\nexport function InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: InputGroupAddonProps) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(\n        INPUT_GROUP_ADDON_BASE,\n        inputGroupAddonAligns[align],\n        className,\n      )}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) return;\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus();\n      }}\n      {...props}\n    />\n  );\n}\n\nexport interface InputGroupButtonProps\n  extends Omit<ButtonProps, \"size\"> {\n  size?: InputGroupButtonSize;\n}\n\nexport function InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: InputGroupButtonProps) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(\n        INPUT_GROUP_BUTTON_BASE,\n        inputGroupButtonSizes[size],\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupText({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(INPUT_GROUP_TEXT, className)}\n      {...props}\n    />\n  );\n}\n\n// The group, not the control, owns the height, so the control takes neither the\n// kit's `size` nor the native one `Input` gave up for it.\nexport function InputGroupInput({\n  className,\n  ...props\n}: Omit<React.ComponentProps<\"input\">, \"size\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(INPUT_GROUP_INPUT_CONTROL, className)}\n      {...props}\n    />\n  );\n}\n\nexport function InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(INPUT_GROUP_TEXTAREA_CONTROL, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":";AA2BI;AAzBJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB,SAAS,cAAgC;AACzC,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAIA,SAAS,WAAW;AAAA,EACzB;AAAA,EACA,GAAG;AACL,GAAgC;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,MAAK;AAAA,MACL,WAAW,GAAG,kBAAkB,SAAS;AAAA,MACxC,GAAG;AAAA;AAAA,EACN;AAEJ;AAMO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,QAAQ;AAAA,EACR,GAAG;AACL,GAAyB;AACvB,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,WAAW;AAAA,QACT;AAAA,QACA,sBAAsB,KAAK;AAAA,QAC3B;AAAA,MACF;AAAA,MACA,SAAS,CAAC,MAAM;AACd,YAAK,EAAE,OAAuB,QAAQ,QAAQ,EAAG;AACjD,UAAE,cAAc,eAAe,cAAc,OAAO,GAAG,MAAM;AAAA,MAC/D;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAOO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA,OAAO;AAAA,EACP,UAAU;AAAA,EACV,OAAO;AAAA,EACP,GAAG;AACL,GAA0B;AACxB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,aAAW;AAAA,MACX;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA,sBAAsB,IAAI;AAAA,QAC1B;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,eAAe;AAAA,EAC7B;AAAA,EACA,GAAG;AACL,GAAiC;AAC/B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,kBAAkB,SAAS;AAAA,MACxC,GAAG;AAAA;AAAA,EACN;AAEJ;AAIO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA,GAAG;AACL,GAAgD;AAC9C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,2BAA2B,SAAS;AAAA,MACjD,GAAG;AAAA;AAAA,EACN;AAEJ;AAEO,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA,GAAG;AACL,GAAqC;AACnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,8BAA8B,SAAS;AAAA,MACpD,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/{item.js → derived/item.js}

@@ -1,8 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { cn } from "../lib/cn.js";
-import { Slot } from "../primitives/slot.js";
-import { Separator } from "./separator.js";
+import { cn } from "../../lib/cn.js";
+import { Slot } from "../../primitives/slot.js";
+import { Separator } from "../atomic/separator.js";
 import {
   ITEM_ACTIONS,
   ITEM_BASE,
@@ -17,7 +17,7 @@ import {
   itemMediaVariants,
   itemSizes,
   itemVariants
-} from "../generated/item.js";
+} from "../../generated/item.js";
 function ItemGroup({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",

package/dist/components/derived/item.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/derived/item.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport { Slot } from \"../../primitives/slot\";\nimport { Separator } from \"../atomic/separator\";\nimport {\n  ITEM_ACTIONS,\n  ITEM_BASE,\n  ITEM_CONTENT,\n  ITEM_DESCRIPTION,\n  ITEM_FOOTER,\n  ITEM_GROUP,\n  ITEM_HEADER,\n  ITEM_MEDIA_BASE,\n  ITEM_SEPARATOR,\n  ITEM_TITLE,\n  itemMediaVariants,\n  itemSizes,\n  itemVariants,\n  type ItemMediaVariant,\n  type ItemSize,\n  type ItemVariant,\n} from \"../../generated/item\";\n\nexport type { ItemMediaVariant, ItemSize, ItemVariant };\n\nexport function ItemGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(ITEM_GROUP, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(ITEM_SEPARATOR, className)}\n      {...props}\n    />\n  );\n}\n\nexport interface ItemProps extends React.ComponentProps<\"div\"> {\n  variant?: ItemVariant;\n  size?: ItemSize;\n  asChild?: boolean;\n}\n\nexport function Item({\n  className,\n  variant = \"bare\",\n  size = \"md\",\n  asChild = false,\n  ...props\n}: ItemProps) {\n  const Comp = asChild ? Slot : \"div\";\n  return (\n    <Comp\n      data-slot=\"item\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(ITEM_BASE, itemVariants[variant], itemSizes[size], className)}\n      {...(props as Record<string, unknown>)}\n    />\n  );\n}\n\nexport interface ItemMediaProps extends React.ComponentProps<\"div\"> {\n  variant?: ItemMediaVariant;\n}\n\nexport function ItemMedia({\n  className,\n  variant = \"bare\",\n  ...props\n}: ItemMediaProps) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(ITEM_MEDIA_BASE, itemMediaVariants[variant], className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(ITEM_CONTENT, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(ITEM_TITLE, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(ITEM_DESCRIPTION, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemActions({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(ITEM_ACTIONS, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(ITEM_HEADER, className)}\n      {...props}\n    />\n  );\n}\n\nexport function ItemFooter({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(ITEM_FOOTER, className)}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/derived/popover-form.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import {
+  POPOVER_FORM_ACTIONS,
+  POPOVER_FORM_CONTENT,
+  POPOVER_FORM_FIELDS,
+  POPOVER_FORM_FORM,
+  POPOVER_FORM_TITLE
+} from "../../generated/popover-form.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
+import { Button } from "../atomic/button.js";
+import { Popover, PopoverContent, PopoverTrigger } from "../atomic/popover.js";
+function PopoverForm({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  trigger,
+  title,
+  children,
+  onSubmit,
+  onReset,
+  labels = {},
+  className
+}) {
+  const [isOpen, setOpen] = useControllableState({
+    ...open !== void 0 ? { value: open } : {},
+    defaultValue: defaultOpen,
+    ...onOpenChange ? { onChange: onOpenChange } : {}
+  });
+  const titleId = React.useId();
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: cn(POPOVER_FORM_CONTENT, className), "aria-labelledby": titleId, role: "dialog", children: /* @__PURE__ */ jsxs(
+      "form",
+      {
+        className: POPOVER_FORM_FORM,
+        onSubmit: (e) => {
+          e.preventDefault();
+          onSubmit?.(e);
+          setOpen(false);
+        },
+        onReset: () => onReset?.(),
+        children: [
+          /* @__PURE__ */ jsx("h3", { id: titleId, className: POPOVER_FORM_TITLE, children: title }),
+          /* @__PURE__ */ jsx("div", { className: POPOVER_FORM_FIELDS, children }),
+          /* @__PURE__ */ jsxs("div", { className: POPOVER_FORM_ACTIONS, children: [
+            /* @__PURE__ */ jsx(Button, { type: "reset", variant: "ghost", size: "sm", children: labels.reset ?? "Reset" }),
+            /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", size: "sm", children: labels.submit ?? "Apply" })
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}
+export {
+  PopoverForm
+};
+//# sourceMappingURL=popover-form.js.map

package/dist/components/derived/popover-form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/derived/popover-form.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  POPOVER_FORM_ACTIONS,\n  POPOVER_FORM_CONTENT,\n  POPOVER_FORM_FIELDS,\n  POPOVER_FORM_FORM,\n  POPOVER_FORM_TITLE,\n} from \"../../generated/popover-form\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { Button } from \"../atomic/button\";\nimport { Popover, PopoverContent, PopoverTrigger } from \"../atomic/popover\";\n\nexport interface PopoverFormLabels {\n  submit?: string;\n  reset?: string;\n}\n\nexport interface PopoverFormProps {\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** The button that opens the form; wrapped with `asChild`, so pass one element. */\n  trigger: React.ReactNode;\n  title: React.ReactNode;\n  /** The fields: `Field`s with an `Input`, `Select` or `Checkbox`. */\n  children: React.ReactNode;\n  /** Called on submit; the popover closes afterwards. */\n  onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;\n  /** Called when Reset is pressed; native fields are reset by the browser first. */\n  onReset?: () => void;\n  labels?: PopoverFormLabels;\n  className?: string;\n}\n\n/** A filter-style form in a popover: a title, fields, Reset and Apply. */\nexport function PopoverForm({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  trigger,\n  title,\n  children,\n  onSubmit,\n  onReset,\n  labels = {},\n  className,\n}: PopoverFormProps) {\n  const [isOpen, setOpen] = useControllableState<boolean>({\n    ...(open !== undefined ? { value: open } : {}),\n    defaultValue: defaultOpen,\n    ...(onOpenChange ? { onChange: onOpenChange } : {}),\n  });\n  const titleId = React.useId();\n  return (\n    <Popover open={isOpen} onOpenChange={setOpen}>\n      <PopoverTrigger asChild>{trigger}</PopoverTrigger>\n      <PopoverContent align=\"start\" className={cn(POPOVER_FORM_CONTENT, className)} aria-labelledby={titleId} role=\"dialog\">\n        <form\n          className={POPOVER_FORM_FORM}\n          onSubmit={(e) => {\n            e.preventDefault();\n            onSubmit?.(e);\n            setOpen(false);\n          }}\n          onReset={() => onReset?.()}\n        >\n          <h3 id={titleId} className={POPOVER_FORM_TITLE}>\n            {title}\n          </h3>\n          <div className={POPOVER_FORM_FIELDS}>{children}</div>\n          <div className={POPOVER_FORM_ACTIONS}>\n            <Button type=\"reset\" variant=\"ghost\" size=\"sm\">\n              {labels.reset ?? \"Reset\"}\n            </Button>\n            <Button type=\"submit\" variant=\"primary\" size=\"sm\">\n              {labels.submit ?? \"Apply\"}\n            </Button>\n          </div>\n        </form>\n      </PopoverContent>\n    </Popover>\n  );\n}\n"],"mappings":";AA0DM,cAeI,YAfJ;AAxDN,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,4BAA4B;AACrC,SAAS,cAAc;AACvB,SAAS,SAAS,gBAAgB,sBAAsB;AAyBjD,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS,CAAC;AAAA,EACV;AACF,GAAqB;AACnB,QAAM,CAAC,QAAQ,OAAO,IAAI,qBAA8B;AAAA,IACtD,GAAI,SAAS,SAAY,EAAE,OAAO,KAAK,IAAI,CAAC;AAAA,IAC5C,cAAc;AAAA,IACd,GAAI,eAAe,EAAE,UAAU,aAAa,IAAI,CAAC;AAAA,EACnD,CAAC;AACD,QAAM,UAAU,MAAM,MAAM;AAC5B,SACE,qBAAC,WAAQ,MAAM,QAAQ,cAAc,SACnC;AAAA,wBAAC,kBAAe,SAAO,MAAE,mBAAQ;AAAA,IACjC,oBAAC,kBAAe,OAAM,SAAQ,WAAW,GAAG,sBAAsB,SAAS,GAAG,mBAAiB,SAAS,MAAK,UAC3G;AAAA,MAAC;AAAA;AAAA,QACC,WAAW;AAAA,QACX,UAAU,CAAC,MAAM;AACf,YAAE,eAAe;AACjB,qBAAW,CAAC;AACZ,kBAAQ,KAAK;AAAA,QACf;AAAA,QACA,SAAS,MAAM,UAAU;AAAA,QAEzB;AAAA,8BAAC,QAAG,IAAI,SAAS,WAAW,oBACzB,iBACH;AAAA,UACA,oBAAC,SAAI,WAAW,qBAAsB,UAAS;AAAA,UAC/C,qBAAC,SAAI,WAAW,sBACd;AAAA,gCAAC,UAAO,MAAK,SAAQ,SAAQ,SAAQ,MAAK,MACvC,iBAAO,SAAS,SACnB;AAAA,YACA,oBAAC,UAAO,MAAK,UAAS,SAAQ,WAAU,MAAK,MAC1C,iBAAO,UAAU,SACpB;AAAA,aACF;AAAA;AAAA;AAAA,IACF,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/derived/settings.js

@@ -0,0 +1,94 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import {
+  SETTINGS_LAYOUT,
+  SETTINGS_MAIN,
+  SETTINGS_NAV,
+  SETTINGS_ROW_INLINE,
+  SETTINGS_SECTION_ACTION,
+  SETTINGS_SECTION_BASE,
+  SETTINGS_SECTION_BODY,
+  SETTINGS_SECTION_BODY_FLUSH,
+  SETTINGS_SECTION_BODY_PADDED,
+  SETTINGS_SECTION_DESCRIPTION,
+  SETTINGS_SECTION_HEADER,
+  SETTINGS_SECTION_HEADER_FLUSH,
+  SETTINGS_SECTION_HEADING,
+  SETTINGS_SECTION_TITLE,
+  settingsSectionToneClasses
+} from "../../generated/settings.js";
+import { FormRow } from "../atomic/form-row.js";
+function SettingsLayout({ nav, className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "settings-layout",
+      className: cn(
+        SETTINGS_LAYOUT,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { "data-slot": "settings-nav", className: SETTINGS_NAV, children: nav }),
+        /* @__PURE__ */ jsx("div", { "data-slot": "settings-main", className: SETTINGS_MAIN, children })
+      ]
+    }
+  );
+}
+function SettingsSection({
+  title,
+  description,
+  action,
+  tone = "default",
+  flush = false,
+  className,
+  children,
+  ...props
+}) {
+  const headingId = React.useId();
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "settings-section",
+      "data-tone": tone,
+      "aria-labelledby": headingId,
+      className: cn(
+        SETTINGS_SECTION_BASE,
+        settingsSectionToneClasses[tone],
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: cn(SETTINGS_SECTION_HEADER, flush && SETTINGS_SECTION_HEADER_FLUSH), children: [
+          /* @__PURE__ */ jsxs("div", { className: SETTINGS_SECTION_HEADING, children: [
+            /* @__PURE__ */ jsx("h3", { id: headingId, className: SETTINGS_SECTION_TITLE, children: title }),
+            description != null && /* @__PURE__ */ jsx("p", { className: SETTINGS_SECTION_DESCRIPTION, children: description })
+          ] }),
+          action != null && /* @__PURE__ */ jsx("div", { className: SETTINGS_SECTION_ACTION, children: action })
+        ] }),
+        children != null && /* @__PURE__ */ jsx("div", { className: cn(SETTINGS_SECTION_BODY, flush ? SETTINGS_SECTION_BODY_FLUSH : SETTINGS_SECTION_BODY_PADDED), children })
+      ]
+    }
+  );
+}
+function SettingsRow({ inline = false, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    FormRow,
+    {
+      "data-inline": inline,
+      className: cn(
+        inline && SETTINGS_ROW_INLINE,
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  SettingsLayout,
+  SettingsRow,
+  SettingsSection
+};
+//# sourceMappingURL=settings.js.map

package/dist/components/derived/settings.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/derived/settings.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/cn\";\nimport {\n  SETTINGS_LAYOUT,\n  SETTINGS_MAIN,\n  SETTINGS_NAV,\n  SETTINGS_ROW_INLINE,\n  SETTINGS_SECTION_ACTION,\n  SETTINGS_SECTION_BASE,\n  SETTINGS_SECTION_BODY,\n  SETTINGS_SECTION_BODY_FLUSH,\n  SETTINGS_SECTION_BODY_PADDED,\n  SETTINGS_SECTION_DESCRIPTION,\n  SETTINGS_SECTION_HEADER,\n  SETTINGS_SECTION_HEADER_FLUSH,\n  SETTINGS_SECTION_HEADING,\n  SETTINGS_SECTION_TITLE,\n  settingsSectionToneClasses,\n  type SettingsSectionTone,\n} from \"../../generated/settings\";\nimport { FormRow, type FormRowProps } from \"../atomic/form-row\";\n\nexport interface SettingsLayoutProps extends Omit<React.ComponentProps<\"div\">, \"title\"> {\n  /** The section rail (`SectionNav`), 256 wide from `lg` up and on top below it. */\n  nav: React.ReactNode;\n}\n\n/**\n * Rail on the left, cards in the main column; centres a 1408 px measure. The column is a\n * div: `AppShell` already renders the page's `<main>`.\n */\nexport function SettingsLayout({ nav, className, children, ...props }: SettingsLayoutProps) {\n  return (\n    <div\n      data-slot=\"settings-layout\"\n      className={cn(\n        SETTINGS_LAYOUT,\n        className,\n      )}\n      {...props}\n    >\n      <div data-slot=\"settings-nav\" className={SETTINGS_NAV}>\n        {nav}\n      </div>\n      <div data-slot=\"settings-main\" className={SETTINGS_MAIN}>\n        {children}\n      </div>\n    </div>\n  );\n}\n\nexport interface SettingsSectionProps extends Omit<React.ComponentProps<\"section\">, \"title\"> {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  /** Top-right control, e.g. a \"Create team\" button. */\n  action?: React.ReactNode;\n  /** `danger` draws the destructive-zone edge. */\n  tone?: SettingsSectionTone;\n  /** Rows run edge to edge with their hairlines; otherwise the body is padded. */\n  flush?: boolean;\n}\n\n/** A settings card: title, a line saying what it is for, then the body. */\nexport function SettingsSection({\n  title,\n  description,\n  action,\n  tone = \"default\",\n  flush = false,\n  className,\n  children,\n  ...props\n}: SettingsSectionProps) {\n  const headingId = React.useId();\n  return (\n    <section\n      data-slot=\"settings-section\"\n      data-tone={tone}\n      aria-labelledby={headingId}\n      className={cn(\n        SETTINGS_SECTION_BASE,\n        settingsSectionToneClasses[tone],\n        className,\n      )}\n      {...props}\n    >\n      <header className={cn(SETTINGS_SECTION_HEADER, flush && SETTINGS_SECTION_HEADER_FLUSH)}>\n        <div className={SETTINGS_SECTION_HEADING}>\n          <h3 id={headingId} className={SETTINGS_SECTION_TITLE}>\n            {title}\n          </h3>\n          {description != null && <p className={SETTINGS_SECTION_DESCRIPTION}>{description}</p>}\n        </div>\n        {action != null && <div className={SETTINGS_SECTION_ACTION}>{action}</div>}\n      </header>\n      {children != null && (\n        <div className={cn(SETTINGS_SECTION_BODY, flush ? SETTINGS_SECTION_BODY_FLUSH : SETTINGS_SECTION_BODY_PADDED)}>\n          {children}\n        </div>\n      )}\n    </section>\n  );\n}\n\nexport interface SettingsRowProps extends FormRowProps {\n  /** Keeps label and control on one line at every width, control at the end: for a switch or a button. */\n  inline?: boolean;\n}\n\n/** A `FormRow` for settings; `inline` suits toggles. */\nexport function SettingsRow({ inline = false, className, ...props }: SettingsRowProps) {\n  return (\n    <FormRow\n      data-inline={inline}\n      className={cn(\n        inline && SETTINGS_ROW_INLINE,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":";AAmCI,SAQE,KARF;AAjCJ,YAAY,WAAW;AACvB,SAAS,UAAU;AACnB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AACP,SAAS,eAAkC;AAWpC,SAAS,eAAe,EAAE,KAAK,WAAW,UAAU,GAAG,MAAM,GAAwB;AAC1F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,4BAAC,SAAI,aAAU,gBAAe,WAAW,cACtC,eACH;AAAA,QACA,oBAAC,SAAI,aAAU,iBAAgB,WAAW,eACvC,UACH;AAAA;AAAA;AAAA,EACF;AAEJ;AAcO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,YAAY,MAAM,MAAM;AAC9B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,aAAW;AAAA,MACX,mBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA,2BAA2B,IAAI;AAAA,QAC/B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA,6BAAC,YAAO,WAAW,GAAG,yBAAyB,SAAS,6BAA6B,GACnF;AAAA,+BAAC,SAAI,WAAW,0BACd;AAAA,gCAAC,QAAG,IAAI,WAAW,WAAW,wBAC3B,iBACH;AAAA,YACC,eAAe,QAAQ,oBAAC,OAAE,WAAW,8BAA+B,uBAAY;AAAA,aACnF;AAAA,UACC,UAAU,QAAQ,oBAAC,SAAI,WAAW,yBAA0B,kBAAO;AAAA,WACtE;AAAA,QACC,YAAY,QACX,oBAAC,SAAI,WAAW,GAAG,uBAAuB,QAAQ,8BAA8B,4BAA4B,GACzG,UACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;AAQO,SAAS,YAAY,EAAE,SAAS,OAAO,WAAW,GAAG,MAAM,GAAqB;AACrF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,WAAW;AAAA,QACT,UAAU;AAAA,QACV;AAAA,MACF;AAAA,MACC,GAAG;AAAA;AAAA,EACN;AAEJ;","names":[]}

package/dist/components/shell/account-list.js

@@ -0,0 +1,128 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  ACCOUNT_LIST_BASE,
+  ACCOUNT_LIST_ITEM_ACTIONS,
+  ACCOUNT_LIST_ITEM_AVATAR,
+  ACCOUNT_LIST_ITEM_AVATAR_FALLBACK,
+  ACCOUNT_LIST_ITEM_BADGES,
+  ACCOUNT_LIST_ITEM_BASE,
+  ACCOUNT_LIST_ITEM_CHECK,
+  ACCOUNT_LIST_ITEM_CHECK_HIDDEN,
+  ACCOUNT_LIST_ITEM_CHECKED,
+  ACCOUNT_LIST_ITEM_DISABLED,
+  ACCOUNT_LIST_ITEM_FIGURE,
+  ACCOUNT_LIST_ITEM_HANDLE,
+  ACCOUNT_LIST_ITEM_NAME,
+  ACCOUNT_LIST_ITEM_RADIO,
+  ACCOUNT_LIST_ITEM_TEXT,
+  ACCOUNT_LIST_ITEM_UNCHECKED
+} from "../../generated/account-list.js";
+import { cn } from "../../lib/cn.js";
+import { useControllableState } from "../../primitives/use-controllable-state.js";
+import { Avatar, AvatarFallback } from "../atomic/avatar.js";
+import { UiIcon } from "../../icons/ui-icons.js";
+const AccountListContext = React.createContext(null);
+function AccountList({
+  value,
+  defaultValue = "",
+  onValueChange,
+  className,
+  onKeyDown,
+  ...props
+}) {
+  const [current, setValue] = useControllableState({
+    ...value !== void 0 ? { value } : {},
+    defaultValue,
+    ...onValueChange ? { onChange: onValueChange } : {}
+  });
+  const move = (e) => {
+    const forward = e.key === "ArrowDown" || e.key === "ArrowRight";
+    const back = e.key === "ArrowUp" || e.key === "ArrowLeft";
+    if (!forward && !back) return;
+    const radios = Array.from(
+      e.currentTarget.querySelectorAll('[role="radio"]:not(:disabled)')
+    );
+    const at = radios.indexOf(document.activeElement);
+    if (at < 0) return;
+    e.preventDefault();
+    const next = radios[(at + (forward ? 1 : -1) + radios.length) % radios.length];
+    next?.focus();
+    next?.click();
+  };
+  return /* @__PURE__ */ jsx(AccountListContext.Provider, { value: { value: current, setValue }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "radiogroup",
+      "data-slot": "account-list",
+      className: cn(ACCOUNT_LIST_BASE, className),
+      onKeyDown: (e) => {
+        onKeyDown?.(e);
+        if (!e.defaultPrevented) move(e);
+      },
+      ...props
+    }
+  ) });
+}
+function AccountListItem({
+  value,
+  name,
+  handle,
+  avatar,
+  badges,
+  figure,
+  actions,
+  disabled,
+  className,
+  ...props
+}) {
+  const ctx = React.useContext(AccountListContext);
+  if (!ctx) throw new Error("AccountListItem must be used within <AccountList>");
+  const checked = ctx.value === value;
+  const initial = typeof name === "string" ? name.trim().charAt(0).toUpperCase() : "";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "account-list-item",
+      "data-state": checked ? "checked" : "unchecked",
+      className: cn(
+        ACCOUNT_LIST_ITEM_BASE,
+        checked ? ACCOUNT_LIST_ITEM_CHECKED : ACCOUNT_LIST_ITEM_UNCHECKED,
+        disabled && ACCOUNT_LIST_ITEM_DISABLED,
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            role: "radio",
+            "aria-checked": checked,
+            disabled,
+            tabIndex: checked || ctx.value === "" ? 0 : -1,
+            onClick: () => ctx.setValue(value),
+            className: ACCOUNT_LIST_ITEM_RADIO,
+            children: [
+              avatar ?? /* @__PURE__ */ jsx(Avatar, { className: ACCOUNT_LIST_ITEM_AVATAR, children: /* @__PURE__ */ jsx(AvatarFallback, { className: ACCOUNT_LIST_ITEM_AVATAR_FALLBACK, children: initial }) }),
+              /* @__PURE__ */ jsxs("span", { className: ACCOUNT_LIST_ITEM_TEXT, children: [
+                /* @__PURE__ */ jsx("span", { className: ACCOUNT_LIST_ITEM_NAME, children: name }),
+                handle != null && /* @__PURE__ */ jsx("span", { className: ACCOUNT_LIST_ITEM_HANDLE, children: handle })
+              ] }),
+              badges != null && /* @__PURE__ */ jsx("span", { className: ACCOUNT_LIST_ITEM_BADGES, children: badges }),
+              figure != null && /* @__PURE__ */ jsx("span", { className: ACCOUNT_LIST_ITEM_FIGURE, children: figure }),
+              /* @__PURE__ */ jsx("span", { className: cn(ACCOUNT_LIST_ITEM_CHECK, !checked && ACCOUNT_LIST_ITEM_CHECK_HIDDEN), "aria-hidden": true, children: /* @__PURE__ */ jsx(UiIcon, { name: "check" }) })
+            ]
+          }
+        ),
+        actions != null && /* @__PURE__ */ jsx("div", { className: ACCOUNT_LIST_ITEM_ACTIONS, children: actions })
+      ]
+    }
+  );
+}
+export {
+  AccountList,
+  AccountListItem
+};
+//# sourceMappingURL=account-list.js.map

package/dist/components/shell/account-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/shell/account-list.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  ACCOUNT_LIST_BASE,\n  ACCOUNT_LIST_ITEM_ACTIONS,\n  ACCOUNT_LIST_ITEM_AVATAR,\n  ACCOUNT_LIST_ITEM_AVATAR_FALLBACK,\n  ACCOUNT_LIST_ITEM_BADGES,\n  ACCOUNT_LIST_ITEM_BASE,\n  ACCOUNT_LIST_ITEM_CHECK,\n  ACCOUNT_LIST_ITEM_CHECK_HIDDEN,\n  ACCOUNT_LIST_ITEM_CHECKED,\n  ACCOUNT_LIST_ITEM_DISABLED,\n  ACCOUNT_LIST_ITEM_FIGURE,\n  ACCOUNT_LIST_ITEM_HANDLE,\n  ACCOUNT_LIST_ITEM_NAME,\n  ACCOUNT_LIST_ITEM_RADIO,\n  ACCOUNT_LIST_ITEM_TEXT,\n  ACCOUNT_LIST_ITEM_UNCHECKED,\n} from \"../../generated/account-list\";\nimport { cn } from \"../../lib/cn\";\nimport { useControllableState } from \"../../primitives/use-controllable-state\";\nimport { Avatar, AvatarFallback } from \"../atomic/avatar\";\nimport { UiIcon } from \"../../icons/ui-icons\";\n\ninterface AccountListContextValue {\n  value: string;\n  setValue: (next: string) => void;\n}\n\nconst AccountListContext = React.createContext<AccountListContextValue | null>(null);\n\nexport interface AccountListProps extends Omit<React.ComponentProps<\"div\">, \"onChange\" | \"defaultValue\"> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  /** Accessible name of the group, e.g. \"Accounts\". */\n  \"aria-label\": string;\n}\n\n/**\n * Pick the account you act as: one is current, arrows move and select\n * (radio-group semantics), so the current account is the only tab stop.\n */\nexport function AccountList({\n  value,\n  defaultValue = \"\",\n  onValueChange,\n  className,\n  onKeyDown,\n  ...props\n}: AccountListProps) {\n  const [current, setValue] = useControllableState<string>({\n    ...(value !== undefined ? { value } : {}),\n    defaultValue,\n    ...(onValueChange ? { onChange: onValueChange } : {}),\n  });\n\n  const move = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    const forward = e.key === \"ArrowDown\" || e.key === \"ArrowRight\";\n    const back = e.key === \"ArrowUp\" || e.key === \"ArrowLeft\";\n    if (!forward && !back) return;\n    const radios = Array.from(\n      e.currentTarget.querySelectorAll<HTMLButtonElement>('[role=\"radio\"]:not(:disabled)'),\n    );\n    const at = radios.indexOf(document.activeElement as HTMLButtonElement);\n    if (at < 0) return;\n    e.preventDefault();\n    const next = radios[(at + (forward ? 1 : -1) + radios.length) % radios.length];\n    next?.focus();\n    next?.click();\n  };\n\n  return (\n    <AccountListContext.Provider value={{ value: current, setValue }}>\n      <div\n        role=\"radiogroup\"\n        data-slot=\"account-list\"\n        className={cn(ACCOUNT_LIST_BASE, className)}\n        onKeyDown={(e) => {\n          onKeyDown?.(e);\n          if (!e.defaultPrevented) move(e);\n        }}\n        {...props}\n      />\n    </AccountListContext.Provider>\n  );\n}\n\nexport interface AccountListItemProps extends Omit<React.ComponentProps<\"div\">, \"value\" | \"title\"> {\n  value: string;\n  name: React.ReactNode;\n  /** A line under the name: handle, email. */\n  handle?: React.ReactNode;\n  /** Replaces the initial-in-a-square default. */\n  avatar?: React.ReactNode;\n  /** Role badges after the name block. */\n  badges?: React.ReactNode;\n  /** A figure at the end, set in the serif face: a balance. */\n  figure?: React.ReactNode;\n  /** Controls beside the row (a menu button); they cannot live inside the radio. */\n  actions?: React.ReactNode;\n  disabled?: boolean;\n}\n\nexport function AccountListItem({\n  value,\n  name,\n  handle,\n  avatar,\n  badges,\n  figure,\n  actions,\n  disabled,\n  className,\n  ...props\n}: AccountListItemProps) {\n  const ctx = React.useContext(AccountListContext);\n  if (!ctx) throw new Error(\"AccountListItem must be used within <AccountList>\");\n  const checked = ctx.value === value;\n  const initial = typeof name === \"string\" ? name.trim().charAt(0).toUpperCase() : \"\";\n  return (\n    <div\n      data-slot=\"account-list-item\"\n      data-state={checked ? \"checked\" : \"unchecked\"}\n      className={cn(\n        ACCOUNT_LIST_ITEM_BASE,\n        checked ? ACCOUNT_LIST_ITEM_CHECKED : ACCOUNT_LIST_ITEM_UNCHECKED,\n        disabled && ACCOUNT_LIST_ITEM_DISABLED,\n        className,\n      )}\n      {...props}\n    >\n      <button\n        type=\"button\"\n        role=\"radio\"\n        aria-checked={checked}\n        disabled={disabled}\n        // Until one is chosen every radio is a tab stop, or the group could not be entered.\n        tabIndex={checked || ctx.value === \"\" ? 0 : -1}\n        onClick={() => ctx.setValue(value)}\n        className={ACCOUNT_LIST_ITEM_RADIO}\n      >\n        {avatar ?? (\n          <Avatar className={ACCOUNT_LIST_ITEM_AVATAR}>\n            <AvatarFallback className={ACCOUNT_LIST_ITEM_AVATAR_FALLBACK}>{initial}</AvatarFallback>\n          </Avatar>\n        )}\n        <span className={ACCOUNT_LIST_ITEM_TEXT}>\n          <span className={ACCOUNT_LIST_ITEM_NAME}>{name}</span>\n          {handle != null && <span className={ACCOUNT_LIST_ITEM_HANDLE}>{handle}</span>}\n        </span>\n        {badges != null && <span className={ACCOUNT_LIST_ITEM_BADGES}>{badges}</span>}\n        {figure != null && <span className={ACCOUNT_LIST_ITEM_FIGURE}>{figure}</span>}\n        <span className={cn(ACCOUNT_LIST_ITEM_CHECK, !checked && ACCOUNT_LIST_ITEM_CHECK_HIDDEN)} aria-hidden>\n          <UiIcon name=\"check\" />\n        </span>\n      </button>\n      {actions != null && <div className={ACCOUNT_LIST_ITEM_ACTIONS}>{actions}</div>}\n    </div>\n  );\n}\n"],"mappings":";AA4EM,cAyEE,YAzEF;AA1EN,YAAY,WAAW;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,UAAU;AACnB,SAAS,4BAA4B;AACrC,SAAS,QAAQ,sBAAsB;AACvC,SAAS,cAAc;AAOvB,MAAM,qBAAqB,MAAM,cAA8C,IAAI;AAc5E,SAAS,YAAY;AAAA,EAC1B;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAqB;AACnB,QAAM,CAAC,SAAS,QAAQ,IAAI,qBAA6B;AAAA,IACvD,GAAI,UAAU,SAAY,EAAE,MAAM,IAAI,CAAC;AAAA,IACvC;AAAA,IACA,GAAI,gBAAgB,EAAE,UAAU,cAAc,IAAI,CAAC;AAAA,EACrD,CAAC;AAED,QAAM,OAAO,CAAC,MAA2C;AACvD,UAAM,UAAU,EAAE,QAAQ,eAAe,EAAE,QAAQ;AACnD,UAAM,OAAO,EAAE,QAAQ,aAAa,EAAE,QAAQ;AAC9C,QAAI,CAAC,WAAW,CAAC,KAAM;AACvB,UAAM,SAAS,MAAM;AAAA,MACnB,EAAE,cAAc,iBAAoC,+BAA+B;AAAA,IACrF;AACA,UAAM,KAAK,OAAO,QAAQ,SAAS,aAAkC;AACrE,QAAI,KAAK,EAAG;AACZ,MAAE,eAAe;AACjB,UAAM,OAAO,QAAQ,MAAM,UAAU,IAAI,MAAM,OAAO,UAAU,OAAO,MAAM;AAC7E,UAAM,MAAM;AACZ,UAAM,MAAM;AAAA,EACd;AAEA,SACE,oBAAC,mBAAmB,UAAnB,EAA4B,OAAO,EAAE,OAAO,SAAS,SAAS,GAC7D;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,aAAU;AAAA,MACV,WAAW,GAAG,mBAAmB,SAAS;AAAA,MAC1C,WAAW,CAAC,MAAM;AAChB,oBAAY,CAAC;AACb,YAAI,CAAC,EAAE,iBAAkB,MAAK,CAAC;AAAA,MACjC;AAAA,MACC,GAAG;AAAA;AAAA,EACN,GACF;AAEJ;AAkBO,SAAS,gBAAgB;AAAA,EAC9B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,GAAyB;AACvB,QAAM,MAAM,MAAM,WAAW,kBAAkB;AAC/C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,mDAAmD;AAC7E,QAAM,UAAU,IAAI,UAAU;AAC9B,QAAM,UAAU,OAAO,SAAS,WAAW,KAAK,KAAK,EAAE,OAAO,CAAC,EAAE,YAAY,IAAI;AACjF,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAU;AAAA,MACV,cAAY,UAAU,YAAY;AAAA,MAClC,WAAW;AAAA,QACT;AAAA,QACA,UAAU,4BAA4B;AAAA,QACtC,YAAY;AAAA,QACZ;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEJ;AAAA;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,gBAAc;AAAA,YACd;AAAA,YAEA,UAAU,WAAW,IAAI,UAAU,KAAK,IAAI;AAAA,YAC5C,SAAS,MAAM,IAAI,SAAS,KAAK;AAAA,YACjC,WAAW;AAAA,YAEV;AAAA,wBACC,oBAAC,UAAO,WAAW,0BACjB,8BAAC,kBAAe,WAAW,mCAAoC,mBAAQ,GACzE;AAAA,cAEF,qBAAC,UAAK,WAAW,wBACf;AAAA,oCAAC,UAAK,WAAW,wBAAyB,gBAAK;AAAA,gBAC9C,UAAU,QAAQ,oBAAC,UAAK,WAAW,0BAA2B,kBAAO;AAAA,iBACxE;AAAA,cACC,UAAU,QAAQ,oBAAC,UAAK,WAAW,0BAA2B,kBAAO;AAAA,cACrE,UAAU,QAAQ,oBAAC,UAAK,WAAW,0BAA2B,kBAAO;AAAA,cACtE,oBAAC,UAAK,WAAW,GAAG,yBAAyB,CAAC,WAAW,8BAA8B,GAAG,eAAW,MACnG,8BAAC,UAAO,MAAK,SAAQ,GACvB;AAAA;AAAA;AAAA,QACF;AAAA,QACC,WAAW,QAAQ,oBAAC,SAAI,WAAW,2BAA4B,mBAAQ;AAAA;AAAA;AAAA,EAC1E;AAEJ;","names":[]}

package/dist/components/shell/account-menu-profile.js

@@ -0,0 +1,114 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../lib/cn.js";
+import { Avatar, AvatarFallback } from "../atomic/avatar.js";
+import { Badge } from "../atomic/badge.js";
+import {
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger
+} from "../atomic/dropdown-menu.js";
+import { Switch } from "../atomic/switch.js";
+import { UiIcon } from "../../icons/ui-icons.js";
+function ProfileTabs({
+  tabs,
+  value,
+  onChange,
+  label = "Sections"
+}) {
+  const move = (e, index) => {
+    const step = e.key === "ArrowRight" ? 1 : e.key === "ArrowLeft" ? -1 : 0;
+    if (step === 0) return;
+    e.stopPropagation();
+    e.preventDefault();
+    const target = (index + step + tabs.length) % tabs.length;
+    const next = tabs[target];
+    if (!next) return;
+    onChange(next.id);
+    e.currentTarget.parentElement?.querySelectorAll('[role="menuitemradio"]')[target]?.focus();
+  };
+  return /* @__PURE__ */ jsx("div", { role: "group", "aria-label": label, "data-slot": "account-menu-tabs", className: "flex border-b border-border-subtle", children: tabs.map((t, i) => {
+    const selected = t.id === value;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "menuitemradio",
+        "aria-checked": selected,
+        tabIndex: -1,
+        onClick: () => onChange(t.id),
+        onKeyDown: (e) => move(e, i),
+        className: cn(
+          "-mb-px h-8 flex-1 border-b px-3 text-body font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          selected ? "border-primary text-ink" : "border-transparent text-ink-mid hover:text-ink"
+        ),
+        children: t.label
+      },
+      t.id
+    );
+  }) });
+}
+function ProfileCard({
+  name,
+  plan,
+  initials,
+  onOpen
+}) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Avatar, { className: "size-14 shrink-0 rounded-full", children: /* @__PURE__ */ jsx(AvatarFallback, { className: "font-serif text-h2 font-light text-ink", children: initials.slice(0, 1) }) }),
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate text-body font-medium text-ink", children: name }),
+      plan && /* @__PURE__ */ jsx("span", { className: "text-caption text-ink-soft", children: plan })
+    ] }),
+    onOpen && /* @__PURE__ */ jsx(UiIcon, { name: "chevron-right", className: "size-4 text-ink-soft" })
+  ] });
+  if (!onOpen) {
+    return /* @__PURE__ */ jsx("div", { "data-slot": "account-menu-card", className: "flex w-full items-center gap-2.5 p-2", children: content });
+  }
+  return /* @__PURE__ */ jsx(DropdownMenuItem, { "data-slot": "account-menu-card", className: "h-auto gap-2.5 p-2", onClick: onOpen, children: content });
+}
+function ProfileSettingRows({ profile }) {
+  const { language, darkTheme, colorTheme, icons } = profile;
+  if (!language && !darkTheme && !colorTheme) return null;
+  const currentColor = colorTheme?.options.find((o) => o.id === colorTheme.value)?.label;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+    language && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: () => language.onSelect?.(), children: [
+      icons?.language,
+      /* @__PURE__ */ jsx("span", { className: "flex-1", children: language.label }),
+      /* @__PURE__ */ jsx(Badge, { children: language.value })
+    ] }),
+    darkTheme && /* @__PURE__ */ jsxs(
+      DropdownMenuItem,
+      {
+        role: "menuitemcheckbox",
+        "aria-checked": darkTheme.checked,
+        onClick: () => darkTheme.onCheckedChange(!darkTheme.checked),
+        children: [
+          icons?.darkTheme,
+          /* @__PURE__ */ jsx("span", { className: "flex-1", children: darkTheme.label }),
+          /* @__PURE__ */ jsx(Switch, { checked: darkTheme.checked, tabIndex: -1, "aria-hidden": true, className: "pointer-events-none" })
+        ]
+      }
+    ),
+    colorTheme && /* @__PURE__ */ jsxs(DropdownMenuSub, { children: [
+      /* @__PURE__ */ jsxs(DropdownMenuSubTrigger, { children: [
+        icons?.colorTheme,
+        /* @__PURE__ */ jsx("span", { className: "flex-1", children: colorTheme.label }),
+        currentColor && /* @__PURE__ */ jsx("span", { className: "text-body-s text-ink-soft", children: currentColor })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSubContent, { children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, { value: colorTheme.value, onValueChange: colorTheme.onValueChange, children: colorTheme.options.map((o) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, { value: o.id, children: o.label }, o.id)) }) })
+    ] })
+  ] });
+}
+export {
+  ProfileCard,
+  ProfileSettingRows,
+  ProfileTabs
+};
+//# sourceMappingURL=account-menu-profile.js.map