@etus/ui 0.4.0-beta.2 → 0.4.0-beta.4

package/dist/chunk-6SHOL6WR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/Accordion/Accordion.variants.ts","../src/components/data-display/Accordion/Accordion.tsx"],"names":[],"mappings":"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","file":"chunk-6SHOL6WR.js","sourcesContent":["// Accordion/Accordion.variants.ts\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * AccordionItem style variants using CVA\n *\n * @see https://cva.style/docs\n */\nexport const accordionItemVariants = cva(\n  // Base styles (always applied)\n  [\"last:border-b-0\"],\n  {\n    variants: {\n      variant: {\n        default: \"border-b-[var(--accordion-item-border-width)]\",\n        flush: \"\",\n        separated: \"border-[var(--accordion-item-border-width)] rounded-[var(--accordion-item-radius)] mb-[var(--accordion-root-gap)] last:mb-0 px-[var(--accordion-item-padding-x)]\",\n        contained: \"border-x-[var(--accordion-item-border-width)] first:border-t-[var(--accordion-item-border-width)] first:rounded-t-[var(--accordion-item-radius)] last:border-b-[var(--accordion-item-border-width)] last:rounded-b-[var(--accordion-item-radius)] px-[var(--accordion-item-padding-x)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\n/**\n * AccordionTrigger style variants using CVA\n *\n * @see https://cva.style/docs\n */\nexport const accordionTriggerVariants = cva(\n  // Base styles (always applied)\n  [\n    \"flex flex-1 items-start justify-between gap-[var(--accordion-trigger-gap)]\",\n    \"rounded-[var(--accordion-trigger-radius)] text-left font-medium\",\n    \"transition-all outline-none\",\n    \"hover:underline\",\n    \"focus-visible:border-ring focus-visible:ring-[color:var(--accordion-trigger-ring-primary)]/50 focus-visible:ring-[length:var(--accordion-trigger-ring-width)]\",\n    \"disabled:pointer-events-none disabled:opacity-50\",\n    \"[&[data-state=open]>svg]:rotate-180\",\n    \"[&>svg]:size-[var(--accordion-icon-size)]\",\n    \"[&>svg]:transition-transform [&>svg]:duration-[var(--accordion-icon-transition-duration)]\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"py-[var(--accordion-trigger-padding-y-sm)] text-[length:var(--accordion-trigger-text-size-sm)]\",\n        default: \"py-[var(--accordion-trigger-padding-y-md)] text-[length:var(--accordion-trigger-text-size-md)]\",\n        lg: \"py-[var(--accordion-trigger-padding-y-lg)] text-[length:var(--accordion-trigger-text-size-lg)]\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\n/**\n * AccordionContent style variants using CVA\n *\n * @see https://cva.style/docs\n */\nexport const accordionContentVariants = cva(\n  // Base styles (always applied)\n  [\n    \"overflow-hidden text-sm\",\n    \"data-[state=closed]:animate-accordion-up\",\n    \"data-[state=open]:animate-accordion-down\",\n  ],\n  {\n    variants: {\n      size: {\n        sm: \"\",\n        default: \"\",\n        lg: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n    },\n  }\n)\n\n/**\n * AccordionContent inner wrapper style variants using CVA\n */\nexport const accordionContentInnerVariants = cva([\"pt-0\"], {\n  variants: {\n    size: {\n      sm: \"pb-[var(--accordion-content-padding-bottom-sm)]\",\n      default: \"pb-[var(--accordion-content-padding-bottom-md)]\",\n      lg: \"pb-[var(--accordion-content-padding-bottom-lg)]\",\n    },\n  },\n  defaultVariants: {\n    size: \"default\",\n  },\n})\n\n// Export variant prop types\nexport type AccordionItemVariantProps = VariantProps<typeof accordionItemVariants>\nexport type AccordionTriggerVariantProps = VariantProps<typeof accordionTriggerVariants>\nexport type AccordionContentVariantProps = VariantProps<typeof accordionContentVariants>\n\n// Combined variant props for the compound component\nexport interface AccordionVariantProps {\n  /** Size of the accordion items */\n  size?: AccordionTriggerVariantProps[\"size\"]\n  /** Visual style variant */\n  variant?: AccordionItemVariantProps[\"variant\"]\n}\n","// Accordion/Accordion.tsx\n\"use client\"\n\nimport * as AccordionPrimitive from \"@radix-ui/react-accordion\"\nimport { ChevronDown } from \"lucide-react\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  accordionContentInnerVariants,\n  accordionContentVariants,\n  accordionItemVariants,\n  accordionTriggerVariants,\n  type AccordionVariantProps,\n} from \"./Accordion.variants\"\n\n// ============================================\n// CONTEXT FOR VARIANT PROPAGATION\n// ============================================\n\ntype AccordionContextValue = AccordionVariantProps\n\nconst AccordionContext = React.createContext<AccordionContextValue>({\n  variant: \"default\",\n  size: \"default\",\n})\n\nfunction useAccordionContext() {\n  return React.use(AccordionContext)\n}\n\n// ============================================\n// ACCORDION ROOT\n// ============================================\n\ntype AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root> &\n  AccordionVariantProps\n\n/**\n * Accordion - Collapsible content sections\n *\n * @example\n * ```tsx\n * <Accordion type=\"single\" collapsible variant=\"default\" size=\"default\">\n *   <AccordionItem value=\"item-1\">\n *     <AccordionTrigger>Section 1</AccordionTrigger>\n *     <AccordionContent>Content for section 1</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n * ```\n */\nfunction Accordion({\n  variant = \"default\",\n  size = \"default\",\n  className,\n  ...props\n}: AccordionProps) {\n  return (\n    <AccordionContext value={{ variant, size }}>\n      <AccordionPrimitive.Root\n        className={cn(\n          variant === \"separated\" && \"space-y-[var(--accordion-root-gap)]\",\n          className\n        )}\n        data-slot=\"accordion\"\n        {...props}\n      />\n    </AccordionContext>\n  )\n}\n\nAccordion.displayName = \"Accordion\"\n\n// ============================================\n// ACCORDION ITEM\n// ============================================\n\ntype AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>\n\nfunction AccordionItem({ className, ...props }: AccordionItemProps) {\n  const { variant } = useAccordionContext()\n\n  return (\n    <AccordionPrimitive.Item\n      className={cn(accordionItemVariants({ variant }), className)}\n      data-slot=\"accordion-item\"\n      {...props}\n    />\n  )\n}\n\nAccordionItem.displayName = \"AccordionItem\"\n\n// ============================================\n// ACCORDION TRIGGER\n// ============================================\n\ntype AccordionTriggerProps = React.ComponentProps<typeof AccordionPrimitive.Trigger> & {\n  /**\n   * Custom icon to render in place of the default chevron.\n   * When provided, the icon receives the same transition + transform\n   * animations as the default chevron (rotates on expand).\n   *\n   * @example\n   * <AccordionTrigger chevron={<PlusIcon />}>Section 1</AccordionTrigger>\n   */\n  chevron?: React.ReactNode\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  chevron,\n  ...props\n}: AccordionTriggerProps) {\n  const { size } = useAccordionContext()\n\n  const iconClasses = \"text-muted-foreground pointer-events-none size-[var(--accordion-icon-size)] shrink-0 translate-y-0.5 transition-transform duration-[var(--accordion-icon-transition-duration)]\"\n\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        className={cn(accordionTriggerVariants({ size }), className)}\n        data-slot=\"accordion-trigger\"\n        {...props}\n      >\n        {children}\n        {chevron ? (\n          <span className={iconClasses} data-slot=\"accordion-icon\">\n            {chevron}\n          </span>\n        ) : (\n          <ChevronDown className={iconClasses} data-slot=\"accordion-icon\" />\n        )}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nAccordionTrigger.displayName = \"AccordionTrigger\"\n\n// ============================================\n// ACCORDION CONTENT\n// ============================================\n\ntype AccordionContentProps = React.ComponentProps<typeof AccordionPrimitive.Content>\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionContentProps) {\n  const { size } = useAccordionContext()\n\n  return (\n    <AccordionPrimitive.Content\n      className={cn(accordionContentVariants({ size }))}\n      data-slot=\"accordion-content\"\n      {...props}\n    >\n      <div className={cn(accordionContentInnerVariants({ size }), className)}>\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nAccordionContent.displayName = \"AccordionContent\"\n\n// ============================================\n// EXPORTS\n// ============================================\n\nexport {\n  Accordion,\n  AccordionContent,\n  type AccordionContentProps,\n  AccordionItem,\n  type AccordionItemProps,\n  type AccordionProps,\n  AccordionTrigger,\n  type AccordionTriggerProps,\n}\n"]}

package/dist/chunk-6SZRWNPT.js

@@ -0,0 +1,67 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var topbarVariants = cva(
+  [
+    "flex w-full items-center justify-between",
+    "bg-[color:var(--topbar-root-background)]",
+    "px-[var(--topbar-root-padding-x)] py-[var(--topbar-root-padding-y)]",
+    "gap-[var(--topbar-root-gap)]"
+  ],
+  {
+    variants: {
+      variant: {
+        default: "h-[var(--topbar-root-height-default)]",
+        filters: "h-[var(--topbar-root-height-filters)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var topbarLeadingVariants = cva(
+  "flex items-center gap-[var(--topbar-leading-gap)] min-w-0"
+);
+var topbarTrailingVariants = cva(
+  "flex items-center gap-[var(--topbar-trailing-gap)] shrink-0"
+);
+function Topbar({ className, variant = "default", children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(topbarVariants({ variant }), className),
+      "data-slot": "topbar",
+      "data-variant": variant,
+      ...props,
+      children
+    }
+  );
+}
+function TopbarLeading({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(topbarLeadingVariants(), className),
+      "data-slot": "topbar-leading",
+      ...props,
+      children
+    }
+  );
+}
+function TopbarTrailing({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(topbarTrailingVariants(), className),
+      "data-slot": "topbar-trailing",
+      ...props,
+      children
+    }
+  );
+}
+
+export { Topbar, TopbarLeading, TopbarTrailing, topbarLeadingVariants, topbarTrailingVariants, topbarVariants };
+//# sourceMappingURL=chunk-6SZRWNPT.js.map
+//# sourceMappingURL=chunk-6SZRWNPT.js.map

package/dist/chunk-6SZRWNPT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/navigation/Topbar/Topbar.variants.ts","../src/components/navigation/Topbar/Topbar.tsx"],"names":[],"mappings":";;;;AAUO,IAAM,cAAA,GAAiB,GAAA;AAAA,EAC5B;AAAA,IACE,0CAAA;AAAA,IACA,0CAAA;AAAA,IACA,qEAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,uCAAA;AAAA,QACT,OAAA,EAAS;AAAA;AACX,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,OAAA,EAAS;AAAA;AACX;AAEJ;AAKO,IAAM,qBAAA,GAAwB,GAAA;AAAA,EACnC;AACF;AAMO,IAAM,sBAAA,GAAyB,GAAA;AAAA,EACpC;AACF;ACdA,SAAS,MAAA,CAAO,EAAE,SAAA,EAAW,OAAA,GAAU,WAAW,QAAA,EAAU,GAAG,OAAM,EAAgB;AACnF,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,EAAA,CAAG,cAAA,CAAe,EAAE,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MACpD,WAAA,EAAU,QAAA;AAAA,MACV,cAAA,EAAc,OAAA;AAAA,MACb,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAKA,SAAS,cAAc,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAuB;AAC5E,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,qBAAA,EAAsB,EAAG,SAAS,CAAA;AAAA,MAChD,WAAA,EAAU,gBAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAKA,SAAS,eAAe,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,OAAM,EAAwB;AAC9E,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,sBAAA,EAAuB,EAAG,SAAS,CAAA;AAAA,MACjD,WAAA,EAAU,iBAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ","file":"chunk-6SZRWNPT.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * Topbar root variant styles.\n *\n * Figma: `Core Components — Seven > Topbar` (node 1403:15038).\n * All sizing/spacing/color values flow from `@etus/tokens` (`--topbar-*`) —\n * never hardcoded. Two variants share the same horizontal layout (breadcrumb\n * left, actions right), differing only in height.\n */\nexport const topbarVariants = cva(\n  [\n    \"flex w-full items-center justify-between\",\n    \"bg-[color:var(--topbar-root-background)]\",\n    \"px-[var(--topbar-root-padding-x)] py-[var(--topbar-root-padding-y)]\",\n    \"gap-[var(--topbar-root-gap)]\",\n  ],\n  {\n    variants: {\n      variant: {\n        default: \"h-[var(--topbar-root-height-default)]\",\n        filters: \"h-[var(--topbar-root-height-filters)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n)\n\n/**\n * TopbarLeading variant styles — left slot, typically holding a Breadcrumb.\n */\nexport const topbarLeadingVariants = cva(\n  \"flex items-center gap-[var(--topbar-leading-gap)] min-w-0\",\n)\n\n/**\n * TopbarTrailing variant styles — right slot, typically holding Search + AccountSwitch\n * (default variant) or DatePicker + Selects (filters variant).\n */\nexport const topbarTrailingVariants = cva(\n  \"flex items-center gap-[var(--topbar-trailing-gap)] shrink-0\",\n)\n","\"use client\"\n\nimport type { TopbarLeadingProps, TopbarProps, TopbarTrailingProps } from \"./Topbar.types\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  topbarLeadingVariants,\n  topbarTrailingVariants,\n  topbarVariants,\n} from \"./Topbar.variants\"\n\n/**\n * Topbar — page-level horizontal bar combining a leading area (breadcrumb / title)\n * with a trailing area (search, account switcher, filters).\n *\n * Distinct from `Navbar` (primary site navigation) and `Header` (app chrome):\n * Topbar sits at the top of a content area to surface location + contextual actions.\n *\n * @example\n * <Topbar variant=\"default\">\n *   <TopbarLeading>\n *     <Breadcrumb>...</Breadcrumb>\n *   </TopbarLeading>\n *   <TopbarTrailing>\n *     <TextInput type=\"search\" />\n *     <AccountSwitch accounts={...} />\n *   </TopbarTrailing>\n * </Topbar>\n */\nfunction Topbar({ className, variant = \"default\", children, ...props }: TopbarProps) {\n  return (\n    <div\n      className={cn(topbarVariants({ variant }), className)}\n      data-slot=\"topbar\"\n      data-variant={variant}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * TopbarLeading — left-aligned slot inside a Topbar.\n */\nfunction TopbarLeading({ className, children, ...props }: TopbarLeadingProps) {\n  return (\n    <div\n      className={cn(topbarLeadingVariants(), className)}\n      data-slot=\"topbar-leading\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * TopbarTrailing — right-aligned slot inside a Topbar.\n */\nfunction TopbarTrailing({ className, children, ...props }: TopbarTrailingProps) {\n  return (\n    <div\n      className={cn(topbarTrailingVariants(), className)}\n      data-slot=\"topbar-trailing\"\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport { Topbar, TopbarLeading, TopbarTrailing }\n"]}

package/dist/chunk-6VCJU6XD.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+// src/hooks/use-on-window-resize.ts
+function useOnWindowResize(handler) {
+  React.useEffect(() => {
+    const handleResize = () => {
+      handler();
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, [handler]);
+}
+
+export { useOnWindowResize };
+//# sourceMappingURL=chunk-6VCJU6XD.js.map
+//# sourceMappingURL=chunk-6VCJU6XD.js.map

package/dist/chunk-6VCJU6XD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-on-window-resize.ts"],"names":[],"mappings":";;;AAeO,SAAS,kBAAkB,OAAA,EAAqB;AACrD,EAAM,gBAAU,MAAM;AACpB,IAAA,MAAM,eAAe,MAAM;AACzB,MAAA,OAAA,EAAQ;AAAA,IACV,CAAA;AAEA,IAAA,YAAA,EAAa;AAEb,IAAA,MAAA,CAAO,gBAAA,CAAiB,UAAU,YAAY,CAAA;AAC9C,IAAA,OAAO,MAAM;AAAE,MAAA,MAAA,CAAO,mBAAA,CAAoB,UAAU,YAAY,CAAA;AAAA,IAAE,CAAA;AAAA,EACpE,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AACd","file":"chunk-6VCJU6XD.js","sourcesContent":["import * as React from \"react\"\n\n/**\n * Hook that triggers a callback on window resize\n * Useful for responsive charts and components that need to recalculate dimensions\n *\n * @example\n * ```tsx\n * const [width, setWidth] = useState(0)\n *\n * useOnWindowResize(() => {\n *   setWidth(containerRef.current?.clientWidth ?? 0)\n * })\n * ```\n */\nexport function useOnWindowResize(handler: () => void) {\n  React.useEffect(() => {\n    const handleResize = () => {\n      handler()\n    }\n    // Call handler immediately to set initial state\n    handleResize()\n\n    window.addEventListener(\"resize\", handleResize)\n    return () => { window.removeEventListener(\"resize\", handleResize) }\n  }, [handler])\n}\n"]}