@psnext/design-system 1.0.0 → 1.2.0

package/dist/primitives/Form/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["FormProvider","React","Controller","Field","FieldLabel","cn","Slot","FieldDescription","FieldError"],"sources":["../../../src/primitives/Form/Form.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  useFormContext,\n  useFormState,\n} from \"react-hook-form\";\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"@/primitives/Field\";\nimport { cn } from \"@/utils\";\n\n/** Root provider that shares one react-hook-form instance with all nested form pieces. */\n// Form is the react-hook-form binding layer. Its presentation pieces render the\n// Field primitives underneath so RHF forms share one visual system with non-RHF\n// forms built directly on Field.\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  /** The react-hook-form field name this context binds its descendants to. */\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\n/** Connects a single input to the form via RHF's `Controller`, exposing `field` to its render prop. */\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\n/** Hook for form pieces to read the current field's id, name, ARIA ids, and validation state. */\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\");\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  /** Generated id used to derive the field's control, description, and message ARIA ids. */\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);\n\n/** Wraps one field, generating an id so its label, control, and messages stay linked. */\nfunction FormItem({ ...props }: React.ComponentProps<typeof Field>) {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <Field data-slot=\"form-item\" {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\n/** Field label wired to the control's id and tinted destructive when the field is invalid. */\nfunction FormLabel({ className, ...props }: React.ComponentProps<typeof FieldLabel>) {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <FieldLabel\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\n/** Slots the actual input, applying the field's id, `aria-describedby`, and `aria-invalid`. */\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <Slot.Root\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\n/** Helper text for a field, linked to its control via `aria-describedby`. */\nfunction FormDescription({ ...props }: React.ComponentProps<typeof FieldDescription>) {\n  const { formDescriptionId } = useFormField();\n\n  return <FieldDescription data-slot=\"form-description\" id={formDescriptionId} {...props} />;\n}\n\n/** Renders the field's validation error (or `children`), and nothing when there is no message. */\nfunction FormMessage({ children, ...props }: React.ComponentProps<typeof FieldError>) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? \"\") : children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <FieldError data-slot=\"form-message\" id={formMessageId} {...props}>\n      {body}\n    </FieldError>\n  );\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n};\n"],"mappings":";;;;;;;;;;;AAqBA,MAAM,OAAOA,gBAAAA;AAUb,MAAM,mBAAmBC,MAAM,cAAqC,CAAC,CAA0B;;AAG/F,MAAM,aAGJ,EACA,GAAG,YACuC;CAC1C,OACE,iBAAA,GAAA,kBAAA,KAAC,iBAAiB,UAAlB;EAA2B,OAAO,EAAE,MAAM,MAAM,KAAK;YACnD,iBAAA,GAAA,kBAAA,KAACC,gBAAAA,YAAD,EAAY,GAAI,MAAQ,CAAA;CACC,CAAA;AAE/B;;AAGA,MAAM,qBAAqB;CACzB,MAAM,eAAeD,MAAM,WAAW,gBAAgB;CACtD,MAAM,cAAcA,MAAM,WAAW,eAAe;CACpD,MAAM,EAAE,mBAAA,GAAA,gBAAA,gBAAiC;CACzC,MAAM,aAAA,GAAA,gBAAA,cAAyB,EAAE,MAAM,aAAa,KAAK,CAAC;CAC1D,MAAM,aAAa,cAAc,aAAa,MAAM,SAAS;CAE7D,IAAI,CAAC,cACH,MAAM,IAAI,MAAM,gDAAgD;CAGlE,MAAM,EAAE,OAAO;CAEf,OAAO;EACL;EACA,MAAM,aAAa;EACnB,YAAY,GAAG,GAAG;EAClB,mBAAmB,GAAG,GAAG;EACzB,eAAe,GAAG,GAAG;EACrB,GAAG;CACL;AACF;AAOA,MAAM,kBAAkBA,MAAM,cAAoC,CAAC,CAAyB;;AAG5F,SAAS,SAAS,EAAE,GAAG,SAA6C;CAClE,MAAM,KAAKA,MAAM,MAAM;CAEvB,OACE,iBAAA,GAAA,kBAAA,KAAC,gBAAgB,UAAjB;EAA0B,OAAO,EAAE,GAAG;YACpC,iBAAA,GAAA,kBAAA,KAACE,+BAAAA,OAAD;GAAO,aAAU;GAAY,GAAI;EAAQ,CAAA;CACjB,CAAA;AAE9B;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAkD;CACnF,MAAM,EAAE,OAAO,eAAe,aAAa;CAE3C,OACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,YAAD;EACE,aAAU;EACV,cAAY,CAAC,CAAC;EACd,WAAWC,WAAAA,GAAG,sCAAsC,SAAS;EAC7D,SAAS;EACT,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,GAAG,SAAiD;CACzE,MAAM,EAAE,OAAO,YAAY,mBAAmB,kBAAkB,aAAa;CAE7E,OACE,iBAAA,GAAA,kBAAA,KAACC,SAAAA,KAAK,MAAN;EACE,aAAU;EACV,IAAI;EACJ,oBAAkB,CAAC,QAAQ,GAAG,sBAAsB,GAAG,kBAAkB,GAAG;EAC5E,gBAAc,CAAC,CAAC;EAChB,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,GAAG,SAAwD;CACpF,MAAM,EAAE,sBAAsB,aAAa;CAE3C,OAAO,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,kBAAD;EAAkB,aAAU;EAAmB,IAAI;EAAmB,GAAI;CAAQ,CAAA;AAC3F;;AAGA,SAAS,YAAY,EAAE,UAAU,GAAG,SAAkD;CACpF,MAAM,EAAE,OAAO,kBAAkB,aAAa;CAC9C,MAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,EAAE,IAAI;CAEpD,IAAI,CAAC,MACH,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,YAAD;EAAY,aAAU;EAAe,IAAI;EAAe,GAAI;YACzD;CACS,CAAA;AAEhB"}

package/dist/primitives/Form/index.d.cts

@@ -0,0 +1,2 @@
+import { a as FormItem, c as useFormField, i as FormField, n as FormControl, o as FormLabel, r as FormDescription, s as FormMessage, t as Form } from "../../index27.cjs";
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/primitives/Form/index.d.ts

@@ -0,0 +1,2 @@
+import { a as FormItem, c as useFormField, i as FormField, n as FormControl, o as FormLabel, r as FormDescription, s as FormMessage, t as Form } from "../../index27.js";
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };

package/dist/primitives/Form/index.js

@@ -0,0 +1,94 @@
+import { t as cn } from "../../cn.js";
+import { Field, FieldDescription, FieldError, FieldLabel } from "../Field/index.js";
+import * as React from "react";
+import { Slot } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+import { Controller, FormProvider, useFormContext, useFormState } from "react-hook-form";
+//#region src/primitives/Form/Form.tsx
+/** Root provider that shares one react-hook-form instance with all nested form pieces. */
+const Form = FormProvider;
+const FormFieldContext = React.createContext({});
+/** Connects a single input to the form via RHF's `Controller`, exposing `field` to its render prop. */
+const FormField = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(FormFieldContext.Provider, {
+		value: { name: props.name },
+		children: /* @__PURE__ */ jsx(Controller, { ...props })
+	});
+};
+/** Hook for form pieces to read the current field's id, name, ARIA ids, and validation state. */
+const useFormField = () => {
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState } = useFormContext();
+	const formState = useFormState({ name: fieldContext.name });
+	const fieldState = getFieldState(fieldContext.name, formState);
+	if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
+	const { id } = itemContext;
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState
+	};
+};
+const FormItemContext = React.createContext({});
+/** Wraps one field, generating an id so its label, control, and messages stay linked. */
+function FormItem({ ...props }) {
+	const id = React.useId();
+	return /* @__PURE__ */ jsx(FormItemContext.Provider, {
+		value: { id },
+		children: /* @__PURE__ */ jsx(Field, {
+			"data-slot": "form-item",
+			...props
+		})
+	});
+}
+/** Field label wired to the control's id and tinted destructive when the field is invalid. */
+function FormLabel({ className, ...props }) {
+	const { error, formItemId } = useFormField();
+	return /* @__PURE__ */ jsx(FieldLabel, {
+		"data-slot": "form-label",
+		"data-error": !!error,
+		className: cn("data-[error=true]:text-destructive", className),
+		htmlFor: formItemId,
+		...props
+	});
+}
+/** Slots the actual input, applying the field's id, `aria-describedby`, and `aria-invalid`. */
+function FormControl({ ...props }) {
+	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+	return /* @__PURE__ */ jsx(Slot.Root, {
+		"data-slot": "form-control",
+		id: formItemId,
+		"aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+		"aria-invalid": !!error,
+		...props
+	});
+}
+/** Helper text for a field, linked to its control via `aria-describedby`. */
+function FormDescription({ ...props }) {
+	const { formDescriptionId } = useFormField();
+	return /* @__PURE__ */ jsx(FieldDescription, {
+		"data-slot": "form-description",
+		id: formDescriptionId,
+		...props
+	});
+}
+/** Renders the field's validation error (or `children`), and nothing when there is no message. */
+function FormMessage({ children, ...props }) {
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message ?? "") : children;
+	if (!body) return null;
+	return /* @__PURE__ */ jsx(FieldError, {
+		"data-slot": "form-message",
+		id: formMessageId,
+		...props,
+		children: body
+	});
+}
+//#endregion
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/Form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Form/Form.tsx"],"sourcesContent":["\"use client\";\n\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\nimport {\n  Controller,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n  FormProvider,\n  useFormContext,\n  useFormState,\n} from \"react-hook-form\";\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"@/primitives/Field\";\nimport { cn } from \"@/utils\";\n\n/** Root provider that shares one react-hook-form instance with all nested form pieces. */\n// Form is the react-hook-form binding layer. Its presentation pieces render the\n// Field primitives underneath so RHF forms share one visual system with non-RHF\n// forms built directly on Field.\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n  /** The react-hook-form field name this context binds its descendants to. */\n  name: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\n/** Connects a single input to the form via RHF's `Controller`, exposing `field` to its render prop. */\nconst FormField = <\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n  ...props\n}: ControllerProps<TFieldValues, TName>) => {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n};\n\n/** Hook for form pieces to read the current field's id, name, ARIA ids, and validation state. */\nconst useFormField = () => {\n  const fieldContext = React.useContext(FormFieldContext);\n  const itemContext = React.useContext(FormItemContext);\n  const { getFieldState } = useFormContext();\n  const formState = useFormState({ name: fieldContext.name });\n  const fieldState = getFieldState(fieldContext.name, formState);\n\n  if (!fieldContext) {\n    throw new Error(\"useFormField should be used within <FormField>\");\n  }\n\n  const { id } = itemContext;\n\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-form-item`,\n    formDescriptionId: `${id}-form-item-description`,\n    formMessageId: `${id}-form-item-message`,\n    ...fieldState,\n  };\n};\n\ntype FormItemContextValue = {\n  /** Generated id used to derive the field's control, description, and message ARIA ids. */\n  id: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);\n\n/** Wraps one field, generating an id so its label, control, and messages stay linked. */\nfunction FormItem({ ...props }: React.ComponentProps<typeof Field>) {\n  const id = React.useId();\n\n  return (\n    <FormItemContext.Provider value={{ id }}>\n      <Field data-slot=\"form-item\" {...props} />\n    </FormItemContext.Provider>\n  );\n}\n\n/** Field label wired to the control's id and tinted destructive when the field is invalid. */\nfunction FormLabel({ className, ...props }: React.ComponentProps<typeof FieldLabel>) {\n  const { error, formItemId } = useFormField();\n\n  return (\n    <FieldLabel\n      data-slot=\"form-label\"\n      data-error={!!error}\n      className={cn(\"data-[error=true]:text-destructive\", className)}\n      htmlFor={formItemId}\n      {...props}\n    />\n  );\n}\n\n/** Slots the actual input, applying the field's id, `aria-describedby`, and `aria-invalid`. */\nfunction FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {\n  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\n  return (\n    <Slot.Root\n      data-slot=\"form-control\"\n      id={formItemId}\n      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n      aria-invalid={!!error}\n      {...props}\n    />\n  );\n}\n\n/** Helper text for a field, linked to its control via `aria-describedby`. */\nfunction FormDescription({ ...props }: React.ComponentProps<typeof FieldDescription>) {\n  const { formDescriptionId } = useFormField();\n\n  return <FieldDescription data-slot=\"form-description\" id={formDescriptionId} {...props} />;\n}\n\n/** Renders the field's validation error (or `children`), and nothing when there is no message. */\nfunction FormMessage({ children, ...props }: React.ComponentProps<typeof FieldError>) {\n  const { error, formMessageId } = useFormField();\n  const body = error ? String(error?.message ?? \"\") : children;\n\n  if (!body) {\n    return null;\n  }\n\n  return (\n    <FieldError data-slot=\"form-message\" id={formMessageId} {...props}>\n      {body}\n    </FieldError>\n  );\n}\n\nexport {\n  useFormField,\n  Form,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormDescription,\n  FormMessage,\n  FormField,\n};\n"],"mappings":";;;;;;;;AAqBA,MAAM,OAAO;AAUb,MAAM,mBAAmB,MAAM,cAAqC,CAAC,CAA0B;;AAG/F,MAAM,aAGJ,EACA,GAAG,YACuC;CAC1C,OACE,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO,EAAE,MAAM,MAAM,KAAK;YACnD,oBAAC,YAAD,EAAY,GAAI,MAAQ,CAAA;CACC,CAAA;AAE/B;;AAGA,MAAM,qBAAqB;CACzB,MAAM,eAAe,MAAM,WAAW,gBAAgB;CACtD,MAAM,cAAc,MAAM,WAAW,eAAe;CACpD,MAAM,EAAE,kBAAkB,eAAe;CACzC,MAAM,YAAY,aAAa,EAAE,MAAM,aAAa,KAAK,CAAC;CAC1D,MAAM,aAAa,cAAc,aAAa,MAAM,SAAS;CAE7D,IAAI,CAAC,cACH,MAAM,IAAI,MAAM,gDAAgD;CAGlE,MAAM,EAAE,OAAO;CAEf,OAAO;EACL;EACA,MAAM,aAAa;EACnB,YAAY,GAAG,GAAG;EAClB,mBAAmB,GAAG,GAAG;EACzB,eAAe,GAAG,GAAG;EACrB,GAAG;CACL;AACF;AAOA,MAAM,kBAAkB,MAAM,cAAoC,CAAC,CAAyB;;AAG5F,SAAS,SAAS,EAAE,GAAG,SAA6C;CAClE,MAAM,KAAK,MAAM,MAAM;CAEvB,OACE,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO,EAAE,GAAG;YACpC,oBAAC,OAAD;GAAO,aAAU;GAAY,GAAI;EAAQ,CAAA;CACjB,CAAA;AAE9B;;AAGA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAkD;CACnF,MAAM,EAAE,OAAO,eAAe,aAAa;CAE3C,OACE,oBAAC,YAAD;EACE,aAAU;EACV,cAAY,CAAC,CAAC;EACd,WAAW,GAAG,sCAAsC,SAAS;EAC7D,SAAS;EACT,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,GAAG,SAAiD;CACzE,MAAM,EAAE,OAAO,YAAY,mBAAmB,kBAAkB,aAAa;CAE7E,OACE,oBAAC,KAAK,MAAN;EACE,aAAU;EACV,IAAI;EACJ,oBAAkB,CAAC,QAAQ,GAAG,sBAAsB,GAAG,kBAAkB,GAAG;EAC5E,gBAAc,CAAC,CAAC;EAChB,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,gBAAgB,EAAE,GAAG,SAAwD;CACpF,MAAM,EAAE,sBAAsB,aAAa;CAE3C,OAAO,oBAAC,kBAAD;EAAkB,aAAU;EAAmB,IAAI;EAAmB,GAAI;CAAQ,CAAA;AAC3F;;AAGA,SAAS,YAAY,EAAE,UAAU,GAAG,SAAkD;CACpF,MAAM,EAAE,OAAO,kBAAkB,aAAa;CAC9C,MAAM,OAAO,QAAQ,OAAO,OAAO,WAAW,EAAE,IAAI;CAEpD,IAAI,CAAC,MACH,OAAO;CAGT,OACE,oBAAC,YAAD;EAAY,aAAU;EAAe,IAAI;EAAe,GAAI;YACzD;CACS,CAAA;AAEhB"}

package/dist/primitives/Heading/index.cjs

@@ -0,0 +1,53 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/Heading/Heading.tsx
+const headingVariants = (0, require("class-variance-authority").cva)("font-heading text-balance", {
+	variants: {
+		size: {
+			"1": "text-[length:var(--heading-1-font-size)] leading-[var(--heading-1-line-height)] font-normal",
+			"2": "text-[length:var(--heading-2-font-size)] leading-[var(--heading-2-line-height)] font-normal",
+			"3": "text-[length:var(--heading-3-font-size)] leading-[var(--heading-3-line-height)] font-normal",
+			"4": "text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal",
+			"5": "text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium",
+			"6": "text-[length:var(--heading-6-font-size)] leading-[var(--heading-6-line-height)] font-medium",
+			"7": "text-[length:var(--heading-7-font-size)] leading-[var(--heading-7-line-height)] font-medium"
+		},
+		weight: {
+			normal: "font-normal",
+			medium: "font-medium",
+			semibold: "font-semibold"
+		},
+		align: {
+			left: "text-left",
+			center: "text-center",
+			right: "text-right"
+		},
+		gradient: {
+			true: "bg-gradient-to-r from-[var(--gradient-heading-from)] to-[var(--gradient-heading-to)] bg-clip-text text-transparent",
+			false: "text-foreground"
+		}
+	},
+	defaultVariants: {
+		size: "2",
+		gradient: false
+	}
+});
+/** Display/section title using the design-system heading scale; `size` sets the visual step, `as` the semantic element. */
+function Heading({ as, className, size, weight, align, gradient, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(as ?? "h2", {
+		"data-slot": "heading",
+		className: require_cn.cn(headingVariants({
+			size,
+			weight,
+			align,
+			gradient
+		}), className),
+		...props
+	});
+}
+//#endregion
+exports.Heading = Heading;
+exports.headingVariants = headingVariants;
+
+//# sourceMappingURL=index.cjs.map

package/dist/primitives/Heading/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["cn"],"sources":["../../../src/primitives/Heading/Heading.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Heading — display/section titles using the design-system HEADING scale\n// (Outfit): the Figma \"heading 1–7\" steps (tokens in styles/tokens/typography.css).\n// `size` drives the visual step (font-size + line-height + the spec's per-step\n// weight: 1–4 Regular, 5–7 Medium); `as` controls the semantic level\n// independently; `gradient` enables the brand gradient text fill.\nconst headingVariants = cva(\"font-heading text-balance\", {\n  variants: {\n    size: {\n      \"1\": \"text-[length:var(--heading-1-font-size)] leading-[var(--heading-1-line-height)] font-normal\",\n      \"2\": \"text-[length:var(--heading-2-font-size)] leading-[var(--heading-2-line-height)] font-normal\",\n      \"3\": \"text-[length:var(--heading-3-font-size)] leading-[var(--heading-3-line-height)] font-normal\",\n      \"4\": \"text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal\",\n      \"5\": \"text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium\",\n      \"6\": \"text-[length:var(--heading-6-font-size)] leading-[var(--heading-6-line-height)] font-medium\",\n      \"7\": \"text-[length:var(--heading-7-font-size)] leading-[var(--heading-7-line-height)] font-medium\",\n    },\n    // Optional override of the per-step default weight.\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n    gradient: {\n      true: \"bg-gradient-to-r from-[var(--gradient-heading-from)] to-[var(--gradient-heading-to)] bg-clip-text text-transparent\",\n      false: \"text-foreground\",\n    },\n  },\n  defaultVariants: {\n    size: \"2\",\n    gradient: false,\n  },\n});\n\ntype HeadingProps = React.ComponentProps<\"h2\"> &\n  VariantProps<typeof headingVariants> & {\n    /** Semantic heading level/element. Defaults to `h2`. */\n    as?: React.ElementType;\n    /** Visual step on the Figma heading scale (1 largest → 7 smallest); also sets the per-step default weight. */\n    size?: VariantProps<typeof headingVariants>[\"size\"];\n    /** Override the per-step default weight. */\n    weight?: VariantProps<typeof headingVariants>[\"weight\"];\n    /** Text alignment. */\n    align?: VariantProps<typeof headingVariants>[\"align\"];\n    /** When true, fills the text with the brand gradient instead of the foreground colour. */\n    gradient?: VariantProps<typeof headingVariants>[\"gradient\"];\n  };\n\n/** Display/section title using the design-system heading scale; `size` sets the visual step, `as` the semantic element. */\nfunction Heading({ as, className, size, weight, align, gradient, ...props }: HeadingProps) {\n  const Comp = as ?? \"h2\";\n  return (\n    <Comp\n      data-slot=\"heading\"\n      className={cn(headingVariants({ size, weight, align, gradient }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Heading, headingVariants, type HeadingProps };\n"],"mappings":";;;;AAUA,MAAM,mBAAA,qCAAA,EAAA,KAAsB,6BAA6B;CACvD,UAAU;EACR,MAAM;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;EACP;EAEA,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,UAAU;EACZ;EACA,OAAO;GACL,MAAM;GACN,QAAQ;GACR,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;CACZ;AACF,CAAC;;AAiBD,SAAS,QAAQ,EAAE,IAAI,WAAW,MAAM,QAAQ,OAAO,UAAU,GAAG,SAAuB;CAEzF,OACE,iBAAA,GAAA,kBAAA,KAFW,MAAM,MAEjB;EACE,aAAU;EACV,WAAWA,WAAAA,GAAG,gBAAgB;GAAE;GAAM;GAAQ;GAAO;EAAS,CAAC,GAAG,SAAS;EAC3E,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/Heading/index.d.cts

@@ -0,0 +1,2 @@
+import { n as HeadingProps, r as headingVariants, t as Heading } from "../../index28.cjs";
+export { Heading, HeadingProps, headingVariants };

package/dist/primitives/Heading/index.d.ts

@@ -0,0 +1,2 @@
+import { n as HeadingProps, r as headingVariants, t as Heading } from "../../index28.js";
+export { Heading, HeadingProps, headingVariants };

package/dist/primitives/Heading/index.js

@@ -0,0 +1,52 @@
+import { t as cn } from "../../cn.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/primitives/Heading/Heading.tsx
+const headingVariants = cva("font-heading text-balance", {
+	variants: {
+		size: {
+			"1": "text-[length:var(--heading-1-font-size)] leading-[var(--heading-1-line-height)] font-normal",
+			"2": "text-[length:var(--heading-2-font-size)] leading-[var(--heading-2-line-height)] font-normal",
+			"3": "text-[length:var(--heading-3-font-size)] leading-[var(--heading-3-line-height)] font-normal",
+			"4": "text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal",
+			"5": "text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium",
+			"6": "text-[length:var(--heading-6-font-size)] leading-[var(--heading-6-line-height)] font-medium",
+			"7": "text-[length:var(--heading-7-font-size)] leading-[var(--heading-7-line-height)] font-medium"
+		},
+		weight: {
+			normal: "font-normal",
+			medium: "font-medium",
+			semibold: "font-semibold"
+		},
+		align: {
+			left: "text-left",
+			center: "text-center",
+			right: "text-right"
+		},
+		gradient: {
+			true: "bg-gradient-to-r from-[var(--gradient-heading-from)] to-[var(--gradient-heading-to)] bg-clip-text text-transparent",
+			false: "text-foreground"
+		}
+	},
+	defaultVariants: {
+		size: "2",
+		gradient: false
+	}
+});
+/** Display/section title using the design-system heading scale; `size` sets the visual step, `as` the semantic element. */
+function Heading({ as, className, size, weight, align, gradient, ...props }) {
+	return /* @__PURE__ */ jsx(as ?? "h2", {
+		"data-slot": "heading",
+		className: cn(headingVariants({
+			size,
+			weight,
+			align,
+			gradient
+		}), className),
+		...props
+	});
+}
+//#endregion
+export { Heading, headingVariants };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/Heading/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/Heading/Heading.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// Heading — display/section titles using the design-system HEADING scale\n// (Outfit): the Figma \"heading 1–7\" steps (tokens in styles/tokens/typography.css).\n// `size` drives the visual step (font-size + line-height + the spec's per-step\n// weight: 1–4 Regular, 5–7 Medium); `as` controls the semantic level\n// independently; `gradient` enables the brand gradient text fill.\nconst headingVariants = cva(\"font-heading text-balance\", {\n  variants: {\n    size: {\n      \"1\": \"text-[length:var(--heading-1-font-size)] leading-[var(--heading-1-line-height)] font-normal\",\n      \"2\": \"text-[length:var(--heading-2-font-size)] leading-[var(--heading-2-line-height)] font-normal\",\n      \"3\": \"text-[length:var(--heading-3-font-size)] leading-[var(--heading-3-line-height)] font-normal\",\n      \"4\": \"text-[length:var(--heading-4-font-size)] leading-[var(--heading-4-line-height)] font-normal\",\n      \"5\": \"text-[length:var(--heading-5-font-size)] leading-[var(--heading-5-line-height)] font-medium\",\n      \"6\": \"text-[length:var(--heading-6-font-size)] leading-[var(--heading-6-line-height)] font-medium\",\n      \"7\": \"text-[length:var(--heading-7-font-size)] leading-[var(--heading-7-line-height)] font-medium\",\n    },\n    // Optional override of the per-step default weight.\n    weight: {\n      normal: \"font-normal\",\n      medium: \"font-medium\",\n      semibold: \"font-semibold\",\n    },\n    align: {\n      left: \"text-left\",\n      center: \"text-center\",\n      right: \"text-right\",\n    },\n    gradient: {\n      true: \"bg-gradient-to-r from-[var(--gradient-heading-from)] to-[var(--gradient-heading-to)] bg-clip-text text-transparent\",\n      false: \"text-foreground\",\n    },\n  },\n  defaultVariants: {\n    size: \"2\",\n    gradient: false,\n  },\n});\n\ntype HeadingProps = React.ComponentProps<\"h2\"> &\n  VariantProps<typeof headingVariants> & {\n    /** Semantic heading level/element. Defaults to `h2`. */\n    as?: React.ElementType;\n    /** Visual step on the Figma heading scale (1 largest → 7 smallest); also sets the per-step default weight. */\n    size?: VariantProps<typeof headingVariants>[\"size\"];\n    /** Override the per-step default weight. */\n    weight?: VariantProps<typeof headingVariants>[\"weight\"];\n    /** Text alignment. */\n    align?: VariantProps<typeof headingVariants>[\"align\"];\n    /** When true, fills the text with the brand gradient instead of the foreground colour. */\n    gradient?: VariantProps<typeof headingVariants>[\"gradient\"];\n  };\n\n/** Display/section title using the design-system heading scale; `size` sets the visual step, `as` the semantic element. */\nfunction Heading({ as, className, size, weight, align, gradient, ...props }: HeadingProps) {\n  const Comp = as ?? \"h2\";\n  return (\n    <Comp\n      data-slot=\"heading\"\n      className={cn(headingVariants({ size, weight, align, gradient }), className)}\n      {...props}\n    />\n  );\n}\n\nexport { Heading, headingVariants, type HeadingProps };\n"],"mappings":";;;;AAUA,MAAM,kBAAkB,IAAI,6BAA6B;CACvD,UAAU;EACR,MAAM;GACJ,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;GACL,KAAK;EACP;EAEA,QAAQ;GACN,QAAQ;GACR,QAAQ;GACR,UAAU;EACZ;EACA,OAAO;GACL,MAAM;GACN,QAAQ;GACR,OAAO;EACT;EACA,UAAU;GACR,MAAM;GACN,OAAO;EACT;CACF;CACA,iBAAiB;EACf,MAAM;EACN,UAAU;CACZ;AACF,CAAC;;AAiBD,SAAS,QAAQ,EAAE,IAAI,WAAW,MAAM,QAAQ,OAAO,UAAU,GAAG,SAAuB;CAEzF,OACE,oBAFW,MAAM,MAEjB;EACE,aAAU;EACV,WAAW,GAAG,gBAAgB;GAAE;GAAM;GAAQ;GAAO;EAAS,CAAC,GAAG,SAAS;EAC3E,GAAI;CACL,CAAA;AAEL"}

package/dist/primitives/HoverCard/index.cjs

@@ -0,0 +1,38 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+let radix_ui = require("radix-ui");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/HoverCard/HoverCard.tsx
+/** Root that reveals a floating card when the user hovers (or focuses) the trigger. */
+function HoverCard({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.HoverCard.Root, {
+		"data-slot": "hover-card",
+		...props
+	});
+}
+/** The element that opens the hover card on pointer hover or keyboard focus. */
+function HoverCardTrigger({ ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.HoverCard.Trigger, {
+		"data-slot": "hover-card-trigger",
+		...props
+	});
+}
+/** The floating, portalled surface shown while the trigger is hovered/focused. */
+function HoverCardContent({ className, align = "center", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.HoverCard.Portal, {
+		"data-slot": "hover-card-portal",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(radix_ui.HoverCard.Content, {
+			"data-slot": "hover-card-content",
+			align,
+			sideOffset,
+			className: require_cn.cn("z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+			...props
+		})
+	});
+}
+//#endregion
+exports.HoverCard = HoverCard;
+exports.HoverCardContent = HoverCardContent;
+exports.HoverCardTrigger = HoverCardTrigger;
+
+//# sourceMappingURL=index.cjs.map

package/dist/primitives/HoverCard/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["HoverCardPrimitive","cn"],"sources":["../../../src/primitives/HoverCard/HoverCard.tsx"],"sourcesContent":["import { HoverCard as HoverCardPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root that reveals a floating card when the user hovers (or focuses) the trigger. */\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\n/** The element that opens the hover card on pointer hover or keyboard focus. */\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\n/** The floating, portalled surface shown while the trigger is hovered/focused. */\nfunction HoverCardContent({\n  className,\n  /** Alignment of the content relative to the trigger along the chosen side. */\n  align = \"center\",\n  /** Gap in pixels between the trigger and the content. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          className,\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n"],"mappings":";;;;;;AAMA,SAAS,UAAU,EAAE,GAAG,SAA+D;CACrF,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,MAApB;EAAyB,aAAU;EAAa,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,iBAAiB,EAAE,GAAG,SAAkE;CAC/F,OAAO,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,SAApB;EAA4B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAChF;;AAGA,SAAS,iBAAiB,EACxB,WAEA,QAAQ,UAER,aAAa,GACb,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,QAApB;EAA2B,aAAU;YACnC,iBAAA,GAAA,kBAAA,KAACA,SAAAA,UAAmB,SAApB;GACE,aAAU;GACH;GACK;GACZ,WAAWC,WAAAA,GACT,qeACA,SACF;GACA,GAAI;EACL,CAAA;CACwB,CAAA;AAE/B"}

package/dist/primitives/HoverCard/index.d.cts

@@ -0,0 +1,2 @@
+import { n as HoverCardContent, r as HoverCardTrigger, t as HoverCard } from "../../index29.cjs";
+export { HoverCard, HoverCardContent, HoverCardTrigger };

package/dist/primitives/HoverCard/index.d.ts

@@ -0,0 +1,2 @@
+import { n as HoverCardContent, r as HoverCardTrigger, t as HoverCard } from "../../index29.js";
+export { HoverCard, HoverCardContent, HoverCardTrigger };

package/dist/primitives/HoverCard/index.js

@@ -0,0 +1,35 @@
+import { t as cn } from "../../cn.js";
+import { HoverCard as HoverCard$1 } from "radix-ui";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/HoverCard/HoverCard.tsx
+/** Root that reveals a floating card when the user hovers (or focuses) the trigger. */
+function HoverCard({ ...props }) {
+	return /* @__PURE__ */ jsx(HoverCard$1.Root, {
+		"data-slot": "hover-card",
+		...props
+	});
+}
+/** The element that opens the hover card on pointer hover or keyboard focus. */
+function HoverCardTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(HoverCard$1.Trigger, {
+		"data-slot": "hover-card-trigger",
+		...props
+	});
+}
+/** The floating, portalled surface shown while the trigger is hovered/focused. */
+function HoverCardContent({ className, align = "center", sideOffset = 4, ...props }) {
+	return /* @__PURE__ */ jsx(HoverCard$1.Portal, {
+		"data-slot": "hover-card-portal",
+		children: /* @__PURE__ */ jsx(HoverCard$1.Content, {
+			"data-slot": "hover-card-content",
+			align,
+			sideOffset,
+			className: cn("z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", className),
+			...props
+		})
+	});
+}
+//#endregion
+export { HoverCard, HoverCardContent, HoverCardTrigger };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/HoverCard/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["HoverCardPrimitive"],"sources":["../../../src/primitives/HoverCard/HoverCard.tsx"],"sourcesContent":["import { HoverCard as HoverCardPrimitive } from \"radix-ui\";\nimport type * as React from \"react\";\n\nimport { cn } from \"@/utils\";\n\n/** Root that reveals a floating card when the user hovers (or focuses) the trigger. */\nfunction HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>) {\n  return <HoverCardPrimitive.Root data-slot=\"hover-card\" {...props} />;\n}\n\n/** The element that opens the hover card on pointer hover or keyboard focus. */\nfunction HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {\n  return <HoverCardPrimitive.Trigger data-slot=\"hover-card-trigger\" {...props} />;\n}\n\n/** The floating, portalled surface shown while the trigger is hovered/focused. */\nfunction HoverCardContent({\n  className,\n  /** Alignment of the content relative to the trigger along the chosen side. */\n  align = \"center\",\n  /** Gap in pixels between the trigger and the content. */\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {\n  return (\n    <HoverCardPrimitive.Portal data-slot=\"hover-card-portal\">\n      <HoverCardPrimitive.Content\n        data-slot=\"hover-card-content\"\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          \"z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\",\n          className,\n        )}\n        {...props}\n      />\n    </HoverCardPrimitive.Portal>\n  );\n}\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n"],"mappings":";;;;;AAMA,SAAS,UAAU,EAAE,GAAG,SAA+D;CACrF,OAAO,oBAACA,YAAmB,MAApB;EAAyB,aAAU;EAAa,GAAI;CAAQ,CAAA;AACrE;;AAGA,SAAS,iBAAiB,EAAE,GAAG,SAAkE;CAC/F,OAAO,oBAACA,YAAmB,SAApB;EAA4B,aAAU;EAAqB,GAAI;CAAQ,CAAA;AAChF;;AAGA,SAAS,iBAAiB,EACxB,WAEA,QAAQ,UAER,aAAa,GACb,GAAG,SACuD;CAC1D,OACE,oBAACA,YAAmB,QAApB;EAA2B,aAAU;YACnC,oBAACA,YAAmB,SAApB;GACE,aAAU;GACH;GACK;GACZ,WAAW,GACT,qeACA,SACF;GACA,GAAI;EACL,CAAA;CACwB,CAAA;AAE/B"}

package/dist/primitives/Icon/index.cjs

@@ -0,0 +1,4 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Icon = require("../../Icon.cjs");
+exports.ICON_NAMES = require_Icon.ICON_NAMES;
+exports.Icon = require_Icon.Icon;

package/dist/primitives/Icon/index.d.cts

@@ -0,0 +1,2 @@
+import { i as IconName, n as IconProps, r as ICON_NAMES, t as Icon } from "../../index30.cjs";
+export { ICON_NAMES, Icon, IconName, IconProps };

package/dist/primitives/Icon/index.d.ts

@@ -0,0 +1,2 @@
+import { i as IconName, n as IconProps, r as ICON_NAMES, t as Icon } from "../../index30.js";
+export { ICON_NAMES, Icon, IconName, IconProps };

package/dist/primitives/Icon/index.js

@@ -0,0 +1,2 @@
+import { n as ICON_NAMES, t as Icon } from "../../Icon.js";
+export { ICON_NAMES, Icon };

package/dist/primitives/InfoBanner/index.cjs

@@ -0,0 +1,79 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_cn = require("../../cn.cjs");
+let react = require("react");
+let lucide_react = require("lucide-react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/InfoBanner/InfoBanner.tsx
+const infoBannerVariants = (0, require("class-variance-authority").cva)("flex w-full gap-3 rounded-xl px-4 py-3", {
+	variants: { variant: {
+		info: "bg-[var(--bg-info-subtle)] text-[var(--content-info-bold)]",
+		success: "bg-[var(--bg-success-subtle)] text-[var(--content-success-bold)]",
+		warning: "bg-[var(--bg-warning-subtle)] text-[var(--content-warning-bold)]",
+		error: "bg-destructive/10 text-destructive",
+		neutral: "bg-muted text-foreground"
+	} },
+	defaultVariants: { variant: "info" }
+});
+const variantIcons = {
+	info: lucide_react.Info,
+	success: lucide_react.CircleCheck,
+	warning: lucide_react.TriangleAlert,
+	error: lucide_react.CircleAlert,
+	neutral: lucide_react.Info
+};
+/** Dismissible inline status banner colored by intent (info/success/warning/error/neutral). */
+function InfoBanner({ title, description, variant, icon, dismissible = true, visible, onDismiss, className, ...props }) {
+	const [internalVisible, setInternalVisible] = (0, react.useState)(true);
+	const isControlled = visible !== void 0;
+	if (!(isControlled ? visible : internalVisible)) return null;
+	const handleDismiss = () => {
+		if (!isControlled) setInternalVisible(false);
+		onDismiss?.();
+	};
+	const VariantIcon = variantIcons[variant ?? "info"];
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		"data-slot": "info-banner",
+		"data-variant": variant ?? "info",
+		role: "status",
+		className: require_cn.cn(infoBannerVariants({ variant }), description != null ? "items-start" : "items-center", className),
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				"data-slot": "info-banner-icon",
+				className: "shrink-0",
+				"aria-hidden": "true",
+				children: icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VariantIcon, { className: "size-5" })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				"data-slot": "info-banner-content",
+				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"data-slot": "info-banner-title",
+					className: "font-medium text-sm",
+					children: title
+				}), description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					"data-slot": "info-banner-description",
+					className: "text-sm opacity-80",
+					children: description
+				})]
+			}),
+			dismissible && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				"data-slot": "info-banner-dismiss",
+				type: "button",
+				"aria-label": "Dismiss",
+				onClick: handleDismiss,
+				className: "-mr-1 flex size-8 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-foreground/5",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+					"data-slot": "info-banner-dismiss-icon",
+					className: "size-4",
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+}
+//#endregion
+exports.InfoBanner = InfoBanner;
+exports.infoBannerVariants = infoBannerVariants;
+
+//# sourceMappingURL=index.cjs.map

package/dist/primitives/InfoBanner/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["Info","CircleCheck","TriangleAlert","CircleAlert","cn","X"],"sources":["../../../src/primitives/InfoBanner/InfoBanner.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { CircleAlert, CircleCheck, Info, TriangleAlert, X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// InfoBanner — a dismissible inline status banner. Colored by intent via the\n// semantic --bg-*-subtle / --content-*-bold token sets (info/success/warning/\n// error) plus a neutral option. Distinct from Alert (which is not dismissible).\nconst infoBannerVariants = cva(\"flex w-full gap-3 rounded-xl px-4 py-3\", {\n  variants: {\n    variant: {\n      info: \"bg-[var(--bg-info-subtle)] text-[var(--content-info-bold)]\",\n      success: \"bg-[var(--bg-success-subtle)] text-[var(--content-success-bold)]\",\n      warning: \"bg-[var(--bg-warning-subtle)] text-[var(--content-warning-bold)]\",\n      error: \"bg-destructive/10 text-destructive\",\n      neutral: \"bg-muted text-foreground\",\n    },\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n});\n\nconst variantIcons = {\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  error: CircleAlert,\n  neutral: Info,\n} as const;\n\nexport type InfoBannerProps = Omit<React.ComponentProps<\"div\">, \"title\"> &\n  VariantProps<typeof infoBannerVariants> & {\n    /** Intent that drives the banner colors and default icon. Default `info`. */\n    variant?: VariantProps<typeof infoBannerVariants>[\"variant\"];\n    /** Banner heading. */\n    title: string;\n    /** Optional supporting copy below the title. */\n    description?: React.ReactNode;\n    /** Override the default per-variant leading icon. */\n    icon?: React.ReactNode;\n    /** Show the trailing dismiss button. Default true. */\n    dismissible?: boolean;\n    /** Controlled visibility. When provided, overrides internal state. */\n    visible?: boolean;\n    /** Called when the dismiss button is pressed. */\n    onDismiss?: () => void;\n  };\n\n/** Dismissible inline status banner colored by intent (info/success/warning/error/neutral). */\nfunction InfoBanner({\n  title,\n  description,\n  variant,\n  icon,\n  dismissible = true,\n  visible,\n  onDismiss,\n  className,\n  ...props\n}: InfoBannerProps) {\n  const [internalVisible, setInternalVisible] = useState(true);\n  const isControlled = visible !== undefined;\n  const isVisible = isControlled ? visible : internalVisible;\n\n  if (!isVisible) return null;\n\n  const handleDismiss = () => {\n    if (!isControlled) setInternalVisible(false);\n    onDismiss?.();\n  };\n\n  const VariantIcon = variantIcons[variant ?? \"info\"];\n\n  return (\n    <div\n      data-slot=\"info-banner\"\n      data-variant={variant ?? \"info\"}\n      role=\"status\"\n      className={cn(\n        infoBannerVariants({ variant }),\n        // Center a single-line (title-only) banner; top-align when a description wraps.\n        description != null ? \"items-start\" : \"items-center\",\n        className,\n      )}\n      {...props}\n    >\n      {/* Icon inherits the variant's text color via currentColor. */}\n      <span data-slot=\"info-banner-icon\" className=\"shrink-0\" aria-hidden=\"true\">\n        {icon ?? <VariantIcon className=\"size-5\" />}\n      </span>\n\n      <div data-slot=\"info-banner-content\" className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <span data-slot=\"info-banner-title\" className=\"font-medium text-sm\">\n          {title}\n        </span>\n        {description != null && (\n          <span data-slot=\"info-banner-description\" className=\"text-sm opacity-80\">\n            {description}\n          </span>\n        )}\n      </div>\n\n      {dismissible && (\n        <button\n          data-slot=\"info-banner-dismiss\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          onClick={handleDismiss}\n          className=\"-mr-1 flex size-8 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-foreground/5\"\n        >\n          <X data-slot=\"info-banner-dismiss-icon\" className=\"size-4\" aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { InfoBanner, infoBannerVariants };\n"],"mappings":";;;;;;AAUA,MAAM,sBAAA,qCAAA,EAAA,KAAyB,0CAA0C;CACvE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACP,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC;AAED,MAAM,eAAe;CACnB,MAAMA,aAAAA;CACN,SAASC,aAAAA;CACT,SAASC,aAAAA;CACT,OAAOC,aAAAA;CACP,SAASH,aAAAA;AACX;;AAqBA,SAAS,WAAW,EAClB,OACA,aACA,SACA,MACA,cAAc,MACd,SACA,WACA,WACA,GAAG,SACe;CAClB,MAAM,CAAC,iBAAiB,uBAAA,GAAA,MAAA,UAA+B,IAAI;CAC3D,MAAM,eAAe,YAAY,KAAA;CAGjC,IAAI,EAFc,eAAe,UAAU,kBAE3B,OAAO;CAEvB,MAAM,sBAAsB;EAC1B,IAAI,CAAC,cAAc,mBAAmB,KAAK;EAC3C,YAAY;CACd;CAEA,MAAM,cAAc,aAAa,WAAW;CAE5C,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,MAAK;EACL,WAAWI,WAAAA,GACT,mBAAmB,EAAE,QAAQ,CAAC,GAE9B,eAAe,OAAO,gBAAgB,gBACtC,SACF;EACA,GAAI;YAVN;GAaE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,aAAU;IAAmB,WAAU;IAAW,eAAY;cACjE,QAAQ,iBAAA,GAAA,kBAAA,KAAC,aAAD,EAAa,WAAU,SAAU,CAAA;GACtC,CAAA;GAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,aAAU;IAAsB,WAAU;cAA/C,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,aAAU;KAAoB,WAAU;eAC3C;IACG,CAAA,GACL,eAAe,QACd,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,aAAU;KAA0B,WAAU;eACjD;IACG,CAAA,CAEL;;GAEJ,eACC,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,aAAU;IACV,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAU;cAEV,iBAAA,GAAA,kBAAA,KAACC,aAAAA,GAAD;KAAG,aAAU;KAA2B,WAAU;KAAS,eAAY;IAAQ,CAAA;GACzE,CAAA;EAEP;;AAET"}

package/dist/primitives/InfoBanner/index.d.cts

@@ -0,0 +1,2 @@
+import { n as InfoBannerProps, r as infoBannerVariants, t as InfoBanner } from "../../index31.cjs";
+export { InfoBanner, InfoBannerProps, infoBannerVariants };

package/dist/primitives/InfoBanner/index.d.ts

@@ -0,0 +1,2 @@
+import { n as InfoBannerProps, r as infoBannerVariants, t as InfoBanner } from "../../index31.js";
+export { InfoBanner, InfoBannerProps, infoBannerVariants };

package/dist/primitives/InfoBanner/index.js

@@ -0,0 +1,78 @@
+import { t as cn } from "../../cn.js";
+import { useState } from "react";
+import { CircleAlert, CircleCheck, Info, TriangleAlert, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/primitives/InfoBanner/InfoBanner.tsx
+const infoBannerVariants = cva("flex w-full gap-3 rounded-xl px-4 py-3", {
+	variants: { variant: {
+		info: "bg-[var(--bg-info-subtle)] text-[var(--content-info-bold)]",
+		success: "bg-[var(--bg-success-subtle)] text-[var(--content-success-bold)]",
+		warning: "bg-[var(--bg-warning-subtle)] text-[var(--content-warning-bold)]",
+		error: "bg-destructive/10 text-destructive",
+		neutral: "bg-muted text-foreground"
+	} },
+	defaultVariants: { variant: "info" }
+});
+const variantIcons = {
+	info: Info,
+	success: CircleCheck,
+	warning: TriangleAlert,
+	error: CircleAlert,
+	neutral: Info
+};
+/** Dismissible inline status banner colored by intent (info/success/warning/error/neutral). */
+function InfoBanner({ title, description, variant, icon, dismissible = true, visible, onDismiss, className, ...props }) {
+	const [internalVisible, setInternalVisible] = useState(true);
+	const isControlled = visible !== void 0;
+	if (!(isControlled ? visible : internalVisible)) return null;
+	const handleDismiss = () => {
+		if (!isControlled) setInternalVisible(false);
+		onDismiss?.();
+	};
+	const VariantIcon = variantIcons[variant ?? "info"];
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "info-banner",
+		"data-variant": variant ?? "info",
+		role: "status",
+		className: cn(infoBannerVariants({ variant }), description != null ? "items-start" : "items-center", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				"data-slot": "info-banner-icon",
+				className: "shrink-0",
+				"aria-hidden": "true",
+				children: icon ?? /* @__PURE__ */ jsx(VariantIcon, { className: "size-5" })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "info-banner-content",
+				className: "flex min-w-0 flex-1 flex-col gap-0.5",
+				children: [/* @__PURE__ */ jsx("span", {
+					"data-slot": "info-banner-title",
+					className: "font-medium text-sm",
+					children: title
+				}), description != null && /* @__PURE__ */ jsx("span", {
+					"data-slot": "info-banner-description",
+					className: "text-sm opacity-80",
+					children: description
+				})]
+			}),
+			dismissible && /* @__PURE__ */ jsx("button", {
+				"data-slot": "info-banner-dismiss",
+				type: "button",
+				"aria-label": "Dismiss",
+				onClick: handleDismiss,
+				className: "-mr-1 flex size-8 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-foreground/5",
+				children: /* @__PURE__ */ jsx(X, {
+					"data-slot": "info-banner-dismiss-icon",
+					className: "size-4",
+					"aria-hidden": "true"
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { InfoBanner, infoBannerVariants };
+
+//# sourceMappingURL=index.js.map

package/dist/primitives/InfoBanner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/primitives/InfoBanner/InfoBanner.tsx"],"sourcesContent":["import { type VariantProps, cva } from \"class-variance-authority\";\nimport { CircleAlert, CircleCheck, Info, TriangleAlert, X } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { useState } from \"react\";\n\nimport { cn } from \"@/utils\";\n\n// InfoBanner — a dismissible inline status banner. Colored by intent via the\n// semantic --bg-*-subtle / --content-*-bold token sets (info/success/warning/\n// error) plus a neutral option. Distinct from Alert (which is not dismissible).\nconst infoBannerVariants = cva(\"flex w-full gap-3 rounded-xl px-4 py-3\", {\n  variants: {\n    variant: {\n      info: \"bg-[var(--bg-info-subtle)] text-[var(--content-info-bold)]\",\n      success: \"bg-[var(--bg-success-subtle)] text-[var(--content-success-bold)]\",\n      warning: \"bg-[var(--bg-warning-subtle)] text-[var(--content-warning-bold)]\",\n      error: \"bg-destructive/10 text-destructive\",\n      neutral: \"bg-muted text-foreground\",\n    },\n  },\n  defaultVariants: {\n    variant: \"info\",\n  },\n});\n\nconst variantIcons = {\n  info: Info,\n  success: CircleCheck,\n  warning: TriangleAlert,\n  error: CircleAlert,\n  neutral: Info,\n} as const;\n\nexport type InfoBannerProps = Omit<React.ComponentProps<\"div\">, \"title\"> &\n  VariantProps<typeof infoBannerVariants> & {\n    /** Intent that drives the banner colors and default icon. Default `info`. */\n    variant?: VariantProps<typeof infoBannerVariants>[\"variant\"];\n    /** Banner heading. */\n    title: string;\n    /** Optional supporting copy below the title. */\n    description?: React.ReactNode;\n    /** Override the default per-variant leading icon. */\n    icon?: React.ReactNode;\n    /** Show the trailing dismiss button. Default true. */\n    dismissible?: boolean;\n    /** Controlled visibility. When provided, overrides internal state. */\n    visible?: boolean;\n    /** Called when the dismiss button is pressed. */\n    onDismiss?: () => void;\n  };\n\n/** Dismissible inline status banner colored by intent (info/success/warning/error/neutral). */\nfunction InfoBanner({\n  title,\n  description,\n  variant,\n  icon,\n  dismissible = true,\n  visible,\n  onDismiss,\n  className,\n  ...props\n}: InfoBannerProps) {\n  const [internalVisible, setInternalVisible] = useState(true);\n  const isControlled = visible !== undefined;\n  const isVisible = isControlled ? visible : internalVisible;\n\n  if (!isVisible) return null;\n\n  const handleDismiss = () => {\n    if (!isControlled) setInternalVisible(false);\n    onDismiss?.();\n  };\n\n  const VariantIcon = variantIcons[variant ?? \"info\"];\n\n  return (\n    <div\n      data-slot=\"info-banner\"\n      data-variant={variant ?? \"info\"}\n      role=\"status\"\n      className={cn(\n        infoBannerVariants({ variant }),\n        // Center a single-line (title-only) banner; top-align when a description wraps.\n        description != null ? \"items-start\" : \"items-center\",\n        className,\n      )}\n      {...props}\n    >\n      {/* Icon inherits the variant's text color via currentColor. */}\n      <span data-slot=\"info-banner-icon\" className=\"shrink-0\" aria-hidden=\"true\">\n        {icon ?? <VariantIcon className=\"size-5\" />}\n      </span>\n\n      <div data-slot=\"info-banner-content\" className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n        <span data-slot=\"info-banner-title\" className=\"font-medium text-sm\">\n          {title}\n        </span>\n        {description != null && (\n          <span data-slot=\"info-banner-description\" className=\"text-sm opacity-80\">\n            {description}\n          </span>\n        )}\n      </div>\n\n      {dismissible && (\n        <button\n          data-slot=\"info-banner-dismiss\"\n          type=\"button\"\n          aria-label=\"Dismiss\"\n          onClick={handleDismiss}\n          className=\"-mr-1 flex size-8 shrink-0 items-center justify-center rounded-md transition-colors hover:bg-foreground/5\"\n        >\n          <X data-slot=\"info-banner-dismiss-icon\" className=\"size-4\" aria-hidden=\"true\" />\n        </button>\n      )}\n    </div>\n  );\n}\n\nexport { InfoBanner, infoBannerVariants };\n"],"mappings":";;;;;;AAUA,MAAM,qBAAqB,IAAI,0CAA0C;CACvE,UAAU,EACR,SAAS;EACP,MAAM;EACN,SAAS;EACT,SAAS;EACT,OAAO;EACP,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CAAC;AAED,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;CACP,SAAS;AACX;;AAqBA,SAAS,WAAW,EAClB,OACA,aACA,SACA,MACA,cAAc,MACd,SACA,WACA,WACA,GAAG,SACe;CAClB,MAAM,CAAC,iBAAiB,sBAAsB,SAAS,IAAI;CAC3D,MAAM,eAAe,YAAY,KAAA;CAGjC,IAAI,EAFc,eAAe,UAAU,kBAE3B,OAAO;CAEvB,MAAM,sBAAsB;EAC1B,IAAI,CAAC,cAAc,mBAAmB,KAAK;EAC3C,YAAY;CACd;CAEA,MAAM,cAAc,aAAa,WAAW;CAE5C,OACE,qBAAC,OAAD;EACE,aAAU;EACV,gBAAc,WAAW;EACzB,MAAK;EACL,WAAW,GACT,mBAAmB,EAAE,QAAQ,CAAC,GAE9B,eAAe,OAAO,gBAAgB,gBACtC,SACF;EACA,GAAI;YAVN;GAaE,oBAAC,QAAD;IAAM,aAAU;IAAmB,WAAU;IAAW,eAAY;cACjE,QAAQ,oBAAC,aAAD,EAAa,WAAU,SAAU,CAAA;GACtC,CAAA;GAEN,qBAAC,OAAD;IAAK,aAAU;IAAsB,WAAU;cAA/C,CACE,oBAAC,QAAD;KAAM,aAAU;KAAoB,WAAU;eAC3C;IACG,CAAA,GACL,eAAe,QACd,oBAAC,QAAD;KAAM,aAAU;KAA0B,WAAU;eACjD;IACG,CAAA,CAEL;;GAEJ,eACC,oBAAC,UAAD;IACE,aAAU;IACV,MAAK;IACL,cAAW;IACX,SAAS;IACT,WAAU;cAEV,oBAAC,GAAD;KAAG,aAAU;KAA2B,WAAU;KAAS,eAAY;IAAQ,CAAA;GACzE,CAAA;EAEP;;AAET"}