@etus/ui 0.4.0-beta.1 → 0.4.0-beta.3

package/dist/chunk-VJITPUUS.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-VJITPUUS.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)]/50\",\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  \"absolute left-[var(--notification-dot-left)] top-[var(--notification-dot-top)] 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      {/* Unread indicator dot */}\n      {!read && (\n        <span\n          aria-hidden=\"true\"\n          className={cn(unreadDotVariants({ variant }))}\n          data-slot=\"notification-unread-dot\"\n        />\n      )}\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=\"default\">\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          <p\n            className=\"text-foreground line-clamp-2 text-sm font-medium\"\n            data-slot=\"notification-title\"\n          >\n            {title}\n          </p>\n          {formattedTimestamp && (\n            <time\n              className=\"text-muted-foreground shrink-0 text-xs\"\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-sm\"\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-VKDN66VL.js

@@ -0,0 +1,129 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var flexVariants = cva("", {
+  variants: {
+    /**
+     * Display type
+     * - flex: Block-level flex container
+     * - inline: Inline-level flex container
+     */
+    display: {
+      flex: "flex",
+      inline: "inline-flex"
+    },
+    /**
+     * Flex direction
+     * - row: Items in a row (default)
+     * - row-reverse: Items in reverse row order
+     * - col: Items in a column
+     * - col-reverse: Items in reverse column order
+     */
+    direction: {
+      row: "flex-row",
+      "row-reverse": "flex-row-reverse",
+      col: "flex-col",
+      "col-reverse": "flex-col-reverse"
+    },
+    /**
+     * Main axis alignment (justify-content)
+     * - start: Items at the start
+     * - center: Items at the center
+     * - end: Items at the end
+     * - between: Space between items
+     * - around: Space around items
+     * - evenly: Equal space distribution
+     */
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    },
+    /**
+     * Cross axis alignment (align-items)
+     * - start: Items at the start
+     * - center: Items at the center
+     * - end: Items at the end
+     * - baseline: Items aligned by baseline
+     * - stretch: Items stretched to fill
+     */
+    align: {
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      baseline: "items-baseline",
+      stretch: "items-stretch"
+    },
+    /**
+     * Flex wrap behavior
+     * - true/wrap: Allow wrapping
+     * - false/nowrap: No wrapping
+     * - wrap-reverse: Wrap in reverse
+     */
+    wrap: {
+      true: "flex-wrap",
+      false: "flex-nowrap",
+      wrap: "flex-wrap",
+      nowrap: "flex-nowrap",
+      "wrap-reverse": "flex-wrap-reverse"
+    },
+    /**
+     * Gap between items
+     */
+    gap: {
+      0: "gap-0",
+      1: "gap-1",
+      2: "gap-2",
+      3: "gap-3",
+      4: "gap-4",
+      6: "gap-6",
+      8: "gap-8"
+    }
+  },
+  defaultVariants: {
+    display: "flex",
+    direction: "row",
+    justify: "start",
+    align: "stretch",
+    wrap: false
+  }
+});
+function Flex({
+  as: Component = "div",
+  inline = false,
+  direction,
+  justify,
+  align,
+  wrap,
+  gap,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: cn(
+        flexVariants({
+          display: inline ? "inline" : "flex",
+          direction,
+          justify,
+          align,
+          wrap,
+          gap
+        }),
+        className
+      ),
+      "data-slot": "flex",
+      ...props
+    }
+  );
+}
+
+export { Flex, flexVariants };
+//# sourceMappingURL=chunk-VKDN66VL.js.map
+//# sourceMappingURL=chunk-VKDN66VL.js.map

package/dist/chunk-VKDN66VL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Flex/Flex.variants.ts","../src/components/layout/Flex/Flex.tsx"],"names":[],"mappings":";;;;;AAMO,IAAM,YAAA,GAAe,IAAI,EAAA,EAAI;AAAA,EAClC,QAAA,EAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMR,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,MAAA;AAAA,MACN,MAAA,EAAQ;AAAA,KACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,SAAA,EAAW;AAAA,MACT,GAAA,EAAK,UAAA;AAAA,MACL,aAAA,EAAe,kBAAA;AAAA,MACf,GAAA,EAAK,UAAA;AAAA,MACL,aAAA,EAAe;AAAA,KACjB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,OAAA,EAAS;AAAA,MACP,KAAA,EAAO,eAAA;AAAA,MACP,MAAA,EAAQ,gBAAA;AAAA,MACR,GAAA,EAAK,aAAA;AAAA,MACL,OAAA,EAAS,iBAAA;AAAA,MACT,MAAA,EAAQ,gBAAA;AAAA,MACR,MAAA,EAAQ;AAAA,KACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,KAAA,EAAO;AAAA,MACL,KAAA,EAAO,aAAA;AAAA,MACP,MAAA,EAAQ,cAAA;AAAA,MACR,GAAA,EAAK,WAAA;AAAA,MACL,QAAA,EAAU,gBAAA;AAAA,MACV,OAAA,EAAS;AAAA,KACX;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,IAAA,EAAM;AAAA,MACJ,IAAA,EAAM,WAAA;AAAA,MACN,KAAA,EAAO,aAAA;AAAA,MACP,IAAA,EAAM,WAAA;AAAA,MACN,MAAA,EAAQ,aAAA;AAAA,MACR,cAAA,EAAgB;AAAA,KAClB;AAAA;AAAA;AAAA;AAAA,IAIA,GAAA,EAAK;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG,OAAA;AAAA,MACH,CAAA,EAAG;AAAA;AACL,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,OAAA,EAAS,MAAA;AAAA,IACT,SAAA,EAAW,KAAA;AAAA,IACX,OAAA,EAAS,OAAA;AAAA,IACT,KAAA,EAAO,SAAA;AAAA,IACP,IAAA,EAAM;AAAA;AAEV,CAAC;AC1ED,SAAS,IAAA,CAAK;AAAA,EACZ,IAAI,SAAA,GAAY,KAAA;AAAA,EAChB,MAAA,GAAS,KAAA;AAAA,EACT,SAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAc;AACZ,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,YAAA,CAAa;AAAA,UACX,OAAA,EAAS,SAAS,QAAA,GAAW,MAAA;AAAA,UAC7B,SAAA;AAAA,UACA,OAAA;AAAA,UACA,KAAA;AAAA,UACA,IAAA;AAAA,UACA;AAAA,SACD,CAAA;AAAA,QACD;AAAA,OACF;AAAA,MACA,WAAA,EAAU,MAAA;AAAA,MACT,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-VKDN66VL.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Flex variant styles\n * Utility component for flexible box layouts\n */\nexport const flexVariants = cva(\"\", {\n  variants: {\n    /**\n     * Display type\n     * - flex: Block-level flex container\n     * - inline: Inline-level flex container\n     */\n    display: {\n      flex: \"flex\",\n      inline: \"inline-flex\",\n    },\n    /**\n     * Flex direction\n     * - row: Items in a row (default)\n     * - row-reverse: Items in reverse row order\n     * - col: Items in a column\n     * - col-reverse: Items in reverse column order\n     */\n    direction: {\n      row: \"flex-row\",\n      \"row-reverse\": \"flex-row-reverse\",\n      col: \"flex-col\",\n      \"col-reverse\": \"flex-col-reverse\",\n    },\n    /**\n     * Main axis alignment (justify-content)\n     * - start: Items at the start\n     * - center: Items at the center\n     * - end: Items at the end\n     * - between: Space between items\n     * - around: Space around items\n     * - evenly: Equal space distribution\n     */\n    justify: {\n      start: \"justify-start\",\n      center: \"justify-center\",\n      end: \"justify-end\",\n      between: \"justify-between\",\n      around: \"justify-around\",\n      evenly: \"justify-evenly\",\n    },\n    /**\n     * Cross axis alignment (align-items)\n     * - start: Items at the start\n     * - center: Items at the center\n     * - end: Items at the end\n     * - baseline: Items aligned by baseline\n     * - stretch: Items stretched to fill\n     */\n    align: {\n      start: \"items-start\",\n      center: \"items-center\",\n      end: \"items-end\",\n      baseline: \"items-baseline\",\n      stretch: \"items-stretch\",\n    },\n    /**\n     * Flex wrap behavior\n     * - true/wrap: Allow wrapping\n     * - false/nowrap: No wrapping\n     * - wrap-reverse: Wrap in reverse\n     */\n    wrap: {\n      true: \"flex-wrap\",\n      false: \"flex-nowrap\",\n      wrap: \"flex-wrap\",\n      nowrap: \"flex-nowrap\",\n      \"wrap-reverse\": \"flex-wrap-reverse\",\n    },\n    /**\n     * Gap between items\n     */\n    gap: {\n      0: \"gap-0\",\n      1: \"gap-1\",\n      2: \"gap-2\",\n      3: \"gap-3\",\n      4: \"gap-4\",\n      6: \"gap-6\",\n      8: \"gap-8\",\n    },\n  },\n  defaultVariants: {\n    display: \"flex\",\n    direction: \"row\",\n    justify: \"start\",\n    align: \"stretch\",\n    wrap: false,\n  },\n})\n\nexport type FlexVariantProps = VariantProps<typeof flexVariants>\n","import type { FlexProps } from \"./Flex.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { flexVariants } from \"./Flex.variants\"\n\n/**\n * Flex component for creating flexible box layouts\n *\n * A utility component that provides a declarative API for CSS Flexbox,\n * simplifying the creation of flexible and responsive layouts.\n *\n * @example\n * ```tsx\n * <Flex gap={4} justify=\"between\" align=\"center\">\n *   <div>Item 1</div>\n *   <div>Item 2</div>\n * </Flex>\n * ```\n */\nfunction Flex({\n  as: Component = \"div\",\n  inline = false,\n  direction,\n  justify,\n  align,\n  wrap,\n  gap,\n  className,\n  ...props\n}: FlexProps) {\n  return (\n    <Component\n      className={cn(\n        flexVariants({\n          display: inline ? \"inline\" : \"flex\",\n          direction,\n          justify,\n          align,\n          wrap,\n          gap,\n        }),\n        className\n      )}\n      data-slot=\"flex\"\n      {...props}\n    />\n  )\n}\n\nexport { Flex }\n"]}