@hex-core/components 1.3.1 → 1.5.0

package/dist/form.js

@@ -0,0 +1,114 @@
+"use client";
+import { Slot } from '@radix-ui/react-slot';
+import * as React2 from 'react';
+import { useFormContext, useFormState, FormProvider, Controller } from 'react-hook-form';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React2.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props })
+);
+Label.displayName = "Label";
+var Form = FormProvider;
+var FormFieldContext = React2.createContext({});
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsx(FormFieldContext.Provider, { value: { name: props.name }, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+};
+var FormItemContext = React2.createContext({});
+function useFormField() {
+  const fieldContext = React2.useContext(FormFieldContext);
+  const itemContext = React2.useContext(FormItemContext);
+  if (!fieldContext?.name) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+}
+var FormItem = React2.forwardRef(
+  ({ className, ...props }, ref) => {
+    const id = React2.useId();
+    return /* @__PURE__ */ jsx(FormItemContext.Provider, { value: { id }, children: /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), ...props }) });
+  }
+);
+FormItem.displayName = "FormItem";
+var FormLabel = React2.forwardRef(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      ref,
+      className: cn(error && "text-destructive", className),
+      htmlFor: formItemId,
+      ...props
+    }
+  );
+});
+FormLabel.displayName = "FormLabel";
+var FormControl = React2.forwardRef(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": error ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+});
+FormControl.displayName = "FormControl";
+var FormDescription = React2.forwardRef(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+});
+FormDescription.displayName = "FormDescription";
+var FormMessage = React2.forwardRef(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error?.message ? String(error.message) : children;
+  if (!body) return null;
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formMessageId,
+      className: cn("text-sm font-medium text-destructive", className),
+      ...props,
+      children: body
+    }
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+//# sourceMappingURL=form.js.map
+//# sourceMappingURL=form.js.map

package/dist/form.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/primitives/label/label.tsx","../src/components/form/form.tsx"],"names":["React","jsx"],"mappings":"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","file":"form.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\nconst labelVariants = cva(\n\t\"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n);\n\nexport interface LabelProps\n\textends React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>,\n\t\tVariantProps<typeof labelVariants> {}\n\nconst Label = React.forwardRef<React.ComponentRef<typeof LabelPrimitive.Root>, LabelProps>(\n\t({ className, ...props }, ref) => (\n\t\t<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />\n\t),\n);\nLabel.displayName = \"Label\";\n\nexport { Label };\n","\"use client\";\n\nimport * as LabelPrimitive from \"@radix-ui/react-label\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport {\n\tController,\n\ttype ControllerProps,\n\ttype FieldPath,\n\ttype FieldValues,\n\tFormProvider,\n\tuseFormContext,\n\tuseFormState,\n} from \"react-hook-form\";\nimport { Label } from \"../../primitives/label/label.js\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Root form provider. Wraps react-hook-form's FormProvider. */\nconst Form = FormProvider;\n\ninterface FormFieldContextValue<\n\tTFieldValues extends FieldValues = FieldValues,\n\tTName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n\tname: TName;\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\n/**\n * Binds a field name to a react-hook-form Controller.\n * Provides context so FormItem children can access field state.\n * @param props - Controller props including name, control, render\n * @returns A Controller with FormFieldContext\n */\nconst FormField = <\n\tTFieldValues extends FieldValues = FieldValues,\n\tTName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n\t...props\n}: ControllerProps<TFieldValues, TName>) => {\n\treturn (\n\t\t<FormFieldContext.Provider value={{ name: props.name }}>\n\t\t\t<Controller {...props} />\n\t\t</FormFieldContext.Provider>\n\t);\n};\n\ninterface FormItemContextValue {\n\tid: string;\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);\n\n/**\n * Hook that returns the current field's id, name, error, and derived aria ids.\n * Must be called inside a FormField + FormItem subtree.\n * @returns Field state + aria descriptors\n */\nfunction useFormField() {\n\tconst fieldContext = React.useContext(FormFieldContext);\n\tconst itemContext = React.useContext(FormItemContext);\n\tif (!fieldContext?.name) {\n\t\tthrow new Error(\"useFormField should be used within <FormField>\");\n\t}\n\n\tconst { getFieldState } = useFormContext();\n\tconst formState = useFormState({ name: fieldContext.name });\n\tconst fieldState = getFieldState(fieldContext.name, formState);\n\n\tconst { id } = itemContext;\n\treturn {\n\t\tid,\n\t\tname: fieldContext.name,\n\t\tformItemId: `${id}-form-item`,\n\t\tformDescriptionId: `${id}-form-item-description`,\n\t\tformMessageId: `${id}-form-item-message`,\n\t\t...fieldState,\n\t};\n}\n\n/** Wraps a single form field (label + control + description + message). */\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n\t({ className, ...props }, ref) => {\n\t\tconst id = React.useId();\n\t\treturn (\n\t\t\t<FormItemContext.Provider value={{ id }}>\n\t\t\t\t<div ref={ref} className={cn(\"space-y-2\", className)} {...props} />\n\t\t\t</FormItemContext.Provider>\n\t\t);\n\t},\n);\nFormItem.displayName = \"FormItem\";\n\n/** Accessible label wired to the FormItem's control. Turns red on error. */\nconst FormLabel = React.forwardRef<\n\tReact.ComponentRef<typeof LabelPrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(({ className, ...props }, ref) => {\n\tconst { error, formItemId } = useFormField();\n\treturn (\n\t\t<Label\n\t\t\tref={ref}\n\t\t\tclassName={cn(error && \"text-destructive\", className)}\n\t\t\thtmlFor={formItemId}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nFormLabel.displayName = \"FormLabel\";\n\n/** Wraps the form control and wires id + aria-describedby + aria-invalid. */\nconst FormControl = React.forwardRef<\n\tReact.ComponentRef<typeof Slot>,\n\tReact.ComponentPropsWithoutRef<typeof Slot>\n>(({ ...props }, ref) => {\n\tconst { error, formItemId, formDescriptionId, formMessageId } = useFormField();\n\treturn (\n\t\t<Slot\n\t\t\tref={ref}\n\t\t\tid={formItemId}\n\t\t\taria-describedby={\n\t\t\t\terror ? `${formDescriptionId} ${formMessageId}` : `${formDescriptionId}`\n\t\t\t}\n\t\t\taria-invalid={!!error}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nFormControl.displayName = \"FormControl\";\n\n/** Optional helper text below the control. */\nconst FormDescription = React.forwardRef<\n\tHTMLParagraphElement,\n\tReact.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => {\n\tconst { formDescriptionId } = useFormField();\n\treturn (\n\t\t<p\n\t\t\tref={ref}\n\t\t\tid={formDescriptionId}\n\t\t\tclassName={cn(\"text-sm text-muted-foreground\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nFormDescription.displayName = \"FormDescription\";\n\n/** Validation error message. Renders the error string when the field is invalid. */\nconst FormMessage = React.forwardRef<\n\tHTMLParagraphElement,\n\tReact.HTMLAttributes<HTMLParagraphElement>\n>(({ className, children, ...props }, ref) => {\n\tconst { error, formMessageId } = useFormField();\n\tconst body = error?.message ? String(error.message) : children;\n\tif (!body) return null;\n\treturn (\n\t\t<p\n\t\t\tref={ref}\n\t\t\tid={formMessageId}\n\t\t\tclassName={cn(\"text-sm font-medium text-destructive\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{body}\n\t\t</p>\n\t);\n});\nFormMessage.displayName = \"FormMessage\";\n\nexport {\n\tuseFormField,\n\tForm,\n\tFormItem,\n\tFormLabel,\n\tFormControl,\n\tFormDescription,\n\tFormMessage,\n\tFormField,\n};\n"]}

package/dist/grid.d.ts

@@ -0,0 +1,3 @@
+export { GridProps_alias_1 as GridProps } from './_tsup-dts-rollup.js';
+export { Grid_alias_1 as Grid } from './_tsup-dts-rollup.js';
+export { gridVariants_alias_1 as gridVariants } from './_tsup-dts-rollup.js';

package/dist/grid.js

@@ -0,0 +1,58 @@
+import { cva } from 'class-variance-authority';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+// src/primitives/grid/grid.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/primitives/_shared/layout-variants.ts
+var gapVariants = {
+  xs: "gap-[var(--gap-xs,0.25rem)]",
+  sm: "gap-[var(--gap-sm,0.5rem)]",
+  md: "gap-[var(--gap-md,1rem)]",
+  lg: "gap-[var(--gap-lg,1.5rem)]",
+  xl: "gap-[var(--gap-xl,2rem)]"
+};
+var flexAlignVariants = {
+  start: "items-start",
+  center: "items-center",
+  end: "items-end",
+  stretch: "items-stretch"
+};
+var gridVariants = cva("grid", {
+  variants: {
+    cols: {
+      1: "grid-cols-1",
+      2: "grid-cols-2",
+      3: "grid-cols-3",
+      4: "grid-cols-4",
+      6: "grid-cols-6",
+      "auto-fit": ""
+    },
+    gap: gapVariants,
+    align: flexAlignVariants
+  },
+  defaultVariants: {
+    cols: 3,
+    gap: "md",
+    align: "stretch"
+  }
+});
+function Grid({ className, cols, gap, align, minColWidth = "16rem", style, ...props }) {
+  const inlineStyle = cols === "auto-fit" ? { gridTemplateColumns: `repeat(auto-fit, minmax(${minColWidth}, 1fr))`, ...style } : style;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(gridVariants({ cols, gap, align }), className),
+      style: inlineStyle,
+      ...props
+    }
+  );
+}
+
+export { Grid, gridVariants };
+//# sourceMappingURL=grid.js.map
+//# sourceMappingURL=grid.js.map

package/dist/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/primitives/_shared/layout-variants.ts","../src/primitives/grid/grid.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;;;ACCO,IAAM,WAAA,GAAc;AAAA,EAC1B,EAAA,EAAI,6BAAA;AAAA,EACJ,EAAA,EAAI,4BAAA;AAAA,EACJ,EAAA,EAAI,0BAAA;AAAA,EACJ,EAAA,EAAI,4BAAA;AAAA,EACJ,EAAA,EAAI;AACL,CAAA;AAWO,IAAM,iBAAA,GAAoB;AAAA,EAChC,KAAA,EAAO,aAAA;AAAA,EACP,MAAA,EAAQ,cAAA;AAAA,EACR,GAAA,EAAK,WAAA;AAAA,EACL,OAAA,EAAS;AACV,CAAA;ACpBA,IAAM,YAAA,GAAe,IAAI,MAAA,EAAQ;AAAA,EAChC,QAAA,EAAU;AAAA,IACT,IAAA,EAAM;AAAA,MACL,CAAA,EAAG,aAAA;AAAA,MACH,CAAA,EAAG,aAAA;AAAA,MACH,CAAA,EAAG,aAAA;AAAA,MACH,CAAA,EAAG,aAAA;AAAA,MACH,CAAA,EAAG,aAAA;AAAA,MACH,UAAA,EAAY;AAAA,KACb;AAAA,IACA,GAAA,EAAK,WAAA;AAAA,IACL,KAAA,EAAO;AAAA,GACR;AAAA,EACA,eAAA,EAAiB;AAAA,IAChB,IAAA,EAAM,CAAA;AAAA,IACN,GAAA,EAAK,IAAA;AAAA,IACL,KAAA,EAAO;AAAA;AAET,CAAC;AAkCD,SAAS,IAAA,CAAK,EAAE,SAAA,EAAW,IAAA,EAAM,GAAA,EAAK,KAAA,EAAO,WAAA,GAAc,OAAA,EAAS,KAAA,EAAO,GAAG,KAAA,EAAM,EAAc;AAGjG,EAAA,MAAM,WAAA,GACL,IAAA,KAAS,UAAA,GACN,EAAE,mBAAA,EAAqB,2BAA2B,WAAW,CAAA,OAAA,CAAA,EAAW,GAAG,KAAA,EAAM,GACjF,KAAA;AACJ,EAAA,uBACC,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAW,GAAG,YAAA,CAAa,EAAE,MAAM,GAAA,EAAK,KAAA,EAAO,CAAA,EAAG,SAAS,CAAA;AAAA,MAC3D,KAAA,EAAO,WAAA;AAAA,MACN,GAAG;AAAA;AAAA,GACL;AAEF","file":"grid.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","/**\n * Single source of truth for layout-primitive CVA variant maps.\n *\n * Stack, Cluster, Grid all share `gap` and `justify` value sets; align values\n * differ slightly (`stretch` for column-like flows, `baseline` for row flows).\n * Centralizing the maps here keeps token names and Tailwind classes in one\n * file — when the gap scale changes (renamed token, new step, etc.), all\n * three components update together.\n */\n\n/** Gap scale bound to `--gap-*` tokens. Used by Stack, Cluster, Grid. */\nexport const gapVariants = {\n\txs: \"gap-[var(--gap-xs,0.25rem)]\",\n\tsm: \"gap-[var(--gap-sm,0.5rem)]\",\n\tmd: \"gap-[var(--gap-md,1rem)]\",\n\tlg: \"gap-[var(--gap-lg,1.5rem)]\",\n\txl: \"gap-[var(--gap-xl,2rem)]\",\n} as const;\n\n/** `justify-content` values shared by Stack and Cluster. */\nexport const justifyVariants = {\n\tstart: \"justify-start\",\n\tcenter: \"justify-center\",\n\tend: \"justify-end\",\n\tbetween: \"justify-between\",\n} as const;\n\n/** Cross-axis `align-items` values for vertical/grid flows (column-like). */\nexport const flexAlignVariants = {\n\tstart: \"items-start\",\n\tcenter: \"items-center\",\n\tend: \"items-end\",\n\tstretch: \"items-stretch\",\n} as const;\n\n/** Cross-axis `align-items` values for horizontal flows. Includes `baseline`. */\nexport const clusterAlignVariants = {\n\tstart: \"items-start\",\n\tcenter: \"items-center\",\n\tend: \"items-end\",\n\tstretch: \"items-stretch\",\n\tbaseline: \"items-baseline\",\n} as const;\n","import { type VariantProps, cva } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\nimport { flexAlignVariants, gapVariants } from \"../_shared/layout-variants.js\";\n\n/**\n * CVA variants for Grid — CSS grid with column-count presets and shared `gap`.\n * `cols` accepts 1/2/3/4/6 fixed columns or `\"auto-fit\"` for responsive auto-sizing\n * (in which case the consumer should pass `minColWidth` for the min track size).\n *\n * `cols` keys are TypeScript numeric literals (`cols={3}`) at the type level;\n * the schema's `enumValues` serializes them as strings for JSON-shape parity.\n */\nconst gridVariants = cva(\"grid\", {\n\tvariants: {\n\t\tcols: {\n\t\t\t1: \"grid-cols-1\",\n\t\t\t2: \"grid-cols-2\",\n\t\t\t3: \"grid-cols-3\",\n\t\t\t4: \"grid-cols-4\",\n\t\t\t6: \"grid-cols-6\",\n\t\t\t\"auto-fit\": \"\",\n\t\t},\n\t\tgap: gapVariants,\n\t\talign: flexAlignVariants,\n\t},\n\tdefaultVariants: {\n\t\tcols: 3,\n\t\tgap: \"md\",\n\t\talign: \"stretch\",\n\t},\n});\n\n/** Props for the Grid component. */\nexport interface GridProps\n\textends React.HTMLAttributes<HTMLDivElement>,\n\t\tVariantProps<typeof gridVariants> {\n\t/**\n\t * Minimum column width for `cols=\"auto-fit\"`. Tracks repeat to fill the container,\n\t * never shrinking below this value. Ignored when `cols` is a fixed integer.\n\t * @default \"16rem\"\n\t */\n\tminColWidth?: string;\n}\n\n/**\n * CSS grid with column-count presets and consistent gap. Use for card grids,\n * dashboards, image galleries, and any layout where children should align to\n * shared row/column tracks.\n *\n * Pass `cols=\"auto-fit\"` and `minColWidth` for responsive grids that fit as\n * many columns as the viewport allows without media queries.\n *\n * @param props - Grid props including `cols`, `gap`, `align`, and `minColWidth`.\n * @returns A CSS grid container.\n * @example\n * ```tsx\n * <Grid cols={3} gap=\"md\">\n *   {items.map((i) => <Card key={i.id}>{i.title}</Card>)}\n * </Grid>\n * <Grid cols=\"auto-fit\" minColWidth=\"20rem\" gap=\"lg\">\n *   {responsiveItems.map(...)}\n * </Grid>\n * ```\n */\nfunction Grid({ className, cols, gap, align, minColWidth = \"16rem\", style, ...props }: GridProps) {\n\t// Consumer's inline `style` is spread last so a passed `gridTemplateColumns`\n\t// overrides our auto-fit default. That's the right precedence: explicit wins.\n\tconst inlineStyle =\n\t\tcols === \"auto-fit\"\n\t\t\t? { gridTemplateColumns: `repeat(auto-fit, minmax(${minColWidth}, 1fr))`, ...style }\n\t\t\t: style;\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(gridVariants({ cols, gap, align }), className)}\n\t\t\tstyle={inlineStyle}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Grid, gridVariants };\n"]}

package/dist/hover-card.d.ts

@@ -0,0 +1,3 @@
+export { HoverCard_alias_1 as HoverCard } from './_tsup-dts-rollup.js';
+export { HoverCardTrigger_alias_1 as HoverCardTrigger } from './_tsup-dts-rollup.js';
+export { HoverCardContent_alias_1 as HoverCardContent } from './_tsup-dts-rollup.js';

package/dist/hover-card.js

@@ -0,0 +1,34 @@
+"use client";
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var HoverCard = HoverCardPrimitive.Root;
+var HoverCardTrigger = HoverCardPrimitive.Trigger;
+var HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  HoverCardPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-64 rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-4,1rem)] text-popover-foreground shadow-md outline-none",
+      "data-[state=open]:animate-in data-[state=closed]:animate-out",
+      "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+      "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",
+      className
+    ),
+    ...props
+  }
+) }));
+HoverCardContent.displayName = "HoverCardContent";
+
+export { HoverCard, HoverCardContent, HoverCardTrigger };
+//# sourceMappingURL=hover-card.js.map
+//# sourceMappingURL=hover-card.js.map

package/dist/hover-card.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/hover-card/hover-card.tsx"],"names":[],"mappings":";;;;;;AAQO,SAAS,MAAM,MAAA,EAAsB;AAC3C,EAAA,OAAO,OAAA,CAAQ,IAAA,CAAK,MAAM,CAAC,CAAA;AAC5B;ACHA,IAAM,SAAA,GAA+B,kBAAA,CAAA;AAGrC,IAAM,gBAAA,GAAsC,kBAAA,CAAA;AAG5C,IAAM,gBAAA,GAAyB,KAAA,CAAA,UAAA,CAG7B,CAAC,EAAE,WAAW,KAAA,GAAQ,QAAA,EAAU,UAAA,GAAa,CAAA,EAAG,GAAG,KAAA,EAAM,EAAG,GAAA,qBAC7D,GAAA,CAAoB,2BAAnB,EACA,QAAA,kBAAA,GAAA;AAAA,EAAoB,kBAAA,CAAA,OAAA;AAAA,EAAnB;AAAA,IACA,GAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA,EAAW,EAAA;AAAA,MACV,wIAAA;AAAA,MACA,8DAAA;AAAA,MACA,4DAAA;AAAA,MACA,8DAAA;AAAA,MACA,6JAAA;AAAA,MACA;AAAA,KACD;AAAA,IACC,GAAG;AAAA;AACL,CAAA,EACD,CACA;AACD,gBAAA,CAAiB,WAAA,GAAc,kBAAA","file":"hover-card.js","sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Merge class names with Tailwind CSS conflict resolution.\n * @param inputs - Class values (strings, arrays, objects) to merge\n * @returns A single merged class string with Tailwind conflicts resolved\n */\nexport function cn(...inputs: ClassValue[]) {\n\treturn twMerge(clsx(inputs));\n}\n","\"use client\";\n\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\n\n/** Root container for a hover-card. */\nconst HoverCard = HoverCardPrimitive.Root;\n\n/** The element that reveals the card on hover/focus. */\nconst HoverCardTrigger = HoverCardPrimitive.Trigger;\n\n/** The floating hover-card content panel. Richer than a tooltip. */\nconst HoverCardContent = React.forwardRef<\n\tReact.ComponentRef<typeof HoverCardPrimitive.Content>,\n\tReact.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n\t<HoverCardPrimitive.Portal>\n\t\t<HoverCardPrimitive.Content\n\t\t\tref={ref}\n\t\t\talign={align}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\n\t\t\t\t\"z-50 w-64 rounded-md border border-foreground/[0.08] bg-popover p-[var(--space-4,1rem)] text-popover-foreground shadow-md outline-none\",\n\t\t\t\t\"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n\t\t\t\t\"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n\t\t\t\t\"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n\t\t\t\t\"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\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</HoverCardPrimitive.Portal>\n));\nHoverCardContent.displayName = \"HoverCardContent\";\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent };\n"]}