@hex-core/components 1.3.1 → 1.4.0

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,11 @@
+import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import * as React from 'react';
+
+/** Root container for a hover-card. */
+declare const HoverCard: React.FC<HoverCardPrimitive.HoverCardProps>;
+/** The element that reveals the card on hover/focus. */
+declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
+/** The floating hover-card content panel. Richer than a tooltip. */
+declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+
+export { HoverCard, HoverCardContent, HoverCardTrigger };

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"]}