@waveso/ui 0.5.0 → 0.7.0

package/dist/field.js

@@ -21,14 +21,14 @@ function FieldLabel({ className, ...props }) {
 function FieldControl({ className, ...props }) {
 	return /* @__PURE__ */ jsx(FieldPrimitive.Control, {
 		"data-slot": "field-control",
-		className: cn("rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", className),
+		className: cn("rounded-md outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50", className),
 		...props
 	});
 }
 function FieldDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx(FieldPrimitive.Description, {
 		"data-slot": "field-description",
-		className: cn("text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className),
+		className: cn("text-muted text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className),
 		...props
 	});
 }

package/dist/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":[],"sources":["../src/field.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type FieldProps = React.ComponentProps<typeof FieldPrimitive.Root>\nexport type FieldLabelProps = React.ComponentProps<typeof FieldPrimitive.Label>\nexport type FieldDescriptionProps = React.ComponentProps<typeof FieldPrimitive.Description>\nexport type FieldItemProps = React.ComponentProps<typeof FieldPrimitive.Item>\nexport type FieldErrorProps = React.ComponentProps<typeof FieldPrimitive.Error>\nexport type FieldValidityProps = React.ComponentProps<typeof FieldPrimitive.Validity>\n\n// `ref` matters here for React Hook Form / focus management; it flows\n// through to the control via standard prop forwarding (React 19).\nexport type FieldControlProps = React.ComponentProps<typeof FieldPrimitive.Control>\n\nexport function Field({ className, ...props }: FieldProps) {\n  return (\n    <FieldPrimitive.Root\n      data-slot=\"field\"\n      className={cn(\n        \"grid w-full gap-2 data-[invalid]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function FieldLabel({ className, ...props }: FieldLabelProps) {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function FieldControl({ className, ...props }: FieldControlProps) {\n  return (\n    <FieldPrimitive.Control\n      data-slot=\"field-control\"\n      className={cn(\n        \"rounded-md outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function FieldDescription({ className, ...props }: FieldDescriptionProps) {\n  return (\n    <FieldPrimitive.Description\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function FieldItem({ className, ...props }: FieldItemProps) {\n  return (\n    <FieldPrimitive.Item\n      data-slot=\"field-item\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport function FieldError({ className, ...props }: FieldErrorProps) {\n  return (\n    <FieldPrimitive.Error\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-sm font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\n// Base UI's Validity does not accept `className`/`ref` (and we don't need to style it yet), so we export it as-is.\nexport const FieldValidity = FieldPrimitive.Validity\n\nexport { FieldPrimitive }"],"mappings":";;;;;;AAkBA,SAAgB,MAAM,EAAE,WAAW,GAAG,SAAqB;AACzD,QACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GACT,qDACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;AACnE,QACE,oBAAC,eAAe,OAAhB;EACE,aAAU;EACV,WAAW,GACT,kGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,aAAa,EAAE,WAAW,GAAG,SAA4B;AACvE,QACE,oBAAC,eAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,kKACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,iBAAiB,EAAE,WAAW,GAAG,SAAgC;AAC/E,QACE,oBAAC,eAAe,aAAhB;EACE,aAAU;EACV,WAAW,GACT,qJACA,8BACA,qEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAyB;AACjE,QACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAIN,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;AACnE,QACE,oBAAC,eAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,UAAU;EAChE,GAAI;EACJ,CAAA;;AAKN,MAAa,gBAAgB,eAAe"}
+{"version":3,"file":"field.js","names":[],"sources":["../src/field.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\"\n\nimport { cn } from \"./lib/utils\"\n\nexport type FieldProps = React.ComponentProps<typeof FieldPrimitive.Root>\nexport type FieldLabelProps = React.ComponentProps<typeof FieldPrimitive.Label>\nexport type FieldDescriptionProps = React.ComponentProps<typeof FieldPrimitive.Description>\nexport type FieldItemProps = React.ComponentProps<typeof FieldPrimitive.Item>\nexport type FieldErrorProps = React.ComponentProps<typeof FieldPrimitive.Error>\nexport type FieldValidityProps = React.ComponentProps<typeof FieldPrimitive.Validity>\n\n// `ref` matters here for React Hook Form / focus management; it flows\n// through to the control via standard prop forwarding (React 19).\nexport type FieldControlProps = React.ComponentProps<typeof FieldPrimitive.Control>\n\nexport function Field({ className, ...props }: FieldProps) {\n  return (\n    <FieldPrimitive.Root\n      data-slot=\"field\"\n      className={cn(\n        \"grid w-full gap-2 data-[invalid]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function FieldLabel({ className, ...props }: FieldLabelProps) {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"text-sm font-medium leading-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function FieldControl({ className, ...props }: FieldControlProps) {\n  return (\n    <FieldPrimitive.Control\n      data-slot=\"field-control\"\n      className={cn(\n        \"rounded-md outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function FieldDescription({ className, ...props }: FieldDescriptionProps) {\n  return (\n    <FieldPrimitive.Description\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-muted text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function FieldItem({ className, ...props }: FieldItemProps) {\n  return (\n    <FieldPrimitive.Item\n      data-slot=\"field-item\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport function FieldError({ className, ...props }: FieldErrorProps) {\n  return (\n    <FieldPrimitive.Error\n      data-slot=\"field-error\"\n      className={cn(\"text-destructive text-sm font-normal\", className)}\n      {...props}\n    />\n  )\n}\n\n// Base UI's Validity does not accept `className`/`ref` (and we don't need to style it yet), so we export it as-is.\nexport const FieldValidity = FieldPrimitive.Validity\n\nexport { FieldPrimitive }"],"mappings":";;;;;;AAkBA,SAAgB,MAAM,EAAE,WAAW,GAAG,SAAqB;AACzD,QACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GACT,qDACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;AACnE,QACE,oBAAC,eAAe,OAAhB;EACE,aAAU;EACV,WAAW,GACT,kGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,aAAa,EAAE,WAAW,GAAG,SAA4B;AACvE,QACE,oBAAC,eAAe,SAAhB;EACE,aAAU;EACV,WAAW,GACT,mKACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,iBAAiB,EAAE,WAAW,GAAG,SAAgC;AAC/E,QACE,oBAAC,eAAe,aAAhB;EACE,aAAU;EACV,WAAW,GACT,0IACA,8BACA,qEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAgB,UAAU,EAAE,WAAW,GAAG,SAAyB;AACjE,QACE,oBAAC,eAAe,MAAhB;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAIN,SAAgB,WAAW,EAAE,WAAW,GAAG,SAA0B;AACnE,QACE,oBAAC,eAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,UAAU;EAChE,GAAI;EACJ,CAAA;;AAKN,MAAa,gBAAgB,eAAe"}

package/dist/form.js

@@ -85,7 +85,7 @@ function FormError({ className, ...props }) {
 	if (!message) return null;
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "form-error",
-		className: cn("text-destructive rounded-2xl border border-destructive/30 bg-destructive/5 p-4 text-sm", className),
+		className: cn("text-destructive rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm", className),
 		...props,
 		children: message
 	});
@@ -100,7 +100,7 @@ function FormActions({ className, ...props }) {
 function FormMessage({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "form-message",
-		className: cn("text-sm text-foreground/80", className),
+		className: cn("text-sm text-contrast/80", className),
 		...props
 	});
 }

package/dist/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":[],"sources":["../src/form.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useForm,\n  useWatch,\n  type SubmitHandler,\n  type UseFormReturn,\n  type ControllerFieldState,\n  type ControllerRenderProps,\n  type FieldPath,\n  type FieldValues,\n  type RegisterOptions,\n} from \"react-hook-form\";\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"./field\";\n\nimport { cn } from \"./lib/utils\";\n\ntype FormProps<TFieldValues extends FieldValues> = {\n  form: UseFormReturn<TFieldValues>;\n  onSubmit: SubmitHandler<TFieldValues>;\n} & Omit<React.ComponentProps<\"form\">, \"onSubmit\">;\n\ntype FormRootProps = React.ComponentProps<\"form\">;\ntype FormErrorProps = React.ComponentProps<\"p\">;\ntype FormActionsProps = React.ComponentProps<\"div\">;\ntype FormMessageProps = React.ComponentProps<\"p\">;\n\nfunction Form<TFieldValues extends FieldValues>({ form, onSubmit, ...props }: FormProps<TFieldValues>) {\n  return (\n    <FormProvider {...form}>\n      <FormRoot {...props} onSubmit={form.handleSubmit(onSubmit)} />\n    </FormProvider>\n  );\n}\n\n/**\n * Plain `<form>` element with RHF integration.\n *\n * Uses a native `<form>` instead of `@base-ui/react/form` because Base UI\n * Form's internal submit/validation handling conflicts with React Hook Form\n * and blocks button click events inside modal dialogs. Since RHF already\n * provides validation, error handling, and submit management, the Base UI\n * Form wrapper adds no value at the moment.\n */\nfunction FormRoot({ className, ...props }: FormRootProps) {\n  return (\n    <form noValidate data-slot=\"form\" className={cn(\"flex flex-col gap-6\", className)} {...props} />\n  );\n}\n\ntype FormFieldRenderArgs<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n> = {\n  id: string;\n  field: ControllerRenderProps<TFieldValues, TName>;\n  fieldState: ControllerFieldState;\n};\n\ntype FormFieldProps<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n> = {\n  name: TName;\n  id?: string;\n  required?: boolean;\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  rules?: RegisterOptions<TFieldValues, TName>;\n  /**\n   * Render the actual control.\n   *\n   * - For Base UI controls, prefer `onValueChange`.\n   * - For native/standard inputs, use `onChange`.\n   *\n   * Use `fieldControlProps(field)` to get both.\n   */\n  render: (args: FormFieldRenderArgs<TFieldValues, TName>) => React.ReactNode;\n} & Omit<\n  React.ComponentProps<typeof Field>,\n  \"children\" | \"name\" | \"invalid\" | \"touched\" | \"dirty\" | \"render\"\n>;\n\n/**\n * Base UI + React Hook Form field helper.\n *\n * It maps RHF Controller state onto Base UI's <Field> state so styling can\n * rely on `data-[invalid]`, `data-[touched]`, `data-[dirty]`, etc.\n */\nfunction FormField<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n>(props: FormFieldProps<TFieldValues, TName>) {\n  const { name, id, required, label, description, rules, render, ...rootProps } = props;\n  const { control } = useFormContext<TFieldValues>();\n\n  const reactId = React.useId();\n  const safeName = String(name).replace(/[^a-zA-Z0-9_-]/g, \"-\");\n  const controlId = id ?? `field-${safeName}-${reactId}`;\n\n  const inferredRequired = (() => {\n    if (!rules || !(\"required\" in rules)) return false;\n    const req = (rules as { required?: unknown }).required;\n    if (typeof req === \"boolean\") return req;\n    if (typeof req === \"string\") return true;\n    if (req && typeof req === \"object\" && \"value\" in (req as Record<string, unknown>)) {\n      return Boolean((req as { value?: unknown }).value);\n    }\n    return Boolean(req);\n  })();\n\n  const isRequired = required ?? inferredRequired;\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <Field\n          {...rootProps}\n          name={field.name}\n          invalid={fieldState.invalid}\n          touched={fieldState.isTouched}\n          dirty={fieldState.isDirty}\n        >\n          {label ? (\n            <FieldLabel>\n              {label}\n              {isRequired ? (\n                <span aria-hidden=\"true\" className=\"text-destructive ml-1\">\n                  *\n                </span>\n              ) : null}\n            </FieldLabel>\n          ) : null}\n          {description ? <FieldDescription>{description}</FieldDescription> : null}\n\n          {render({ id: controlId, field, fieldState })}\n\n          {fieldState.error ? (\n            <FieldError>{fieldState.error.message}</FieldError>\n          ) : null}\n        </Field>\n      )}\n    />\n  );\n}\n\nfunction FormError({ className, ...props }: FormErrorProps) {\n  const {\n    formState: { errors },\n  } = useFormContext();\n\n  const message =\n    (errors as Record<string, unknown>)?.root &&\n    typeof (errors as { root?: { message?: unknown } }).root?.message === \"string\"\n      ? String((errors as { root?: { message?: unknown } }).root?.message)\n      : null;\n\n  if (!message) return null;\n\n  return (\n    <p\n      data-slot=\"form-error\"\n      className={cn(\n        \"text-destructive rounded-2xl border border-destructive/30 bg-destructive/5 p-4 text-sm\",\n        className,\n      )}\n      {...props}\n    >\n      {message}\n    </p>\n  );\n}\n\nfunction FormActions({ className, ...props }: FormActionsProps) {\n  return (\n    <div\n      data-slot=\"form-actions\"\n      className={cn(\"flex flex-wrap items-center gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction FormMessage({ className, ...props }: FormMessageProps) {\n  return (\n    <p data-slot=\"form-message\" className={cn(\"text-sm text-foreground/80\", className)} {...props} />\n  );\n}\n\n/**\n * Convenience helper for mapping RHF field props onto either:\n * - Base UI controls (use `onValueChange`)\n * - Native/standard inputs (use `onChange`)\n */\nfunction fieldControlProps<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n>(\n  field: ControllerRenderProps<TFieldValues, TName>,\n  opts?: {\n    id?: string;\n    describedBy?: string;\n    invalid?: boolean;\n    native?: boolean;\n  },\n) {\n  return {\n    id: opts?.id,\n    name: field.name,\n    ref: field.ref,\n    value: field.value ?? \"\",\n    onBlur: field.onBlur,\n    onChange: field.onChange,\n    ...(opts?.native ? {} : { onValueChange: field.onChange }),\n    \"aria-describedby\": opts?.describedBy,\n    \"aria-invalid\": opts?.invalid,\n  };\n}\n\nexport {\n  Form,\n  FormRoot,\n  FormField,\n  FormError,\n  FormActions,\n  FormMessage,\n  fieldControlProps,\n  useForm,\n  useWatch,\n  type FormFieldRenderArgs,\n  type FormFieldProps,\n};\n"],"mappings":";;;;;;;AAgCA,SAAS,KAAuC,EAAE,MAAM,UAAU,GAAG,SAAkC;AACrG,QACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,UAAD;GAAU,GAAI;GAAO,UAAU,KAAK,aAAa,SAAS;GAAI,CAAA;EACjD,CAAA;;;;;;;;;;;AAanB,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,QACE,oBAAC,QAAD;EAAM,YAAA;EAAW,aAAU;EAAO,WAAW,GAAG,uBAAuB,UAAU;EAAE,GAAI;EAAS,CAAA;;;;;;;;AA2CpG,SAAS,UAGP,OAA4C;CAC5C,MAAM,EAAE,MAAM,IAAI,UAAU,OAAO,aAAa,OAAO,QAAQ,GAAG,cAAc;CAChF,MAAM,EAAE,YAAY,gBAA8B;CAElD,MAAM,UAAU,MAAM,OAAO;CAC7B,MAAM,WAAW,OAAO,KAAK,CAAC,QAAQ,mBAAmB,IAAI;CAC7D,MAAM,YAAY,MAAM,SAAS,SAAS,GAAG;CAE7C,MAAM,0BAA0B;AAC9B,MAAI,CAAC,SAAS,EAAE,cAAc,OAAQ,QAAO;EAC7C,MAAM,MAAO,MAAiC;AAC9C,MAAI,OAAO,QAAQ,UAAW,QAAO;AACrC,MAAI,OAAO,QAAQ,SAAU,QAAO;AACpC,MAAI,OAAO,OAAO,QAAQ,YAAY,WAAY,IAChD,QAAO,QAAS,IAA4B,MAAM;AAEpD,SAAO,QAAQ,IAAI;KACjB;CAEJ,MAAM,aAAa,YAAY;AAE/B,QACE,oBAAC,YAAD;EACQ;EACG;EACF;EACP,SAAS,EAAE,OAAO,iBAChB,qBAAC,OAAD;GACE,GAAI;GACJ,MAAM,MAAM;GACZ,SAAS,WAAW;GACpB,SAAS,WAAW;GACpB,OAAO,WAAW;aALpB;IAOG,QACC,qBAAC,YAAD,EAAA,UAAA,CACG,OACA,aACC,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;eAAwB;KAEpD,CAAA,GACL,KACO,EAAA,CAAA,GACX;IACH,cAAc,oBAAC,kBAAD,EAAA,UAAmB,aAA+B,CAAA,GAAG;IAEnE,OAAO;KAAE,IAAI;KAAW;KAAO;KAAY,CAAC;IAE5C,WAAW,QACV,oBAAC,YAAD,EAAA,UAAa,WAAW,MAAM,SAAqB,CAAA,GACjD;IACE;;EAEV,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;CAC1D,MAAM,EACJ,WAAW,EAAE,aACX,gBAAgB;CAEpB,MAAM,UACH,QAAoC,QACrC,OAAQ,OAA4C,MAAM,YAAY,WAClE,OAAQ,OAA4C,MAAM,QAAQ,GAClE;AAEN,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,0FACA,UACD;EACD,GAAI;YAEH;EACC,CAAA;;AAIR,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qCAAqC,UAAU;EAC7D,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,KAAD;EAAG,aAAU;EAAe,WAAW,GAAG,8BAA8B,UAAU;EAAE,GAAI;EAAS,CAAA;;;;;;;AASrG,SAAS,kBAIP,OACA,MAMA;AACA,QAAO;EACL,IAAI,MAAM;EACV,MAAM,MAAM;EACZ,KAAK,MAAM;EACX,OAAO,MAAM,SAAS;EACtB,QAAQ,MAAM;EACd,UAAU,MAAM;EAChB,GAAI,MAAM,SAAS,EAAE,GAAG,EAAE,eAAe,MAAM,UAAU;EACzD,oBAAoB,MAAM;EAC1B,gBAAgB,MAAM;EACvB"}
+{"version":3,"file":"form.js","names":[],"sources":["../src/form.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  useForm,\n  useWatch,\n  type SubmitHandler,\n  type UseFormReturn,\n  type ControllerFieldState,\n  type ControllerRenderProps,\n  type FieldPath,\n  type FieldValues,\n  type RegisterOptions,\n} from \"react-hook-form\";\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"./field\";\n\nimport { cn } from \"./lib/utils\";\n\ntype FormProps<TFieldValues extends FieldValues> = {\n  form: UseFormReturn<TFieldValues>;\n  onSubmit: SubmitHandler<TFieldValues>;\n} & Omit<React.ComponentProps<\"form\">, \"onSubmit\">;\n\ntype FormRootProps = React.ComponentProps<\"form\">;\ntype FormErrorProps = React.ComponentProps<\"p\">;\ntype FormActionsProps = React.ComponentProps<\"div\">;\ntype FormMessageProps = React.ComponentProps<\"p\">;\n\nfunction Form<TFieldValues extends FieldValues>({ form, onSubmit, ...props }: FormProps<TFieldValues>) {\n  return (\n    <FormProvider {...form}>\n      <FormRoot {...props} onSubmit={form.handleSubmit(onSubmit)} />\n    </FormProvider>\n  );\n}\n\n/**\n * Plain `<form>` element with RHF integration.\n *\n * Uses a native `<form>` instead of `@base-ui/react/form` because Base UI\n * Form's internal submit/validation handling conflicts with React Hook Form\n * and blocks button click events inside modal dialogs. Since RHF already\n * provides validation, error handling, and submit management, the Base UI\n * Form wrapper adds no value at the moment.\n */\nfunction FormRoot({ className, ...props }: FormRootProps) {\n  return (\n    <form noValidate data-slot=\"form\" className={cn(\"flex flex-col gap-6\", className)} {...props} />\n  );\n}\n\ntype FormFieldRenderArgs<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n> = {\n  id: string;\n  field: ControllerRenderProps<TFieldValues, TName>;\n  fieldState: ControllerFieldState;\n};\n\ntype FormFieldProps<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n> = {\n  name: TName;\n  id?: string;\n  required?: boolean;\n  label?: React.ReactNode;\n  description?: React.ReactNode;\n  rules?: RegisterOptions<TFieldValues, TName>;\n  /**\n   * Render the actual control.\n   *\n   * - For Base UI controls, prefer `onValueChange`.\n   * - For native/standard inputs, use `onChange`.\n   *\n   * Use `fieldControlProps(field)` to get both.\n   */\n  render: (args: FormFieldRenderArgs<TFieldValues, TName>) => React.ReactNode;\n} & Omit<\n  React.ComponentProps<typeof Field>,\n  \"children\" | \"name\" | \"invalid\" | \"touched\" | \"dirty\" | \"render\"\n>;\n\n/**\n * Base UI + React Hook Form field helper.\n *\n * It maps RHF Controller state onto Base UI's <Field> state so styling can\n * rely on `data-[invalid]`, `data-[touched]`, `data-[dirty]`, etc.\n */\nfunction FormField<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n>(props: FormFieldProps<TFieldValues, TName>) {\n  const { name, id, required, label, description, rules, render, ...rootProps } = props;\n  const { control } = useFormContext<TFieldValues>();\n\n  const reactId = React.useId();\n  const safeName = String(name).replace(/[^a-zA-Z0-9_-]/g, \"-\");\n  const controlId = id ?? `field-${safeName}-${reactId}`;\n\n  const inferredRequired = (() => {\n    if (!rules || !(\"required\" in rules)) return false;\n    const req = (rules as { required?: unknown }).required;\n    if (typeof req === \"boolean\") return req;\n    if (typeof req === \"string\") return true;\n    if (req && typeof req === \"object\" && \"value\" in (req as Record<string, unknown>)) {\n      return Boolean((req as { value?: unknown }).value);\n    }\n    return Boolean(req);\n  })();\n\n  const isRequired = required ?? inferredRequired;\n\n  return (\n    <Controller\n      name={name}\n      control={control}\n      rules={rules}\n      render={({ field, fieldState }) => (\n        <Field\n          {...rootProps}\n          name={field.name}\n          invalid={fieldState.invalid}\n          touched={fieldState.isTouched}\n          dirty={fieldState.isDirty}\n        >\n          {label ? (\n            <FieldLabel>\n              {label}\n              {isRequired ? (\n                <span aria-hidden=\"true\" className=\"text-destructive ml-1\">\n                  *\n                </span>\n              ) : null}\n            </FieldLabel>\n          ) : null}\n          {description ? <FieldDescription>{description}</FieldDescription> : null}\n\n          {render({ id: controlId, field, fieldState })}\n\n          {fieldState.error ? (\n            <FieldError>{fieldState.error.message}</FieldError>\n          ) : null}\n        </Field>\n      )}\n    />\n  );\n}\n\nfunction FormError({ className, ...props }: FormErrorProps) {\n  const {\n    formState: { errors },\n  } = useFormContext();\n\n  const message =\n    (errors as Record<string, unknown>)?.root &&\n    typeof (errors as { root?: { message?: unknown } }).root?.message === \"string\"\n      ? String((errors as { root?: { message?: unknown } }).root?.message)\n      : null;\n\n  if (!message) return null;\n\n  return (\n    <p\n      data-slot=\"form-error\"\n      className={cn(\n        \"text-destructive rounded-lg border border-destructive/30 bg-destructive/5 p-4 text-sm\",\n        className,\n      )}\n      {...props}\n    >\n      {message}\n    </p>\n  );\n}\n\nfunction FormActions({ className, ...props }: FormActionsProps) {\n  return (\n    <div\n      data-slot=\"form-actions\"\n      className={cn(\"flex flex-wrap items-center gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction FormMessage({ className, ...props }: FormMessageProps) {\n  return (\n    <p data-slot=\"form-message\" className={cn(\"text-sm text-contrast/80\", className)} {...props} />\n  );\n}\n\n/**\n * Convenience helper for mapping RHF field props onto either:\n * - Base UI controls (use `onValueChange`)\n * - Native/standard inputs (use `onChange`)\n */\nfunction fieldControlProps<\n  TFieldValues extends FieldValues,\n  TName extends FieldPath<TFieldValues>,\n>(\n  field: ControllerRenderProps<TFieldValues, TName>,\n  opts?: {\n    id?: string;\n    describedBy?: string;\n    invalid?: boolean;\n    native?: boolean;\n  },\n) {\n  return {\n    id: opts?.id,\n    name: field.name,\n    ref: field.ref,\n    value: field.value ?? \"\",\n    onBlur: field.onBlur,\n    onChange: field.onChange,\n    ...(opts?.native ? {} : { onValueChange: field.onChange }),\n    \"aria-describedby\": opts?.describedBy,\n    \"aria-invalid\": opts?.invalid,\n  };\n}\n\nexport {\n  Form,\n  FormRoot,\n  FormField,\n  FormError,\n  FormActions,\n  FormMessage,\n  fieldControlProps,\n  useForm,\n  useWatch,\n  type FormFieldRenderArgs,\n  type FormFieldProps,\n};\n"],"mappings":";;;;;;;AAgCA,SAAS,KAAuC,EAAE,MAAM,UAAU,GAAG,SAAkC;AACrG,QACE,oBAAC,cAAD;EAAc,GAAI;YAChB,oBAAC,UAAD;GAAU,GAAI;GAAO,UAAU,KAAK,aAAa,SAAS;GAAI,CAAA;EACjD,CAAA;;;;;;;;;;;AAanB,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,QACE,oBAAC,QAAD;EAAM,YAAA;EAAW,aAAU;EAAO,WAAW,GAAG,uBAAuB,UAAU;EAAE,GAAI;EAAS,CAAA;;;;;;;;AA2CpG,SAAS,UAGP,OAA4C;CAC5C,MAAM,EAAE,MAAM,IAAI,UAAU,OAAO,aAAa,OAAO,QAAQ,GAAG,cAAc;CAChF,MAAM,EAAE,YAAY,gBAA8B;CAElD,MAAM,UAAU,MAAM,OAAO;CAC7B,MAAM,WAAW,OAAO,KAAK,CAAC,QAAQ,mBAAmB,IAAI;CAC7D,MAAM,YAAY,MAAM,SAAS,SAAS,GAAG;CAE7C,MAAM,0BAA0B;AAC9B,MAAI,CAAC,SAAS,EAAE,cAAc,OAAQ,QAAO;EAC7C,MAAM,MAAO,MAAiC;AAC9C,MAAI,OAAO,QAAQ,UAAW,QAAO;AACrC,MAAI,OAAO,QAAQ,SAAU,QAAO;AACpC,MAAI,OAAO,OAAO,QAAQ,YAAY,WAAY,IAChD,QAAO,QAAS,IAA4B,MAAM;AAEpD,SAAO,QAAQ,IAAI;KACjB;CAEJ,MAAM,aAAa,YAAY;AAE/B,QACE,oBAAC,YAAD;EACQ;EACG;EACF;EACP,SAAS,EAAE,OAAO,iBAChB,qBAAC,OAAD;GACE,GAAI;GACJ,MAAM,MAAM;GACZ,SAAS,WAAW;GACpB,SAAS,WAAW;GACpB,OAAO,WAAW;aALpB;IAOG,QACC,qBAAC,YAAD,EAAA,UAAA,CACG,OACA,aACC,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;eAAwB;KAEpD,CAAA,GACL,KACO,EAAA,CAAA,GACX;IACH,cAAc,oBAAC,kBAAD,EAAA,UAAmB,aAA+B,CAAA,GAAG;IAEnE,OAAO;KAAE,IAAI;KAAW;KAAO;KAAY,CAAC;IAE5C,WAAW,QACV,oBAAC,YAAD,EAAA,UAAa,WAAW,MAAM,SAAqB,CAAA,GACjD;IACE;;EAEV,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;CAC1D,MAAM,EACJ,WAAW,EAAE,aACX,gBAAgB;CAEpB,MAAM,UACH,QAAoC,QACrC,OAAQ,OAA4C,MAAM,YAAY,WAClE,OAAQ,OAA4C,MAAM,QAAQ,GAClE;AAEN,KAAI,CAAC,QAAS,QAAO;AAErB,QACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,yFACA,UACD;EACD,GAAI;YAEH;EACC,CAAA;;AAIR,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qCAAqC,UAAU;EAC7D,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,KAAD;EAAG,aAAU;EAAe,WAAW,GAAG,4BAA4B,UAAU;EAAE,GAAI;EAAS,CAAA;;;;;;;AASnG,SAAS,kBAIP,OACA,MAMA;AACA,QAAO;EACL,IAAI,MAAM;EACV,MAAM,MAAM;EACZ,KAAK,MAAM;EACX,OAAO,MAAM,SAAS;EACtB,QAAQ,MAAM;EACd,UAAU,MAAM;EAChB,GAAI,MAAM,SAAS,EAAE,GAAG,EAAE,eAAe,MAAM,UAAU;EACzD,oBAAoB,MAAM;EAC1B,gBAAgB,MAAM;EACvB"}

package/dist/infinite-scroll.js

@@ -41,11 +41,11 @@ function InfiniteScroll({ onLoadMore, hasMore, isLoading = false, direction = "d
 	const loaderContent = isLoading && /* @__PURE__ */ jsx("div", {
 		"data-slot": "infinite-scroll-loader",
 		className: "flex items-center justify-center py-6",
-		children: loader ?? /* @__PURE__ */ jsx(Spinner, { className: "size-6 text-muted-foreground" })
+		children: loader ?? /* @__PURE__ */ jsx(Spinner, { className: "size-6 text-muted" })
 	});
 	const endContent = !hasMore && !isLoading && endMessage && /* @__PURE__ */ jsx("div", {
 		"data-slot": "infinite-scroll-end",
-		className: "flex items-center justify-center py-6 text-sm text-muted-foreground",
+		className: "flex items-center justify-center py-6 text-sm text-muted",
 		children: endMessage
 	});
 	const sentinel = /* @__PURE__ */ jsx("div", {

package/dist/infinite-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"infinite-scroll.js","names":[],"sources":["../src/infinite-scroll.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\nimport { Spinner } from \"./spinner\"\n\ntype InfiniteScrollProps = {\n  onLoadMore: () => void\n  hasMore: boolean\n  isLoading?: boolean\n  direction?: \"down\" | \"up\"\n  root?: React.RefObject<Element | null>\n  rootMargin?: string\n  threshold?: number\n  loader?: React.ReactNode\n  endMessage?: React.ReactNode\n  className?: string\n  children?: React.ReactNode\n}\n\nfunction InfiniteScroll({\n  onLoadMore,\n  hasMore,\n  isLoading = false,\n  direction = \"down\",\n  root,\n  rootMargin = \"200px\",\n  threshold = 0,\n  loader,\n  endMessage,\n  className,\n  children,\n}: InfiniteScrollProps) {\n  const sentinelRef = React.useRef<HTMLDivElement>(null)\n  const loadingRef = React.useRef(false)\n\n  const onLoadMoreRef = React.useRef(onLoadMore)\n  React.useEffect(() => {\n    onLoadMoreRef.current = onLoadMore\n  }, [onLoadMore])\n\n  React.useEffect(() => {\n    if (!isLoading) {\n      loadingRef.current = false\n    }\n  }, [isLoading])\n\n  React.useEffect(() => {\n    const sentinel = sentinelRef.current\n    if (!sentinel || !hasMore) return\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const [entry] = entries\n        if (entry?.isIntersecting && !loadingRef.current) {\n          loadingRef.current = true\n          onLoadMoreRef.current()\n        }\n      },\n      {\n        root: root?.current ?? null,\n        rootMargin,\n        threshold,\n      }\n    )\n\n    observer.observe(sentinel)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [hasMore, root, rootMargin, threshold])\n\n  const loaderContent = isLoading && (\n    <div\n      data-slot=\"infinite-scroll-loader\"\n      className=\"flex items-center justify-center py-6\"\n    >\n      {loader ?? <Spinner className=\"size-6 text-muted-foreground\" />}\n    </div>\n  )\n\n  const endContent = !hasMore && !isLoading && endMessage && (\n    <div\n      data-slot=\"infinite-scroll-end\"\n      className=\"flex items-center justify-center py-6 text-sm text-muted-foreground\"\n    >\n      {endMessage}\n    </div>\n  )\n\n  const sentinel = (\n    <div\n      ref={sentinelRef}\n      data-slot=\"infinite-scroll-sentinel\"\n      aria-hidden=\"true\"\n      className=\"h-px\"\n    />\n  )\n\n  return (\n    <div\n      data-slot=\"infinite-scroll\"\n      aria-busy={isLoading}\n      className={cn(\"flex flex-col\", className)}\n    >\n      {direction === \"up\" && (\n        <>\n          {sentinel}\n          {loaderContent}\n        </>\n      )}\n\n      {children}\n\n      {direction === \"down\" && (\n        <>\n          {sentinel}\n          {loaderContent}\n        </>\n      )}\n\n      {endContent}\n    </div>\n  )\n}\n\nexport { InfiniteScroll, type InfiniteScrollProps }\n"],"mappings":";;;;;;AAqBA,SAAS,eAAe,EACtB,YACA,SACA,YAAY,OACZ,YAAY,QACZ,MACA,aAAa,SACb,YAAY,GACZ,QACA,YACA,WACA,YACsB;CACtB,MAAM,cAAc,MAAM,OAAuB,KAAK;CACtD,MAAM,aAAa,MAAM,OAAO,MAAM;CAEtC,MAAM,gBAAgB,MAAM,OAAO,WAAW;AAC9C,OAAM,gBAAgB;AACpB,gBAAc,UAAU;IACvB,CAAC,WAAW,CAAC;AAEhB,OAAM,gBAAgB;AACpB,MAAI,CAAC,UACH,YAAW,UAAU;IAEtB,CAAC,UAAU,CAAC;AAEf,OAAM,gBAAgB;EACpB,MAAM,WAAW,YAAY;AAC7B,MAAI,CAAC,YAAY,CAAC,QAAS;EAE3B,MAAM,WAAW,IAAI,sBAClB,YAAY;GACX,MAAM,CAAC,SAAS;AAChB,OAAI,OAAO,kBAAkB,CAAC,WAAW,SAAS;AAChD,eAAW,UAAU;AACrB,kBAAc,SAAS;;KAG3B;GACE,MAAM,MAAM,WAAW;GACvB;GACA;GACD,CACF;AAED,WAAS,QAAQ,SAAS;AAE1B,eAAa;AACX,YAAS,YAAY;;IAEtB;EAAC;EAAS;EAAM;EAAY;EAAU,CAAC;CAE1C,MAAM,gBAAgB,aACpB,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAET,UAAU,oBAAC,SAAD,EAAS,WAAU,gCAAiC,CAAA;EAC3D,CAAA;CAGR,MAAM,aAAa,CAAC,WAAW,CAAC,aAAa,cAC3C,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAET;EACG,CAAA;CAGR,MAAM,WACJ,oBAAC,OAAD;EACE,KAAK;EACL,aAAU;EACV,eAAY;EACZ,WAAU;EACV,CAAA;AAGJ,QACE,qBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GAAG,iBAAiB,UAAU;YAH3C;GAKG,cAAc,QACb,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,cACA,EAAA,CAAA;GAGJ;GAEA,cAAc,UACb,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,cACA,EAAA,CAAA;GAGJ;GACG"}
+{"version":3,"file":"infinite-scroll.js","names":[],"sources":["../src/infinite-scroll.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"./lib/utils\"\nimport { Spinner } from \"./spinner\"\n\ntype InfiniteScrollProps = {\n  onLoadMore: () => void\n  hasMore: boolean\n  isLoading?: boolean\n  direction?: \"down\" | \"up\"\n  root?: React.RefObject<Element | null>\n  rootMargin?: string\n  threshold?: number\n  loader?: React.ReactNode\n  endMessage?: React.ReactNode\n  className?: string\n  children?: React.ReactNode\n}\n\nfunction InfiniteScroll({\n  onLoadMore,\n  hasMore,\n  isLoading = false,\n  direction = \"down\",\n  root,\n  rootMargin = \"200px\",\n  threshold = 0,\n  loader,\n  endMessage,\n  className,\n  children,\n}: InfiniteScrollProps) {\n  const sentinelRef = React.useRef<HTMLDivElement>(null)\n  const loadingRef = React.useRef(false)\n\n  const onLoadMoreRef = React.useRef(onLoadMore)\n  React.useEffect(() => {\n    onLoadMoreRef.current = onLoadMore\n  }, [onLoadMore])\n\n  React.useEffect(() => {\n    if (!isLoading) {\n      loadingRef.current = false\n    }\n  }, [isLoading])\n\n  React.useEffect(() => {\n    const sentinel = sentinelRef.current\n    if (!sentinel || !hasMore) return\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const [entry] = entries\n        if (entry?.isIntersecting && !loadingRef.current) {\n          loadingRef.current = true\n          onLoadMoreRef.current()\n        }\n      },\n      {\n        root: root?.current ?? null,\n        rootMargin,\n        threshold,\n      }\n    )\n\n    observer.observe(sentinel)\n\n    return () => {\n      observer.disconnect()\n    }\n  }, [hasMore, root, rootMargin, threshold])\n\n  const loaderContent = isLoading && (\n    <div\n      data-slot=\"infinite-scroll-loader\"\n      className=\"flex items-center justify-center py-6\"\n    >\n      {loader ?? <Spinner className=\"size-6 text-muted\" />}\n    </div>\n  )\n\n  const endContent = !hasMore && !isLoading && endMessage && (\n    <div\n      data-slot=\"infinite-scroll-end\"\n      className=\"flex items-center justify-center py-6 text-sm text-muted\"\n    >\n      {endMessage}\n    </div>\n  )\n\n  const sentinel = (\n    <div\n      ref={sentinelRef}\n      data-slot=\"infinite-scroll-sentinel\"\n      aria-hidden=\"true\"\n      className=\"h-px\"\n    />\n  )\n\n  return (\n    <div\n      data-slot=\"infinite-scroll\"\n      aria-busy={isLoading}\n      className={cn(\"flex flex-col\", className)}\n    >\n      {direction === \"up\" && (\n        <>\n          {sentinel}\n          {loaderContent}\n        </>\n      )}\n\n      {children}\n\n      {direction === \"down\" && (\n        <>\n          {sentinel}\n          {loaderContent}\n        </>\n      )}\n\n      {endContent}\n    </div>\n  )\n}\n\nexport { InfiniteScroll, type InfiniteScrollProps }\n"],"mappings":";;;;;;AAqBA,SAAS,eAAe,EACtB,YACA,SACA,YAAY,OACZ,YAAY,QACZ,MACA,aAAa,SACb,YAAY,GACZ,QACA,YACA,WACA,YACsB;CACtB,MAAM,cAAc,MAAM,OAAuB,KAAK;CACtD,MAAM,aAAa,MAAM,OAAO,MAAM;CAEtC,MAAM,gBAAgB,MAAM,OAAO,WAAW;AAC9C,OAAM,gBAAgB;AACpB,gBAAc,UAAU;IACvB,CAAC,WAAW,CAAC;AAEhB,OAAM,gBAAgB;AACpB,MAAI,CAAC,UACH,YAAW,UAAU;IAEtB,CAAC,UAAU,CAAC;AAEf,OAAM,gBAAgB;EACpB,MAAM,WAAW,YAAY;AAC7B,MAAI,CAAC,YAAY,CAAC,QAAS;EAE3B,MAAM,WAAW,IAAI,sBAClB,YAAY;GACX,MAAM,CAAC,SAAS;AAChB,OAAI,OAAO,kBAAkB,CAAC,WAAW,SAAS;AAChD,eAAW,UAAU;AACrB,kBAAc,SAAS;;KAG3B;GACE,MAAM,MAAM,WAAW;GACvB;GACA;GACD,CACF;AAED,WAAS,QAAQ,SAAS;AAE1B,eAAa;AACX,YAAS,YAAY;;IAEtB;EAAC;EAAS;EAAM;EAAY;EAAU,CAAC;CAE1C,MAAM,gBAAgB,aACpB,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAET,UAAU,oBAAC,SAAD,EAAS,WAAU,qBAAsB,CAAA;EAChD,CAAA;CAGR,MAAM,aAAa,CAAC,WAAW,CAAC,aAAa,cAC3C,oBAAC,OAAD;EACE,aAAU;EACV,WAAU;YAET;EACG,CAAA;CAGR,MAAM,WACJ,oBAAC,OAAD;EACE,KAAK;EACL,aAAU;EACV,eAAY;EACZ,WAAU;EACV,CAAA;AAGJ,QACE,qBAAC,OAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,GAAG,iBAAiB,UAAU;YAH3C;GAKG,cAAc,QACb,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,cACA,EAAA,CAAA;GAGJ;GAEA,cAAc,UACb,qBAAA,UAAA,EAAA,UAAA,CACG,UACA,cACA,EAAA,CAAA;GAGJ;GACG"}

package/dist/input-group.d.ts

@@ -26,7 +26,7 @@ declare function InputGroupAddon({
   ...props
 }: InputGroupAddonProps): _$react_jsx_runtime0.JSX.Element;
 declare const inputGroupButtonVariants: (props?: ({
-  size?: "xs" | "sm" | "icon-xs" | "icon-sm" | null | undefined;
+  size?: "sm" | "xs" | "icon-xs" | "icon-sm" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare function InputGroupButton({
   className,

package/dist/input-group.js

@@ -11,11 +11,11 @@ function InputGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-group",
 		role: "group",
-		className: cn("border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 not-has-disabled:has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
+		className: cn("border-edge dark:bg-edge/30 has-[[data-slot=input-group-control]:focus-visible]:border-focus has-[[data-slot=input-group-control]:focus-visible]:ring-focus/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-edge/50 dark:has-disabled:bg-edge/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-md border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 not-has-disabled:has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className),
 		...props
 	});
 }
-const inputGroupAddonVariants = cva("text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
+const inputGroupAddonVariants = cva("text-muted h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-sm [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none", {
 	variants: { align: {
 		"inline-start": "pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first",
 		"inline-end": "pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last",
@@ -39,9 +39,9 @@ function InputGroupAddon({ className, align = "inline-start", ...props }) {
 }
 const inputGroupButtonVariants = cva("gap-2 text-sm shadow-none flex items-center", {
 	variants: { size: {
-		xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+		xs: "h-6 gap-1 rounded-sm px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
 		sm: "",
-		"icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0",
+		"icon-xs": "size-6 rounded-sm p-0",
 		"icon-sm": "size-8 p-0"
 	} },
 	defaultVariants: { size: "xs" }
@@ -57,7 +57,7 @@ function InputGroupButton({ className, type = "button", variant = "ghost", size
 }
 function InputGroupText({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
-		className: cn("text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("text-muted flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }

package/dist/input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","names":[],"sources":["../src/input-group.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport { Textarea } from \"./textarea\"\n\ntype InputGroupProps = React.ComponentProps<\"div\">\n\ntype InputGroupAddonProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof inputGroupAddonVariants>\n\ntype InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }\n\ntype InputGroupTextProps = React.ComponentProps<\"span\">\n\ntype InputGroupInputProps = React.ComponentProps<\"input\">\n\ntype InputGroupTextareaProps = React.ComponentProps<\"textarea\">\n\nfunction InputGroup({ className, ...props }: InputGroupProps) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 not-has-disabled:has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\":\n          \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction 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(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-[calc(var(--radius)-3px)] p-0\",\n        \"icon-sm\": \"size-8 p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction 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(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: InputGroupTextProps) {\n  return (\n    <span\n      className={cn(\n        \"text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: InputGroupInputProps) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: InputGroupTextareaProps) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n"],"mappings":";;;;;;;;;AA0BA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,2qCACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,MAAM,0BAA0B,IAC9B,2PACA;CACE,UAAU,EACR,OAAO;EACL,gBACE;EACF,cACE;EACF,eACE;EACF,aACE;EACH,EACF;CACD,iBAAiB,EACf,OAAO,gBACR;CACF,CACF;AAED,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SACoB;AACvB,QACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,OAAO,CAAC,EAAE,UAAU;EAC5D,UAAU,MAAM;AACd,OAAK,EAAE,OAAuB,QAAQ,SAAS,CAC7C;AAEF,KAAE,cAAc,eAAe,cAAc,QAAQ,EAAE,OAAO;;EAEhE,GAAI;EACJ,CAAA;;AAIN,MAAM,2BAA2B,IAC/B,+CACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WACE;EACF,WAAW;EACZ,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CACF;AAED,SAAS,iBAAiB,EACxB,WACA,OAAO,UACP,UAAU,SACV,OAAO,MACP,GAAG,SACqB;AACxB,QACE,oBAAC,QAAD;EACQ;EACN,aAAW;EACF;EACT,WAAW,GAAG,yBAAyB,EAAE,MAAM,CAAC,EAAE,UAAU;EAC5D,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EAAE,WAAW,GAAG,SAA8B;AACpE,QACE,oBAAC,QAAD;EACE,WAAW,GACT,0HACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EACvB,WACA,GAAG,SACoB;AACvB,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oLACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACuB;AAC1B,QACE,oBAAC,UAAD;EACE,aAAU;EACV,WAAW,GACT,qMACA,UACD;EACD,GAAI;EACJ,CAAA"}
+{"version":3,"file":"input-group.js","names":[],"sources":["../src/input-group.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport { Button } from \"./button\"\nimport { Input } from \"./input\"\nimport { Textarea } from \"./textarea\"\n\ntype InputGroupProps = React.ComponentProps<\"div\">\n\ntype InputGroupAddonProps = React.ComponentProps<\"div\"> &\n  VariantProps<typeof inputGroupAddonVariants>\n\ntype InputGroupButtonProps = Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }\n\ntype InputGroupTextProps = React.ComponentProps<\"span\">\n\ntype InputGroupInputProps = React.ComponentProps<\"input\">\n\ntype InputGroupTextareaProps = React.ComponentProps<\"textarea\">\n\nfunction InputGroup({ className, ...props }: InputGroupProps) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"border-edge dark:bg-edge/30 has-[[data-slot=input-group-control]:focus-visible]:border-focus has-[[data-slot=input-group-control]:focus-visible]:ring-focus/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-edge/50 dark:has-disabled:bg-edge/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-md border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 not-has-disabled:has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-sm [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\":\n          \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\":\n          \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction 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(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-sm px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\":\n          \"size-6 rounded-sm p-0\",\n        \"icon-sm\": \"size-8 p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction 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(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: InputGroupTextProps) {\n  return (\n    <span\n      className={cn(\n        \"text-muted flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: InputGroupInputProps) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: InputGroupTextareaProps) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n"],"mappings":";;;;;;;;;AA0BA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,yqCACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,MAAM,0BAA0B,IAC9B,yNACA;CACE,UAAU,EACR,OAAO;EACL,gBACE;EACF,cACE;EACF,eACE;EACF,aACE;EACH,EACF;CACD,iBAAiB,EACf,OAAO,gBACR;CACF,CACF;AAED,SAAS,gBAAgB,EACvB,WACA,QAAQ,gBACR,GAAG,SACoB;AACvB,QACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY;EACZ,WAAW,GAAG,wBAAwB,EAAE,OAAO,CAAC,EAAE,UAAU;EAC5D,UAAU,MAAM;AACd,OAAK,EAAE,OAAuB,QAAQ,SAAS,CAC7C;AAEF,KAAE,cAAc,eAAe,cAAc,QAAQ,EAAE,OAAO;;EAEhE,GAAI;EACJ,CAAA;;AAIN,MAAM,2BAA2B,IAC/B,+CACA;CACE,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,WACE;EACF,WAAW;EACZ,EACF;CACD,iBAAiB,EACf,MAAM,MACP;CACF,CACF;AAED,SAAS,iBAAiB,EACxB,WACA,OAAO,UACP,UAAU,SACV,OAAO,MACP,GAAG,SACqB;AACxB,QACE,oBAAC,QAAD;EACQ;EACN,aAAW;EACF;EACT,WAAW,GAAG,yBAAyB,EAAE,MAAM,CAAC,EAAE,UAAU;EAC5D,GAAI;EACJ,CAAA;;AAIN,SAAS,eAAe,EAAE,WAAW,GAAG,SAA8B;AACpE,QACE,oBAAC,QAAD;EACE,WAAW,GACT,+GACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EACvB,WACA,GAAG,SACoB;AACvB,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oLACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,mBAAmB,EAC1B,WACA,GAAG,SACuB;AAC1B,QACE,oBAAC,UAAD;EACE,aAAU;EACV,WAAW,GACT,qMACA,UACD;EACD,GAAI;EACJ,CAAA"}

package/dist/input-otp.js

@@ -17,7 +17,7 @@ function InputOTP({ className, containerClassName, ...props }) {
 function InputOTPGroup({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-otp-group",
-		className: cn("flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40", className),
+		className: cn("flex items-center rounded-md has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40", className),
 		...props
 	});
 }
@@ -26,11 +26,11 @@ function InputOTPSlot({ index, className, ...props }) {
 	return /* @__PURE__ */ jsxs("div", {
 		"data-slot": "input-otp-slot",
 		"data-active": isActive || void 0,
-		className: cn("border-input dark:bg-input/30 relative flex size-9 items-center justify-center border-y border-r text-sm motion-color outline-none first:rounded-l-lg first:border-l last:rounded-r-lg", "data-active:border-ring data-active:ring-3 data-active:ring-ring/50 data-active:z-10", "aria-invalid:border-destructive data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-destructive/20 dark:data-active:aria-invalid:ring-destructive/40", className),
+		className: cn("border-edge dark:bg-edge/30 relative flex size-9 items-center justify-center border-y border-r text-sm motion-color outline-none first:rounded-l-md first:border-l last:rounded-r-md", "data-active:border-focus data-active:ring-3 data-active:ring-focus/50 data-active:z-10", "aria-invalid:border-destructive data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-destructive/20 dark:data-active:aria-invalid:ring-destructive/40", className),
 		...props,
 		children: [char, hasFakeCaret && /* @__PURE__ */ jsx("div", {
 			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
-			children: /* @__PURE__ */ jsx("div", { className: "animate-caret-blink bg-foreground h-4 w-px duration-1000" })
+			children: /* @__PURE__ */ jsx("div", { className: "animate-caret-blink bg-contrast h-4 w-px duration-1000" })
 		})]
 	});
 }

package/dist/input-otp.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-otp.js","names":[],"sources":["../src/input-otp.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"./lib/utils\"\nimport { MinusIcon } from \"./lib/internal-icons\"\n\ntype InputOTPProps = React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: InputOTPProps) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"flex items-center has-disabled:opacity-50\",\n        containerClassName,\n      )}\n      spellCheck={false}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  )\n}\n\ntype InputOTPGroupProps = React.ComponentProps<\"div\">\n\nfunction InputOTPGroup({ className, ...props }: InputOTPGroupProps) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\n        \"flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype InputOTPSlotProps = React.ComponentProps<\"div\"> & {\n  index: number\n}\n\nfunction InputOTPSlot({ index, className, ...props }: InputOTPSlotProps) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive || undefined}\n      className={cn(\n        \"border-input dark:bg-input/30 relative flex size-9 items-center justify-center border-y border-r text-sm motion-color outline-none first:rounded-l-lg first:border-l last:rounded-r-lg\",\n        \"data-active:border-ring data-active:ring-3 data-active:ring-ring/50 data-active:z-10\",\n        \"aria-invalid:border-destructive data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-destructive/20 dark:data-active:aria-invalid:ring-destructive/40\",\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-foreground h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\ntype InputOTPSeparatorProps = React.ComponentProps<\"div\">\n\nfunction InputOTPSeparator({ className, ...props }: InputOTPSeparatorProps) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className={cn(\n        \"flex items-center [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      role=\"separator\"\n      {...props}\n    >\n      <MinusIcon />\n    </div>\n  )\n}\n\nexport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n  InputOTPSeparator\n}\n"],"mappings":";;;;;;;AAYA,SAAS,SAAS,EAChB,WACA,oBACA,GAAG,SACa;AAChB,QACE,oBAAC,UAAD;EACE,aAAU;EACV,oBAAoB,GAClB,6CACA,mBACD;EACD,YAAY;EACZ,WAAW,GAAG,+BAA+B,UAAU;EACvD,GAAI;EACJ,CAAA;;AAMN,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,2KACA,UACD;EACD,GAAI;EACJ,CAAA;;AAQN,SAAS,aAAa,EAAE,OAAO,WAAW,GAAG,SAA4B;CAEvE,MAAM,EAAE,MAAM,cAAc,aADJ,MAAM,WAAW,gBACe,EAAE,MAAM,UAAU,EAAE;AAE5E,QACE,qBAAC,OAAD;EACE,aAAU;EACV,eAAa,YAAY,KAAA;EACzB,WAAW,GACT,0LACA,wFACA,8KACA,UACD;EACD,GAAI;YATN,CAWG,MACA,gBACC,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD,EAAK,WAAU,4DAA6D,CAAA;GACxE,CAAA,CAEJ;;;AAMV,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAiC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0DACA,UACD;EACD,MAAK;EACL,GAAI;YAEJ,oBAAC,WAAD,EAAa,CAAA;EACT,CAAA"}
+{"version":3,"file":"input-otp.js","names":[],"sources":["../src/input-otp.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"./lib/utils\"\nimport { MinusIcon } from \"./lib/internal-icons\"\n\ntype InputOTPProps = React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: InputOTPProps) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"flex items-center has-disabled:opacity-50\",\n        containerClassName,\n      )}\n      spellCheck={false}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  )\n}\n\ntype InputOTPGroupProps = React.ComponentProps<\"div\">\n\nfunction InputOTPGroup({ className, ...props }: InputOTPGroupProps) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\n        \"flex items-center rounded-md has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype InputOTPSlotProps = React.ComponentProps<\"div\"> & {\n  index: number\n}\n\nfunction InputOTPSlot({ index, className, ...props }: InputOTPSlotProps) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive || undefined}\n      className={cn(\n        \"border-edge dark:bg-edge/30 relative flex size-9 items-center justify-center border-y border-r text-sm motion-color outline-none first:rounded-l-md first:border-l last:rounded-r-md\",\n        \"data-active:border-focus data-active:ring-3 data-active:ring-focus/50 data-active:z-10\",\n        \"aria-invalid:border-destructive data-active:aria-invalid:border-destructive data-active:aria-invalid:ring-destructive/20 dark:data-active:aria-invalid:ring-destructive/40\",\n        className,\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"animate-caret-blink bg-contrast h-4 w-px duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\ntype InputOTPSeparatorProps = React.ComponentProps<\"div\">\n\nfunction InputOTPSeparator({ className, ...props }: InputOTPSeparatorProps) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className={cn(\n        \"flex items-center [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      role=\"separator\"\n      {...props}\n    >\n      <MinusIcon />\n    </div>\n  )\n}\n\nexport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSlot,\n  InputOTPSeparator\n}\n"],"mappings":";;;;;;;AAYA,SAAS,SAAS,EAChB,WACA,oBACA,GAAG,SACa;AAChB,QACE,oBAAC,UAAD;EACE,aAAU;EACV,oBAAoB,GAClB,6CACA,mBACD;EACD,YAAY;EACZ,WAAW,GAAG,+BAA+B,UAAU;EACvD,GAAI;EACJ,CAAA;;AAMN,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,2KACA,UACD;EACD,GAAI;EACJ,CAAA;;AAQN,SAAS,aAAa,EAAE,OAAO,WAAW,GAAG,SAA4B;CAEvE,MAAM,EAAE,MAAM,cAAc,aADJ,MAAM,WAAW,gBACe,EAAE,MAAM,UAAU,EAAE;AAE5E,QACE,qBAAC,OAAD;EACE,aAAU;EACV,eAAa,YAAY,KAAA;EACzB,WAAW,GACT,wLACA,0FACA,8KACA,UACD;EACD,GAAI;YATN,CAWG,MACA,gBACC,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,OAAD,EAAK,WAAU,0DAA2D,CAAA;GACtE,CAAA,CAEJ;;;AAMV,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAiC;AAC1E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0DACA,UACD;EACD,MAAK;EACL,GAAI;YAEJ,oBAAC,WAAD,EAAa,CAAA;EACT,CAAA"}

package/dist/input.js

@@ -7,7 +7,7 @@ function Input({ className, type, ...props }) {
 	return /* @__PURE__ */ jsx(Input$1, {
 		type,
 		"data-slot": "input",
-		className: cn("dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
+		className: cn("dark:bg-edge/30 border-edge focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-edge/50 dark:disabled:bg-edge/80 file:text-contrast placeholder:text-soft h-8 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm", className),
 		...props
 	});
 }

package/dist/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":["InputPrimitive"],"sources":["../src/input.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"./lib/utils\"\n\ntype InputProps = React.ComponentProps<\"input\">\n\nfunction Input({ className, type, ...props }: InputProps) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"],"mappings":";;;;;AAOA,SAAS,MAAM,EAAE,WAAW,MAAM,GAAG,SAAqB;AACxD,QACE,oBAACA,SAAD;EACQ;EACN,aAAU;EACV,WAAW,GACT,+oBACA,UACD;EACD,GAAI;EACJ,CAAA"}
+{"version":3,"file":"input.js","names":["InputPrimitive"],"sources":["../src/input.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"./lib/utils\"\n\ntype InputProps = React.ComponentProps<\"input\">\n\nfunction Input({ className, type, ...props }: InputProps) {\n  return (\n    <InputPrimitive\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"dark:bg-edge/30 border-edge focus-visible:border-focus focus-visible:ring-focus/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-edge/50 dark:disabled:bg-edge/80 file:text-contrast placeholder:text-soft h-8 w-full min-w-0 rounded-md border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n"],"mappings":";;;;;AAOA,SAAS,MAAM,EAAE,WAAW,MAAM,GAAG,SAAqB;AACxD,QACE,oBAACA,SAAD;EACQ;EACN,aAAU;EACV,WAAW,GACT,+nBACA,UACD;EACD,GAAI;EACJ,CAAA"}

package/dist/item.d.ts

@@ -8,7 +8,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 //#region src/item.d.ts
 declare const itemVariants: (props?: ({
   variant?: "default" | "outline" | "muted" | null | undefined;
-  size?: "default" | "xs" | "sm" | null | undefined;
+  size?: "default" | "sm" | "xs" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string;
 declare const itemMediaVariants: (props?: ({
   variant?: "default" | "image" | "icon" | null | undefined;

package/dist/item.js

@@ -7,12 +7,12 @@ import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/item.tsx
-const itemVariants = cva("[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-200 focus-visible:ring-3 [a]:transition-colors", {
+const itemVariants = cva("[a]:hover:bg-secondary rounded-md border text-sm w-full group/item focus-visible:border-focus focus-visible:ring-focus/50 flex items-center flex-wrap outline-none transition-colors duration-200 focus-visible:ring-3 [a]:transition-colors", {
 	variants: {
 		variant: {
 			default: "border-transparent",
-			outline: "border-border",
-			muted: "bg-muted/50 border-transparent"
+			outline: "border-line",
+			muted: "bg-secondary/50 border-transparent"
 		},
 		size: {
 			default: "gap-2.5 px-3 py-2.5",
@@ -93,7 +93,7 @@ function ItemTitle({ className, ...props }) {
 function ItemDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("p", {
 		"data-slot": "item-description",
-		className: cn("text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4", className),
+		className: cn("text-muted [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4", className),
 		...props
 	});
 }

package/dist/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","names":[],"sources":["../src/item.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport { Separator } from \"./separator\"\n\nconst itemVariants = cva(\n  \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-200 focus-visible:ring-3 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst itemMediaVariants = cva(\n  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\ntype ItemGroupProps = React.ComponentProps<\"div\">\ntype ItemSeparatorProps = React.ComponentProps<typeof Separator>\ntype ItemProps = useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>\ntype ItemMediaProps = React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>\ntype ItemContentProps = React.ComponentProps<\"div\">\ntype ItemTitleProps = React.ComponentProps<\"div\">\ntype ItemDescriptionProps = React.ComponentProps<\"p\">\ntype ItemActionsProps = React.ComponentProps<\"div\">\ntype ItemHeaderProps = React.ComponentProps<\"div\">\ntype ItemFooterProps = React.ComponentProps<\"div\">\n\nfunction ItemGroup({ className, ...props }: ItemGroupProps) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({ className, ...props }: ItemSeparatorProps) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: ItemProps) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"item\",\n      variant,\n      size,\n    },\n  })\n}\n\nfunction ItemMedia({ className, variant = \"default\", ...props }: ItemMediaProps) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: ItemContentProps) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: ItemTitleProps) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: ItemDescriptionProps) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: ItemActionsProps) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: ItemHeaderProps) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: ItemFooterProps) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n"],"mappings":";;;;;;;;;AAUA,MAAM,eAAe,IACnB,0OACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACL;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAED,MAAM,oBAAoB,IACxB,kMACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OAAO;EACR,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAaD,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,GACT,mGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAAC,WAAD;EACE,aAAU;EACV,aAAY;EACZ,WAAW,GAAG,QAAQ,UAAU;EAChC,GAAI;EACJ,CAAA;;AAIN,SAAS,KAAK,EACZ,WACA,UAAU,WACV,OAAO,WACP,QACA,GAAG,SACS;AACZ,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,aAAa;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC,EAC1D,EACD,MACD;EACD;EACA,OAAO;GACL,MAAM;GACN;GACA;GACD;EACF,CAAC;;AAGJ,SAAS,UAAU,EAAE,WAAW,UAAU,WAAW,GAAG,SAAyB;AAC/E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,kBAAkB;GAAE;GAAS;GAAW,CAAC,CAAC;EACxD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AACtE,QACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,uLACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sDACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sDACA,UACD;EACD,GAAI;EACJ,CAAA"}
+{"version":3,"file":"item.js","names":[],"sources":["../src/item.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"./lib/utils\"\nimport { Separator } from \"./separator\"\n\nconst itemVariants = cva(\n  \"[a]:hover:bg-secondary rounded-md border text-sm w-full group/item focus-visible:border-focus focus-visible:ring-focus/50 flex items-center flex-wrap outline-none transition-colors duration-200 focus-visible:ring-3 [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-line\",\n        muted: \"bg-secondary/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nconst itemMediaVariants = cva(\n  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\ntype ItemGroupProps = React.ComponentProps<\"div\">\ntype ItemSeparatorProps = React.ComponentProps<typeof Separator>\ntype ItemProps = useRender.ComponentProps<\"div\"> & VariantProps<typeof itemVariants>\ntype ItemMediaProps = React.ComponentProps<\"div\"> & VariantProps<typeof itemMediaVariants>\ntype ItemContentProps = React.ComponentProps<\"div\">\ntype ItemTitleProps = React.ComponentProps<\"div\">\ntype ItemDescriptionProps = React.ComponentProps<\"p\">\ntype ItemActionsProps = React.ComponentProps<\"div\">\ntype ItemHeaderProps = React.ComponentProps<\"div\">\ntype ItemFooterProps = React.ComponentProps<\"div\">\n\nfunction ItemGroup({ className, ...props }: ItemGroupProps) {\n  return (\n    <div\n      role=\"list\"\n      data-slot=\"item-group\"\n      className={cn(\n        \"group/item-group flex w-full flex-col gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemSeparator({ className, ...props }: ItemSeparatorProps) {\n  return (\n    <Separator\n      data-slot=\"item-separator\"\n      orientation=\"horizontal\"\n      className={cn(\"my-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction Item({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  render,\n  ...props\n}: ItemProps) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(itemVariants({ variant, size, className })),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"item\",\n      variant,\n      size,\n    },\n  })\n}\n\nfunction ItemMedia({ className, variant = \"default\", ...props }: ItemMediaProps) {\n  return (\n    <div\n      data-slot=\"item-media\"\n      data-variant={variant}\n      className={cn(itemMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction ItemContent({ className, ...props }: ItemContentProps) {\n  return (\n    <div\n      data-slot=\"item-content\"\n      className={cn(\n        \"flex flex-1 flex-col gap-1 group-data-[size=xs]/item:gap-0 [&+[data-slot=item-content]]:flex-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemTitle({ className, ...props }: ItemTitleProps) {\n  return (\n    <div\n      data-slot=\"item-title\"\n      className={cn(\n        \"line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemDescription({ className, ...props }: ItemDescriptionProps) {\n  return (\n    <p\n      data-slot=\"item-description\"\n      className={cn(\n        \"text-muted [&>a:hover]:text-primary line-clamp-2 text-left text-sm leading-normal font-normal group-data-[size=xs]/item:text-xs [&>a]:underline [&>a]:underline-offset-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemActions({ className, ...props }: ItemActionsProps) {\n  return (\n    <div\n      data-slot=\"item-actions\"\n      className={cn(\"flex items-center gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ItemHeader({ className, ...props }: ItemHeaderProps) {\n  return (\n    <div\n      data-slot=\"item-header\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ItemFooter({ className, ...props }: ItemFooterProps) {\n  return (\n    <div\n      data-slot=\"item-footer\"\n      className={cn(\n        \"flex basis-full items-center justify-between gap-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Item,\n  ItemMedia,\n  ItemContent,\n  ItemActions,\n  ItemGroup,\n  ItemSeparator,\n  ItemTitle,\n  ItemDescription,\n  ItemHeader,\n  ItemFooter,\n}\n"],"mappings":";;;;;;;;;AAUA,MAAM,eAAe,IACnB,gPACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,SAAS;GACT,OAAO;GACR;EACD,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACL;EACF;CACD,iBAAiB;EACf,SAAS;EACT,MAAM;EACP;CACF,CACF;AAED,MAAM,oBAAoB,IACxB,kMACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;EACN,OAAO;EACR,EACF;CACD,iBAAiB,EACf,SAAS,WACV;CACF,CACF;AAaD,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,WAAW,GACT,mGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAAC,WAAD;EACE,aAAU;EACV,aAAY;EACZ,WAAW,GAAG,QAAQ,UAAU;EAChC,GAAI;EACJ,CAAA;;AAIN,SAAS,KAAK,EACZ,WACA,UAAU,WACV,OAAO,WACP,QACA,GAAG,SACS;AACZ,QAAO,UAAU;EACf,gBAAgB;EAChB,OAAO,WACL,EACE,WAAW,GAAG,aAAa;GAAE;GAAS;GAAM;GAAW,CAAC,CAAC,EAC1D,EACD,MACD;EACD;EACA,OAAO;GACL,MAAM;GACN;GACA;GACD;EACF,CAAC;;AAGJ,SAAS,UAAU,EAAE,WAAW,UAAU,WAAW,GAAG,SAAyB;AAC/E,QACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,GAAG,kBAAkB;GAAE;GAAS;GAAW,CAAC,CAAC;EACxD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,UAAU,EAAE,WAAW,GAAG,SAAyB;AAC1D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kGACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAA+B;AACtE,QACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GACT,4KACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,YAAY,EAAE,WAAW,GAAG,SAA2B;AAC9D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,UAAU;EACnD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sDACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0B;AAC5D,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sDACA,UACD;EACD,GAAI;EACJ,CAAA"}

package/dist/kbd.js

@@ -4,7 +4,7 @@ import { jsx } from "react/jsx-runtime";
 function Kbd({ className, ...props }) {
 	return /* @__PURE__ */ jsx("kbd", {
 		"data-slot": "kbd",
-		className: cn("bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3", className),
+		className: cn("bg-secondary text-muted in-data-[slot=tooltip-content]:bg-foundation/20 in-data-[slot=tooltip-content]:text-foundation dark:in-data-[slot=tooltip-content]:bg-foundation/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3", className),
 		...props
 	});
 }

package/dist/kbd.js.map

@@ -1 +1 @@
-{"version":3,"file":"kbd.js","names":[],"sources":["../src/kbd.tsx"],"sourcesContent":["import { cn } from \"./lib/utils\"\n\ntype KbdProps = React.ComponentProps<\"kbd\">\n\ntype KbdGroupProps = React.ComponentProps<\"div\">\n\nfunction Kbd({ className, ...props }: KbdProps) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: KbdGroupProps) {\n  return (\n    <div\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\nexport type { KbdProps, KbdGroupProps }\n"],"mappings":";;;AAMA,SAAS,IAAI,EAAE,WAAW,GAAG,SAAmB;AAC9C,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,yWACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kCAAkC,UAAU;EAC1D,GAAI;EACJ,CAAA"}
+{"version":3,"file":"kbd.js","names":[],"sources":["../src/kbd.tsx"],"sourcesContent":["import { cn } from \"./lib/utils\"\n\ntype KbdProps = React.ComponentProps<\"kbd\">\n\ntype KbdGroupProps = React.ComponentProps<\"div\">\n\nfunction Kbd({ className, ...props }: KbdProps) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-secondary text-muted in-data-[slot=tooltip-content]:bg-foundation/20 in-data-[slot=tooltip-content]:text-foundation dark:in-data-[slot=tooltip-content]:bg-foundation/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction KbdGroup({ className, ...props }: KbdGroupProps) {\n  return (\n    <div\n      data-slot=\"kbd-group\"\n      className={cn(\"inline-flex items-center gap-1\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\nexport type { KbdProps, KbdGroupProps }\n"],"mappings":";;;AAMA,SAAS,IAAI,EAAE,WAAW,GAAG,SAAmB;AAC9C,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kWACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,SAAS,EAAE,WAAW,GAAG,SAAwB;AACxD,QACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kCAAkC,UAAU;EAC1D,GAAI;EACJ,CAAA"}

package/dist/menu.js

@@ -34,7 +34,7 @@ function MenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOf
 		sideOffset,
 		children: /* @__PURE__ */ jsx(Menu$1.Popup, {
 			"data-slot": "menu-content",
-			className: cn("motion-slide ring-foreground/10 bg-popover text-popover-foreground z-50 max-h-(--available-height) w-auto min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 outline-none data-closed:overflow-hidden", className),
+			className: cn("motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) w-auto min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-none data-closed:overflow-hidden", className),
 			finalFocus: resolveFinalFocus(restoreFocusOnClose, finalFocus),
 			...props
 		})
@@ -50,7 +50,7 @@ function MenuLabel({ className, inset, ...props }) {
 	return /* @__PURE__ */ jsx(Menu$1.GroupLabel, {
 		"data-slot": "menu-label",
 		"data-inset": inset,
-		className: cn("text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7", className),
+		className: cn("text-muted px-1.5 py-1 text-xs font-medium data-inset:pl-7", className),
 		...props
 	});
 }
@@ -59,7 +59,7 @@ function MenuItem({ className, inset, variant = "default", ...props }) {
 		"data-slot": "menu-item",
 		"data-inset": inset,
 		"data-variant": variant,
-		className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/menu-item relative flex cursor-clickable items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-primary focus:text-white data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-white group/menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props
 	});
 }
@@ -73,7 +73,7 @@ function MenuSubTrigger({ className, inset, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu$1.SubmenuTrigger, {
 		"data-slot": "menu-sub-trigger",
 		"data-inset": inset,
-		className: cn("focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-clickable items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-primary focus:text-white data-open:bg-primary data-open:text-white not-data-[variant=destructive]:focus:**:text-white data-popup-open:bg-primary data-popup-open:text-white flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
 	});
@@ -81,7 +81,7 @@ function MenuSubTrigger({ className, inset, children, ...props }) {
 function MenuSubContent({ align = "start", alignOffset = -4, side = "right", sideOffset = 0, className, ...props }) {
 	return /* @__PURE__ */ jsx(MenuContent, {
 		"data-slot": "menu-sub-content",
-		className: cn("w-auto min-w-24 shadow-lg", className),
+		className: cn("w-auto min-w-24 shadow-md", className),
 		align,
 		alignOffset,
 		side,
@@ -93,7 +93,7 @@ function MenuCheckboxItem({ className, children, checked, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu$1.CheckboxItem, {
 		"data-slot": "menu-checkbox-item",
 		"data-inset": inset,
-		className: cn("focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-primary focus:text-white focus:**:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		checked,
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
@@ -113,7 +113,7 @@ function MenuRadioItem({ className, children, inset, ...props }) {
 	return /* @__PURE__ */ jsxs(Menu$1.RadioItem, {
 		"data-slot": "menu-radio-item",
 		"data-inset": inset,
-		className: cn("focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("focus:bg-primary focus:text-white focus:**:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			"data-slot": "menu-radio-item-indicator",
@@ -125,14 +125,14 @@ function MenuRadioItem({ className, children, inset, ...props }) {
 function MenuSeparator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menu$1.Separator, {
 		"data-slot": "menu-separator",
-		className: cn("bg-border -mx-1 my-1 h-px", className),
+		className: cn("bg-line -mx-1 my-1 h-px", className),
 		...props
 	});
 }
 function MenuShortcut({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "menu-shortcut",
-		className: cn("text-muted-foreground group-focus/menu-item:text-accent-foreground ml-auto text-xs tracking-widest", className),
+		className: cn("text-muted group-focus/menu-item:text-white ml-auto text-xs tracking-widest", className),
 		...props
 	});
 }

package/dist/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":["MenuPrimitive"],"sources":["../src/menu.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"./lib/utils\"\nimport { resolveFinalFocus, type RestoreFocusOnClose } from \"./lib/focus\"\n\nimport { ChevronRightIcon, CheckIcon } from \"./lib/internal-icons\"\n\ntype MenuProps = React.ComponentProps<typeof MenuPrimitive.Root>\n\ntype MenuPortalProps = React.ComponentProps<typeof MenuPrimitive.Portal>\n\ntype MenuTriggerProps = React.ComponentProps<typeof MenuPrimitive.Trigger>\n\ntype MenuContentProps = React.ComponentProps<typeof MenuPrimitive.Popup> &\n  Pick<\n    React.ComponentProps<typeof MenuPrimitive.Positioner>,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  > & {\n    /**\n     * Focus-restoration policy when the menu closes. Defaults to Base\n     * UI's behaviour (restore to the trigger). Use `\"keyboard\"` when\n     * the trigger is hover/focus-within–revealed so a pointer close\n     * doesn't keep it pinned visible. See {@link RestoreFocusOnClose}.\n     */\n    restoreFocusOnClose?: RestoreFocusOnClose\n  }\n\ntype MenuGroupProps = React.ComponentProps<typeof MenuPrimitive.Group>\n\ntype MenuLabelProps = React.ComponentProps<typeof MenuPrimitive.GroupLabel> & {\n  inset?: boolean\n}\n\ntype MenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}\n\ntype MenuSubProps = React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>\n\ntype MenuSubTriggerProps = React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {\n  inset?: boolean\n}\n\ntype MenuSubContentProps = MenuContentProps\n\ntype MenuCheckboxItemProps = React.ComponentProps<typeof MenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}\n\ntype MenuRadioGroupProps = React.ComponentProps<typeof MenuPrimitive.RadioGroup>\n\ntype MenuRadioItemProps = React.ComponentProps<typeof MenuPrimitive.RadioItem> & {\n  inset?: boolean\n}\n\ntype MenuSeparatorProps = React.ComponentProps<typeof MenuPrimitive.Separator>\n\ntype MenuShortcutProps = React.ComponentProps<\"span\">\n\nfunction Menu(props: MenuProps) {\n  return <MenuPrimitive.Root data-slot=\"menu\" {...props} />\n}\n\nfunction MenuPortal(props: MenuPortalProps) {\n  return <MenuPrimitive.Portal data-slot=\"menu-portal\" {...props} />\n}\n\nfunction MenuTrigger(props: MenuTriggerProps) {\n  return <MenuPrimitive.Trigger data-slot=\"menu-trigger\" {...props} />\n}\n\nfunction MenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  restoreFocusOnClose,\n  finalFocus,\n  ...props\n}: MenuContentProps) {\n  return (\n    <MenuPortal>\n      <MenuPrimitive.Positioner\n        data-slot=\"menu-positioner\"\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"menu-content\"\n          className={cn(\n            \"motion-slide ring-foreground/10 bg-popover text-popover-foreground z-50 max-h-(--available-height) w-auto min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-md ring-1 outline-none data-closed:overflow-hidden\",\n            className,\n          )}\n          finalFocus={resolveFinalFocus(restoreFocusOnClose, finalFocus)}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPortal>\n  )\n}\n\nfunction MenuGroup(props: MenuGroupProps) {\n  return <MenuPrimitive.Group data-slot=\"menu-group\" {...props} />\n}\n\nfunction MenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuLabelProps) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuItemProps) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/menu-item relative flex cursor-clickable items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuSub(props: MenuSubProps) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"menu-sub\" {...props} />\n}\n\nfunction MenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuSubTriggerProps) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-clickable items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction MenuSubContent({\n  align = \"start\",\n  // -4 cancels the popup's p-1 (4px) top padding so the submenu's first\n  // item lines up with the parent item row, not the popup container edge.\n  alignOffset = -4,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: MenuSubContentProps) {\n  return (\n    <MenuContent\n      data-slot=\"menu-sub-content\"\n      className={cn(\"w-auto min-w-24 shadow-lg\", className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction MenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuCheckboxItemProps) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        data-slot=\"menu-checkbox-item-indicator\"\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <CheckIcon />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenuRadioGroup(props: MenuRadioGroupProps) {\n  return <MenuPrimitive.RadioGroup data-slot=\"menu-radio-group\" {...props} />\n}\n\nfunction MenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuRadioItemProps) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-clickable items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"menu-radio-item-indicator\"\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <CheckIcon />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenuSeparator({ className, ...props }: MenuSeparatorProps) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"menu-separator\"\n      className={cn(\n        \"bg-border -mx-1 my-1 h-px\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuShortcut({ className, ...props }: MenuShortcutProps) {\n  return (\n    <span\n      data-slot=\"menu-shortcut\"\n      className={cn(\n        \"text-muted-foreground group-focus/menu-item:text-accent-foreground ml-auto text-xs tracking-widest\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menu,\n  MenuPortal,\n  MenuTrigger,\n  MenuContent,\n  MenuGroup,\n  MenuLabel,\n  MenuItem,\n  MenuCheckboxItem,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuSeparator,\n  MenuShortcut,\n  MenuSub,\n  MenuSubTrigger,\n  MenuSubContent,\n}\n"],"mappings":";;;;;;;;AA+DA,SAAS,KAAK,OAAkB;AAC9B,QAAO,oBAACA,OAAc,MAAf;EAAoB,aAAU;EAAO,GAAI;EAAS,CAAA;;AAG3D,SAAS,WAAW,OAAwB;AAC1C,QAAO,oBAACA,OAAc,QAAf;EAAsB,aAAU;EAAc,GAAI;EAAS,CAAA;;AAGpE,SAAS,YAAY,OAAyB;AAC5C,QAAO,oBAACA,OAAc,SAAf;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,YAAY,EACnB,QAAQ,SACR,cAAc,GACd,OAAO,UACP,aAAa,GACb,WACA,qBACA,YACA,GAAG,SACgB;AACnB,QACE,oBAAC,YAAD,EAAA,UACE,oBAACA,OAAc,YAAf;EACE,aAAU;EACV,WAAU;EACH;EACM;EACP;EACM;YAEZ,oBAACA,OAAc,OAAf;GACE,aAAU;GACV,WAAW,GACT,6PACA,UACD;GACD,YAAY,kBAAkB,qBAAqB,WAAW;GAC9D,GAAI;GACJ,CAAA;EACuB,CAAA,EAChB,CAAA;;AAIjB,SAAS,UAAU,OAAuB;AACxC,QAAO,oBAACA,OAAc,OAAf;EAAqB,aAAU;EAAa,GAAI;EAAS,CAAA;;AAGlE,SAAS,UAAU,EACjB,WACA,OACA,GAAG,SACc;AACjB,QACE,oBAACA,OAAc,YAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,yEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,SAAS,EAChB,WACA,OACA,UAAU,WACV,GAAG,SACa;AAChB,QACE,oBAACA,OAAc,MAAf;EACE,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,uoBACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,QAAQ,OAAqB;AACpC,QAAO,oBAACA,OAAc,aAAf;EAA2B,aAAU;EAAW,GAAI;EAAS,CAAA;;AAGtE,SAAS,eAAe,EACtB,WACA,OACA,UACA,GAAG,SACmB;AACtB,QACE,qBAACA,OAAc,gBAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,4aACA,UACD;EACD,GAAI;YAPN,CASG,UACD,oBAAC,kBAAD,EAAkB,WAAU,WAAY,CAAA,CACX;;;AAInC,SAAS,eAAe,EACtB,QAAQ,SAGR,cAAc,IACd,OAAO,SACP,aAAa,GACb,WACA,GAAG,SACmB;AACtB,QACE,oBAAC,aAAD;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,UAAU;EAC9C;EACM;EACP;EACM;EACZ,GAAI;EACJ,CAAA;;AAIN,SAAS,iBAAiB,EACxB,WACA,UACA,SACA,OACA,GAAG,SACqB;AACxB,QACE,qBAACA,OAAc,cAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,gWACA,UACD;EACQ;EACT,GAAI;YARN,CAUE,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;aAEV,oBAACA,OAAc,uBAAf,EAAA,UACE,oBAAC,WAAD,EAAa,CAAA,EACuB,CAAA;GACjC,CAAA,EACN,SAC0B;;;AAIjC,SAAS,eAAe,OAA4B;AAClD,QAAO,oBAACA,OAAc,YAAf;EAA0B,aAAU;EAAmB,GAAI;EAAS,CAAA;;AAG7E,SAAS,cAAc,EACrB,WACA,UACA,OACA,GAAG,SACkB;AACrB,QACE,qBAACA,OAAc,WAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,gWACA,UACD;EACD,GAAI;YAPN,CASE,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;aAEV,oBAACA,OAAc,oBAAf,EAAA,UACE,oBAAC,WAAD,EAAa,CAAA,EACoB,CAAA;GAC9B,CAAA,EACN,SACuB;;;AAI9B,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAACA,OAAc,WAAf;EACE,aAAU;EACV,WAAW,GACT,6BACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,sGACA,UACD;EACD,GAAI;EACJ,CAAA"}
+{"version":3,"file":"menu.js","names":["MenuPrimitive"],"sources":["../src/menu.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"./lib/utils\"\nimport { resolveFinalFocus, type RestoreFocusOnClose } from \"./lib/focus\"\n\nimport { ChevronRightIcon, CheckIcon } from \"./lib/internal-icons\"\n\ntype MenuProps = React.ComponentProps<typeof MenuPrimitive.Root>\n\ntype MenuPortalProps = React.ComponentProps<typeof MenuPrimitive.Portal>\n\ntype MenuTriggerProps = React.ComponentProps<typeof MenuPrimitive.Trigger>\n\ntype MenuContentProps = React.ComponentProps<typeof MenuPrimitive.Popup> &\n  Pick<\n    React.ComponentProps<typeof MenuPrimitive.Positioner>,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  > & {\n    /**\n     * Focus-restoration policy when the menu closes. Defaults to Base\n     * UI's behaviour (restore to the trigger). Use `\"keyboard\"` when\n     * the trigger is hover/focus-within–revealed so a pointer close\n     * doesn't keep it pinned visible. See {@link RestoreFocusOnClose}.\n     */\n    restoreFocusOnClose?: RestoreFocusOnClose\n  }\n\ntype MenuGroupProps = React.ComponentProps<typeof MenuPrimitive.Group>\n\ntype MenuLabelProps = React.ComponentProps<typeof MenuPrimitive.GroupLabel> & {\n  inset?: boolean\n}\n\ntype MenuItemProps = React.ComponentProps<typeof MenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}\n\ntype MenuSubProps = React.ComponentProps<typeof MenuPrimitive.SubmenuRoot>\n\ntype MenuSubTriggerProps = React.ComponentProps<typeof MenuPrimitive.SubmenuTrigger> & {\n  inset?: boolean\n}\n\ntype MenuSubContentProps = MenuContentProps\n\ntype MenuCheckboxItemProps = React.ComponentProps<typeof MenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}\n\ntype MenuRadioGroupProps = React.ComponentProps<typeof MenuPrimitive.RadioGroup>\n\ntype MenuRadioItemProps = React.ComponentProps<typeof MenuPrimitive.RadioItem> & {\n  inset?: boolean\n}\n\ntype MenuSeparatorProps = React.ComponentProps<typeof MenuPrimitive.Separator>\n\ntype MenuShortcutProps = React.ComponentProps<\"span\">\n\nfunction Menu(props: MenuProps) {\n  return <MenuPrimitive.Root data-slot=\"menu\" {...props} />\n}\n\nfunction MenuPortal(props: MenuPortalProps) {\n  return <MenuPrimitive.Portal data-slot=\"menu-portal\" {...props} />\n}\n\nfunction MenuTrigger(props: MenuTriggerProps) {\n  return <MenuPrimitive.Trigger data-slot=\"menu-trigger\" {...props} />\n}\n\nfunction MenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  restoreFocusOnClose,\n  finalFocus,\n  ...props\n}: MenuContentProps) {\n  return (\n    <MenuPortal>\n      <MenuPrimitive.Positioner\n        data-slot=\"menu-positioner\"\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"menu-content\"\n          className={cn(\n            \"motion-pop-md ring-contrast/10 bg-elevated text-contrast z-50 max-h-(--available-height) w-auto min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-md p-1 shadow-md ring-1 outline-none data-closed:overflow-hidden\",\n            className,\n          )}\n          finalFocus={resolveFinalFocus(restoreFocusOnClose, finalFocus)}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPortal>\n  )\n}\n\nfunction MenuGroup(props: MenuGroupProps) {\n  return <MenuPrimitive.Group data-slot=\"menu-group\" {...props} />\n}\n\nfunction MenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuLabelProps) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"text-muted px-1.5 py-1 text-xs font-medium data-inset:pl-7\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuItemProps) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-primary focus:text-white data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-white group/menu-item relative flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuSub(props: MenuSubProps) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"menu-sub\" {...props} />\n}\n\nfunction MenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuSubTriggerProps) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-primary focus:text-white data-open:bg-primary data-open:text-white not-data-[variant=destructive]:focus:**:text-white data-popup-open:bg-primary data-popup-open:text-white flex cursor-clickable items-center gap-1.5 rounded-sm px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto\" />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction MenuSubContent({\n  align = \"start\",\n  // -4 cancels the popup's p-1 (4px) top padding so the submenu's first\n  // item lines up with the parent item row, not the popup container edge.\n  alignOffset = -4,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: MenuSubContentProps) {\n  return (\n    <MenuContent\n      data-slot=\"menu-sub-content\"\n      className={cn(\"w-auto min-w-24 shadow-md\", className)}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction MenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuCheckboxItemProps) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-primary focus:text-white focus:**:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        data-slot=\"menu-checkbox-item-indicator\"\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <CheckIcon />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenuRadioGroup(props: MenuRadioGroupProps) {\n  return <MenuPrimitive.RadioGroup data-slot=\"menu-radio-group\" {...props} />\n}\n\nfunction MenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuRadioItemProps) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-primary focus:text-white focus:**:text-white relative flex cursor-clickable items-center gap-1.5 rounded-sm py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span\n        data-slot=\"menu-radio-item-indicator\"\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <CheckIcon />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenuSeparator({ className, ...props }: MenuSeparatorProps) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"menu-separator\"\n      className={cn(\n        \"bg-line -mx-1 my-1 h-px\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenuShortcut({ className, ...props }: MenuShortcutProps) {\n  return (\n    <span\n      data-slot=\"menu-shortcut\"\n      className={cn(\n        \"text-muted group-focus/menu-item:text-white ml-auto text-xs tracking-widest\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menu,\n  MenuPortal,\n  MenuTrigger,\n  MenuContent,\n  MenuGroup,\n  MenuLabel,\n  MenuItem,\n  MenuCheckboxItem,\n  MenuRadioGroup,\n  MenuRadioItem,\n  MenuSeparator,\n  MenuShortcut,\n  MenuSub,\n  MenuSubTrigger,\n  MenuSubContent,\n}\n"],"mappings":";;;;;;;;AA+DA,SAAS,KAAK,OAAkB;AAC9B,QAAO,oBAACA,OAAc,MAAf;EAAoB,aAAU;EAAO,GAAI;EAAS,CAAA;;AAG3D,SAAS,WAAW,OAAwB;AAC1C,QAAO,oBAACA,OAAc,QAAf;EAAsB,aAAU;EAAc,GAAI;EAAS,CAAA;;AAGpE,SAAS,YAAY,OAAyB;AAC5C,QAAO,oBAACA,OAAc,SAAf;EAAuB,aAAU;EAAe,GAAI;EAAS,CAAA;;AAGtE,SAAS,YAAY,EACnB,QAAQ,SACR,cAAc,GACd,OAAO,UACP,aAAa,GACb,WACA,qBACA,YACA,GAAG,SACgB;AACnB,QACE,oBAAC,YAAD,EAAA,UACE,oBAACA,OAAc,YAAf;EACE,aAAU;EACV,WAAU;EACH;EACM;EACP;EACM;YAEZ,oBAACA,OAAc,OAAf;GACE,aAAU;GACV,WAAW,GACT,mPACA,UACD;GACD,YAAY,kBAAkB,qBAAqB,WAAW;GAC9D,GAAI;GACJ,CAAA;EACuB,CAAA,EAChB,CAAA;;AAIjB,SAAS,UAAU,OAAuB;AACxC,QAAO,oBAACA,OAAc,OAAf;EAAqB,aAAU;EAAa,GAAI;EAAS,CAAA;;AAGlE,SAAS,UAAU,EACjB,WACA,OACA,GAAG,SACc;AACjB,QACE,oBAACA,OAAc,YAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,8DACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,SAAS,EAChB,WACA,OACA,UAAU,WACV,GAAG,SACa;AAChB,QACE,oBAACA,OAAc,MAAf;EACE,aAAU;EACV,cAAY;EACZ,gBAAc;EACd,WAAW,GACT,gnBACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,QAAQ,OAAqB;AACpC,QAAO,oBAACA,OAAc,aAAf;EAA2B,aAAU;EAAW,GAAI;EAAS,CAAA;;AAGtE,SAAS,eAAe,EACtB,WACA,OACA,UACA,GAAG,SACmB;AACtB,QACE,qBAACA,OAAc,gBAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,+XACA,UACD;EACD,GAAI;YAPN,CASG,UACD,oBAAC,kBAAD,EAAkB,WAAU,WAAY,CAAA,CACX;;;AAInC,SAAS,eAAe,EACtB,QAAQ,SAGR,cAAc,IACd,OAAO,SACP,aAAa,GACb,WACA,GAAG,SACmB;AACtB,QACE,oBAAC,aAAD;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,UAAU;EAC9C;EACM;EACP;EACM;EACZ,GAAI;EACJ,CAAA;;AAIN,SAAS,iBAAiB,EACxB,WACA,UACA,SACA,OACA,GAAG,SACqB;AACxB,QACE,qBAACA,OAAc,cAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,yUACA,UACD;EACQ;EACT,GAAI;YARN,CAUE,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;aAEV,oBAACA,OAAc,uBAAf,EAAA,UACE,oBAAC,WAAD,EAAa,CAAA,EACuB,CAAA;GACjC,CAAA,EACN,SAC0B;;;AAIjC,SAAS,eAAe,OAA4B;AAClD,QAAO,oBAACA,OAAc,YAAf;EAA0B,aAAU;EAAmB,GAAI;EAAS,CAAA;;AAG7E,SAAS,cAAc,EACrB,WACA,UACA,OACA,GAAG,SACkB;AACrB,QACE,qBAACA,OAAc,WAAf;EACE,aAAU;EACV,cAAY;EACZ,WAAW,GACT,yUACA,UACD;EACD,GAAI;YAPN,CASE,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;aAEV,oBAACA,OAAc,oBAAf,EAAA,UACE,oBAAC,WAAD,EAAa,CAAA,EACoB,CAAA;GAC9B,CAAA,EACN,SACuB;;;AAI9B,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;AAClE,QACE,oBAACA,OAAc,WAAf;EACE,aAAU;EACV,WAAW,GACT,2BACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,SAAS,aAAa,EAAE,WAAW,GAAG,SAA4B;AAChE,QACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,+EACA,UACD;EACD,GAAI;EACJ,CAAA"}

package/dist/menubar.js

@@ -8,7 +8,7 @@ import { Menubar as Menubar$1 } from "@base-ui/react/menubar";
 function Menubar({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Menubar$1, {
 		"data-slot": "menubar",
-		className: cn("bg-background flex h-8 items-center gap-0.5 rounded-lg border p-[3px]", className),
+		className: cn("bg-foundation flex h-8 items-center gap-0.5 rounded-md border border-edge p-[3px]", className),
 		...props
 	});
 }