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

package/dist/chunk-FDES5YDF.js

@@ -0,0 +1,159 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var barListVariants = cva(
+  "flex flex-col gap-2",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var barListItemVariants = cva(
+  "relative flex items-center",
+  {
+    variants: {
+      clickable: {
+        true: "cursor-pointer",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      clickable: false
+    }
+  }
+);
+var barListBarVariants = cva(
+  "absolute left-0 h-full rounded-[var(--radius-sm)] transition-all duration-300",
+  {
+    variants: {
+      animated: {
+        true: "",
+        false: "!transition-none"
+      }
+    },
+    defaultVariants: {
+      animated: true
+    }
+  }
+);
+var barListContentVariants = cva(
+  "relative z-10 flex w-full items-center justify-between gap-2 px-2 py-1.5",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var barListNameVariants = cva(
+  "flex items-center gap-2 truncate text-sm font-medium",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var barListValueVariants = cva(
+  "text-sm tabular-nums text-muted-foreground",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+function defaultValueFormatter(value) {
+  return value.toLocaleString();
+}
+function sortData(data, order) {
+  if (order === "none") return data;
+  return [...data].sort(
+    (a, b) => order === "ascending" ? a.value - b.value : b.value - a.value
+  );
+}
+function BarList({
+  className,
+  color = "var(--primary)",
+  data,
+  onClick,
+  showAnimation = true,
+  sortOrder = "descending",
+  valueFormatter = defaultValueFormatter,
+  ...props
+}) {
+  const sortedData = React.useMemo(
+    () => sortData(data, sortOrder),
+    [data, sortOrder]
+  );
+  const maxValue = React.useMemo(
+    () => Math.max(...sortedData.map((d) => d.value), 0),
+    [sortedData]
+  );
+  const isClickable = Boolean(onClick);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(barListVariants(), className),
+      "data-slot": "bar-list",
+      ...props,
+      children: sortedData.map((item, index) => {
+        const percentage = maxValue > 0 ? item.value / maxValue * 100 : 0;
+        const barColor = item.color ?? color;
+        const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                backgroundColor: barColor,
+                opacity: 0.15,
+                width: `${String(percentage)}%`
+              },
+              className: cn(barListBarVariants({ animated: showAnimation }))
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: barListContentVariants(), children: [
+            /* @__PURE__ */ jsxs("span", { className: barListNameVariants(), children: [
+              item.icon,
+              item.href ? /* @__PURE__ */ jsx(
+                "a",
+                {
+                  className: "hover:underline focus:outline-none focus:underline",
+                  href: item.href,
+                  rel: item.target === "_blank" ? "noopener noreferrer" : void 0,
+                  target: item.target,
+                  onClick: (e) => {
+                    if (onClick) {
+                      e.preventDefault();
+                      onClick(item, index);
+                    }
+                  },
+                  children: item.name
+                }
+              ) : item.name
+            ] }),
+            /* @__PURE__ */ jsx("span", { className: barListValueVariants(), children: valueFormatter(item.value) })
+          ] })
+        ] });
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(barListItemVariants({ clickable: isClickable && !item.href })),
+            role: isClickable && !item.href ? "button" : void 0,
+            tabIndex: isClickable && !item.href ? 0 : void 0,
+            onClick: isClickable && !item.href ? () => onClick?.(item, index) : void 0,
+            onKeyDown: isClickable && !item.href ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                onClick?.(item, index);
+              }
+            } : void 0,
+            children: content
+          },
+          item.name
+        );
+      })
+    }
+  );
+}
+BarList.displayName = "BarList";
+
+export { BarList };
+//# sourceMappingURL=chunk-FDES5YDF.js.map
+//# sourceMappingURL=chunk-FDES5YDF.js.map

package/dist/chunk-FDES5YDF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/BarList/BarList.variants.ts","../src/components/data-display/BarList/BarList.tsx"],"names":[],"mappings":"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","file":"chunk-FDES5YDF.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\nexport const barListVariants = cva(\n  \"flex flex-col gap-2\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const barListItemVariants = cva(\n  \"relative flex items-center\",\n  {\n    variants: {\n      clickable: {\n        true: \"cursor-pointer\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      clickable: false,\n    },\n  }\n)\n\nexport const barListBarVariants = cva(\n  \"absolute left-0 h-full rounded-[var(--radius-sm)] transition-all duration-300\",\n  {\n    variants: {\n      animated: {\n        true: \"\",\n        false: \"!transition-none\",\n      },\n    },\n    defaultVariants: {\n      animated: true,\n    },\n  }\n)\n\nexport const barListContentVariants = cva(\n  \"relative z-10 flex w-full items-center justify-between gap-2 px-2 py-1.5\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const barListNameVariants = cva(\n  \"flex items-center gap-2 truncate text-sm font-medium\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n\nexport const barListValueVariants = cva(\n  \"text-sm tabular-nums text-muted-foreground\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n","\"use client\"\n\nimport type { BarListDataItem, BarListProps } from \"./BarList.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport {\n  barListBarVariants,\n  barListContentVariants,\n  barListItemVariants,\n  barListNameVariants,\n  barListValueVariants,\n  barListVariants,\n} from \"./BarList.variants\"\n\n/**\n * Default value formatter\n */\nfunction defaultValueFormatter(value: number): string {\n  return value.toLocaleString()\n}\n\n/**\n * Sort data by value\n */\nfunction sortData(\n  data: BarListDataItem[],\n  order: BarListProps[\"sortOrder\"]\n): BarListDataItem[] {\n  if (order === \"none\") return data\n\n  return [...data].sort((a, b) =>\n    order === \"ascending\" ? a.value - b.value : b.value - a.value\n  )\n}\n\n/**\n * BarList - Horizontal bar list for ranked data\n *\n * Displays items as horizontal bars proportional to their values.\n * Commonly used for top items, rankings, category breakdowns, etc.\n *\n * @example\n * ```tsx\n * const data = [\n *   { name: \"Twitter\", value: 456 },\n *   { name: \"Google\", value: 351 },\n *   { name: \"GitHub\", value: 271 },\n * ]\n *\n * <BarList data={data} />\n * ```\n *\n * @example\n * ```tsx\n * // With custom colors and click handler\n * const data = [\n *   { name: \"Direct\", value: 456, color: \"var(--chart-1)\" },\n *   { name: \"Organic\", value: 351, color: \"var(--chart-2)\" },\n * ]\n *\n * <BarList\n *   data={data}\n *   onClick={(item) => console.log(item.name)}\n *   valueFormatter={(v) => `${v} visits`}\n * />\n * ```\n */\nexport function BarList({\n  className,\n  color = \"var(--primary)\",\n  data,\n  onClick,\n  showAnimation = true,\n  sortOrder = \"descending\",\n  valueFormatter = defaultValueFormatter,\n  ...props\n}: BarListProps) {\n  const sortedData = React.useMemo(\n    () => sortData(data, sortOrder),\n    [data, sortOrder]\n  )\n\n  // Calculate max value for bar widths\n  const maxValue = React.useMemo(\n    () => Math.max(...sortedData.map((d) => d.value), 0),\n    [sortedData]\n  )\n\n  const isClickable = Boolean(onClick)\n\n  return (\n    <div\n      className={cn(barListVariants(), className)}\n      data-slot=\"bar-list\"\n      {...props}\n    >\n      {sortedData.map((item, index) => {\n        const percentage = maxValue > 0 ? (item.value / maxValue) * 100 : 0\n        const barColor = item.color ?? color\n\n        const content = (\n          <>\n            <div\n              style={{\n                backgroundColor: barColor,\n                opacity: 0.15,\n                width: `${String(percentage)}%`,\n              }}\n              className={cn(barListBarVariants({ animated: showAnimation }))}\n            />\n            <div className={barListContentVariants()}>\n              <span className={barListNameVariants()}>\n                {item.icon}\n                {item.href ? (\n                  <a\n                    className=\"hover:underline focus:outline-none focus:underline\"\n                    href={item.href}\n                    rel={item.target === \"_blank\" ? \"noopener noreferrer\" : undefined}\n                    target={item.target}\n                    onClick={(e) => {\n                      if (onClick) {\n                        e.preventDefault()\n                        onClick(item, index)\n                      }\n                    }}\n                  >\n                    {item.name}\n                  </a>\n                ) : (\n                  item.name\n                )}\n              </span>\n              <span className={barListValueVariants()}>\n                {valueFormatter(item.value)}\n              </span>\n            </div>\n          </>\n        )\n\n        return (\n          <div\n            key={item.name}\n            className={cn(barListItemVariants({ clickable: isClickable && !item.href }))}\n            role={isClickable && !item.href ? \"button\" : undefined}\n            tabIndex={isClickable && !item.href ? 0 : undefined}\n            onClick={\n              isClickable && !item.href\n                ? () => onClick?.(item, index)\n                : undefined\n            }\n            onKeyDown={\n              isClickable && !item.href\n                ? (e) => {\n                    if (e.key === \"Enter\" || e.key === \" \") {\n                      e.preventDefault()\n                      onClick?.(item, index)\n                    }\n                  }\n                : undefined\n            }\n          >\n            {content}\n          </div>\n        )\n      })}\n    </div>\n  )\n}\n\nBarList.displayName = \"BarList\"\n"]}