@etus/ui 0.3.2 → 0.4.0-beta.10

package/dist/chunk-JUTPDS4E.js

@@ -0,0 +1,139 @@
+import { ScrollArea } from './chunk-CNRV2IGH.js';
+import { cn } from './chunk-HRNDJU7D.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-JUTPDS4E.js.map
+//# sourceMappingURL=chunk-JUTPDS4E.js.map

package/dist/chunk-JUTPDS4E.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-JUTPDS4E.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"]}

package/dist/chunk-JWXK4TMX.js

@@ -0,0 +1,106 @@
+import { cn } from './chunk-HRNDJU7D.js';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var spacerVariants = cva("shrink-0", {
+  variants: {
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+      lg: "",
+      xl: "",
+      "2xl": ""
+    },
+    axis: {
+      vertical: "w-full",
+      horizontal: "h-full",
+      both: ""
+    },
+    flex: {
+      none: "",
+      grow: "flex-grow",
+      shrink: "flex-shrink"
+    }
+  },
+  compoundVariants: [
+    // Vertical sizes
+    { axis: "vertical", size: "xs", class: "h-[var(--spacer-size-xs)]" },
+    { axis: "vertical", size: "sm", class: "h-[var(--spacer-size-sm)]" },
+    { axis: "vertical", size: "md", class: "h-[var(--spacer-size-md)]" },
+    { axis: "vertical", size: "lg", class: "h-[var(--spacer-size-lg)]" },
+    { axis: "vertical", size: "xl", class: "h-[var(--spacer-size-xl)]" },
+    { axis: "vertical", size: "2xl", class: "h-[var(--spacer-size-2xl)]" },
+    // Horizontal sizes
+    { axis: "horizontal", size: "xs", class: "w-[var(--spacer-size-xs)]" },
+    { axis: "horizontal", size: "sm", class: "w-[var(--spacer-size-sm)]" },
+    { axis: "horizontal", size: "md", class: "w-[var(--spacer-size-md)]" },
+    { axis: "horizontal", size: "lg", class: "w-[var(--spacer-size-lg)]" },
+    { axis: "horizontal", size: "xl", class: "w-[var(--spacer-size-xl)]" },
+    { axis: "horizontal", size: "2xl", class: "w-[var(--spacer-size-2xl)]" },
+    // Both sizes
+    { axis: "both", size: "xs", class: "size-[var(--spacer-size-xs)]" },
+    { axis: "both", size: "sm", class: "size-[var(--spacer-size-sm)]" },
+    { axis: "both", size: "md", class: "size-[var(--spacer-size-md)]" },
+    { axis: "both", size: "lg", class: "size-[var(--spacer-size-lg)]" },
+    { axis: "both", size: "xl", class: "size-[var(--spacer-size-xl)]" },
+    { axis: "both", size: "2xl", class: "size-[var(--spacer-size-2xl)]" }
+  ],
+  defaultVariants: {
+    size: "md",
+    axis: "vertical",
+    flex: "none"
+  }
+});
+var TOKEN_SIZES = /* @__PURE__ */ new Set(["xs", "sm", "md", "lg", "xl", "2xl"]);
+function isTokenSize(size) {
+  return typeof size === "string" && TOKEN_SIZES.has(size);
+}
+function toCssSize(size) {
+  if (typeof size === "number") {
+    return `${String(size)}px`;
+  }
+  return size;
+}
+function Spacer({
+  className,
+  size = "md",
+  axis = "vertical",
+  flex,
+  style,
+  ref,
+  ...props
+}) {
+  const useTokenSize = isTokenSize(size);
+  const customStyle = useTokenSize ? style : {
+    ...style,
+    ...axis === "vertical" && { height: toCssSize(size) },
+    ...axis === "horizontal" && { width: toCssSize(size) },
+    ...axis === "both" && {
+      width: toCssSize(size),
+      height: toCssSize(size)
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        spacerVariants({
+          size: useTokenSize ? size : void 0,
+          axis,
+          flex
+        }),
+        className
+      ),
+      "aria-hidden": "true",
+      "data-slot": "spacer",
+      style: customStyle,
+      ...props
+    }
+  );
+}
+
+export { Spacer, spacerVariants };
+//# sourceMappingURL=chunk-JWXK4TMX.js.map
+//# sourceMappingURL=chunk-JWXK4TMX.js.map

package/dist/chunk-JWXK4TMX.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/Spacer/Spacer.tsx"],"names":[],"mappings":"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","file":"chunk-JWXK4TMX.js","sourcesContent":["import type { SpacerProps, SpacerTokenSize } from \"./Spacer.types\"\n\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"../../../lib/utils\"\n\nconst spacerVariants = cva(\"shrink-0\", {\n  variants: {\n    size: {\n      xs: \"\",\n      sm: \"\",\n      md: \"\",\n      lg: \"\",\n      xl: \"\",\n      \"2xl\": \"\",\n    },\n    axis: {\n      vertical: \"w-full\",\n      horizontal: \"h-full\",\n      both: \"\",\n    },\n    flex: {\n      none: \"\",\n      grow: \"flex-grow\",\n      shrink: \"flex-shrink\",\n    },\n  },\n  compoundVariants: [\n    // Vertical sizes\n    { axis: \"vertical\", size: \"xs\", class: \"h-[var(--spacer-size-xs)]\" },\n    { axis: \"vertical\", size: \"sm\", class: \"h-[var(--spacer-size-sm)]\" },\n    { axis: \"vertical\", size: \"md\", class: \"h-[var(--spacer-size-md)]\" },\n    { axis: \"vertical\", size: \"lg\", class: \"h-[var(--spacer-size-lg)]\" },\n    { axis: \"vertical\", size: \"xl\", class: \"h-[var(--spacer-size-xl)]\" },\n    { axis: \"vertical\", size: \"2xl\", class: \"h-[var(--spacer-size-2xl)]\" },\n    // Horizontal sizes\n    { axis: \"horizontal\", size: \"xs\", class: \"w-[var(--spacer-size-xs)]\" },\n    { axis: \"horizontal\", size: \"sm\", class: \"w-[var(--spacer-size-sm)]\" },\n    { axis: \"horizontal\", size: \"md\", class: \"w-[var(--spacer-size-md)]\" },\n    { axis: \"horizontal\", size: \"lg\", class: \"w-[var(--spacer-size-lg)]\" },\n    { axis: \"horizontal\", size: \"xl\", class: \"w-[var(--spacer-size-xl)]\" },\n    { axis: \"horizontal\", size: \"2xl\", class: \"w-[var(--spacer-size-2xl)]\" },\n    // Both sizes\n    { axis: \"both\", size: \"xs\", class: \"size-[var(--spacer-size-xs)]\" },\n    { axis: \"both\", size: \"sm\", class: \"size-[var(--spacer-size-sm)]\" },\n    { axis: \"both\", size: \"md\", class: \"size-[var(--spacer-size-md)]\" },\n    { axis: \"both\", size: \"lg\", class: \"size-[var(--spacer-size-lg)]\" },\n    { axis: \"both\", size: \"xl\", class: \"size-[var(--spacer-size-xl)]\" },\n    { axis: \"both\", size: \"2xl\", class: \"size-[var(--spacer-size-2xl)]\" },\n  ],\n  defaultVariants: {\n    size: \"md\",\n    axis: \"vertical\",\n    flex: \"none\",\n  },\n})\n\n/**\n * Token-based sizes for type checking\n */\nconst TOKEN_SIZES = new Set([\"xs\", \"sm\", \"md\", \"lg\", \"xl\", \"2xl\"])\n\n/**\n * Check if size is a token-based size\n */\nfunction isTokenSize(size: unknown): size is SpacerTokenSize {\n  return typeof size === \"string\" && TOKEN_SIZES.has(size)\n}\n\n/**\n * Convert numeric size to CSS value\n */\nfunction toCssSize(size: number | string): string {\n  if (typeof size === \"number\") {\n    return `${String(size)}px`\n  }\n  return size\n}\n\n/**\n * Spacer component for adding space between elements.\n *\n * Supports both token-based sizes (xs-2xl) and custom numeric values.\n *\n * @example\n * ```tsx\n * // Token-based sizes\n * <Spacer size=\"md\" />\n *\n * // Numeric sizes (pixels)\n * <Spacer size={24} />\n *\n * // With units\n * <Spacer size=\"2rem\" />\n *\n * // Horizontal spacer\n * <Spacer size=\"lg\" axis=\"horizontal\" />\n *\n * // Flexible spacer (grows to fill)\n * <Spacer flex=\"grow\" />\n * ```\n */\nfunction Spacer({\n  className,\n  size = \"md\",\n  axis = \"vertical\",\n  flex,\n  style,\n  ref,\n  ...props\n}: SpacerProps) {\n  // Determine if using token-based or numeric size\n  const useTokenSize = isTokenSize(size)\n\n  // Build inline styles for numeric sizes\n  const customStyle = useTokenSize\n    ? style\n    : {\n        ...style,\n        ...(axis === \"vertical\" && { height: toCssSize(size) }),\n        ...(axis === \"horizontal\" && { width: toCssSize(size) }),\n        ...(axis === \"both\" && {\n          width: toCssSize(size),\n          height: toCssSize(size),\n        }),\n      }\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        spacerVariants({\n          size: useTokenSize ? size : undefined,\n          axis,\n          flex,\n        }),\n        className\n      )}\n      aria-hidden=\"true\"\n      data-slot=\"spacer\"\n      style={customStyle}\n      {...props}\n    />\n  )\n}\n\nexport { Spacer, spacerVariants }\n"]}