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

package/dist/chunk-AJUOTABG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/FolderStack/FolderStack.variants.ts","../src/components/primitives/FolderStack/FolderStack.tsx"],"names":[],"mappings":"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","file":"chunk-AJUOTABG.js","sourcesContent":["import { cva } from \"class-variance-authority\"\n\nexport const folderStackVariants = cva(\n  \"relative flex-shrink-0 [&_[data-slot='folder-stack-tile']]:absolute [&_[data-slot='folder-stack-tile']]:bg-[color:var(--tint,theme(colors.neutral.200))] [&_[data-slot='folder-stack-tile']]:transition-colors\",\n  {\n    variants: {\n      size: {\n        xs: \"w-[var(--folder-stack-size-xs-width)] h-[var(--folder-stack-size-xs-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-xs-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-xs-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-xs-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-xs-outline-width)]\",\n        sm: \"w-[var(--folder-stack-size-sm-width)] h-[var(--folder-stack-size-sm-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-sm-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-sm-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-sm-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-sm-outline-width)]\",\n        default:\n          \"w-[var(--folder-stack-size-default-width)] h-[var(--folder-stack-size-default-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-default-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-default-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-default-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-default-outline-width)]\",\n        lg: \"w-[var(--folder-stack-size-lg-width)] h-[var(--folder-stack-size-lg-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-lg-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-lg-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-lg-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-lg-outline-width)]\",\n        xl: \"w-[var(--folder-stack-size-xl-width)] h-[var(--folder-stack-size-xl-height)] [&_[data-slot='folder-stack-tile']]:w-[var(--folder-stack-size-xl-tile-width)] [&_[data-slot='folder-stack-tile']]:h-[var(--folder-stack-size-xl-tile-height)] [&_[data-slot='folder-stack-tile']]:rounded-[var(--folder-stack-size-xl-tile-radius)] [&_[data-slot='folder-stack-tile']]:outline-[length:var(--folder-stack-size-xl-outline-width)]\",\n      },\n      interactive: {\n        true: \"cursor-pointer transition-transform hover:scale-[1.02] focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-[color:var(--ring)] motion-reduce:transition-none motion-reduce:hover:scale-100\",\n        false: \"\",\n      },\n      active: {\n        true: \"ring-[length:var(--folder-stack-interactive-active-ring-width)] ring-[color:var(--folder-stack-interactive-active-ring-color,var(--primary))] ring-offset-2 ring-offset-[color:var(--background)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"default\",\n      interactive: false,\n      active: false,\n    },\n  },\n)\n\n/** Tile positions per size — top-left, top-right, bottom-left, bottom-right.\n * Returned as inline styles so each tile can be positioned absolutely without\n * exploding the className surface. Values derived from prototype `dam.css`. */\nexport const folderStackTilePositions: Record<\n  \"default\" | \"lg\" | \"sm\" | \"xl\" | \"xs\",\n  { left: string; top: string }[]\n> = {\n  xs: [\n    { left: \"1px\", top: \"0\" },\n    { left: \"11px\", top: \"0\" },\n    { left: \"1px\", top: \"10px\" },\n    { left: \"11px\", top: \"10px\" },\n  ],\n  sm: [\n    { left: \"1px\", top: \"0\" },\n    { left: \"15px\", top: \"0\" },\n    { left: \"1px\", top: \"13px\" },\n    { left: \"15px\", top: \"13px\" },\n  ],\n  default: [\n    { left: \"0\", top: \"0\" },\n    { left: \"18px\", top: \"0\" },\n    { left: \"0\", top: \"22px\" },\n    { left: \"18px\", top: \"22px\" },\n  ],\n  lg: [\n    { left: \"0\", top: \"0\" },\n    { left: \"28px\", top: \"0\" },\n    { left: \"0\", top: \"30px\" },\n    { left: \"28px\", top: \"30px\" },\n  ],\n  xl: [\n    { left: \"0\", top: \"0\" },\n    { left: \"36px\", top: \"0\" },\n    { left: \"0\", top: \"38px\" },\n    { left: \"36px\", top: \"38px\" },\n  ],\n}\n","import type { FolderStackProps } from \"./FolderStack.types\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"../../../lib/utils\"\nimport { folderStackTilePositions, folderStackVariants } from \"./FolderStack.variants\"\n\n/**\n * FolderStack — 2×2 tile preview of folder contents.\n *\n * Renders 4 absolute-positioned tiles tinted with the colors passed in `tints`.\n * Excess tints are ignored; missing slots get a neutral empty fill. Used as\n * leading slot in file-tree rows, inside FolderCards, and as the visual for\n * ShortcutCard/Item nav targets.\n *\n * @example\n * <FolderStack tints={[\"#f97316\", \"#19e699\", \"#a78bfa\", \"#3b82f6\"]} aria-label=\"Folder with 12 files\" />\n *\n * @example\n * <FolderStack tints={collectTints(folder)} size=\"default\" interactive onClick={navigate} aria-label={folder.name} />\n */\nfunction FolderStack({\n  tints,\n  size = \"default\",\n  interactive = false,\n  active = false,\n  className,\n  \"aria-label\": ariaLabel,\n  onClick,\n  ...props\n}: FolderStackProps) {\n  const sizeKey = (size ?? \"default\")\n  const positions = folderStackTilePositions[sizeKey]\n\n  // Pad to exactly 4 entries — extra tints discarded, missing slots stay empty.\n  const slots = Array.from({ length: 4 }, (_, i) => tints[i] ?? null)\n\n  const handleClick = React.useCallback(\n    (event: React.MouseEvent<HTMLDivElement>) => {\n      if (!interactive) return\n      onClick?.(event, { tints, timestamp: Date.now() })\n    },\n    [interactive, onClick, tints],\n  )\n\n  const handleKeyDown = React.useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!interactive) return\n      if (event.key === \"Enter\" || event.key === \" \") {\n        event.preventDefault()\n        onClick?.(\n          event as unknown as React.MouseEvent<HTMLDivElement>,\n          { tints, timestamp: Date.now() },\n        )\n      }\n    },\n    [interactive, onClick, tints],\n  )\n\n  return (\n    <div\n      className={cn(\n        folderStackVariants({ size, interactive, active }),\n        className,\n      )}\n      aria-label={ariaLabel}\n      aria-pressed={interactive && active ? true : undefined}\n      data-active={active || undefined}\n      data-empty={slots.every((s) => s === null) || undefined}\n      data-size={size}\n      data-slot=\"folder-stack\"\n      role={interactive ? \"button\" : \"img\"}\n      tabIndex={interactive ? 0 : undefined}\n      onClick={interactive ? handleClick : undefined}\n      onKeyDown={interactive ? handleKeyDown : undefined}\n      {...props}\n    >\n      {slots.map((tint, i) => (\n        <span\n          key={`folder-stack-tile-${String(i)}`}\n          style={\n            {\n              ...positions[i],\n              \"--tint\": tint ?? \"var(--folder-stack-empty-bg, var(--muted))\",\n            } as React.CSSProperties\n          }\n          aria-hidden=\"true\"\n          className=\"outline outline-[color:var(--folder-stack-outline-color,var(--background))]\"\n          data-empty={tint === null || undefined}\n          data-position={i}\n          data-slot=\"folder-stack-tile\"\n        />\n      ))}\n    </div>\n  )\n}\n\nFolderStack.displayName = \"FolderStack\"\n\nexport { FolderStack, folderStackVariants }\n"]}