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

package/dist/chunk-3WOGOTOV.js

@@ -0,0 +1,152 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var toggleVariants = cva(
+  "inline-flex items-center justify-center gap-[var(--toggle-root-gap)] font-[var(--toggle-root-font-weight)] border-[length:var(--toggle-root-border-width)] transition-all duration-150 hover:bg-[color:var(--toggle-variant-default-bg-hover)] hover:text-[color:var(--toggle-variant-default-color-hover)] hover:shadow-sm active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[color:var(--toggle-variant-default-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-default-color-on)] data-[state=on]:shadow-sm [&_svg]:pointer-events-none [&_svg]:size-[var(--toggle-icon-size)] [&_svg]:shrink-0 focus-visible:z-10 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-[color:var(--toggle-variant-default-bg-default)] text-[color:var(--toggle-variant-default-color-default)] border-[color:var(--toggle-variant-default-border)]",
+        outline: "border-[color:var(--toggle-variant-outline-border)] bg-[color:var(--toggle-variant-outline-bg-default)] text-[color:var(--toggle-variant-outline-color-default)] hover:bg-[color:var(--toggle-variant-outline-bg-hover)] hover:text-[color:var(--toggle-variant-outline-color-hover)] data-[state=on]:bg-[color:var(--toggle-variant-outline-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-outline-color-on)]"
+      },
+      size: {
+        default: "h-[var(--toggle-size-default-height)] px-[var(--toggle-size-default-padding-x)] min-w-[var(--toggle-size-default-min-width)]",
+        sm: "h-[var(--toggle-size-sm-height)] px-[var(--toggle-size-sm-padding-x)] min-w-[var(--toggle-size-sm-min-width)]",
+        md: "h-[var(--toggle-size-md-height)] px-[var(--toggle-size-md-padding-x)] min-w-[var(--toggle-size-md-min-width)]",
+        lg: "h-[var(--toggle-size-lg-height)] px-[var(--toggle-size-lg-padding-x)] min-w-[var(--toggle-size-lg-min-width)]"
+      },
+      /**
+       * The shape of the toggle button
+       */
+      shape: {
+        pill: "rounded-[var(--toggle-root-border-radius-pill)]",
+        rounded: "rounded-[var(--toggle-root-border-radius-rounded)]"
+      },
+      /**
+       * Whether the item is connected to adjacent items (spacing=0)
+       */
+      connected: {
+        true: "rounded-none first:rounded-l-[var(--toggle-root-border-radius-pill)] last:rounded-r-[var(--toggle-root-border-radius-pill)]",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "outline",
+        connected: true,
+        className: "border-l-0 first:border-l"
+      },
+      {
+        shape: "rounded",
+        connected: true,
+        className: "first:rounded-l-[var(--toggle-root-border-radius-rounded)] last:rounded-r-[var(--toggle-root-border-radius-rounded)]"
+      }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      shape: "rounded",
+      connected: false
+    }
+  }
+);
+var ToggleGroupContext = React.createContext({});
+function Toggle({
+  className,
+  variant,
+  size,
+  shape,
+  icon,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    TogglePrimitive.Root,
+    {
+      className: cn(toggleVariants({ variant, size, shape, className })),
+      "data-slot": "toggle",
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", "data-slot": "toggle-icon", children: icon }),
+        children
+      ]
+    }
+  );
+}
+var spacingVariants = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4"
+};
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  shape,
+  spacing = 1,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(ToggleGroupContext, { value: { variant, size, shape, spacing }, children: /* @__PURE__ */ jsx(
+    ToggleGroupPrimitive.Root,
+    {
+      className: cn(
+        "group/toggle-group inline-flex items-center",
+        spacingVariants[spacing],
+        className
+      ),
+      "data-slot": "toggle-group",
+      "data-spacing": spacing,
+      ...props,
+      children
+    }
+  ) });
+}
+function ToggleItem({
+  className,
+  variant,
+  size,
+  shape,
+  icon,
+  children,
+  ...props
+}) {
+  const context = React.use(ToggleGroupContext);
+  const resolvedVariant = variant ?? context.variant;
+  const resolvedSize = size ?? context.size;
+  const resolvedShape = shape ?? context.shape;
+  const resolvedSpacing = context.spacing ?? 1;
+  const isConnected = resolvedSpacing === 0;
+  return /* @__PURE__ */ jsxs(
+    ToggleGroupPrimitive.Item,
+    {
+      className: cn(
+        toggleVariants({
+          variant: resolvedVariant,
+          size: resolvedSize,
+          shape: resolvedShape,
+          connected: isConnected,
+          className
+        })
+      ),
+      "data-slot": "toggle-item",
+      ...props,
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "shrink-0", "data-slot": "toggle-icon", children: icon }),
+        children
+      ]
+    }
+  );
+}
+Toggle.Group = ToggleGroup;
+Toggle.Item = ToggleItem;
+
+export { Toggle, ToggleGroup, ToggleItem, toggleVariants };
+//# sourceMappingURL=chunk-3WOGOTOV.js.map
+//# sourceMappingURL=chunk-3WOGOTOV.js.map

package/dist/chunk-3WOGOTOV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Toggle/Toggle.tsx"],"names":[],"mappings":"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","file":"chunk-3WOGOTOV.js","sourcesContent":["\"use client\"\n\nimport type { ToggleGroupProps, ToggleItemProps, ToggleProps } from \"./Toggle.types\"\n\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { cva } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-[var(--toggle-root-gap)] font-[var(--toggle-root-font-weight)] border-[length:var(--toggle-root-border-width)] transition-all duration-150 hover:bg-[color:var(--toggle-variant-default-bg-hover)] hover:text-[color:var(--toggle-variant-default-color-hover)] hover:shadow-sm active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-[color:var(--toggle-variant-default-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-default-color-on)] data-[state=on]:shadow-sm [&_svg]:pointer-events-none [&_svg]:size-[var(--toggle-icon-size)] [&_svg]:shrink-0 focus-visible:z-10 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-[color:var(--toggle-variant-default-bg-default)] text-[color:var(--toggle-variant-default-color-default)] border-[color:var(--toggle-variant-default-border)]\",\n        outline:\n          \"border-[color:var(--toggle-variant-outline-border)] bg-[color:var(--toggle-variant-outline-bg-default)] text-[color:var(--toggle-variant-outline-color-default)] hover:bg-[color:var(--toggle-variant-outline-bg-hover)] hover:text-[color:var(--toggle-variant-outline-color-hover)] data-[state=on]:bg-[color:var(--toggle-variant-outline-bg-on)] data-[state=on]:text-[color:var(--toggle-variant-outline-color-on)]\",\n      },\n      size: {\n        default: \"h-[var(--toggle-size-default-height)] px-[var(--toggle-size-default-padding-x)] min-w-[var(--toggle-size-default-min-width)]\",\n        sm: \"h-[var(--toggle-size-sm-height)] px-[var(--toggle-size-sm-padding-x)] min-w-[var(--toggle-size-sm-min-width)]\",\n        md: \"h-[var(--toggle-size-md-height)] px-[var(--toggle-size-md-padding-x)] min-w-[var(--toggle-size-md-min-width)]\",\n        lg: \"h-[var(--toggle-size-lg-height)] px-[var(--toggle-size-lg-padding-x)] min-w-[var(--toggle-size-lg-min-width)]\",\n      },\n      /**\n       * The shape of the toggle button\n       */\n      shape: {\n        pill: \"rounded-[var(--toggle-root-border-radius-pill)]\",\n        rounded: \"rounded-[var(--toggle-root-border-radius-rounded)]\",\n      },\n      /**\n       * Whether the item is connected to adjacent items (spacing=0)\n       */\n      connected: {\n        true: \"rounded-none first:rounded-l-[var(--toggle-root-border-radius-pill)] last:rounded-r-[var(--toggle-root-border-radius-pill)]\",\n        false: \"\",\n      },\n    },\n    compoundVariants: [\n      {\n        variant: \"outline\",\n        connected: true,\n        className: \"border-l-0 first:border-l\",\n      },\n      {\n        shape: \"rounded\",\n        connected: true,\n        className: \"first:rounded-l-[var(--toggle-root-border-radius-rounded)] last:rounded-r-[var(--toggle-root-border-radius-rounded)]\",\n      },\n    ],\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n      shape: \"rounded\",\n      connected: false,\n    },\n  }\n)\n\n// Context for sharing group props with items\nconst ToggleGroupContext = React.createContext<{\n  shape?: ToggleProps[\"shape\"]\n  size?: ToggleProps[\"size\"]\n  spacing?: ToggleGroupProps[\"spacing\"]\n  variant?: ToggleProps[\"variant\"]\n}>({})\n\nfunction Toggle({\n  className,\n  variant,\n  size,\n  shape,\n  icon,\n  children,\n  ...props\n}: ToggleProps) {\n  return (\n    <TogglePrimitive.Root\n      className={cn(toggleVariants({ variant, size, shape, className }))}\n      data-slot=\"toggle\"\n      {...props}\n    >\n      {icon && (\n        <span className=\"shrink-0\" data-slot=\"toggle-icon\">\n          {icon}\n        </span>\n      )}\n      {children}\n    </TogglePrimitive.Root>\n  )\n}\n\nconst spacingVariants = {\n  0: \"gap-0\",\n  1: \"gap-1\",\n  2: \"gap-2\",\n  3: \"gap-3\",\n  4: \"gap-4\",\n}\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  shape,\n  spacing = 1,\n  children,\n  ...props\n}: ToggleGroupProps) {\n  return (\n    <ToggleGroupContext value={{ variant, size, shape, spacing }}>\n      <ToggleGroupPrimitive.Root\n        className={cn(\n          \"group/toggle-group inline-flex items-center\",\n          spacingVariants[spacing],\n          className\n        )}\n        data-slot=\"toggle-group\"\n        data-spacing={spacing}\n        {...props}\n      >\n        {children}\n      </ToggleGroupPrimitive.Root>\n    </ToggleGroupContext>\n  )\n}\n\nfunction ToggleItem({\n  className,\n  variant,\n  size,\n  shape,\n  icon,\n  children,\n  ...props\n}: ToggleItemProps) {\n  const context = React.use(ToggleGroupContext)\n  const resolvedVariant = variant ?? context.variant\n  const resolvedSize = size ?? context.size\n  const resolvedShape = shape ?? context.shape\n  const resolvedSpacing = context.spacing ?? 1\n  const isConnected = resolvedSpacing === 0\n\n  return (\n    <ToggleGroupPrimitive.Item\n      className={cn(\n        toggleVariants({\n          variant: resolvedVariant,\n          size: resolvedSize,\n          shape: resolvedShape,\n          connected: isConnected,\n          className,\n        })\n      )}\n      data-slot=\"toggle-item\"\n      {...props}\n    >\n      {icon && (\n        <span className=\"shrink-0\" data-slot=\"toggle-icon\">\n          {icon}\n        </span>\n      )}\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nToggle.Group = ToggleGroup\nToggle.Item = ToggleItem\n\nexport { Toggle, ToggleGroup, ToggleItem, toggleVariants }"]}

package/dist/chunk-46ESMCEQ.js

@@ -0,0 +1,80 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { MoreHorizontal, Inbox } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var toneClass = {
+  success: "bg-[color:var(--primary-subtle)] text-[color:var(--primary-subtle-foreground)]",
+  info: "bg-[color:var(--info-subtle)] text-[color:var(--info)]",
+  warning: "bg-[color:var(--warning-subtle)] text-[color:var(--warning-subtle-foreground)]",
+  destructive: "bg-[color:var(--destructive-subtle)] text-[color:var(--destructive-subtle-foreground)]"
+};
+function UpdatesWidget({
+  className,
+  items,
+  emptyState,
+  menu,
+  title,
+  ...props
+}) {
+  const hasItems = items.length > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "w-[313px] flex flex-col gap-3 p-4 bg-card border border-border rounded-[var(--radius-md)] shadow-sm",
+        className
+      ),
+      "data-slot": "updates-widget",
+      ...props,
+      children: [
+        (title !== void 0 || menu !== void 0) && /* @__PURE__ */ jsxs("header", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: title ?? "Updates" }),
+          menu === void 0 ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              "aria-label": "More options",
+              className: "text-muted-foreground hover:text-foreground transition-colors",
+              "data-slot": "updates-widget-menu",
+              type: "button",
+              children: /* @__PURE__ */ jsx(MoreHorizontal, { "aria-hidden": "true", className: "size-4" })
+            }
+          ) : menu
+        ] }),
+        hasItems ? /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3 list-none m-0 p-0", "data-slot": "updates-widget-list", children: items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-3", "data-slot": "updates-widget-item", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "inline-grid place-items-center size-6 rounded-full shrink-0 [&_svg]:size-3.5",
+                toneClass[item.tone] ?? toneClass["info"]
+              ),
+              "aria-hidden": "true",
+              children: item.icon
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx("div", { className: "text-xs leading-4 text-foreground", children: item.text }),
+            item.when && /* @__PURE__ */ jsx("div", { className: "text-[10px] leading-3 text-muted-foreground mt-0.5", children: item.when })
+          ] })
+        ] }, item.id)) }) : /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "flex flex-col items-center justify-center gap-2 py-6 text-center",
+            "data-slot": "updates-widget-empty",
+            children: emptyState ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "inline-grid place-items-center size-9 rounded-full bg-muted text-muted-foreground", children: /* @__PURE__ */ jsx(Inbox, { "aria-hidden": "true", className: "size-5" }) }),
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("div", { className: "text-xs font-medium text-foreground", children: "Sem updates" }),
+                /* @__PURE__ */ jsx("div", { className: "text-[10px] text-muted-foreground", children: "Voc\xEA est\xE1 em dia" })
+              ] })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { UpdatesWidget };
+//# sourceMappingURL=chunk-46ESMCEQ.js.map
+//# sourceMappingURL=chunk-46ESMCEQ.js.map

package/dist/chunk-46ESMCEQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/UpdatesWidget/UpdatesWidget.tsx"],"names":[],"mappings":"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","file":"chunk-46ESMCEQ.js","sourcesContent":["\"use client\"\n\nimport type { UpdatesWidgetProps } from \"./UpdatesWidget.types\"\n\nimport { Inbox, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst toneClass: Record<string, string> = {\n  success: \"bg-[color:var(--primary-subtle)] text-[color:var(--primary-subtle-foreground)]\",\n  info: \"bg-[color:var(--info-subtle)] text-[color:var(--info)]\",\n  warning: \"bg-[color:var(--warning-subtle)] text-[color:var(--warning-subtle-foreground)]\",\n  destructive: \"bg-[color:var(--destructive-subtle)] text-[color:var(--destructive-subtle-foreground)]\",\n}\n\nfunction UpdatesWidget({\n  className,\n  items,\n  emptyState,\n  menu,\n  title,\n  ...props\n}: UpdatesWidgetProps) {\n  const hasItems = items.length > 0\n\n  return (\n    <div\n      className={cn(\n        \"w-[313px] flex flex-col gap-3 p-4 bg-card border border-border rounded-[var(--radius-md)] shadow-sm\",\n        className\n      )}\n      data-slot=\"updates-widget\"\n      {...props}\n    >\n      {(title !== undefined || menu !== undefined) && (\n        <header className=\"flex items-center justify-between gap-2\">\n          <div className=\"text-sm font-medium text-foreground\">{title ?? \"Updates\"}</div>\n          {menu === undefined ? (\n            <button\n              aria-label=\"More options\"\n              className=\"text-muted-foreground hover:text-foreground transition-colors\"\n              data-slot=\"updates-widget-menu\"\n              type=\"button\"\n            >\n              <MoreHorizontal aria-hidden=\"true\" className=\"size-4\" />\n            </button>\n          ) : (\n            menu\n          )}\n        </header>\n      )}\n      {hasItems ? (\n        <ul className=\"flex flex-col gap-3 list-none m-0 p-0\" data-slot=\"updates-widget-list\">\n          {items.map((item) => (\n            <li key={item.id} className=\"flex items-start gap-3\" data-slot=\"updates-widget-item\">\n              <span\n                className={cn(\n                  \"inline-grid place-items-center size-6 rounded-full shrink-0 [&_svg]:size-3.5\",\n                  toneClass[item.tone] ?? toneClass[\"info\"]\n                )}\n                aria-hidden=\"true\"\n              >\n                {item.icon}\n              </span>\n              <div className=\"flex-1 min-w-0\">\n                <div className=\"text-xs leading-4 text-foreground\">{item.text}</div>\n                {item.when && (\n                  <div className=\"text-[10px] leading-3 text-muted-foreground mt-0.5\">\n                    {item.when}\n                  </div>\n                )}\n              </div>\n            </li>\n          ))}\n        </ul>\n      ) : (\n        <div\n          className=\"flex flex-col items-center justify-center gap-2 py-6 text-center\"\n          data-slot=\"updates-widget-empty\"\n        >\n          {emptyState ?? (\n            <>\n              <span className=\"inline-grid place-items-center size-9 rounded-full bg-muted text-muted-foreground\">\n                <Inbox aria-hidden=\"true\" className=\"size-5\" />\n              </span>\n              <div>\n                <div className=\"text-xs font-medium text-foreground\">Sem updates</div>\n                <div className=\"text-[10px] text-muted-foreground\">Você está em dia</div>\n              </div>\n            </>\n          )}\n        </div>\n      )}\n    </div>\n  )\n}\n\nexport { UpdatesWidget }\n"]}

package/dist/chunk-4GQN76L7.js

@@ -0,0 +1,228 @@
+import { Label } from './chunk-SCGKQ5RE.js';
+import { Divider } from './chunk-3L5G7VI2.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { useId, useMemo } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var fieldSetVariants = cva([
+  "flex flex-col gap-6",
+  "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3"
+]);
+var fieldLegendVariants = cva("mb-3 font-medium", {
+  variants: {
+    variant: {
+      legend: "text-base",
+      label: "text-sm"
+    }
+  },
+  defaultVariants: {
+    variant: "legend"
+  }
+});
+var fieldGroupVariants = cva([
+  "group/field-group @container/field-group flex w-full flex-col gap-7",
+  "data-[slot=checkbox-group]:gap-3",
+  "[&>[data-slot=field-group]]:gap-4"
+]);
+var fieldVariants = cva(
+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ],
+        responsive: [
+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+        ]
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+var fieldContentVariants = cva([
+  "group/field-content flex flex-1 flex-col gap-1.5 leading-snug"
+]);
+var fieldLabelVariants = cva([
+  "group/field-label peer/field-label flex w-fit gap-2 leading-snug",
+  "group-data-[disabled=true]/field:opacity-50",
+  "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border",
+  "[&>*]:data-[slot=field]:p-4",
+  "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary",
+  "dark:has-data-[state=checked]:bg-primary/10"
+]);
+var fieldTitleVariants = cva([
+  "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
+  "group-data-[disabled=true]/field:opacity-50"
+]);
+var fieldDescriptionVariants = cva([
+  "text-[color:var(--form-helper-fg)] text-[length:var(--form-helper-size)] leading-normal font-normal",
+  "group-has-[[data-orientation=horizontal]]/field:text-balance",
+  "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
+  "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4"
+]);
+var fieldSeparatorVariants = cva([
+  "relative -my-2 h-5 text-sm",
+  "group-data-[variant=outline]/field-group:-mb-2"
+]);
+var fieldErrorVariants = cva(
+  "text-[color:var(--form-error-fg)] text-[length:var(--form-error-size)] font-[var(--form-error-weight)]"
+);
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "fieldset",
+    {
+      className: cn(fieldSetVariants(), className),
+      "data-slot": "field-set",
+      ...props
+    }
+  );
+}
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "legend",
+    {
+      className: cn(fieldLegendVariants({ variant }), className),
+      "data-slot": "field-legend",
+      "data-variant": variant,
+      ...props
+    }
+  );
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(fieldGroupVariants(), className),
+      "data-slot": "field-group",
+      ...props
+    }
+  );
+}
+function Field({ className, orientation = "vertical", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(fieldVariants({ orientation }), className),
+      "data-orientation": orientation,
+      "data-slot": "field",
+      role: "group",
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(fieldContentVariants(), className),
+      "data-slot": "field-content",
+      ...props
+    }
+  );
+}
+function FieldLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      className: cn(fieldLabelVariants(), className),
+      "data-slot": "field-label",
+      ...props
+    }
+  );
+}
+function FieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(fieldTitleVariants(), className),
+      "data-slot": "field-label",
+      ...props
+    }
+  );
+}
+function FieldDescription({ className, id, ...props }) {
+  const generatedId = useId();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: cn(fieldDescriptionVariants(), className),
+      "data-slot": "field-description",
+      id: id ?? generatedId,
+      ...props
+    }
+  );
+}
+function FieldSeparator({ children, className, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(fieldSeparatorVariants(), className),
+      "data-content": !!children,
+      "data-slot": "field-separator",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Divider, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+            "data-slot": "field-separator-content",
+            children
+          }
+        )
+      ]
+    }
+  );
+}
+function FieldError({ className, children, errors, id, ...props }) {
+  const generatedId = useId();
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors?.length) {
+      return null;
+    }
+    const uniqueErrors = [
+      ...new Map(errors.map((error) => [error?.message, error])).values()
+    ];
+    if (uniqueErrors.length == 1) {
+      return uniqueErrors[0]?.message;
+    }
+    return /* @__PURE__ */ jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map(
+      (error) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, error.message)
+    ) });
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-live": "polite",
+      className: cn(fieldErrorVariants(), className),
+      "data-slot": "field-error",
+      id: id ?? generatedId,
+      role: "alert",
+      ...props,
+      children: content
+    }
+  );
+}
+
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, fieldContentVariants, fieldDescriptionVariants, fieldErrorVariants, fieldGroupVariants, fieldLabelVariants, fieldLegendVariants, fieldSeparatorVariants, fieldSetVariants, fieldTitleVariants, fieldVariants };
+//# sourceMappingURL=chunk-4GQN76L7.js.map
+//# sourceMappingURL=chunk-4GQN76L7.js.map

package/dist/chunk-4GQN76L7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/Field/Field.variants.ts","../src/components/forms/Field/Field.tsx"],"names":[],"mappings":"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","file":"chunk-4GQN76L7.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * FieldSet variant styles using CVA\n */\nexport const fieldSetVariants = cva([\n  \"flex flex-col gap-6\",\n  \"has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n])\n\n/**\n * FieldLegend variant styles using CVA\n */\nexport const fieldLegendVariants = cva(\"mb-3 font-medium\", {\n  variants: {\n    variant: {\n      legend: \"text-base\",\n      label: \"text-sm\",\n    },\n  },\n  defaultVariants: {\n    variant: \"legend\",\n  },\n})\n\n/**\n * FieldGroup variant styles using CVA\n */\nexport const fieldGroupVariants = cva([\n  \"group/field-group @container/field-group flex w-full flex-col gap-7\",\n  \"data-[slot=checkbox-group]:gap-3\",\n  \"[&>[data-slot=field-group]]:gap-4\",\n])\n\n/**\n * Field container variant styles using CVA\n */\nexport const fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: [\"flex-col [&>*]:w-full [&>.sr-only]:w-auto\"],\n        horizontal: [\n          \"flex-row items-center\",\n          \"[&>[data-slot=field-label]]:flex-auto\",\n          \"has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        ],\n        responsive: [\n          \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto\",\n          \"@md/field-group:[&>[data-slot=field-label]]:flex-auto\",\n          \"@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        ],\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\n/**\n * FieldContent variant styles using CVA\n */\nexport const fieldContentVariants = cva([\n  \"group/field-content flex flex-1 flex-col gap-1.5 leading-snug\",\n])\n\n/**\n * FieldLabel variant styles using CVA\n */\nexport const fieldLabelVariants = cva([\n  \"group/field-label peer/field-label flex w-fit gap-2 leading-snug\",\n  \"group-data-[disabled=true]/field:opacity-50\",\n  \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border\",\n  \"[&>*]:data-[slot=field]:p-4\",\n  \"has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary\",\n  \"dark:has-data-[state=checked]:bg-primary/10\",\n])\n\n/**\n * FieldTitle variant styles using CVA\n */\nexport const fieldTitleVariants = cva([\n  \"flex w-fit items-center gap-2 text-sm leading-snug font-medium\",\n  \"group-data-[disabled=true]/field:opacity-50\",\n])\n\n/**\n * FieldDescription variant styles using CVA\n */\nexport const fieldDescriptionVariants = cva([\n  \"text-[color:var(--form-helper-fg)] text-[length:var(--form-helper-size)] leading-normal font-normal\",\n  \"group-has-[[data-orientation=horizontal]]/field:text-balance\",\n  \"last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5\",\n  \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n])\n\n/**\n * FieldSeparator variant styles using CVA\n */\nexport const fieldSeparatorVariants = cva([\n  \"relative -my-2 h-5 text-sm\",\n  \"group-data-[variant=outline]/field-group:-mb-2\",\n])\n\n/**\n * FieldError variant styles using CVA\n */\nexport const fieldErrorVariants = cva(\n  \"text-[color:var(--form-error-fg)] text-[length:var(--form-error-size)] font-[var(--form-error-weight)]\"\n)\n\n// Export variant prop types\nexport type FieldVariantProps = VariantProps<typeof fieldVariants>\nexport type FieldLegendVariantProps = VariantProps<typeof fieldLegendVariants>\n","import type {\n  FieldContentProps,\n  FieldDescriptionProps,\n  FieldErrorProps,\n  FieldGroupProps,\n  FieldLabelProps,\n  FieldLegendProps,\n  FieldProps,\n  FieldSeparatorProps,\n  FieldSetProps,\n  FieldTitleProps,\n} from \"./Field.types\"\n\nimport { useId, useMemo } from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Divider } from \"../../primitives/Divider\"\nimport { Label } from \"../../primitives/Label\"\nimport {\n  fieldContentVariants,\n  fieldDescriptionVariants,\n  fieldErrorVariants,\n  fieldGroupVariants,\n  fieldLabelVariants,\n  fieldLegendVariants,\n  fieldSeparatorVariants,\n  fieldSetVariants,\n  fieldTitleVariants,\n  fieldVariants,\n} from \"./Field.variants\"\n\nfunction FieldSet({ className, ...props }: FieldSetProps) {\n  return (\n    <fieldset\n      className={cn(fieldSetVariants(), className)}\n      data-slot=\"field-set\"\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: FieldLegendProps) {\n  return (\n    <legend\n      className={cn(fieldLegendVariants({ variant }), className)}\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: FieldGroupProps) {\n  return (\n    <div\n      className={cn(fieldGroupVariants(), className)}\n      data-slot=\"field-group\"\n      {...props}\n    />\n  )\n}\n\nfunction Field({ className, orientation = \"vertical\", ...props }: FieldProps) {\n  return (\n    <div\n      className={cn(fieldVariants({ orientation }), className)}\n      data-orientation={orientation}\n      data-slot=\"field\"\n      role=\"group\"\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: FieldContentProps) {\n  return (\n    <div\n      className={cn(fieldContentVariants(), className)}\n      data-slot=\"field-content\"\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({ className, ...props }: FieldLabelProps) {\n  return (\n    <Label\n      className={cn(fieldLabelVariants(), className)}\n      data-slot=\"field-label\"\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: FieldTitleProps) {\n  return (\n    <div\n      className={cn(fieldTitleVariants(), className)}\n      data-slot=\"field-label\"\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, id, ...props }: FieldDescriptionProps) {\n  const generatedId = useId()\n  return (\n    <p\n      className={cn(fieldDescriptionVariants(), className)}\n      data-slot=\"field-description\"\n      id={id ?? generatedId}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({ children, className, ...props }: FieldSeparatorProps) {\n  return (\n    <div\n      className={cn(fieldSeparatorVariants(), className)}\n      data-content={!!children}\n      data-slot=\"field-separator\"\n      {...props}\n    >\n      <Divider className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"bg-background text-muted-foreground relative mx-auto block w-fit px-2\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({ className, children, errors, id, ...props }: FieldErrorProps) {\n  const generatedId = useId()\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error) =>\n            error?.message && <li key={error.message}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      aria-live=\"polite\"\n      className={cn(fieldErrorVariants(), className)}\n      data-slot=\"field-error\"\n      id={id ?? generatedId}\n      role=\"alert\"\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n}\n"]}

package/dist/chunk-4MQNDQ4O.js

@@ -0,0 +1,62 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function IftaLabel({
+  children,
+  label,
+  className,
+  ...props
+}) {
+  const [inputId, setInputId] = React.useState();
+  const generatedId = React.useId();
+  const wrapperRef = React.useRef(null);
+  React.useEffect(() => {
+    if (wrapperRef.current) {
+      const input = wrapperRef.current.querySelector("input, select, textarea");
+      if (input) {
+        const existingId = input.getAttribute("id");
+        if (existingId) {
+          setInputId(existingId);
+        } else {
+          const newId = `ifta-label-input-${generatedId.replaceAll(":", "")}`;
+          input.setAttribute("id", newId);
+          setInputId(newId);
+        }
+        if (input.tagName === "INPUT" && !input.hasAttribute("placeholder")) {
+          input.setAttribute("placeholder", " ");
+        }
+      }
+    }
+  }, [generatedId, children]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: cn(
+        "relative group [&_input]:pt-[var(--ifta-label-wrapper-padding-top)] [&_input]:pb-[var(--ifta-label-wrapper-padding-bottom)] [&_input]:h-[var(--ifta-label-wrapper-height)]",
+        "has-[input:disabled]:opacity-[var(--ifta-label-wrapper-disabled-opacity)]",
+        "has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-not-allowed",
+        className
+      ),
+      "data-slot": "ifta-label",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "label",
+          {
+            className: "pointer-events-none absolute left-3 top-1.5 text-xs font-normal text-[color:var(--ifta-label-label-color-muted)] group-focus-within:text-[color:var(--ifta-label-label-color-foreground)] group-has-[input:not(:placeholder-shown)]:text-[color:var(--ifta-label-label-color-foreground)] group-has-[[aria-invalid=true]]:text-[color:var(--ifta-label-label-color-destructive)] group-has-[input:disabled]:text-[color:var(--ifta-label-label-color-muted)]",
+            "data-slot": "ifta-label-text",
+            htmlFor: inputId,
+            children: label
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+
+export { IftaLabel };
+//# sourceMappingURL=chunk-4MQNDQ4O.js.map
+//# sourceMappingURL=chunk-4MQNDQ4O.js.map

package/dist/chunk-4MQNDQ4O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/IftaLabel/IftaLabel.tsx"],"names":[],"mappings":";;;;AAmBA,SAAS,SAAA,CAAU;AAAA,EACjB,QAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAU,KAAA,CAAA,QAAA,EAA6B;AACjE,EAAA,MAAM,cAAoB,KAAA,CAAA,KAAA,EAAM;AAChC,EAAA,MAAM,UAAA,GAAmB,aAAuB,IAAI,CAAA;AAIpD,EAAM,gBAAU,MAAM;AACpB,IAAA,IAAI,WAAW,OAAA,EAAS;AACtB,MAAA,MAAM,KAAA,GAAQ,UAAA,CAAW,OAAA,CAAQ,aAAA,CAAc,yBAAyB,CAAA;AACxE,MAAA,IAAI,KAAA,EAAO;AACT,QAAA,MAAM,UAAA,GAAa,KAAA,CAAM,YAAA,CAAa,IAAI,CAAA;AAC1C,QAAA,IAAI,UAAA,EAAY;AACd,UAAA,UAAA,CAAW,UAAU,CAAA;AAAA,QACvB,CAAA,MAAO;AACL,UAAA,MAAM,QAAQ,CAAA,iBAAA,EAAoB,WAAA,CAAY,UAAA,CAAW,GAAA,EAAK,EAAE,CAAC,CAAA,CAAA;AACjE,UAAA,KAAA,CAAM,YAAA,CAAa,MAAM,KAAK,CAAA;AAC9B,UAAA,UAAA,CAAW,KAAK,CAAA;AAAA,QAClB;AACA,QAAA,IAAI,MAAM,OAAA,KAAY,OAAA,IAAW,CAAC,KAAA,CAAM,YAAA,CAAa,aAAa,CAAA,EAAG;AACnE,UAAA,KAAA,CAAM,YAAA,CAAa,eAAe,GAAG,CAAA;AAAA,QACvC;AAAA,MACF;AAAA,IACF;AAAA,EACF,CAAA,EAAG,CAAC,WAAA,EAAa,QAAQ,CAAC,CAAA;AAG1B,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,UAAA;AAAA,MACL,SAAA,EAAW,EAAA;AAAA,QACT,4KAAA;AAAA,QACA,2EAAA;AAAA,QACA,kFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACA,WAAA,EAAU,YAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,8bAAA;AAAA,YACV,WAAA,EAAU,iBAAA;AAAA,YACV,OAAA,EAAS,OAAA;AAAA,YAER,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QACC;AAAA;AAAA;AAAA,GACH;AAEJ","file":"chunk-4MQNDQ4O.js","sourcesContent":["import type { IftaLabelProps } from \"./IftaLabel.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\n\n/**\n * IftaLabel - A wrapper component with an always-visible label inside the input\n *\n * IFTA = \"In Field Top Aligned\" - the label is always visible at the top\n * of the input container, unlike FloatLabel which animates on focus.\n *\n * @example\n * ```tsx\n * <IftaLabel label=\"Email\">\n *   <TextInput value={email} onChange={(e) => setEmail(e.target.value)} />\n * </IftaLabel>\n * ```\n */\nfunction IftaLabel({\n  children,\n  label,\n  className,\n  ...props\n}: IftaLabelProps) {\n  const [inputId, setInputId] = React.useState<string | undefined>()\n  const generatedId = React.useId()\n  const wrapperRef = React.useRef<HTMLDivElement>(null)\n\n  // Find the input element and get its id\n  /* eslint-disable react-you-might-not-need-an-effect/no-adjust-state-on-prop-change, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect -- DOM discovery for label-input association */\n  React.useEffect(() => {\n    if (wrapperRef.current) {\n      const input = wrapperRef.current.querySelector(\"input, select, textarea\")\n      if (input) {\n        const existingId = input.getAttribute(\"id\")\n        if (existingId) {\n          setInputId(existingId)\n        } else {\n          const newId = `ifta-label-input-${generatedId.replaceAll(':', \"\")}`\n          input.setAttribute(\"id\", newId)\n          setInputId(newId)\n        }\n        if (input.tagName === \"INPUT\" && !input.hasAttribute(\"placeholder\")) {\n          input.setAttribute(\"placeholder\", \" \")\n        }\n      }\n    }\n  }, [generatedId, children])\n  /* eslint-enable react-you-might-not-need-an-effect/no-adjust-state-on-prop-change, @eslint-react/hooks-extra/no-direct-set-state-in-use-effect */\n\n  return (\n    <div\n      ref={wrapperRef}\n      className={cn(\n        \"relative group [&_input]:pt-[var(--ifta-label-wrapper-padding-top)] [&_input]:pb-[var(--ifta-label-wrapper-padding-bottom)] [&_input]:h-[var(--ifta-label-wrapper-height)]\",\n        \"has-[input:disabled]:opacity-[var(--ifta-label-wrapper-disabled-opacity)]\",\n        \"has-[input:disabled]:pointer-events-none has-[input:disabled]:cursor-not-allowed\",\n        className\n      )}\n      data-slot=\"ifta-label\"\n      {...props}\n    >\n      <label\n        className=\"pointer-events-none absolute left-3 top-1.5 text-xs font-normal text-[color:var(--ifta-label-label-color-muted)] group-focus-within:text-[color:var(--ifta-label-label-color-foreground)] group-has-[input:not(:placeholder-shown)]:text-[color:var(--ifta-label-label-color-foreground)] group-has-[[aria-invalid=true]]:text-[color:var(--ifta-label-label-color-destructive)] group-has-[input:disabled]:text-[color:var(--ifta-label-label-color-muted)]\"\n        data-slot=\"ifta-label-text\"\n        htmlFor={inputId}\n      >\n        {label}\n      </label>\n      {children}\n    </div>\n  )\n}\n\nexport { IftaLabel }\n"]}