@etus/ui 0.3.2 → 0.4.0-beta.10

package/dist/chunk-U2CXFKRK.js

@@ -0,0 +1,227 @@
+import { Avatar, AvatarImage, AvatarFallback } from './chunk-3BBOSSDG.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import { Check, Trash2, X } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var notificationVariants = cva(
+  "relative flex gap-[var(--notification-root-gap)] p-[var(--notification-root-padding)] transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "",
+        info: "",
+        success: "",
+        warning: "",
+        error: ""
+      },
+      read: {
+        true: "bg-[color:var(--notification-bg-read)]",
+        false: "bg-[color:var(--notification-bg-unread)]"
+      },
+      interactive: {
+        true: "cursor-pointer hover:bg-[color:var(--notification-bg-hover)] focus-visible:bg-[color:var(--notification-bg-hover)] focus-visible:outline-none",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      read: false,
+      interactive: false
+    }
+  }
+);
+var unreadDotVariants = cva(
+  "shrink-0 size-[var(--notification-dot-size)] rounded-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-[color:var(--notification-dot-color-default)]",
+        info: "bg-[color:var(--notification-dot-color-info)]",
+        success: "bg-[color:var(--notification-dot-color-success)]",
+        warning: "bg-[color:var(--notification-dot-color-warning)]",
+        error: "bg-[color:var(--notification-dot-color-error)]"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function formatTimestamp(timestamp) {
+  if (!timestamp) return "";
+  if (typeof timestamp === "string") return timestamp;
+  return timestamp.toLocaleString();
+}
+function Notification({
+  className,
+  variant = "default",
+  title,
+  description,
+  timestamp,
+  read = false,
+  icon,
+  avatar,
+  avatarSrc,
+  avatarFallback,
+  onClick,
+  onMarkAsRead,
+  onDelete,
+  actions,
+  ...props
+}) {
+  const isInteractive = Boolean(onClick);
+  const formattedTimestamp = formatTimestamp(timestamp);
+  const showAvatar = Boolean(avatar ?? avatarSrc ?? avatarFallback);
+  const showActions = Boolean(onMarkAsRead ?? onDelete ?? actions);
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  };
+  const handleKeyDown = (event) => {
+    if (isInteractive && (event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      onClick?.();
+    }
+    if (event.key === "Delete" && onDelete) {
+      event.preventDefault();
+      onDelete();
+    }
+  };
+  const handleMarkAsRead = (event) => {
+    event.stopPropagation();
+    onMarkAsRead?.();
+  };
+  const handleDelete = (event) => {
+    event.stopPropagation();
+    onDelete?.();
+  };
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn(
+        notificationVariants({ variant, read, interactive: isInteractive }),
+        className
+      ),
+      "aria-label": `${read ? "" : "Unread: "}${title}${description ? `. ${description}` : ""}${formattedTimestamp ? `. ${formattedTimestamp}` : ""}`,
+      "data-slot": "notification",
+      "data-unread": !read,
+      "data-variant": variant,
+      role: "article",
+      tabIndex: isInteractive ? 0 : void 0,
+      onClick: isInteractive ? handleClick : void 0,
+      onKeyDown: handleKeyDown,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", "data-slot": "notification-media", children: icon ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "flex size-10 items-center justify-center",
+            children: icon
+          }
+        ) : showAvatar ? avatar ?? /* @__PURE__ */ jsxs(Avatar, { size: "sm", children: [
+          avatarSrc && /* @__PURE__ */ jsx(AvatarImage, { alt: "", src: avatarSrc }),
+          /* @__PURE__ */ jsx(AvatarFallback, { children: avatarFallback })
+        ] }) : null }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", "data-slot": "notification-content", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-[var(--notification-dot-gap)]", children: [
+              !read && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: cn(unreadDotVariants({ variant })),
+                  "data-slot": "notification-unread-dot"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "text-foreground line-clamp-2 min-w-0 text-sm font-medium",
+                  "data-slot": "notification-title",
+                  children: title
+                }
+              )
+            ] }),
+            formattedTimestamp && /* @__PURE__ */ jsx(
+              "time",
+              {
+                className: "text-muted-foreground shrink-0 text-2xs font-semibold",
+                "data-slot": "notification-timestamp",
+                dateTime: timestamp instanceof Date ? timestamp.toISOString() : void 0,
+                children: formattedTimestamp
+              }
+            )
+          ] }),
+          description && /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "text-muted-foreground mt-0.5 line-clamp-2 text-xs",
+              "data-slot": "notification-description",
+              children: description
+            }
+          ),
+          actions && /* @__PURE__ */ jsx("div", { className: "mt-2", "data-slot": "notification-actions", children: actions })
+        ] }),
+        showActions && !actions && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: "flex shrink-0 items-center gap-1",
+            "data-slot": "notification-action-buttons",
+            children: [
+              onMarkAsRead && !read && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": "Mark as read",
+                  className: "text-muted-foreground hover:text-foreground hover:bg-accent rounded-md p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "data-slot": "notification-mark-read",
+                  type: "button",
+                  onClick: handleMarkAsRead,
+                  children: /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "size-4" })
+                }
+              ),
+              onDelete && /* @__PURE__ */ jsx(
+                "button",
+                {
+                  "aria-label": "Delete notification",
+                  className: "text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-md p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  "data-slot": "notification-delete",
+                  type: "button",
+                  onClick: handleDelete,
+                  children: /* @__PURE__ */ jsx(Trash2, { "aria-hidden": "true", className: "size-4" })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function NotificationDismissButton({
+  className,
+  onClick,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        "text-muted-foreground hover:text-foreground rounded-md p-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      ),
+      "aria-label": "Dismiss",
+      "data-slot": "notification-dismiss",
+      type: "button",
+      onClick,
+      ...props,
+      children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true", className: "size-4" })
+    }
+  );
+}
+
+export { Notification, NotificationDismissButton, notificationVariants, unreadDotVariants };
+//# sourceMappingURL=chunk-U2CXFKRK.js.map
+//# sourceMappingURL=chunk-U2CXFKRK.js.map

package/dist/chunk-U2CXFKRK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/feedback/Notification/Notification.variants.ts","../src/components/feedback/Notification/Notification.tsx"],"names":[],"mappings":"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","file":"chunk-U2CXFKRK.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\n/**\n * Notification variant styles using CVA\n * Individual notification items for lists, dropdowns, or feeds\n */\nexport const notificationVariants = cva(\n  \"relative flex gap-[var(--notification-root-gap)] p-[var(--notification-root-padding)] transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"\",\n        info: \"\",\n        success: \"\",\n        warning: \"\",\n        error: \"\",\n      },\n      read: {\n        true: \"bg-[color:var(--notification-bg-read)]\",\n        false: \"bg-[color:var(--notification-bg-unread)]\",\n      },\n      interactive: {\n        true: \"cursor-pointer hover:bg-[color:var(--notification-bg-hover)] focus-visible:bg-[color:var(--notification-bg-hover)] focus-visible:outline-none\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      read: false,\n      interactive: false,\n    },\n  }\n)\n\n/**\n * Unread indicator dot styles\n */\nexport const unreadDotVariants = cva(\n  \"shrink-0 size-[var(--notification-dot-size)] rounded-full\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-[color:var(--notification-dot-color-default)]\",\n        info: \"bg-[color:var(--notification-dot-color-info)]\",\n        success: \"bg-[color:var(--notification-dot-color-success)]\",\n        warning: \"bg-[color:var(--notification-dot-color-warning)]\",\n        error: \"bg-[color:var(--notification-dot-color-error)]\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n","import type { NotificationProps, NotificationVariant } from \"./Notification.types\"\n\nimport { Check, Trash2, X } from \"lucide-react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Avatar, AvatarFallback, AvatarImage } from \"../../primitives/Avatar\"\nimport { notificationVariants, unreadDotVariants } from \"./Notification.variants\"\n\n/**\n * Format a timestamp into a relative or absolute string\n */\nfunction formatTimestamp(timestamp: Date | string | undefined): string {\n  if (!timestamp) return \"\"\n  if (typeof timestamp === \"string\") return timestamp\n  return timestamp.toLocaleString()\n}\n\n/**\n * Notification component for individual notification items\n *\n * Used in lists, dropdowns, or feeds. Unlike Toast which is temporary\n * and global, Notification is persistent and associated with the user.\n *\n * @example\n * ```tsx\n * <Notification\n *   title=\"Nova mensagem\"\n *   description=\"Voce recebeu uma nova mensagem de Maria.\"\n *   timestamp=\"5 min atras\"\n * />\n * ```\n */\nfunction Notification({\n  className,\n  variant = \"default\",\n  title,\n  description,\n  timestamp,\n  read = false,\n  icon,\n  avatar,\n  avatarSrc,\n  avatarFallback,\n  onClick,\n  onMarkAsRead,\n  onDelete,\n  actions,\n  ...props\n}: NotificationProps) {\n  const isInteractive = Boolean(onClick)\n  const formattedTimestamp = formatTimestamp(timestamp)\n  const showAvatar = Boolean(avatar ?? avatarSrc ?? avatarFallback)\n  const showActions = Boolean(onMarkAsRead ?? onDelete ?? actions)\n\n  const handleClick = () => {\n    if (onClick) {\n      onClick()\n    }\n  }\n\n  const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n    if (isInteractive && (event.key === \"Enter\" || event.key === \" \")) {\n      event.preventDefault()\n      onClick?.()\n    }\n    if (event.key === \"Delete\" && onDelete) {\n      event.preventDefault()\n      onDelete()\n    }\n  }\n\n  const handleMarkAsRead = (event: React.MouseEvent) => {\n    event.stopPropagation()\n    onMarkAsRead?.()\n  }\n\n  const handleDelete = (event: React.MouseEvent) => {\n    event.stopPropagation()\n    onDelete?.()\n  }\n\n  return (\n    <article\n      className={cn(\n        notificationVariants({ variant, read, interactive: isInteractive }),\n        className\n      )}\n      aria-label={`${read ? \"\" : \"Unread: \"}${title}${description ? `. ${description}` : \"\"}${formattedTimestamp ? `. ${formattedTimestamp}` : \"\"}`}\n      data-slot=\"notification\"\n      data-unread={!read}\n      data-variant={variant}\n      role=\"article\"\n      tabIndex={isInteractive ? 0 : undefined}\n      onClick={isInteractive ? handleClick : undefined}\n      onKeyDown={handleKeyDown}\n      {...props}\n    >\n      {/* Icon or Avatar */}\n      <div className=\"flex-shrink-0\" data-slot=\"notification-media\">\n        {icon ? (\n          <div\n            aria-hidden=\"true\"\n            className=\"flex size-10 items-center justify-center\"\n          >\n            {icon}\n          </div>\n        ) : showAvatar ? (\n          avatar ?? (\n            <Avatar size=\"sm\">\n              {avatarSrc && (\n                <AvatarImage alt=\"\" src={avatarSrc} />\n              )}\n              <AvatarFallback>{avatarFallback}</AvatarFallback>\n            </Avatar>\n          )\n        ) : null}\n      </div>\n\n      {/* Content */}\n      <div className=\"min-w-0 flex-1\" data-slot=\"notification-content\">\n        <div className=\"flex items-start justify-between gap-2\">\n          <div className=\"flex min-w-0 items-center gap-[var(--notification-dot-gap)]\">\n            {!read && (\n              <span\n                aria-hidden=\"true\"\n                className={cn(unreadDotVariants({ variant }))}\n                data-slot=\"notification-unread-dot\"\n              />\n            )}\n            <p\n              className=\"text-foreground line-clamp-2 min-w-0 text-sm font-medium\"\n              data-slot=\"notification-title\"\n            >\n              {title}\n            </p>\n          </div>\n          {formattedTimestamp && (\n            <time\n              className=\"text-muted-foreground shrink-0 text-2xs font-semibold\"\n              data-slot=\"notification-timestamp\"\n              dateTime={timestamp instanceof Date ? timestamp.toISOString() : undefined}\n            >\n              {formattedTimestamp}\n            </time>\n          )}\n        </div>\n        {description && (\n          <p\n            className=\"text-muted-foreground mt-0.5 line-clamp-2 text-xs\"\n            data-slot=\"notification-description\"\n          >\n            {description}\n          </p>\n        )}\n        {actions && (\n          <div className=\"mt-2\" data-slot=\"notification-actions\">\n            {actions}\n          </div>\n        )}\n      </div>\n\n      {/* Built-in action buttons */}\n      {showActions && !actions && (\n        <div\n          className=\"flex shrink-0 items-center gap-1\"\n          data-slot=\"notification-action-buttons\"\n        >\n          {onMarkAsRead && !read && (\n            <button\n              aria-label=\"Mark as read\"\n              className=\"text-muted-foreground hover:text-foreground hover:bg-accent rounded-md p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n              data-slot=\"notification-mark-read\"\n              type=\"button\"\n              onClick={handleMarkAsRead}\n            >\n              <Check aria-hidden=\"true\" className=\"size-4\" />\n            </button>\n          )}\n          {onDelete && (\n            <button\n              aria-label=\"Delete notification\"\n              className=\"text-muted-foreground hover:text-destructive hover:bg-destructive/10 rounded-md p-1.5 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\"\n              data-slot=\"notification-delete\"\n              type=\"button\"\n              onClick={handleDelete}\n            >\n              <Trash2 aria-hidden=\"true\" className=\"size-4\" />\n            </button>\n          )}\n        </div>\n      )}\n    </article>\n  )\n}\n\n/**\n * NotificationDismissButton for use within custom actions\n */\nfunction NotificationDismissButton({\n  className,\n  onClick,\n  ...props\n}: React.ComponentPropsWithoutRef<\"button\">) {\n  return (\n    <button\n      className={cn(\n        \"text-muted-foreground hover:text-foreground rounded-md p-1 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n        className\n      )}\n      aria-label=\"Dismiss\"\n      data-slot=\"notification-dismiss\"\n      type=\"button\"\n      onClick={onClick}\n      {...props}\n    >\n      <X aria-hidden=\"true\" className=\"size-4\" />\n    </button>\n  )\n}\n\nexport { Notification, NotificationDismissButton, notificationVariants, unreadDotVariants }\nexport type { NotificationProps, NotificationVariant }\n"]}

package/dist/chunk-U2R47SPY.js

@@ -0,0 +1,101 @@
+import { Field, FieldLabel, FieldError, FieldDescription } from './chunk-G7PBPX3K.js';
+import { Textarea } from './chunk-U6EOAIPK.js';
+import { useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+
+function TextareaField({
+  label,
+  description,
+  errorMessage,
+  required,
+  id: providedId,
+  ...textareaProps
+}) {
+  const generatedId = useId();
+  const id = providedId ?? generatedId;
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const hasError = !!errorMessage;
+  return /* @__PURE__ */ jsxs(Field, { children: [
+    label && /* @__PURE__ */ jsxs(FieldLabel, { htmlFor: id, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-destructive ml-1", children: "*" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        "aria-describedby": hasError ? errorId : description ? descriptionId : void 0,
+        "aria-invalid": hasError || void 0,
+        "aria-required": required ?? void 0,
+        id,
+        ...textareaProps
+      }
+    ),
+    hasError ? /* @__PURE__ */ jsx(FieldError, { id: errorId, children: errorMessage }) : description ? /* @__PURE__ */ jsx(FieldDescription, { id: descriptionId, children: description }) : null
+  ] });
+}
+var textareaFieldVariants = cva(
+  "flex flex-col gap-2",
+  {
+    variants: {
+      size: {
+        sm: "gap-1.5",
+        md: "gap-2",
+        lg: "gap-2.5"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var textareaFieldLabelVariants = cva(
+  "font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var textareaFieldDescriptionVariants = cva(
+  "text-muted-foreground",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var textareaFieldErrorVariants = cva(
+  "text-destructive font-medium",
+  {
+    variants: {
+      size: {
+        sm: "text-xs",
+        md: "text-sm",
+        lg: "text-sm"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+
+export { TextareaField, textareaFieldDescriptionVariants, textareaFieldErrorVariants, textareaFieldLabelVariants, textareaFieldVariants };
+//# sourceMappingURL=chunk-U2R47SPY.js.map
+//# sourceMappingURL=chunk-U2R47SPY.js.map

package/dist/chunk-U2R47SPY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/forms/TextareaField/TextareaField.tsx","../src/components/forms/TextareaField/TextareaField.variants.ts"],"names":[],"mappings":";;;;;;AA2BA,SAAS,aAAA,CAAc;AAAA,EACrB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,QAAA;AAAA,EACA,EAAA,EAAI,UAAA;AAAA,EACJ,GAAG;AACL,CAAA,EAAuB;AACrB,EAAA,MAAM,cAAc,KAAA,EAAM;AAC1B,EAAA,MAAM,KAAK,UAAA,IAAc,WAAA;AACzB,EAAA,MAAM,aAAA,GAAgB,GAAG,EAAE,CAAA,YAAA,CAAA;AAC3B,EAAA,MAAM,OAAA,GAAU,GAAG,EAAE,CAAA,MAAA,CAAA;AAErB,EAAA,MAAM,QAAA,GAAW,CAAC,CAAC,YAAA;AAEnB,EAAA,4BACG,KAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,KAAA,oBACC,IAAA,CAAC,UAAA,EAAA,EAAW,OAAA,EAAS,EAAA,EAClB,QAAA,EAAA;AAAA,MAAA,KAAA;AAAA,MACA,4BACC,GAAA,CAAC,MAAA,EAAA,EAAK,eAAY,MAAA,EAAO,SAAA,EAAU,yBAAwB,QAAA,EAAA,GAAA,EAE3D;AAAA,KAAA,EAEJ,CAAA;AAAA,oBAEF,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,kBAAA,EACE,QAAA,GAAW,OAAA,GAAW,WAAA,GAAc,aAAA,GAAgB,MAAA;AAAA,QAEtD,gBAAc,QAAA,IAAY,MAAA;AAAA,QAC1B,iBAAe,QAAA,IAAY,MAAA;AAAA,QAC3B,EAAA;AAAA,QACC,GAAG;AAAA;AAAA,KACN;AAAA,IACC,QAAA,mBACC,GAAA,CAAC,UAAA,EAAA,EAAW,EAAA,EAAI,OAAA,EAAU,QAAA,EAAA,YAAA,EAAa,CAAA,GACrC,WAAA,mBACF,GAAA,CAAC,gBAAA,EAAA,EAAiB,EAAA,EAAI,aAAA,EAAgB,uBAAY,CAAA,GAChD;AAAA,GAAA,EACN,CAAA;AAEJ;AChEO,IAAM,qBAAA,GAAwB,GAAA;AAAA,EACnC,qBAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,OAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAKO,IAAM,0BAAA,GAA6B,GAAA;AAAA,EACxC,oFAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAKO,IAAM,gCAAA,GAAmC,GAAA;AAAA,EAC9C,uBAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAKO,IAAM,0BAAA,GAA6B,GAAA;AAAA,EACxC,8BAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI,SAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ","file":"chunk-U2R47SPY.js","sourcesContent":["\"use client\"\n\nimport type { TextareaFieldProps } from \"./TextareaField.types\"\n\nimport { useId } from \"react\"\n\nimport { Field, FieldDescription, FieldError, FieldLabel } from \"../Field\"\nimport { Textarea } from \"../Textarea\"\n\n/**\n * TextareaField - A complete form field combining Textarea with label, description, and error handling\n *\n * @example\n * ```tsx\n * <TextareaField\n *   label=\"Description\"\n *   description=\"Enter a detailed description\"\n *   placeholder=\"Type here...\"\n * />\n *\n * <TextareaField\n *   label=\"Comments\"\n *   errorMessage=\"This field is required\"\n *   required\n * />\n * ```\n */\nfunction TextareaField({\n  label,\n  description,\n  errorMessage,\n  required,\n  id: providedId,\n  ...textareaProps\n}: TextareaFieldProps) {\n  const generatedId = useId()\n  const id = providedId ?? generatedId\n  const descriptionId = `${id}-description`\n  const errorId = `${id}-error`\n\n  const hasError = !!errorMessage\n\n  return (\n    <Field>\n      {label && (\n        <FieldLabel htmlFor={id}>\n          {label}\n          {required && (\n            <span aria-hidden=\"true\" className=\"text-destructive ml-1\">\n              *\n            </span>\n          )}\n        </FieldLabel>\n      )}\n      <Textarea\n        aria-describedby={\n          hasError ? errorId : (description ? descriptionId : undefined)\n        }\n        aria-invalid={hasError || undefined}\n        aria-required={required ?? undefined}\n        id={id}\n        {...textareaProps}\n      />\n      {hasError ? (\n        <FieldError id={errorId}>{errorMessage}</FieldError>\n      ) : description ? (\n        <FieldDescription id={descriptionId}>{description}</FieldDescription>\n      ) : null}\n    </Field>\n  )\n}\n\nexport { TextareaField }\n","import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * TextareaField container variant styles using CVA\n * Wraps the Field + Textarea combination with consistent spacing\n */\nexport const textareaFieldVariants = cva(\n  \"flex flex-col gap-2\",\n  {\n    variants: {\n      size: {\n        sm: \"gap-1.5\",\n        md: \"gap-2\",\n        lg: \"gap-2.5\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * TextareaField label variant styles using CVA\n */\nexport const textareaFieldLabelVariants = cva(\n  \"font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n        lg: \"text-base\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * TextareaField description variant styles using CVA\n */\nexport const textareaFieldDescriptionVariants = cva(\n  \"text-muted-foreground\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n        lg: \"text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\n/**\n * TextareaField error variant styles using CVA\n */\nexport const textareaFieldErrorVariants = cva(\n  \"text-destructive font-medium\",\n  {\n    variants: {\n      size: {\n        sm: \"text-xs\",\n        md: \"text-sm\",\n        lg: \"text-sm\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport type TextareaFieldVariantProps = VariantProps<typeof textareaFieldVariants>\nexport type TextareaFieldLabelVariantProps = VariantProps<typeof textareaFieldLabelVariants>\nexport type TextareaFieldDescriptionVariantProps = VariantProps<typeof textareaFieldDescriptionVariants>\nexport type TextareaFieldErrorVariantProps = VariantProps<typeof textareaFieldErrorVariants>\n"]}

package/dist/chunk-U4H3XHSI.js

@@ -0,0 +1,305 @@
+import { Tooltip, TooltipTrigger, TooltipContent } from './chunk-7ZJ32KRQ.js';
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+var PROGRESS_CIRCLE_SIZES = {
+  xxs: { diameter: 64, strokeWidth: 4, fontSize: "text-sm", labelSize: "text-xs" },
+  xs: { diameter: 160, strokeWidth: 8, fontSize: "text-2xl", labelSize: "text-sm" },
+  sm: { diameter: 200, strokeWidth: 10, fontSize: "text-3xl", labelSize: "text-sm" },
+  md: { diameter: 240, strokeWidth: 12, fontSize: "text-4xl", labelSize: "text-base" },
+  lg: { diameter: 280, strokeWidth: 14, fontSize: "text-5xl", labelSize: "text-base" }
+};
+var progressCircleContainerVariants = cva(
+  "relative inline-flex items-center justify-center",
+  {
+    variants: {
+      size: {
+        xxs: "w-[var(--progress-circle-size-xxs-diameter)] h-[var(--progress-circle-size-xxs-diameter)]",
+        xs: "w-[var(--progress-circle-size-xs-diameter)] h-[var(--progress-circle-size-xs-diameter)]",
+        sm: "w-[var(--progress-circle-size-sm-diameter)] h-[var(--progress-circle-size-sm-diameter)]",
+        md: "w-[var(--progress-circle-size-md-diameter)] h-[var(--progress-circle-size-md-diameter)]",
+        lg: "w-[var(--progress-circle-size-lg-diameter)] h-[var(--progress-circle-size-lg-diameter)]"
+      },
+      shape: {
+        circle: "",
+        "half-circle": "!h-auto"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      shape: "circle"
+    }
+  }
+);
+var progressCircleTrackVariants = cva(
+  "transition-colors",
+  {
+    variants: {
+      color: {
+        default: "stroke-[color:var(--progress-circle-track-color-default)]",
+        primary: "stroke-[color:var(--progress-circle-track-color-primary)]",
+        success: "stroke-[color:var(--progress-circle-track-color-success)]",
+        warning: "stroke-[color:var(--progress-circle-track-color-warning)]",
+        error: "stroke-[color:var(--progress-circle-track-color-error)]"
+      }
+    },
+    defaultVariants: {
+      color: "default"
+    }
+  }
+);
+var progressCircleIndicatorVariants = cva(
+  "transition-all duration-700 ease-out motion-reduce:transition-none",
+  {
+    variants: {
+      color: {
+        default: "stroke-[color:var(--progress-circle-indicator-color-default)]",
+        primary: "stroke-[color:var(--progress-circle-indicator-color-primary)]",
+        success: "stroke-[color:var(--progress-circle-indicator-color-success)]",
+        warning: "stroke-[color:var(--progress-circle-indicator-color-warning)]",
+        error: "stroke-[color:var(--progress-circle-indicator-color-error)]"
+      },
+      indeterminate: {
+        true: "animate-spin origin-center",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      color: "default",
+      indeterminate: false
+    }
+  }
+);
+var progressCircleValueVariants = cva(
+  "font-[var(--progress-circle-value-font-weight)] tabular-nums text-[color:var(--progress-circle-value-color)]",
+  {
+    variants: {
+      size: {
+        xxs: "text-sm",
+        xs: "text-2xl",
+        sm: "text-3xl",
+        md: "text-4xl",
+        lg: "text-5xl"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var progressCircleLabelVariants = cva(
+  "text-[color:var(--progress-circle-label-color)]",
+  {
+    variants: {
+      size: {
+        xxs: "text-xs",
+        xs: "text-sm",
+        sm: "text-sm",
+        md: "text-base",
+        lg: "text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var defaultFormatValue = (value) => `${String(value)}%`;
+function ProgressCircle({
+  value = 0,
+  max = 100,
+  indeterminate = false,
+  size = "md",
+  shape = "circle",
+  color = "default",
+  label,
+  formatValue = defaultFormatValue,
+  showValue = true,
+  radius: customRadius,
+  strokeWidth: customStrokeWidth,
+  className,
+  animate = true,
+  tooltip,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledby
+}) {
+  const clampedRawValue = Math.min(max, Math.max(0, value));
+  const clampedValue = clampedRawValue / max * 100;
+  const [isVisible, setIsVisible] = React.useState(!animate || indeterminate);
+  const containerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!animate || indeterminate || isVisible) {
+      return;
+    }
+    const element = containerRef.current;
+    if (!element) {
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+        if (entry?.isIntersecting) {
+          requestAnimationFrame(() => {
+            setIsVisible(true);
+          });
+          observer.disconnect();
+        }
+      },
+      { threshold: 0.1 }
+    );
+    observer.observe(element);
+    return () => {
+      observer.disconnect();
+    };
+  }, [animate, indeterminate, isVisible]);
+  const sizeConfig = PROGRESS_CIRCLE_SIZES[size];
+  const strokeWidth = customStrokeWidth ?? sizeConfig.strokeWidth;
+  const diameter = customRadius ? customRadius * 2 + strokeWidth : sizeConfig.diameter;
+  const radius = (diameter - strokeWidth) / 2;
+  const center = diameter / 2;
+  const isHalfCircle = shape === "half-circle";
+  const circumference = isHalfCircle ? Math.PI * radius : 2 * Math.PI * radius;
+  const displayValue = indeterminate ? 25 : isVisible ? clampedValue : 0;
+  const progressOffset = circumference - displayValue / 100 * circumference;
+  const viewBoxHeight = isHalfCircle ? diameter / 2 + strokeWidth : diameter;
+  const getPath = () => {
+    if (isHalfCircle) {
+      const startX = strokeWidth / 2;
+      const startY = center;
+      const endX = diameter - strokeWidth / 2;
+      const endY = center;
+      return `M ${String(startX)} ${String(startY)} A ${String(radius)} ${String(radius)} 0 0 1 ${String(endX)} ${String(endY)}`;
+    }
+    return;
+  };
+  const formattedValue = formatValue(clampedRawValue);
+  const progressCircleElement = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        progressCircleContainerVariants({ size, shape }),
+        className
+      ),
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      "aria-valuemax": max,
+      "aria-valuemin": 0,
+      "aria-valuenow": indeterminate ? void 0 : clampedRawValue,
+      "data-indeterminate": indeterminate || void 0,
+      "data-slot": "progress-circle",
+      role: "progressbar",
+      children: [
+        /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: isHalfCircle ? "rotate-0" : "",
+            "data-slot": "progress-circle-svg",
+            height: viewBoxHeight,
+            viewBox: `0 0 ${String(diameter)} ${String(viewBoxHeight)}`,
+            width: diameter,
+            children: isHalfCircle ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: cn(progressCircleTrackVariants({ color })),
+                  d: getPath(),
+                  "data-slot": "progress-circle-track",
+                  fill: "none",
+                  strokeLinecap: "round",
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: cn(progressCircleIndicatorVariants({ color })),
+                  d: getPath(),
+                  "data-slot": "progress-circle-indicator",
+                  fill: "none",
+                  strokeDasharray: circumference,
+                  strokeDashoffset: progressOffset,
+                  strokeLinecap: "round",
+                  strokeWidth
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  className: cn(progressCircleTrackVariants({ color })),
+                  cx: center,
+                  cy: center,
+                  "data-slot": "progress-circle-track",
+                  fill: "none",
+                  r: radius,
+                  strokeWidth
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  style: {
+                    transform: indeterminate ? void 0 : "rotate(-90deg)",
+                    transformOrigin: "center"
+                  },
+                  className: cn(progressCircleIndicatorVariants({ color, indeterminate })),
+                  cx: center,
+                  cy: center,
+                  "data-slot": "progress-circle-indicator",
+                  fill: "none",
+                  r: radius,
+                  strokeDasharray: circumference,
+                  strokeDashoffset: progressOffset,
+                  strokeLinecap: "round",
+                  strokeWidth
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "absolute flex flex-col items-center justify-center",
+              isHalfCircle && "bottom-0"
+            ),
+            "data-slot": "progress-circle-content",
+            children: [
+              showValue && !indeterminate && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(progressCircleValueVariants({ size })),
+                  "data-slot": "progress-circle-value",
+                  children: formattedValue
+                }
+              ),
+              label && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(progressCircleLabelVariants({ size })),
+                  "data-slot": "progress-circle-label",
+                  children: label
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: progressCircleElement }),
+      /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+    ] });
+  }
+  return progressCircleElement;
+}
+
+export { PROGRESS_CIRCLE_SIZES, ProgressCircle, progressCircleContainerVariants, progressCircleIndicatorVariants, progressCircleLabelVariants, progressCircleTrackVariants, progressCircleValueVariants };
+//# sourceMappingURL=chunk-U4H3XHSI.js.map
+//# sourceMappingURL=chunk-U4H3XHSI.js.map