@nationaldesignstudio/react 0.5.1 → 0.5.3

package/dist/components/sections/two-column-section/two-column-section.js

@@ -1,113 +0,0 @@
-import { jsx as r, jsxs as s } from "react/jsx-runtime";
-import * as c from "react";
-import { tv as m, cnBase as e } from "../../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
-const n = m({
-  // Base styles - responsive padding using primitive spacing tokens
-  base: [
-    "w-full",
-    // Small (mobile): 20px x, 56px top, 20px bottom
-    "px-20 pt-56 pb-20",
-    // Medium (tablet): 56px x, 56px y
-    "md:px-56 md:py-56",
-    // Large (desktop): 72px x, 72px top, 112px bottom
-    "lg:px-72 lg:pt-72 lg:pb-112"
-  ],
-  variants: {
-    colorScheme: {
-      dark: "bg-gray-1200",
-      light: "bg-white"
-    },
-    layout: {
-      asymmetric: "",
-      equal: ""
-    }
-  },
-  defaultVariants: {
-    colorScheme: "dark",
-    layout: "asymmetric"
-  }
-}), y = c.forwardRef(
-  ({
-    className: g,
-    colorScheme: a = "dark",
-    layout: t,
-    title: i,
-    lead: l,
-    children: d,
-    ...o
-  }, p) => /* @__PURE__ */ r(
-    "section",
-    {
-      ref: p,
-      className: n({
-        colorScheme: a,
-        layout: t,
-        class: g
-      }),
-      ...o,
-      children: /* @__PURE__ */ s(
-        "div",
-        {
-          className: e(
-            "border-t pt-36",
-            a === "dark" ? "border-gray-700" : "border-gray-300",
-            // Grid layout - uses primitive spacing tokens
-            "grid grid-cols-1 gap-56",
-            t === "equal" ? "md:grid-cols-2" : "lg:grid-cols-24 lg:gap-56"
-          ),
-          children: [
-            /* @__PURE__ */ r(
-              "h2",
-              {
-                className: e(
-                  "typography-subheading-medium",
-                  a === "dark" ? "text-gray-100" : "text-gray-900",
-                  // Column span based on layout
-                  t !== "equal" && "lg:col-span-9"
-                ),
-                children: i
-              }
-            ),
-            /* @__PURE__ */ s(
-              "div",
-              {
-                className: e(
-                  "flex flex-col gap-56",
-                  t !== "equal" && "lg:col-span-15"
-                ),
-                children: [
-                  l && /* @__PURE__ */ r(
-                    "div",
-                    {
-                      className: e(
-                        "typography-body-large",
-                        a === "dark" ? "text-gray-100" : "text-gray-900"
-                      ),
-                      children: typeof l == "string" ? /* @__PURE__ */ r("p", { children: l }) : l
-                    }
-                  ),
-                  /* @__PURE__ */ r(
-                    "div",
-                    {
-                      className: e(
-                        "typography-body-medium flex flex-col gap-[1em]",
-                        a === "dark" ? "text-gray-400" : "text-gray-600"
-                      ),
-                      children: d
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      )
-    }
-  )
-);
-y.displayName = "TwoColumnSection";
-export {
-  y as TwoColumnSection,
-  n as twoColumnSectionVariants
-};
-//# sourceMappingURL=two-column-section.js.map

package/dist/components/sections/two-column-section/two-column-section.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"two-column-section.js","sources":["../../../../src/components/sections/two-column-section/two-column-section.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * TwoColumnSection component for text-heavy content sections\n *\n * Layout:\n * - Desktop (lg+): Title left, content right with border-top divider\n * - Mobile/Tablet: Stacked vertically\n *\n * Uses the 24-column grid system.\n */\nconst twoColumnSectionVariants = tv({\n\t// Base styles - responsive padding using primitive spacing tokens\n\tbase: [\n\t\t\"w-full\",\n\t\t// Small (mobile): 20px x, 56px top, 20px bottom\n\t\t\"px-20 pt-56 pb-20\",\n\t\t// Medium (tablet): 56px x, 56px y\n\t\t\"md:px-56 md:py-56\",\n\t\t// Large (desktop): 72px x, 72px top, 112px bottom\n\t\t\"lg:px-72 lg:pt-72 lg:pb-112\",\n\t],\n\tvariants: {\n\t\tcolorScheme: {\n\t\t\tdark: \"bg-gray-1200\",\n\t\t\tlight: \"bg-white\",\n\t\t},\n\t\tlayout: {\n\t\t\tasymmetric: \"\",\n\t\t\tequal: \"\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tcolorScheme: \"dark\",\n\t\tlayout: \"asymmetric\",\n\t},\n});\n\nexport interface TwoColumnSectionProps\n\textends React.HTMLAttributes<HTMLElement>,\n\t\tVariantProps<typeof twoColumnSectionVariants> {\n\t/**\n\t * The title text displayed in the left column\n\t */\n\ttitle: string;\n\t/**\n\t * Lead content - prominently styled (brighter text)\n\t * Can be a string or ReactNode for rich content\n\t */\n\tlead?: React.ReactNode;\n\t/**\n\t * Body content - secondary styled (muted text)\n\t * Can be a string or ReactNode for rich content\n\t */\n\tchildren: React.ReactNode;\n\t/**\n\t * Layout style for the columns\n\t * - \"asymmetric\" (default): Uses 24-column grid with ~40/60 split (title: 9, content: 15)\n\t * - \"equal\": Simple 2-column equal-width layout at md+ breakpoints\n\t */\n\tlayout?: \"asymmetric\" | \"equal\";\n}\n\n/**\n * TwoColumnSection component for text-heavy content with title/content split.\n *\n * Layout:\n * - Mobile/Tablet: Stacked (title above content)\n * - Desktop (lg+): Title left (~40%), Content right (~60%)\n *\n * @example\n * ```tsx\n * <TwoColumnSection\n *   title=\"US Tech Force\"\n *   lead=\"The US Tech Force is recruiting an elite corps of engineers...\"\n *   variant=\"dark\"\n * >\n *   <p>Through a two-year program, participants will work...</p>\n *   <p>Upon completing the program, engineers can seek...</p>\n * </TwoColumnSection>\n * ```\n */\nconst TwoColumnSection = React.forwardRef<HTMLElement, TwoColumnSectionProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tcolorScheme = \"dark\",\n\t\t\tlayout,\n\t\t\ttitle,\n\t\t\tlead,\n\t\t\tchildren,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\treturn (\n\t\t\t<section\n\t\t\t\tref={ref}\n\t\t\t\tclassName={twoColumnSectionVariants({\n\t\t\t\t\tcolorScheme,\n\t\t\t\t\tlayout,\n\t\t\t\t\tclass: className,\n\t\t\t\t})}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{/* Inner container with border-top - uses primitive spacing tokens */}\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"border-t pt-36\",\n\t\t\t\t\t\tcolorScheme === \"dark\" ? \"border-gray-700\" : \"border-gray-300\",\n\t\t\t\t\t\t// Grid layout - uses primitive spacing tokens\n\t\t\t\t\t\t\"grid grid-cols-1 gap-56\",\n\t\t\t\t\t\tlayout === \"equal\" ? \"md:grid-cols-2\" : \"lg:grid-cols-24 lg:gap-56\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{/* Title column */}\n\t\t\t\t\t<h2\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"typography-subheading-medium\",\n\t\t\t\t\t\t\tcolorScheme === \"dark\" ? \"text-gray-100\" : \"text-gray-900\",\n\t\t\t\t\t\t\t// Column span based on layout\n\t\t\t\t\t\t\tlayout !== \"equal\" && \"lg:col-span-9\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h2>\n\n\t\t\t\t\t{/* Content column - uses primitive spacing tokens */}\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"flex flex-col gap-56\",\n\t\t\t\t\t\t\tlayout !== \"equal\" && \"lg:col-span-15\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t{/* Lead content - brighter/prominent */}\n\t\t\t\t\t\t{lead && (\n\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\t\"typography-body-large\",\n\t\t\t\t\t\t\t\t\tcolorScheme === \"dark\" ? \"text-gray-100\" : \"text-gray-900\",\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{typeof lead === \"string\" ? <p>{lead}</p> : lead}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t)}\n\n\t\t\t\t\t\t{/* Body content - muted */}\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\t\"typography-body-medium flex flex-col gap-[1em]\",\n\t\t\t\t\t\t\t\tcolorScheme === \"dark\" ? \"text-gray-400\" : \"text-gray-600\",\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</section>\n\t\t);\n\t},\n);\nTwoColumnSection.displayName = \"TwoColumnSection\";\n\nexport { TwoColumnSection, twoColumnSectionVariants };\n"],"names":["twoColumnSectionVariants","tv","TwoColumnSection","React","className","colorScheme","layout","title","lead","children","props","ref","jsx","jsxs","cn"],"mappings":";;;AAaA,MAAMA,IAA2BC,EAAG;AAAA;AAAA,EAEnC,MAAM;AAAA,IACL;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAAA,EAED,UAAU;AAAA,IACT,aAAa;AAAA,MACZ,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,IAER,QAAQ;AAAA,MACP,YAAY;AAAA,MACZ,OAAO;AAAA,IAAA;AAAA,EACR;AAAA,EAED,iBAAiB;AAAA,IAChB,aAAa;AAAA,IACb,QAAQ;AAAA,EAAA;AAEV,CAAC,GA8CKC,IAAmBC,EAAM;AAAA,EAC9B,CACC;AAAA,IACC,WAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEJC,MAGC,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACA,KAAAD;AAAA,MACA,WAAWX,EAAyB;AAAA,QACnC,aAAAK;AAAA,QACA,QAAAC;AAAA,QACA,OAAOF;AAAA,MAAA,CACP;AAAA,MACA,GAAGM;AAAA,MAGJ,UAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,WAAWC;AAAAA,YACV;AAAA,YACAT,MAAgB,SAAS,oBAAoB;AAAA;AAAA,YAE7C;AAAA,YACAC,MAAW,UAAU,mBAAmB;AAAA,UAAA;AAAA,UAIzC,UAAA;AAAA,YAAA,gBAAAM;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,WAAWE;AAAAA,kBACV;AAAA,kBACAT,MAAgB,SAAS,kBAAkB;AAAA;AAAA,kBAE3CC,MAAW,WAAW;AAAA,gBAAA;AAAA,gBAGtB,UAAAC;AAAA,cAAA;AAAA,YAAA;AAAA,YAIF,gBAAAM;AAAA,cAAC;AAAA,cAAA;AAAA,gBACA,WAAWC;AAAAA,kBACV;AAAA,kBACAR,MAAW,WAAW;AAAA,gBAAA;AAAA,gBAItB,UAAA;AAAA,kBAAAE,KACA,gBAAAI;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACA,WAAWE;AAAAA,wBACV;AAAA,wBACAT,MAAgB,SAAS,kBAAkB;AAAA,sBAAA;AAAA,sBAG3C,iBAAOG,KAAS,WAAW,gBAAAI,EAAC,KAAA,EAAG,aAAK,IAAOJ;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAK9C,gBAAAI;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACA,WAAWE;AAAAA,wBACV;AAAA,wBACAT,MAAgB,SAAS,kBAAkB;AAAA,sBAAA;AAAA,sBAG3C,UAAAI;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACF;AAAA,cAAA;AAAA,YAAA;AAAA,UACD;AAAA,QAAA;AAAA,MAAA;AAAA,IACD;AAAA,EAAA;AAIJ;AACAP,EAAiB,cAAc;"}

package/dist/components/shared/floating-arrow.d.ts

@@ -1,34 +0,0 @@
-/**
- * Shared arrow variants for floating UI components
- *
- * Used by Tooltip, Popover, and other floating components.
- * Handles positioning based on the side attribute.
- */
-export declare const floatingArrowVariants: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
-export interface FloatingArrowSvgProps {
-    /** CSS class for the main fill color (e.g., "fill-tooltip-bg" or "fill-overlay-background") */
-    fillClassName: string;
-    /** CSS class for the border color using fill-* (e.g., "fill-overlay-border") - renders as outline behind main fill */
-    borderClassName?: string;
-    /** Additional className for the SVG element */
-    className?: string;
-}
-/**
- * FloatingArrowSvg
- *
- * A shared arrow SVG component for floating UI elements.
- * Use with Tooltip, Popover, Dropdown, and other floating components.
- *
- * @example
- * ```tsx
- * // For dark tooltip (no border)
- * <FloatingArrowSvg fillClassName="fill-tooltip-bg" />
- *
- * // For light popover with border
- * <FloatingArrowSvg
- *   fillClassName="fill-overlay-background"
- *   borderClassName="fill-overlay-border"
- * />
- * ```
- */
-export declare const FloatingArrowSvg: ({ fillClassName, borderClassName, className, }: FloatingArrowSvgProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/shared/floating-arrow.js

@@ -1,51 +0,0 @@
-import { jsxs as o, jsx as a } from "react/jsx-runtime";
-import { tv as s, cnBase as d } from "../../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
-const n = s({
-  base: [
-    // Display flex to properly size the arrow container
-    "flex",
-    // Positioning based on floating side (uses spacing tokens since --spacing: 1px)
-    "data-[side=bottom]:-top-7",
-    "data-[side=left]:-right-12 data-[side=left]:rotate-90",
-    "data-[side=right]:-left-12 data-[side=right]:-rotate-90",
-    "data-[side=top]:-bottom-7 data-[side=top]:rotate-180",
-    // Animation - follows popup
-    "data-[starting-style]:opacity-0",
-    "data-[ending-style]:opacity-0"
-  ]
-}), c = ({
-  fillClassName: e,
-  borderClassName: t,
-  className: i
-}) => /* @__PURE__ */ o(
-  "svg",
-  {
-    width: "20",
-    height: "10",
-    viewBox: "0 0 20 10",
-    fill: "none",
-    className: d("block", i),
-    "aria-hidden": "true",
-    children: [
-      /* @__PURE__ */ a(
-        "path",
-        {
-          d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
-          className: e
-        }
-      ),
-      t && /* @__PURE__ */ a(
-        "path",
-        {
-          d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
-          className: t
-        }
-      )
-    ]
-  }
-);
-export {
-  c as FloatingArrowSvg,
-  n as floatingArrowVariants
-};
-//# sourceMappingURL=floating-arrow.js.map

package/dist/components/shared/floating-arrow.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"floating-arrow.js","sources":["../../../src/components/shared/floating-arrow.tsx"],"sourcesContent":["import { tv } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Shared arrow variants for floating UI components\n *\n * Used by Tooltip, Popover, and other floating components.\n * Handles positioning based on the side attribute.\n */\nexport const floatingArrowVariants = tv({\n\tbase: [\n\t\t// Display flex to properly size the arrow container\n\t\t\"flex\",\n\t\t// Positioning based on floating side (uses spacing tokens since --spacing: 1px)\n\t\t\"data-[side=bottom]:-top-7\",\n\t\t\"data-[side=left]:-right-12 data-[side=left]:rotate-90\",\n\t\t\"data-[side=right]:-left-12 data-[side=right]:-rotate-90\",\n\t\t\"data-[side=top]:-bottom-7 data-[side=top]:rotate-180\",\n\t\t// Animation - follows popup\n\t\t\"data-[starting-style]:opacity-0\",\n\t\t\"data-[ending-style]:opacity-0\",\n\t],\n});\n\nexport interface FloatingArrowSvgProps {\n\t/** CSS class for the main fill color (e.g., \"fill-tooltip-bg\" or \"fill-overlay-background\") */\n\tfillClassName: string;\n\t/** CSS class for the border color using fill-* (e.g., \"fill-overlay-border\") - renders as outline behind main fill */\n\tborderClassName?: string;\n\t/** Additional className for the SVG element */\n\tclassName?: string;\n}\n\n/**\n * FloatingArrowSvg\n *\n * A shared arrow SVG component for floating UI elements.\n * Use with Tooltip, Popover, Dropdown, and other floating components.\n *\n * @example\n * ```tsx\n * // For dark tooltip (no border)\n * <FloatingArrowSvg fillClassName=\"fill-tooltip-bg\" />\n *\n * // For light popover with border\n * <FloatingArrowSvg\n *   fillClassName=\"fill-overlay-background\"\n *   borderClassName=\"fill-overlay-border\"\n * />\n * ```\n */\nexport const FloatingArrowSvg = ({\n\tfillClassName,\n\tborderClassName,\n\tclassName,\n}: FloatingArrowSvgProps) => (\n\t<svg\n\t\twidth=\"20\"\n\t\theight=\"10\"\n\t\tviewBox=\"0 0 20 10\"\n\t\tfill=\"none\"\n\t\tclassName={cn(\"block\", className)}\n\t\taria-hidden=\"true\"\n\t>\n\t\t{/* Main fill shape */}\n\t\t<path\n\t\t\td=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n\t\t\tclassName={fillClassName}\n\t\t/>\n\t\t{/* Border stroke (rendered on top for outline effect) */}\n\t\t{borderClassName && (\n\t\t\t<path\n\t\t\t\td=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n\t\t\t\tclassName={borderClassName}\n\t\t\t/>\n\t\t)}\n\t</svg>\n);\n"],"names":["floatingArrowVariants","tv","FloatingArrowSvg","fillClassName","borderClassName","className","jsxs","cn","jsx"],"mappings":";;AASO,MAAMA,IAAwBC,EAAG;AAAA,EACvC,MAAM;AAAA;AAAA,IAEL;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EAAA;AAEF,CAAC,GA6BYC,IAAmB,CAAC;AAAA,EAChC,eAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AACD,MACC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACA,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,WAAWC,EAAG,SAASF,CAAS;AAAA,IAChC,eAAY;AAAA,IAGZ,UAAA;AAAA,MAAA,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,GAAE;AAAA,UACF,WAAWL;AAAA,QAAA;AAAA,MAAA;AAAA,MAGXC,KACA,gBAAAI;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,GAAE;AAAA,UACF,WAAWJ;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAEF;"}

package/dist/hooks/index.d.ts

@@ -1 +0,0 @@
-export { useEventListener } from './use-event-listener';

package/dist/hooks/use-event-listener.d.ts

@@ -1,24 +0,0 @@
-type EventMap<T> = T extends Window ? WindowEventMap : T extends Document ? DocumentEventMap : T extends HTMLElement ? HTMLElementEventMap : never;
-/**
- * Custom hook that attaches an event listener to a specified element.
- * Automatically handles cleanup on unmount and when dependencies change.
- *
- * @param eventName - The name of the event to listen for
- * @param handler - The callback function to execute when the event fires
- * @param element - The element to attach the listener to (defaults to window)
- * @param options - Optional event listener options
- *
- * @example
- * ```tsx
- * // Listen to window resize
- * useEventListener('resize', handleResize);
- *
- * // Listen to element scroll
- * useEventListener('scroll', handleScroll, containerRef.current);
- *
- * // With options
- * useEventListener('scroll', handleScroll, window, { passive: true });
- * ```
- */
-export declare function useEventListener<T extends Window | Document | HTMLElement, K extends keyof EventMap<T>>(eventName: K, handler: (event: EventMap<T>[K]) => void, element?: T | null, options?: boolean | AddEventListenerOptions): void;
-export {};

package/dist/lib/form-control.d.ts

@@ -1,106 +0,0 @@
-/**
- * Shared form control styles for Input, Select, and similar components.
- *
- * These base styles ensure consistent appearance across all form controls:
- * - Consistent height and padding
- * - Unified focus ring and border treatment
- * - Shared hover/disabled states
- *
- * Based on Figma BaseKit / Interface / Input & Dropdown designs.
- */
-/**
- * Base styles shared by all form controls (input, select, etc.)
- */
-export declare const formControlBase: string[];
-/**
- * Size variants shared by form controls
- * Uses spatial tokens for consistent sizing across form controls
- */
-export declare const formControlSizes: {
-    readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
-    readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
-    readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
-};
-/**
- * Error state styles shared by form controls
- */
-export declare const formControlError: {
-    readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
-    readonly false: "";
-};
-/**
- * Form control variants using tailwind-variants
- * Can be composed with other variants for specific components
- */
-export declare const formControlVariants: import('tailwind-variants').TVReturnType<{
-    size: {
-        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
-        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
-        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
-    };
-    error: {
-        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
-        readonly false: "";
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    size: {
-        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
-        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
-        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
-    };
-    error: {
-        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
-        readonly false: "";
-    };
-}, {
-    size: {
-        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
-        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
-        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
-    };
-    error: {
-        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
-        readonly false: "";
-    };
-}>, {
-    size: {
-        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
-        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
-        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
-    };
-    error: {
-        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
-        readonly false: "";
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    size: {
-        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
-        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
-        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
-    };
-    error: {
-        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
-        readonly false: "";
-    };
-}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<{
-    size: {
-        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
-        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
-        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
-    };
-    error: {
-        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
-        readonly false: "";
-    };
-}, {
-    size: {
-        readonly sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14";
-        readonly default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium";
-        readonly lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18";
-    };
-    error: {
-        readonly true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color";
-        readonly false: "";
-    };
-}>, unknown, unknown, undefined>>;
-export type FormControlSize = keyof typeof formControlSizes;

package/dist/lib/form-control.js

@@ -1,43 +0,0 @@
-import { tv as o } from "../node_modules/.bun/tailwind-variants@0.3.1_b0c4767bcd570450/node_modules/tailwind-variants/dist/index.js";
-const r = [
-  // Layout
-  "flex w-full items-center",
-  // Typography
-  "text-16 font-medium leading-14",
-  // Border and radius - uses surface ui radius for theming support
-  "border border-solid border-ui-color-border rounded-surface-ui-medium",
-  // Background
-  "bg-ui-control-background",
-  // Transitions
-  "transition-[background-color,border-color,box-shadow] duration-150",
-  // Focus state
-  "outline-none focus-visible:border-border-focus focus-visible:ring-4 focus-visible:ring-ui-color-focus",
-  // Hover state (when not focused or disabled)
-  "hover:bg-ui-control-background-hover hover:focus-visible:bg-ui-control-background",
-  // Disabled state
-  "disabled:bg-ui-control-background-disabled disabled:cursor-not-allowed disabled:opacity-50"
-], i = {
-  sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14",
-  default: "h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium",
-  lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18"
-}, e = {
-  true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color",
-  false: ""
-};
-o({
-  base: r,
-  variants: {
-    size: i,
-    error: e
-  },
-  defaultVariants: {
-    size: "default",
-    error: !1
-  }
-});
-export {
-  r as formControlBase,
-  e as formControlError,
-  i as formControlSizes
-};
-//# sourceMappingURL=form-control.js.map

package/dist/lib/form-control.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"form-control.js","sources":["../../src/lib/form-control.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\n\n/**\n * Shared form control styles for Input, Select, and similar components.\n *\n * These base styles ensure consistent appearance across all form controls:\n * - Consistent height and padding\n * - Unified focus ring and border treatment\n * - Shared hover/disabled states\n *\n * Based on Figma BaseKit / Interface / Input & Dropdown designs.\n */\n\n/**\n * Base styles shared by all form controls (input, select, etc.)\n */\nexport const formControlBase = [\n\t// Layout\n\t\"flex w-full items-center\",\n\t// Typography\n\t\"text-16 font-medium leading-14\",\n\t// Border and radius - uses surface ui radius for theming support\n\t\"border border-solid border-ui-color-border rounded-surface-ui-medium\",\n\t// Background\n\t\"bg-ui-control-background\",\n\t// Transitions\n\t\"transition-[background-color,border-color,box-shadow] duration-150\",\n\t// Focus state\n\t\"outline-none focus-visible:border-border-focus focus-visible:ring-4 focus-visible:ring-ui-color-focus\",\n\t// Hover state (when not focused or disabled)\n\t\"hover:bg-ui-control-background-hover hover:focus-visible:bg-ui-control-background\",\n\t// Disabled state\n\t\"disabled:bg-ui-control-background-disabled disabled:cursor-not-allowed disabled:opacity-50\",\n];\n\n/**\n * Size variants shared by form controls\n * Uses spatial tokens for consistent sizing across form controls\n */\nexport const formControlSizes = {\n\tsm: \"h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14\",\n\tdefault:\n\t\t\"h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium\",\n\tlg: \"h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large text-18\",\n} as const;\n\n/**\n * Error state styles shared by form controls\n */\nexport const formControlError = {\n\ttrue: \"border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color\",\n\tfalse: \"\",\n} as const;\n\n/**\n * Form control variants using tailwind-variants\n * Can be composed with other variants for specific components\n */\nexport const formControlVariants = tv({\n\tbase: formControlBase,\n\tvariants: {\n\t\tsize: formControlSizes,\n\t\terror: formControlError,\n\t},\n\tdefaultVariants: {\n\t\tsize: \"default\",\n\t\terror: false,\n\t},\n});\n\nexport type FormControlSize = keyof typeof formControlSizes;\n"],"names":["formControlBase","formControlSizes","formControlError","tv"],"mappings":";AAgBO,MAAMA,IAAkB;AAAA;AAAA,EAE9B;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AAAA;AAAA,EAEA;AACD,GAMaC,IAAmB;AAAA,EAC/B,IAAI;AAAA,EACJ,SACC;AAAA,EACD,IAAI;AACL,GAKaC,IAAmB;AAAA,EAC/B,MAAM;AAAA,EACN,OAAO;AACR;AAMmCC,EAAG;AAAA,EACrC,MAAMH;AAAA,EACN,UAAU;AAAA,IACT,MAAMC;AAAA,IACN,OAAOC;AAAA,EAAA;AAAA,EAER,iBAAiB;AAAA,IAChB,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAET,CAAC;"}