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

package/dist/chunk-Q3JCNSPU.js

@@ -0,0 +1,91 @@
+import { TooltipProvider, Tooltip, TooltipTrigger, TooltipContent } from './chunk-TEVGCTUN.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var deltaBarContainerVariants = cva(
+  "relative flex w-full items-center rounded-full overflow-hidden bg-muted",
+  {
+    variants: {
+      size: {
+        sm: "h-1.5",
+        md: "h-2",
+        lg: "h-3"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+var deltaBarSegmentVariants = cva(
+  "absolute top-0 h-full transition-all duration-500",
+  {
+    variants: {
+      animated: {
+        true: "",
+        false: "!transition-none"
+      }
+    },
+    defaultVariants: {
+      animated: true
+    }
+  }
+);
+var deltaBarCenterLineVariants = cva(
+  "absolute top-0 h-full w-0.5 bg-background/50 left-1/2 -translate-x-1/2 z-10",
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+function DeltaBar({
+  className,
+  decreaseColor = "var(--destructive)",
+  increaseColor = "var(--success)",
+  isIncreasePositive = true,
+  showAnimation = true,
+  size = "md",
+  tooltip,
+  value,
+  ...props
+}) {
+  const clampedValue = Math.max(-100, Math.min(100, value));
+  const isIncrease = clampedValue >= 0;
+  const barWidth = Math.abs(clampedValue) / 2;
+  const barColor = isIncrease ? isIncreasePositive ? increaseColor : decreaseColor : isIncreasePositive ? decreaseColor : increaseColor;
+  const barElement = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(deltaBarContainerVariants({ size }), className),
+      "data-slot": "delta-bar",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: deltaBarCenterLineVariants() }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              backgroundColor: barColor,
+              left: isIncrease ? "50%" : void 0,
+              right: isIncrease ? void 0 : "50%",
+              width: `${String(barWidth)}%`
+            },
+            className: cn(deltaBarSegmentVariants({ animated: showAnimation }))
+          }
+        )
+      ]
+    }
+  );
+  if (!tooltip) return barElement;
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: barElement }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tooltip })
+  ] }) });
+}
+DeltaBar.displayName = "DeltaBar";
+
+export { DeltaBar };
+//# sourceMappingURL=chunk-Q3JCNSPU.js.map
+//# sourceMappingURL=chunk-Q3JCNSPU.js.map

package/dist/chunk-Q3JCNSPU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/DeltaBar/DeltaBar.variants.ts","../src/components/data-display/DeltaBar/DeltaBar.tsx"],"names":[],"mappings":";;;;;;AAEO,IAAM,yBAAA,GAA4B,GAAA;AAAA,EACvC,yEAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,OAAA;AAAA,QACJ,EAAA,EAAI,KAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ,CAAA;AAEO,IAAM,uBAAA,GAA0B,GAAA;AAAA,EACrC,mDAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,QAAA,EAAU;AAAA,QACR,IAAA,EAAM,EAAA;AAAA,QACN,KAAA,EAAO;AAAA;AACT,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,QAAA,EAAU;AAAA;AACZ;AAEJ,CAAA;AAEO,IAAM,0BAAA,GAA6B,GAAA;AAAA,EACxC,6EAAA;AAAA,EACA;AAAA,IACE,UAAU,EAAC;AAAA,IACX,iBAAiB;AAAC;AAEtB,CAAA;ACDO,SAAS,QAAA,CAAS;AAAA,EACvB,SAAA;AAAA,EACA,aAAA,GAAgB,oBAAA;AAAA,EAChB,aAAA,GAAgB,gBAAA;AAAA,EAChB,kBAAA,GAAqB,IAAA;AAAA,EACrB,aAAA,GAAgB,IAAA;AAAA,EAChB,IAAA,GAAO,IAAA;AAAA,EACP,OAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAEhB,EAAA,MAAM,YAAA,GAAe,KAAK,GAAA,CAAI,IAAA,EAAM,KAAK,GAAA,CAAI,GAAA,EAAK,KAAK,CAAC,CAAA;AAGxD,EAAA,MAAM,aAAa,YAAA,IAAgB,CAAA;AAGnC,EAAA,MAAM,QAAA,GAAW,IAAA,CAAK,GAAA,CAAI,YAAY,CAAA,GAAI,CAAA;AAG1C,EAAA,MAAM,WAAW,UAAA,GACZ,kBAAA,GAAqB,aAAA,GAAgB,aAAA,GACrC,qBAAqB,aAAA,GAAgB,aAAA;AAE1C,EAAA,MAAM,UAAA,mBACJ,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAW,EAAA,CAAG,yBAAA,CAA0B,EAAE,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MAC5D,WAAA,EAAU,WAAA;AAAA,MACT,GAAG,KAAA;AAAA,MAGJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,0BAAA,EAA2B,EAAG,CAAA;AAAA,wBAG9C,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO;AAAA,cACL,eAAA,EAAiB,QAAA;AAAA,cACjB,IAAA,EAAM,aAAa,KAAA,GAAQ,MAAA;AAAA,cAC3B,KAAA,EAAO,aAAa,MAAA,GAAY,KAAA;AAAA,cAChC,KAAA,EAAO,CAAA,EAAG,MAAA,CAAO,QAAQ,CAAC,CAAA,CAAA;AAAA,aAC5B;AAAA,YACA,WAAW,EAAA,CAAG,uBAAA,CAAwB,EAAE,QAAA,EAAU,aAAA,EAAe,CAAC;AAAA;AAAA;AACpE;AAAA;AAAA,GACF;AAGF,EAAA,IAAI,CAAC,SAAS,OAAO,UAAA;AAErB,EAAA,uBACE,GAAA,CAAC,eAAA,EAAA,EACC,QAAA,kBAAA,IAAA,CAAC,OAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,cAAA,EAAA,EAAe,OAAA,EAAO,IAAA,EACpB,QAAA,EAAA,UAAA,EACH,CAAA;AAAA,oBACA,GAAA,CAAC,kBAAgB,QAAA,EAAA,OAAA,EAAQ;AAAA,GAAA,EAC3B,CAAA,EACF,CAAA;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-Q3JCNSPU.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\nexport const deltaBarContainerVariants = cva(\n  \"relative flex w-full items-center rounded-full overflow-hidden bg-muted\",\n  {\n    variants: {\n      size: {\n        sm: \"h-1.5\",\n        md: \"h-2\",\n        lg: \"h-3\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nexport const deltaBarSegmentVariants = cva(\n  \"absolute top-0 h-full transition-all duration-500\",\n  {\n    variants: {\n      animated: {\n        true: \"\",\n        false: \"!transition-none\",\n      },\n    },\n    defaultVariants: {\n      animated: true,\n    },\n  }\n)\n\nexport const deltaBarCenterLineVariants = cva(\n  \"absolute top-0 h-full w-0.5 bg-background/50 left-1/2 -translate-x-1/2 z-10\",\n  {\n    variants: {},\n    defaultVariants: {},\n  }\n)\n","\"use client\"\n\nimport type { DeltaBarProps } from \"./DeltaBar.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from \"../../feedback/Tooltip\"\nimport {\n  deltaBarCenterLineVariants,\n  deltaBarContainerVariants,\n  deltaBarSegmentVariants,\n} from \"./DeltaBar.variants\"\n\n/**\n * DeltaBar - Visual indicator for change between values\n *\n * Displays a bar with positive values extending right and negative\n * values extending left from the center. Ideal for showing\n * growth/decline, profit/loss, or any bidirectional metric.\n *\n * @example\n * ```tsx\n * // Positive delta (shows green bar to the right)\n * <DeltaBar value={25} />\n *\n * // Negative delta (shows red bar to the left)\n * <DeltaBar value={-15} />\n *\n * // Custom colors and size\n * <DeltaBar\n *   value={50}\n *   size=\"lg\"\n *   increaseColor=\"var(--chart-1)\"\n *   decreaseColor=\"var(--chart-2)\"\n * />\n * ```\n */\nexport function DeltaBar({\n  className,\n  decreaseColor = \"var(--destructive)\",\n  increaseColor = \"var(--success)\",\n  isIncreasePositive = true,\n  showAnimation = true,\n  size = \"md\",\n  tooltip,\n  value,\n  ...props\n}: DeltaBarProps) {\n  // Clamp value between -100 and 100\n  const clampedValue = Math.max(-100, Math.min(100, value))\n\n  // Determine if this is an increase (positive direction)\n  const isIncrease = clampedValue >= 0\n\n  // Calculate bar width as percentage of half the container (max 50%)\n  const barWidth = Math.abs(clampedValue) / 2\n\n  // Determine bar color based on direction and whether increase is positive\n  const barColor = isIncrease\n    ? (isIncreasePositive ? increaseColor : decreaseColor)\n    : (isIncreasePositive ? decreaseColor : increaseColor)\n\n  const barElement = (\n    <div\n      className={cn(deltaBarContainerVariants({ size }), className)}\n      data-slot=\"delta-bar\"\n      {...props}\n    >\n      {/* Center line indicator */}\n      <div className={deltaBarCenterLineVariants()} />\n\n      {/* Delta bar segment */}\n      <div\n        style={{\n          backgroundColor: barColor,\n          left: isIncrease ? \"50%\" : undefined,\n          right: isIncrease ? undefined : \"50%\",\n          width: `${String(barWidth)}%`,\n        }}\n        className={cn(deltaBarSegmentVariants({ animated: showAnimation }))}\n      />\n    </div>\n  )\n\n  if (!tooltip) return barElement\n\n  return (\n    <TooltipProvider>\n      <Tooltip>\n        <TooltipTrigger asChild>\n          {barElement}\n        </TooltipTrigger>\n        <TooltipContent>{tooltip}</TooltipContent>\n      </Tooltip>\n    </TooltipProvider>\n  )\n}\n\nDeltaBar.displayName = \"DeltaBar\"\n"]}

package/dist/chunk-QD2ZS5DU.js

@@ -0,0 +1,139 @@
+import { ScrollArea } from './chunk-HM6TEHA6.js';
+import { cn } from './chunk-RVAYDRMA.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var panelVariants = cva(
+  ["flex flex-col rounded-[var(--panel-root-radius)]"],
+  {
+    variants: {
+      /**
+       * Visual variant of the panel
+       * - default: Background with subtle border
+       * - subtle: Muted background, no border
+       * - outlined: Border only, no background
+       * - elevated: With light shadow
+       * - inset: Inner shadow effect
+       */
+      variant: {
+        default: "bg-[color:var(--panel-variant-default-bg)] border border-[color:var(--panel-root-border-color)]",
+        subtle: "bg-[color:var(--panel-variant-subtle-bg)]",
+        outlined: "border border-[color:var(--panel-root-border-color)] bg-transparent",
+        elevated: "bg-[color:var(--panel-variant-elevated-bg)] shadow-[var(--panel-root-shadow)]",
+        inset: "bg-[color:var(--panel-variant-subtle-bg)] shadow-inner"
+      },
+      /**
+       * Width of the panel
+       * - xs: 240px (compact sidebar)
+       * - sm: 280px (standard sidebar)
+       * - md: 320px (medium panel)
+       * - lg: 400px (wide panel)
+       * - xl: 480px (extra wide panel)
+       * - auto: Content width
+       * - full: 100% width
+       */
+      size: {
+        xs: "w-[var(--panel-size-xs)]",
+        sm: "w-[var(--panel-size-sm)]",
+        md: "w-[var(--panel-size-md)]",
+        lg: "w-[var(--panel-size-lg)]",
+        xl: "w-[var(--panel-size-xl)]",
+        auto: "w-auto",
+        full: "w-full"
+      },
+      /**
+       * Position variant for styling based on panel placement
+       * - left: Left-positioned panel (sidebar)
+       * - right: Right-positioned panel (inspector)
+       * - top: Top-positioned panel
+       * - bottom: Bottom-positioned panel
+       * - center: Centered panel
+       */
+      position: {
+        left: "border-r",
+        right: "border-l",
+        top: "border-b",
+        bottom: "border-t",
+        center: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "auto"
+    }
+  }
+);
+var panelHeaderVariants = cva([
+  "px-[var(--panel-header-padding-x)] py-[var(--panel-header-padding-y)] shrink-0"
+]);
+var panelContentVariants = cva(["flex-1"], {
+  variants: {
+    scrollable: {
+      true: "min-h-0",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    scrollable: false
+  }
+});
+var panelFooterVariants = cva([
+  "px-[var(--panel-footer-padding-x)] py-[var(--panel-footer-padding-y)] shrink-0"
+]);
+function Panel({
+  as: Component = "div",
+  variant,
+  size,
+  position,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: cn(panelVariants({ variant, size, position }), className),
+      "data-slot": "panel",
+      ...props
+    }
+  );
+}
+function PanelHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(panelHeaderVariants(), className),
+      "data-slot": "panel-header",
+      ...props
+    }
+  );
+}
+function PanelContent({
+  scrollable = false,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(panelContentVariants({ scrollable }), className),
+      "data-slot": "panel-content",
+      ...props,
+      children: scrollable ? /* @__PURE__ */ jsx(ScrollArea, { className: "size-full", children }) : children
+    }
+  );
+}
+function PanelFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(panelFooterVariants(), className),
+      "data-slot": "panel-footer",
+      ...props
+    }
+  );
+}
+
+export { Panel, PanelContent, PanelFooter, PanelHeader, panelContentVariants, panelFooterVariants, panelHeaderVariants, panelVariants };
+//# sourceMappingURL=chunk-QD2ZS5DU.js.map
+//# sourceMappingURL=chunk-QD2ZS5DU.js.map

package/dist/chunk-QD2ZS5DU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Panel/Panel.variants.ts","../src/components/layout/Panel/Panel.tsx"],"names":[],"mappings":"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","file":"chunk-QD2ZS5DU.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\n\n/**\n * Panel variant styles\n * Layout container for sidebars, inspectors, and section panels\n */\nexport const panelVariants = cva(\n  [\"flex flex-col rounded-[var(--panel-root-radius)]\"],\n  {\n  variants: {\n    /**\n     * Visual variant of the panel\n     * - default: Background with subtle border\n     * - subtle: Muted background, no border\n     * - outlined: Border only, no background\n     * - elevated: With light shadow\n     * - inset: Inner shadow effect\n     */\n    variant: {\n      default: \"bg-[color:var(--panel-variant-default-bg)] border border-[color:var(--panel-root-border-color)]\",\n      subtle: \"bg-[color:var(--panel-variant-subtle-bg)]\",\n      outlined: \"border border-[color:var(--panel-root-border-color)] bg-transparent\",\n      elevated: \"bg-[color:var(--panel-variant-elevated-bg)] shadow-[var(--panel-root-shadow)]\",\n      inset: \"bg-[color:var(--panel-variant-subtle-bg)] shadow-inner\",\n    },\n    /**\n     * Width of the panel\n     * - xs: 240px (compact sidebar)\n     * - sm: 280px (standard sidebar)\n     * - md: 320px (medium panel)\n     * - lg: 400px (wide panel)\n     * - xl: 480px (extra wide panel)\n     * - auto: Content width\n     * - full: 100% width\n     */\n    size: {\n      xs: \"w-[var(--panel-size-xs)]\",\n      sm: \"w-[var(--panel-size-sm)]\",\n      md: \"w-[var(--panel-size-md)]\",\n      lg: \"w-[var(--panel-size-lg)]\",\n      xl: \"w-[var(--panel-size-xl)]\",\n      auto: \"w-auto\",\n      full: \"w-full\",\n    },\n    /**\n     * Position variant for styling based on panel placement\n     * - left: Left-positioned panel (sidebar)\n     * - right: Right-positioned panel (inspector)\n     * - top: Top-positioned panel\n     * - bottom: Bottom-positioned panel\n     * - center: Centered panel\n     */\n    position: {\n      left: \"border-r\",\n      right: \"border-l\",\n      top: \"border-b\",\n      bottom: \"border-t\",\n      center: \"\",\n    },\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"auto\",\n  },\n})\n\n/**\n * PanelHeader variant styles\n * Header section with padding and shrink behavior\n */\nexport const panelHeaderVariants = cva([\n  \"px-[var(--panel-header-padding-x)] py-[var(--panel-header-padding-y)] shrink-0\",\n])\n\n/**\n * PanelContent variant styles\n * Main content area with flex-grow. When `scrollable`, the content is routed\n * through the ScrollArea component; `min-h-0` lets the flex child shrink so the\n * ScrollArea can establish its own scroll viewport.\n */\nexport const panelContentVariants = cva([\"flex-1\"], {\n  variants: {\n    scrollable: {\n      true: \"min-h-0\",\n      false: \"\",\n    },\n  },\n  defaultVariants: {\n    scrollable: false,\n  },\n})\n\n/**\n * PanelFooter variant styles\n * Footer section with padding and shrink behavior\n */\nexport const panelFooterVariants = cva([\n  \"px-[var(--panel-footer-padding-x)] py-[var(--panel-footer-padding-y)] shrink-0\",\n])\n\nexport type PanelVariantProps = VariantProps<typeof panelVariants>\nexport type PanelContentVariantProps = VariantProps<typeof panelContentVariants>\n","import type {\n  PanelContentProps,\n  PanelFooterProps,\n  PanelHeaderProps,\n  PanelProps,\n} from \"./Panel.types\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { ScrollArea } from \"../ScrollArea\"\nimport {\n  panelContentVariants,\n  panelFooterVariants,\n  panelHeaderVariants,\n  panelVariants,\n} from \"./Panel.variants\"\n\nfunction Panel({\n  as: Component = \"div\",\n  variant,\n  size,\n  position,\n  className,\n  ...props\n}: PanelProps) {\n  return (\n    <Component\n      className={cn(panelVariants({ variant, size, position }), className)}\n      data-slot=\"panel\"\n      {...props}\n    />\n  )\n}\n\nfunction PanelHeader({ className, ...props }: PanelHeaderProps) {\n  return (\n    <div\n      className={cn(panelHeaderVariants(), className)}\n      data-slot=\"panel-header\"\n      {...props}\n    />\n  )\n}\n\nfunction PanelContent({\n  scrollable = false,\n  className,\n  children,\n  ...props\n}: PanelContentProps) {\n  return (\n    <div\n      className={cn(panelContentVariants({ scrollable }), className)}\n      data-slot=\"panel-content\"\n      {...props}\n    >\n      {scrollable ? <ScrollArea className=\"size-full\">{children}</ScrollArea> : children}\n    </div>\n  )\n}\n\nfunction PanelFooter({ className, ...props }: PanelFooterProps) {\n  return (\n    <div\n      className={cn(panelFooterVariants(), className)}\n      data-slot=\"panel-footer\"\n      {...props}\n    />\n  )\n}\n\nexport { Panel, PanelContent, PanelFooter, PanelHeader }\n"]}