@fanvue/ui 2.0.0 → 2.1.1

package/dist/cjs/components/Select/Select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Select.cjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Select field height in pixels. */\nexport type SelectSize = \"48\" | \"40\" | \"32\";\n\ntype SelectContextValue = {\n  size: SelectSize;\n  error: boolean;\n  disabled?: boolean;\n};\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  size: \"48\",\n  error: false,\n});\n\nconst TRIGGER_HEIGHT: Record<SelectSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst TRIGGER_PADDING_X: Record<SelectSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst TRIGGER_GAP: Record<SelectSize, string> = {\n  \"48\": \"gap-3\",\n  \"40\": \"gap-3\",\n  \"32\": \"gap-2\",\n};\n\nconst TRIGGER_TYPOGRAPHY: Record<SelectSize, string> = {\n  \"48\": \"typography-regular-body-lg\",\n  \"40\": \"typography-regular-body-lg\",\n  \"32\": \"typography-regular-body-md\",\n};\n\nexport interface SelectProps extends Omit<SelectPrimitive.SelectProps, \"dir\"> {\n  /** Label text displayed above the trigger. Also used as the accessible name. */\n  label?: string;\n  /** Accessible name applied directly to the trigger button when no visible `label` is provided. */\n  \"aria-label\"?: string;\n  /** ID of an external element that labels the trigger button. */\n  \"aria-labelledby\"?: string;\n  /** Helper text displayed below the trigger. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the select field in pixels. @default \"48\" */\n  size?: SelectSize;\n  /** Whether the field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the trigger. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Icon element displayed at the left side of the trigger. */\n  leftIcon?: React.ReactNode;\n  /** Whether the field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Wraps the `className` of the outermost container div. */\n  className?: string;\n  /** HTML `id` applied to the trigger button. Auto-generated if omitted. */\n  id?: string;\n}\n\n/**\n * A select field with optional label, helper/error text, and an icon slot,\n * built on Radix UI Select for full accessibility and keyboard navigation.\n *\n * Pair with {@link SelectContent} and {@link SelectItem} to provide options.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" placeholder=\"Select a country\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"uk\">United Kingdom</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nexport const Select = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Trigger>,\n  SelectProps\n>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      placeholder,\n      leftIcon,\n      fullWidth = false,\n      className,\n      id,\n      disabled,\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const triggerId = id ?? generatedId;\n    const helperTextId = `${triggerId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    return (\n      <SelectContext.Provider value={{ size, error, disabled }}>\n        <div\n          className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n          data-disabled={disabled ? \"\" : undefined}\n          data-error={error ? \"\" : undefined}\n        >\n          {label && (\n            <label\n              htmlFor={triggerId}\n              className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-content-primary\"\n            >\n              {label}\n            </label>\n          )}\n\n          <SelectPrimitive.Root disabled={disabled} {...props}>\n            <SelectPrimitive.Trigger\n              ref={ref}\n              id={triggerId}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledby}\n              aria-describedby={bottomText ? helperTextId : undefined}\n              aria-invalid={error || undefined}\n              className={cn(\n                \"flex w-full cursor-pointer items-center justify-between rounded-sm border bg-neutral-alphas-50 outline-none motion-safe:transition-colors\",\n                TRIGGER_HEIGHT[size],\n                TRIGGER_PADDING_X[size],\n                TRIGGER_GAP[size],\n                TRIGGER_TYPOGRAPHY[size],\n                error ? \"border-error-content\" : \"border-transparent\",\n                !disabled &&\n                  !error &&\n                  \"hover:border-neutral-alphas-400 data-[state=open]:border-neutral-alphas-400\",\n                disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              <div className=\"flex min-w-0 items-center gap-2\">\n                {leftIcon && (\n                  <span\n                    className=\"flex size-5 shrink-0 items-center justify-center text-content-secondary\"\n                    data-testid=\"left-icon\"\n                  >\n                    {leftIcon}\n                  </span>\n                )}\n                <span className=\"min-w-0 flex-1 truncate text-left text-content-primary [&>[data-placeholder]]:text-content-secondary [&>[data-placeholder]]:opacity-40\">\n                  <SelectPrimitive.Value placeholder={placeholder} />\n                </span>\n              </div>\n\n              <SelectPrimitive.Icon asChild>\n                <ChevronDownIcon />\n              </SelectPrimitive.Icon>\n            </SelectPrimitive.Trigger>\n\n            {children}\n          </SelectPrimitive.Root>\n\n          {bottomText && (\n            <p\n              id={helperTextId}\n              className={cn(\n                \"typography-regular-body-sm px-2 pt-1 pb-0.5\",\n                error ? \"text-error-content\" : \"text-content-secondary\",\n              )}\n            >\n              {bottomText}\n            </p>\n          )}\n        </div>\n      </SelectContext.Provider>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\n\nexport interface SelectContentProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {}\n\n/**\n * The dropdown panel rendered inside a portal. Place {@link SelectItem} elements\n * (and optionally {@link SelectGroup} / {@link SelectLabel}) as children.\n */\nexport const SelectContent = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Content>,\n  SelectContentProps\n>(({ className, children, position = \"popper\", sideOffset = 4, style, ...props }, ref) => (\n  <SelectPrimitive.Portal>\n    <SelectPrimitive.Content\n      ref={ref}\n      position={position}\n      sideOffset={sideOffset}\n      collisionPadding={8}\n      style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n      className={cn(\n        \"relative min-w-(--radix-select-trigger-width) overflow-hidden rounded-sm border border-neutral-alphas-200 bg-bg-primary text-content-primary shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n        \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n        \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n        \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n        \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n        className,\n      )}\n      {...props}\n    >\n      <SelectPrimitive.Viewport className=\"max-h-[var(--radix-select-content-available-height)] overflow-y-auto p-1\">\n        {children}\n      </SelectPrimitive.Viewport>\n    </SelectPrimitive.Content>\n  </SelectPrimitive.Portal>\n));\n\nSelectContent.displayName = \"SelectContent\";\n\nexport interface SelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {}\n\n/**\n * An individual option inside {@link SelectContent}.\n */\nexport const SelectItem = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Item>,\n  SelectItemProps\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"typography-regular-body-lg relative flex w-full cursor-pointer select-none items-center gap-2 rounded-xs py-2 pr-2 pl-3 text-content-primary outline-none\",\n      \"focus:bg-neutral-alphas-100 data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    <SelectPrimitive.ItemIndicator className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n      <CheckIcon className=\"size-4 text-content-primary\" />\n    </SelectPrimitive.ItemIndicator>\n  </SelectPrimitive.Item>\n));\n\nSelectItem.displayName = \"SelectItem\";\n\n/** Props for {@link SelectGroup}. */\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\n\n/**\n * Groups related {@link SelectItem} elements under a {@link SelectLabel}.\n */\nexport const SelectGroup = SelectPrimitive.Group;\nSelectGroup.displayName = \"SelectGroup\";\n\nexport interface SelectLabelProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}\n\n/**\n * A non-interactive label shown above a {@link SelectGroup}.\n */\nexport const SelectLabel = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Label>,\n  SelectLabelProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"typography-semibold-body-sm px-3 py-1.5 text-content-secondary\", className)}\n    {...props}\n  />\n));\n\nSelectLabel.displayName = \"SelectLabel\";\n\nexport interface SelectSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {}\n\n/** A horizontal rule that visually separates groups in {@link SelectContent}. */\nexport const SelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Separator>,\n  SelectSeparatorProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-neutral-alphas-200\", className)}\n    {...props}\n  />\n));\n\nSelectSeparator.displayName = \"SelectSeparator\";\n"],"names":["React","jsx","jsxs","cn","SelectPrimitive","ChevronDownIcon","CheckIcon"],"mappings":"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"}
+{"version":3,"file":"Select.cjs","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as SelectPrimitive from \"@radix-ui/react-select\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { FLOATING_CONTENT_COLLISION_PADDING } from \"@/utils/floatingContentCollisionPadding\";\nimport { CheckIcon } from \"../Icons/CheckIcon\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\n\n/** Select field height in pixels. */\nexport type SelectSize = \"48\" | \"40\" | \"32\";\n\ntype SelectContextValue = {\n  size: SelectSize;\n  error: boolean;\n  disabled?: boolean;\n};\n\nconst SelectContext = React.createContext<SelectContextValue>({\n  size: \"48\",\n  error: false,\n});\n\nconst TRIGGER_HEIGHT: Record<SelectSize, string> = {\n  \"48\": \"h-12\",\n  \"40\": \"h-10\",\n  \"32\": \"h-8\",\n};\n\nconst TRIGGER_PADDING_X: Record<SelectSize, string> = {\n  \"48\": \"px-4\",\n  \"40\": \"px-4\",\n  \"32\": \"px-3\",\n};\n\nconst TRIGGER_GAP: Record<SelectSize, string> = {\n  \"48\": \"gap-3\",\n  \"40\": \"gap-3\",\n  \"32\": \"gap-2\",\n};\n\nconst TRIGGER_TYPOGRAPHY: Record<SelectSize, string> = {\n  \"48\": \"typography-regular-body-lg\",\n  \"40\": \"typography-regular-body-lg\",\n  \"32\": \"typography-regular-body-md\",\n};\n\nexport interface SelectProps extends Omit<SelectPrimitive.SelectProps, \"dir\"> {\n  /** Label text displayed above the trigger. Also used as the accessible name. */\n  label?: string;\n  /** Accessible name applied directly to the trigger button when no visible `label` is provided. */\n  \"aria-label\"?: string;\n  /** ID of an external element that labels the trigger button. */\n  \"aria-labelledby\"?: string;\n  /** Helper text displayed below the trigger. Replaced by `errorMessage` when `error` is `true`. */\n  helperText?: string;\n  /** Height of the select field in pixels. @default \"48\" */\n  size?: SelectSize;\n  /** Whether the field is in an error state. @default false */\n  error?: boolean;\n  /** Error message displayed below the trigger. Shown instead of `helperText` when `error` is `true`. */\n  errorMessage?: string;\n  /** Placeholder shown when no value is selected. */\n  placeholder?: string;\n  /** Icon element displayed at the left side of the trigger. */\n  leftIcon?: React.ReactNode;\n  /** Whether the field stretches to fill its container width. @default false */\n  fullWidth?: boolean;\n  /** Wraps the `className` of the outermost container div. */\n  className?: string;\n  /** HTML `id` applied to the trigger button. Auto-generated if omitted. */\n  id?: string;\n}\n\n/**\n * A select field with optional label, helper/error text, and an icon slot,\n * built on Radix UI Select for full accessibility and keyboard navigation.\n *\n * Pair with {@link SelectContent} and {@link SelectItem} to provide options.\n *\n * @example\n * ```tsx\n * <Select label=\"Country\" placeholder=\"Select a country\">\n *   <SelectContent>\n *     <SelectItem value=\"us\">United States</SelectItem>\n *     <SelectItem value=\"uk\">United Kingdom</SelectItem>\n *   </SelectContent>\n * </Select>\n * ```\n */\nexport const Select = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Trigger>,\n  SelectProps\n>(\n  (\n    {\n      label,\n      helperText,\n      size = \"48\",\n      error = false,\n      errorMessage,\n      placeholder,\n      leftIcon,\n      fullWidth = false,\n      className,\n      id,\n      disabled,\n      children,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledby,\n      ...props\n    },\n    ref,\n  ) => {\n    const generatedId = React.useId();\n    const triggerId = id ?? generatedId;\n    const helperTextId = `${triggerId}-helper`;\n    const bottomText = error && errorMessage ? errorMessage : helperText;\n\n    return (\n      <SelectContext.Provider value={{ size, error, disabled }}>\n        <div\n          className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n          data-disabled={disabled ? \"\" : undefined}\n          data-error={error ? \"\" : undefined}\n        >\n          {label && (\n            <label\n              htmlFor={triggerId}\n              className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-content-primary\"\n            >\n              {label}\n            </label>\n          )}\n\n          <SelectPrimitive.Root disabled={disabled} {...props}>\n            <SelectPrimitive.Trigger\n              ref={ref}\n              id={triggerId}\n              aria-label={ariaLabel}\n              aria-labelledby={ariaLabelledby}\n              aria-describedby={bottomText ? helperTextId : undefined}\n              aria-invalid={error || undefined}\n              className={cn(\n                \"flex w-full cursor-pointer items-center justify-between rounded-sm border bg-neutral-alphas-50 outline-none motion-safe:transition-colors\",\n                TRIGGER_HEIGHT[size],\n                TRIGGER_PADDING_X[size],\n                TRIGGER_GAP[size],\n                TRIGGER_TYPOGRAPHY[size],\n                error ? \"border-error-content\" : \"border-transparent\",\n                !disabled &&\n                  !error &&\n                  \"hover:border-neutral-alphas-400 data-[state=open]:border-neutral-alphas-400\",\n                disabled && \"cursor-not-allowed opacity-50\",\n              )}\n            >\n              <div className=\"flex min-w-0 items-center gap-2\">\n                {leftIcon && (\n                  <span\n                    className=\"flex size-5 shrink-0 items-center justify-center text-content-secondary\"\n                    data-testid=\"left-icon\"\n                  >\n                    {leftIcon}\n                  </span>\n                )}\n                <span className=\"min-w-0 flex-1 truncate text-left text-content-primary [&>[data-placeholder]]:text-content-secondary [&>[data-placeholder]]:opacity-40\">\n                  <SelectPrimitive.Value placeholder={placeholder} />\n                </span>\n              </div>\n\n              <SelectPrimitive.Icon asChild>\n                <ChevronDownIcon />\n              </SelectPrimitive.Icon>\n            </SelectPrimitive.Trigger>\n\n            {children}\n          </SelectPrimitive.Root>\n\n          {bottomText && (\n            <p\n              id={helperTextId}\n              className={cn(\n                \"typography-regular-body-sm px-2 pt-1 pb-0.5\",\n                error ? \"text-error-content\" : \"text-content-secondary\",\n              )}\n            >\n              {bottomText}\n            </p>\n          )}\n        </div>\n      </SelectContext.Provider>\n    );\n  },\n);\n\nSelect.displayName = \"Select\";\n\nexport interface SelectContentProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content> {}\n\n/**\n * The dropdown panel rendered inside a portal. Place {@link SelectItem} elements\n * (and optionally {@link SelectGroup} / {@link SelectLabel}) as children.\n */\nexport const SelectContent = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Content>,\n  SelectContentProps\n>(\n  (\n    {\n      className,\n      children,\n      position = \"popper\",\n      sideOffset = 4,\n      collisionPadding = FLOATING_CONTENT_COLLISION_PADDING,\n      style,\n      ...props\n    },\n    ref,\n  ) => (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        ref={ref}\n        position={position}\n        sideOffset={sideOffset}\n        collisionPadding={collisionPadding}\n        style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\", ...style }}\n        className={cn(\n          \"relative min-w-(--radix-select-trigger-width) overflow-hidden rounded-sm border border-neutral-alphas-200 bg-bg-primary text-content-primary shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n          \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n          \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n          \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n          \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n          className,\n        )}\n        {...props}\n      >\n        <SelectPrimitive.Viewport className=\"max-h-[var(--radix-select-content-available-height)] overflow-y-auto p-1\">\n          {children}\n        </SelectPrimitive.Viewport>\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  ),\n);\n\nSelectContent.displayName = \"SelectContent\";\n\nexport interface SelectItemProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {}\n\n/**\n * An individual option inside {@link SelectContent}.\n */\nexport const SelectItem = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Item>,\n  SelectItemProps\n>(({ className, children, ...props }, ref) => (\n  <SelectPrimitive.Item\n    ref={ref}\n    className={cn(\n      \"typography-regular-body-lg relative flex w-full cursor-pointer select-none items-center gap-2 rounded-xs py-2 pr-2 pl-3 text-content-primary outline-none\",\n      \"focus:bg-neutral-alphas-100 data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    {...props}\n  >\n    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    <SelectPrimitive.ItemIndicator className=\"ml-auto flex size-4 shrink-0 items-center justify-center\">\n      <CheckIcon className=\"size-4 text-content-primary\" />\n    </SelectPrimitive.ItemIndicator>\n  </SelectPrimitive.Item>\n));\n\nSelectItem.displayName = \"SelectItem\";\n\n/** Props for {@link SelectGroup}. */\nexport type SelectGroupProps = React.ComponentPropsWithoutRef<typeof SelectPrimitive.Group>;\n\n/**\n * Groups related {@link SelectItem} elements under a {@link SelectLabel}.\n */\nexport const SelectGroup = SelectPrimitive.Group;\nSelectGroup.displayName = \"SelectGroup\";\n\nexport interface SelectLabelProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label> {}\n\n/**\n * A non-interactive label shown above a {@link SelectGroup}.\n */\nexport const SelectLabel = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Label>,\n  SelectLabelProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Label\n    ref={ref}\n    className={cn(\"typography-semibold-body-sm px-3 py-1.5 text-content-secondary\", className)}\n    {...props}\n  />\n));\n\nSelectLabel.displayName = \"SelectLabel\";\n\nexport interface SelectSeparatorProps\n  extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator> {}\n\n/** A horizontal rule that visually separates groups in {@link SelectContent}. */\nexport const SelectSeparator = React.forwardRef<\n  React.ComponentRef<typeof SelectPrimitive.Separator>,\n  SelectSeparatorProps\n>(({ className, ...props }, ref) => (\n  <SelectPrimitive.Separator\n    ref={ref}\n    className={cn(\"-mx-1 my-1 h-px bg-neutral-alphas-200\", className)}\n    {...props}\n  />\n));\n\nSelectSeparator.displayName = \"SelectSeparator\";\n"],"names":["React","jsx","jsxs","cn","SelectPrimitive","ChevronDownIcon","FLOATING_CONTENT_COLLISION_PADDING","CheckIcon"],"mappings":"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"}

package/dist/cjs/components/Table/Table.cjs

@@ -0,0 +1,341 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const Select = require("../Select/Select.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const TableSizeContext = React__namespace.createContext("md");
+function useTableSize() {
+  return React__namespace.useContext(TableSizeContext);
+}
+const TableCard = React__namespace.forwardRef(
+  ({ className, size = "md", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(TableSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn.cn(
+          "isolate flex flex-col gap-4 overflow-hidden rounded-md bg-bg-primary pb-4",
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+TableCard.displayName = "TableCard";
+const TableToolbar = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn.cn(
+          "flex flex-wrap items-center gap-4 rounded-t-md bg-bg-primary px-6",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TableToolbar.displayName = "TableToolbar";
+const TableScrollArea = React__namespace.forwardRef(
+  ({ className, roundTop = true, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn.cn(
+          "relative w-full min-w-0 overflow-hidden",
+          roundTop && "rounded-t-md",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto", children })
+      }
+    );
+  }
+);
+TableScrollArea.displayName = "TableScrollArea";
+const Table = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "table",
+      {
+        ref,
+        className: cn.cn(
+          "w-full caption-bottom border-separate border-spacing-0 text-left",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Table.displayName = "Table";
+const TableHeader = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "thead",
+      {
+        ref,
+        className: cn.cn(
+          "[&_tr:first-child_th:first-child]:rounded-tl-md [&_tr:first-child_th:last-child]:rounded-tr-md",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TableHeader.displayName = "TableHeader";
+const TableBody = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("tbody", { ref, className: cn.cn(className), ...props });
+  }
+);
+TableBody.displayName = "TableBody";
+const TableFooter = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("tfoot", { ref, className: cn.cn(className), ...props });
+  }
+);
+TableFooter.displayName = "TableFooter";
+const TableRow = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("tr", { ref, className: cn.cn(className), ...props });
+  }
+);
+TableRow.displayName = "TableRow";
+const HEAD_INTENT_CLASSES = {
+  default: "text-left",
+  checkbox: "w-8 min-w-8 max-w-8 text-center",
+  sort: "text-right",
+  leading: "min-w-0 w-2/5 text-left"
+};
+const TableHead = React__namespace.forwardRef(
+  ({ className, intent = "default", scope = "col", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "th",
+      {
+        ref,
+        scope,
+        className: cn.cn(
+          "typography-semibold-body-sm box-border h-8 min-h-8 bg-surface-secondary px-2 py-2 align-middle text-content-primary",
+          HEAD_INTENT_CLASSES[intent],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TableHead.displayName = "TableHead";
+const CELL_MIN_HEIGHT = {
+  md: "min-h-[60px]",
+  lg: "min-h-[80px]"
+};
+const CELL_VARIANT_CLASSES = {
+  default: "border-border-primary border-b px-2 py-2",
+  chip: "border-border-primary border-b px-2 py-2",
+  pillProgress: "border-border-primary border-b px-4 py-2"
+};
+const CELL_INTENT_CLASSES = {
+  default: "",
+  checkbox: "text-center",
+  stacked: "align-top",
+  multiline: "max-w-[240px]",
+  sideLabel: ""
+};
+const TableCell = React__namespace.forwardRef(
+  ({ className, cellVariant = "default", intent = "default", ...props }, ref) => {
+    const size = useTableSize();
+    const typo = intent === "sideLabel" ? "typography-semibold-body-md" : "typography-regular-body-md";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "td",
+      {
+        ref,
+        className: cn.cn(
+          typo,
+          "align-middle text-content-primary",
+          CELL_VARIANT_CLASSES[cellVariant],
+          CELL_MIN_HEIGHT[size],
+          CELL_INTENT_CLASSES[intent],
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TableCell.displayName = "TableCell";
+const TableCellGroup = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn.cn("flex items-center gap-2.5", className), ...props });
+  }
+);
+TableCellGroup.displayName = "TableCellGroup";
+const TableMediaThumbnail = React__namespace.forwardRef(
+  ({ className, src, alt = "", blurred, align = "start", ...props }, ref) => {
+    const tableSize = useTableSize();
+    const frame = tableSize === "lg" ? "h-[62px] w-11 overflow-hidden rounded-xs bg-neutral-alphas-200" : "h-10 w-[29px] overflow-hidden rounded-xs bg-neutral-alphas-200";
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn.cn(
+          align === "center" && "flex w-16 shrink-0 justify-center",
+          align === "start" && "inline-flex shrink-0"
+        ),
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn.cn(frame, blurred && "blur-[2px]", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt, className: "size-full object-cover", src }) })
+      }
+    );
+  }
+);
+TableMediaThumbnail.displayName = "TableMediaThumbnail";
+const TableStatusDot = React__namespace.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn.cn("size-2 shrink-0 rounded-full bg-info-content", className),
+        ...props
+      }
+    );
+  }
+);
+TableStatusDot.displayName = "TableStatusDot";
+const TableProgressTrack = React__namespace.forwardRef(
+  ({ className, value = 0, "aria-label": ariaLabel = "Progress", ...props }, ref) => {
+    const width = Math.min(100, Math.max(0, value));
+    const rounded = Math.round(width);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuenow": rounded,
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-label": ariaLabel,
+        className: cn.cn(
+          "relative h-1 w-full overflow-hidden rounded-full bg-neutral-alphas-200",
+          className
+        ),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute top-0 left-0 h-1 rounded-full bg-buttons-primary",
+            style: { width: `${width}%` },
+            "aria-hidden": true
+          }
+        )
+      }
+    );
+  }
+);
+TableProgressTrack.displayName = "TableProgressTrack";
+const TablePillProgressLayout = React__namespace.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      className: cn.cn("flex min-w-[120px] flex-col items-center gap-3", className),
+      ...props
+    }
+  );
+});
+TablePillProgressLayout.displayName = "TablePillProgressLayout";
+const TableSortLabel = React__namespace.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { ref, className: cn.cn("inline-flex items-center gap-2.5", className), ...props, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-sm", children }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-content-secondary", "aria-hidden": true, children: "↕" })
+    ] });
+  }
+);
+TableSortLabel.displayName = "TableSortLabel";
+function TableStackedText({ title, subtitle }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-md", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-sm text-content-secondary", children: subtitle })
+  ] });
+}
+TableStackedText.displayName = "TableStackedText";
+const TableLineClamp = React__namespace.forwardRef(
+  ({ className, lines = 2, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: cn.cn(
+          lines === 1 && "line-clamp-1",
+          lines === 2 && "line-clamp-2",
+          lines === 3 && "line-clamp-3",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TableLineClamp.displayName = "TableLineClamp";
+function TableRowsPerPageSelect(props) {
+  const { id, "aria-label": ariaLabel = "Rows per page" } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Select.Select,
+    {
+      defaultValue: "10",
+      size: "32",
+      "aria-label": ariaLabel,
+      className: "w-[154px] [&_button]:rounded-xs [&_button]:border-transparent [&_button]:bg-transparent",
+      id,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(Select.SelectContent, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Select.SelectItem, { value: "10", children: "10 rows per page" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Select.SelectItem, { value: "25", children: "25 rows per page" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Select.SelectItem, { value: "50", children: "50 rows per page" })
+      ] })
+    }
+  );
+}
+exports.Table = Table;
+exports.TableBody = TableBody;
+exports.TableCard = TableCard;
+exports.TableCell = TableCell;
+exports.TableCellGroup = TableCellGroup;
+exports.TableFooter = TableFooter;
+exports.TableHead = TableHead;
+exports.TableHeader = TableHeader;
+exports.TableLineClamp = TableLineClamp;
+exports.TableMediaThumbnail = TableMediaThumbnail;
+exports.TablePillProgressLayout = TablePillProgressLayout;
+exports.TableProgressTrack = TableProgressTrack;
+exports.TableRow = TableRow;
+exports.TableRowsPerPageSelect = TableRowsPerPageSelect;
+exports.TableScrollArea = TableScrollArea;
+exports.TableSortLabel = TableSortLabel;
+exports.TableStackedText = TableStackedText;
+exports.TableStatusDot = TableStatusDot;
+exports.TableToolbar = TableToolbar;
+//# sourceMappingURL=Table.cjs.map

package/dist/cjs/components/Table/Table.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.cjs","sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { Select, SelectContent, SelectItem } from \"../Select/Select\";\n\n/** Row density for body cells — `md` (60px min height) or `lg` (80px). */\nexport type TableSize = \"md\" | \"lg\";\n\nexport interface TableCardProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Row density applied to {@link TableCell} descendants. @default \"md\" */\n  size?: TableSize;\n}\n\nconst TableSizeContext = React.createContext<TableSize>(\"md\");\n\nfunction useTableSize(): TableSize {\n  return React.useContext(TableSizeContext);\n}\n\n/**\n * Surface wrapper for data tables: rounded container, spacing, and size\n * context for {@link TableCell} descendants. Compose with {@link TableScrollArea},\n * {@link Table}, {@link TableHeader}, {@link TableBody}, {@link TableRow},\n * {@link TableHead}, and {@link TableCell}.\n *\n * @example\n * ```tsx\n * <TableCard size=\"md\">\n *   <TableScrollArea>\n *     <Table>\n *       <TableHeader>\n *         <TableRow>\n *           <TableHead>Name</TableHead>\n *         </TableRow>\n *       </TableHeader>\n *       <TableBody>\n *         <TableRow>\n *           <TableCell>Jane Doe</TableCell>\n *         </TableRow>\n *       </TableBody>\n *     </Table>\n *   </TableScrollArea>\n * </TableCard>\n * ```\n */\nexport const TableCard = React.forwardRef<HTMLDivElement, TableCardProps>(\n  ({ className, size = \"md\", ...props }, ref) => {\n    return (\n      <TableSizeContext.Provider value={size}>\n        <div\n          ref={ref}\n          className={cn(\n            \"isolate flex flex-col gap-4 overflow-hidden rounded-md bg-bg-primary pb-4\",\n            className,\n          )}\n          {...props}\n        />\n      </TableSizeContext.Provider>\n    );\n  },\n);\nTableCard.displayName = \"TableCard\";\n\nexport interface TableToolbarProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Optional toolbar row above the table (e.g. bulk selection actions).\n */\nexport const TableToolbar = React.forwardRef<HTMLDivElement, TableToolbarProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"flex flex-wrap items-center gap-4 rounded-t-md bg-bg-primary px-6\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTableToolbar.displayName = \"TableToolbar\";\n\nexport interface TableScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Rounds the top of the table block to match {@link TableCard}. Set `false` when {@link TableToolbar} is above this scroll area. @default true */\n  roundTop?: boolean;\n}\n\n/**\n * Horizontal scroll container for wide tables. Uses an inner scrollport so the\n * table respects the card radius (plain `overflow-x-auto` on the table\n * wrapper often loses rounded corners with `border-collapse`).\n */\nexport const TableScrollArea = React.forwardRef<HTMLDivElement, TableScrollAreaProps>(\n  ({ className, roundTop = true, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          \"relative w-full min-w-0 overflow-hidden\",\n          roundTop && \"rounded-t-md\",\n          className,\n        )}\n        {...props}\n      >\n        <div className=\"overflow-x-auto\">{children}</div>\n      </div>\n    );\n  },\n);\nTableScrollArea.displayName = \"TableScrollArea\";\n\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {}\n\n/**\n * Semantic `<table>` element. Place inside {@link TableScrollArea}.\n */\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <table\n        ref={ref}\n        className={cn(\n          \"w-full caption-bottom border-separate border-spacing-0 text-left\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTable.displayName = \"Table\";\n\nexport interface TableHeaderProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableHeader = React.forwardRef<HTMLTableSectionElement, TableHeaderProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <thead\n        ref={ref}\n        className={cn(\n          \"[&_tr:first-child_th:first-child]:rounded-tl-md [&_tr:first-child_th:last-child]:rounded-tr-md\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTableHeader.displayName = \"TableHeader\";\n\nexport interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableBody = React.forwardRef<HTMLTableSectionElement, TableBodyProps>(\n  ({ className, ...props }, ref) => {\n    return <tbody ref={ref} className={cn(className)} {...props} />;\n  },\n);\nTableBody.displayName = \"TableBody\";\n\nexport interface TableFooterProps extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport const TableFooter = React.forwardRef<HTMLTableSectionElement, TableFooterProps>(\n  ({ className, ...props }, ref) => {\n    return <tfoot ref={ref} className={cn(className)} {...props} />;\n  },\n);\nTableFooter.displayName = \"TableFooter\";\n\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {}\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n  ({ className, ...props }, ref) => {\n    return <tr ref={ref} className={cn(className)} {...props} />;\n  },\n);\nTableRow.displayName = \"TableRow\";\n\n/** Column layout preset for {@link TableHead}. */\nexport type TableHeadIntent = \"default\" | \"checkbox\" | \"sort\" | \"leading\";\n\nconst HEAD_INTENT_CLASSES: Record<TableHeadIntent, string> = {\n  default: \"text-left\",\n  checkbox: \"w-8 min-w-8 max-w-8 text-center\",\n  sort: \"text-right\",\n  leading: \"min-w-0 w-2/5 text-left\",\n};\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n  /** Layout preset for common column types. @default \"default\" */\n  intent?: TableHeadIntent;\n}\n\nexport const TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n  ({ className, intent = \"default\", scope = \"col\", ...props }, ref) => {\n    return (\n      <th\n        ref={ref}\n        scope={scope}\n        className={cn(\n          \"typography-semibold-body-sm box-border h-8 min-h-8 bg-surface-secondary px-2 py-2 align-middle text-content-primary\",\n          HEAD_INTENT_CLASSES[intent],\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTableHead.displayName = \"TableHead\";\n\nconst CELL_MIN_HEIGHT: Record<TableSize, string> = {\n  md: \"min-h-[60px]\",\n  lg: \"min-h-[80px]\",\n};\n\n/** Bottom border and padding preset for body cells (Figma table cell component). */\nexport type TableCellVariant = \"default\" | \"chip\" | \"pillProgress\";\n\nconst CELL_VARIANT_CLASSES: Record<TableCellVariant, string> = {\n  default: \"border-border-primary border-b px-2 py-2\",\n  chip: \"border-border-primary border-b px-2 py-2\",\n  pillProgress: \"border-border-primary border-b px-4 py-2\",\n};\n\n/** Layout / typography preset for {@link TableCell} (orthogonal to {@link TableCellVariant}). */\nexport type TableCellIntent = \"default\" | \"checkbox\" | \"stacked\" | \"multiline\" | \"sideLabel\";\n\nconst CELL_INTENT_CLASSES: Record<TableCellIntent, string> = {\n  default: \"\",\n  checkbox: \"text-center\",\n  stacked: \"align-top\",\n  multiline: \"max-w-[240px]\",\n  sideLabel: \"\",\n};\n\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  /** `pillProgress` uses wider horizontal padding; row dividers match the default weight for visibility. @default \"default\" */\n  cellVariant?: TableCellVariant;\n  /** Alignment and typography preset for common cell types. @default \"default\" */\n  intent?: TableCellIntent;\n}\n\nexport const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n  ({ className, cellVariant = \"default\", intent = \"default\", ...props }, ref) => {\n    const size = useTableSize();\n    const typo =\n      intent === \"sideLabel\" ? \"typography-semibold-body-md\" : \"typography-regular-body-md\";\n    return (\n      <td\n        ref={ref}\n        className={cn(\n          typo,\n          \"align-middle text-content-primary\",\n          CELL_VARIANT_CLASSES[cellVariant],\n          CELL_MIN_HEIGHT[size],\n          CELL_INTENT_CLASSES[intent],\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTableCell.displayName = \"TableCell\";\n\nexport interface TableCellGroupProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Horizontal group for icons, chips, and metadata inside a {@link TableCell} (Figma `gap-[10px]`).\n */\nexport const TableCellGroup = React.forwardRef<HTMLDivElement, TableCellGroupProps>(\n  ({ className, ...props }, ref) => {\n    return <div ref={ref} className={cn(\"flex items-center gap-2.5\", className)} {...props} />;\n  },\n);\nTableCellGroup.displayName = \"TableCellGroup\";\n\nexport interface TableMediaThumbnailProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, \"children\"> {\n  /** Image URL. */\n  src: string;\n  /** Alt text for the image. @default \"\" */\n  alt?: string;\n  /** Applies the table’s blurred-media treatment. @default false */\n  blurred?: boolean;\n  /** `center` uses the fixed media column width from the lg spec. @default \"start\" */\n  align?: \"start\" | \"center\";\n}\n\n/**\n * Rounded thumbnail sized from {@link TableCard} `size` (`md` vs `lg`).\n */\nexport const TableMediaThumbnail = React.forwardRef<HTMLDivElement, TableMediaThumbnailProps>(\n  ({ className, src, alt = \"\", blurred, align = \"start\", ...props }, ref) => {\n    const tableSize = useTableSize();\n    const frame =\n      tableSize === \"lg\"\n        ? \"h-[62px] w-11 overflow-hidden rounded-xs bg-neutral-alphas-200\"\n        : \"h-10 w-[29px] overflow-hidden rounded-xs bg-neutral-alphas-200\";\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          align === \"center\" && \"flex w-16 shrink-0 justify-center\",\n          align === \"start\" && \"inline-flex shrink-0\",\n        )}\n      >\n        <div className={cn(frame, blurred && \"blur-[2px]\", className)} {...props}>\n          <img alt={alt} className=\"size-full object-cover\" src={src} />\n        </div>\n      </div>\n    );\n  },\n);\nTableMediaThumbnail.displayName = \"TableMediaThumbnail\";\n\nexport interface TableStatusDotProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Small status indicator dot for table cells (Figma status column).\n */\nexport const TableStatusDot = React.forwardRef<HTMLDivElement, TableStatusDotProps>(\n  ({ className, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\"size-2 shrink-0 rounded-full bg-info-content\", className)}\n        {...props}\n      />\n    );\n  },\n);\nTableStatusDot.displayName = \"TableStatusDot\";\n\nexport interface TableProgressTrackProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Fill width from 0–100. @default 0 */\n  value?: number;\n}\n\n/**\n * Thin progress track used with badges in table cells (Figma pill + progress).\n * Renders with `role=\"progressbar\"` and a default `aria-label` of `\"Progress\"`.\n */\nexport const TableProgressTrack = React.forwardRef<HTMLDivElement, TableProgressTrackProps>(\n  ({ className, value = 0, \"aria-label\": ariaLabel = \"Progress\", ...props }, ref) => {\n    const width = Math.min(100, Math.max(0, value));\n    const rounded = Math.round(width);\n    return (\n      <div\n        ref={ref}\n        role=\"progressbar\"\n        aria-valuenow={rounded}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={ariaLabel}\n        className={cn(\n          \"relative h-1 w-full overflow-hidden rounded-full bg-neutral-alphas-200\",\n          className,\n        )}\n        {...props}\n      >\n        <div\n          className=\"absolute top-0 left-0 h-1 rounded-full bg-buttons-primary\"\n          style={{ width: `${width}%` }}\n          aria-hidden\n        />\n      </div>\n    );\n  },\n);\nTableProgressTrack.displayName = \"TableProgressTrack\";\n\nexport interface TablePillProgressLayoutProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Vertical layout for pill label + {@link TableProgressTrack} in a cell.\n */\nexport const TablePillProgressLayout = React.forwardRef<\n  HTMLDivElement,\n  TablePillProgressLayoutProps\n>(({ className, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={cn(\"flex min-w-[120px] flex-col items-center gap-3\", className)}\n      {...props}\n    />\n  );\n});\nTablePillProgressLayout.displayName = \"TablePillProgressLayout\";\n\nexport interface TableSortLabelProps extends React.HTMLAttributes<HTMLSpanElement> {\n  children: React.ReactNode;\n}\n\n/**\n * Sortable column label with caption typography and a sort affordance.\n */\nexport const TableSortLabel = React.forwardRef<HTMLSpanElement, TableSortLabelProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <span ref={ref} className={cn(\"inline-flex items-center gap-2.5\", className)} {...props}>\n        <span className=\"typography-semibold-body-sm\">{children}</span>\n        <span className=\"text-content-secondary\" aria-hidden>\n          ↕\n        </span>\n      </span>\n    );\n  },\n);\nTableSortLabel.displayName = \"TableSortLabel\";\n\nexport interface TableStackedTextProps {\n  /** Primary line (semibold body). */\n  title: React.ReactNode;\n  /** Secondary line (caption, muted). */\n  subtitle: React.ReactNode;\n}\n\n/**\n * Two-line primary + secondary text block for “cell + info” patterns.\n */\nexport function TableStackedText({ title, subtitle }: TableStackedTextProps) {\n  return (\n    <div className=\"flex flex-col gap-1\">\n      <span className=\"typography-semibold-body-md\">{title}</span>\n      <span className=\"typography-regular-body-sm text-content-secondary\">{subtitle}</span>\n    </div>\n  );\n}\n\nTableStackedText.displayName = \"TableStackedText\";\n\nexport interface TableLineClampProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Number of lines before ellipsis. @default 2 */\n  lines?: 1 | 2 | 3;\n}\n\n/**\n * Clamps child text to a fixed number of lines inside a {@link TableCell}.\n */\nexport const TableLineClamp = React.forwardRef<HTMLDivElement, TableLineClampProps>(\n  ({ className, lines = 2, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          lines === 1 && \"line-clamp-1\",\n          lines === 2 && \"line-clamp-2\",\n          lines === 3 && \"line-clamp-3\",\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nTableLineClamp.displayName = \"TableLineClamp\";\n\nexport interface TableRowsPerPageSelectProps {\n  /** Passed to the trigger for forms and labels. */\n  id?: string;\n  /** Accessible name for the trigger when no visible label. @default \"Rows per page\" */\n  \"aria-label\"?: string;\n}\n\n/**\n * Rows-per-page {@link Select} styled for {@link TablePagination} (Figma field).\n */\nexport function TableRowsPerPageSelect(props: TableRowsPerPageSelectProps) {\n  const { id, \"aria-label\": ariaLabel = \"Rows per page\" } = props;\n  return (\n    <Select\n      defaultValue=\"10\"\n      size=\"32\"\n      aria-label={ariaLabel}\n      className=\"w-[154px] [&_button]:rounded-xs [&_button]:border-transparent [&_button]:bg-transparent\"\n      id={id}\n    >\n      <SelectContent>\n        <SelectItem value=\"10\">10 rows per page</SelectItem>\n        <SelectItem value=\"25\">25 rows per page</SelectItem>\n        <SelectItem value=\"50\">50 rows per page</SelectItem>\n      </SelectContent>\n    </Select>\n  );\n}\n"],"names":["React","jsx","cn","jsxs","Select","SelectContent","SelectItem"],"mappings":"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"}

package/dist/cjs/components/Table/TablePagination.cjs

@@ -0,0 +1,70 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const TablePagination = React__namespace.forwardRef(
+  ({ className, layout = "desktop", leadingSlot, paginationSlot, summary, ...props }, ref) => {
+    if (layout === "mobile") {
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          className: cn.cn("flex w-full max-w-full flex-col gap-3 px-4", className),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center gap-2.5", children: [
+              leadingSlot != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 shrink-0 items-center rounded-xs bg-surface-secondary", children: leadingSlot }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn.cn(
+                    "typography-regular-body-md min-w-0 flex-1 text-content-secondary",
+                    leadingSlot == null && "text-left",
+                    leadingSlot != null && "text-right"
+                  ),
+                  children: summary
+                }
+              )
+            ] }),
+            paginationSlot != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center", children: paginationSlot }) : null
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn.cn("flex w-full flex-wrap items-center gap-3 px-4", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-h-0 min-w-0 flex-1 flex-col items-start justify-center", children: leadingSlot != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "inline-flex min-w-0 rounded-xs bg-surface-secondary", children: leadingSlot }) : null }),
+          paginationSlot != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex shrink-0 items-center justify-center", children: paginationSlot }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "typography-regular-body-md min-w-0 flex-1 text-right text-content-secondary", children: summary })
+        ]
+      }
+    );
+  }
+);
+TablePagination.displayName = "TablePagination";
+exports.TablePagination = TablePagination;
+//# sourceMappingURL=TablePagination.cjs.map

package/dist/cjs/components/Table/TablePagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TablePagination.cjs","sources":["../../../../src/components/Table/TablePagination.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\n\n/** Layout preset for the pagination bar — desktop (range on the right) or stacked mobile. */\nexport type TablePaginationLayout = \"desktop\" | \"mobile\";\n\nexport interface TablePaginationProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Layout preset. @default \"desktop\" */\n  layout?: TablePaginationLayout;\n  /** Left (desktop) or top row (mobile) content, e.g. rows-per-page {@link Select}. */\n  leadingSlot?: React.ReactNode;\n  /** Center (desktop) or bottom row (mobile) content, e.g. {@link Pagination}. */\n  paginationSlot?: React.ReactNode;\n  /** Summary text or node (e.g. current range and total). */\n  summary: React.ReactNode;\n}\n\n/**\n * Footer bar for data tables: rows-per-page control, page navigation, and range\n * summary. Pair `paginationSlot` with {@link Pagination} for numbered controls.\n *\n * @example\n * ```tsx\n * <TablePagination\n *   leadingSlot={<Select size=\"32\" aria-label=\"Rows per page\">…</Select>}\n *   paginationSlot={<Pagination totalPages={5} currentPage={2} onPageChange={setPage} />}\n *   summary=\"20–30 of 100 rows\"\n * />\n * ```\n */\nexport const TablePagination = React.forwardRef<HTMLDivElement, TablePaginationProps>(\n  ({ className, layout = \"desktop\", leadingSlot, paginationSlot, summary, ...props }, ref) => {\n    if (layout === \"mobile\") {\n      return (\n        <div\n          ref={ref}\n          className={cn(\"flex w-full max-w-full flex-col gap-3 px-4\", className)}\n          {...props}\n        >\n          <div className=\"flex w-full items-center gap-2.5\">\n            {leadingSlot != null ? (\n              <div className=\"flex min-w-0 shrink-0 items-center rounded-xs bg-surface-secondary\">\n                {leadingSlot}\n              </div>\n            ) : null}\n            <div\n              className={cn(\n                \"typography-regular-body-md min-w-0 flex-1 text-content-secondary\",\n                leadingSlot == null && \"text-left\",\n                leadingSlot != null && \"text-right\",\n              )}\n            >\n              {summary}\n            </div>\n          </div>\n          {paginationSlot != null ? (\n            <div className=\"flex justify-center\">{paginationSlot}</div>\n          ) : null}\n        </div>\n      );\n    }\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\"flex w-full flex-wrap items-center gap-3 px-4\", className)}\n        {...props}\n      >\n        <div className=\"flex min-h-0 min-w-0 flex-1 flex-col items-start justify-center\">\n          {leadingSlot != null ? (\n            <div className=\"inline-flex min-w-0 rounded-xs bg-surface-secondary\">{leadingSlot}</div>\n          ) : null}\n        </div>\n        {paginationSlot != null ? (\n          <div className=\"flex shrink-0 items-center justify-center\">{paginationSlot}</div>\n        ) : null}\n        <div className=\"typography-regular-body-md min-w-0 flex-1 text-right text-content-secondary\">\n          {summary}\n        </div>\n      </div>\n    );\n  },\n);\nTablePagination.displayName = \"TablePagination\";\n"],"names":["React","jsxs","cn","jsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8BO,MAAM,kBAAkBA,iBAAM;AAAA,EACnC,CAAC,EAAE,WAAW,SAAS,WAAW,aAAa,gBAAgB,SAAS,GAAG,MAAA,GAAS,QAAQ;AAC1F,QAAI,WAAW,UAAU;AACvB,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAWC,GAAAA,GAAG,8CAA8C,SAAS;AAAA,UACpE,GAAG;AAAA,UAEJ,UAAA;AAAA,YAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,cAAA,eAAe,OACdE,2BAAAA,IAAC,OAAA,EAAI,WAAU,sEACZ,uBACH,IACE;AAAA,cACJA,2BAAAA;AAAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAWD,GAAAA;AAAAA,oBACT;AAAA,oBACA,eAAe,QAAQ;AAAA,oBACvB,eAAe,QAAQ;AAAA,kBAAA;AAAA,kBAGxB,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH,GACF;AAAA,YACC,kBAAkB,OACjBC,2BAAAA,IAAC,SAAI,WAAU,uBAAuB,0BAAe,IACnD;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAGV;AAEA,WACEF,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,GAAAA,GAAG,iDAAiD,SAAS;AAAA,QACvE,GAAG;AAAA,QAEJ,UAAA;AAAA,UAAAC,2BAAAA,IAAC,OAAA,EAAI,WAAU,mEACZ,UAAA,eAAe,OACdA,2BAAAA,IAAC,OAAA,EAAI,WAAU,uDAAuD,UAAA,YAAA,CAAY,IAChF,MACN;AAAA,UACC,kBAAkB,OACjBA,2BAAAA,IAAC,SAAI,WAAU,6CAA6C,0BAAe,IACzE;AAAA,UACJA,2BAAAA,IAAC,OAAA,EAAI,WAAU,+EACZ,UAAA,QAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACA,gBAAgB,cAAc;;"}

package/dist/cjs/index.cjs

@@ -11,7 +11,6 @@ const useAudioRecorder = require("./components/AudioUpload/useAudioRecorder.cjs"
 const Autocomplete = require("./components/Autocomplete/Autocomplete.cjs");
 const Avatar = require("./components/Avatar/Avatar.cjs");
 const Badge = require("./components/Badge/Badge.cjs");
-const Banner = require("./components/Banner/Banner.cjs");
 const BottomNavigation = require("./components/BottomNavigation/BottomNavigation.cjs");
 const BottomNavigationAction = require("./components/BottomNavigation/BottomNavigationAction.cjs");
 const Breadcrumb = require("./components/Breadcrumb/Breadcrumb.cjs");
@@ -100,6 +99,7 @@ const MinusIcon = require("./components/Icons/MinusIcon.cjs");
 const MoonIcon = require("./components/Icons/MoonIcon.cjs");
 const MoreIcon = require("./components/Icons/MoreIcon.cjs");
 const MoreVerticalIcon = require("./components/Icons/MoreVerticalIcon.cjs");
+const NewMessageIcon = require("./components/Icons/NewMessageIcon.cjs");
 const PauseIcon = require("./components/Icons/PauseIcon.cjs");
 const PhoneIcon = require("./components/Icons/PhoneIcon.cjs");
 const PhoneOffIcon = require("./components/Icons/PhoneOffIcon.cjs");
@@ -110,6 +110,7 @@ const PrivacyIcon = require("./components/Icons/PrivacyIcon.cjs");
 const RepeatIcon = require("./components/Icons/RepeatIcon.cjs");
 const Reply2Icon = require("./components/Icons/Reply2Icon.cjs");
 const ReplyIcon = require("./components/Icons/ReplyIcon.cjs");
+const ReverseIcon = require("./components/Icons/ReverseIcon.cjs");
 const SearchIcon = require("./components/Icons/SearchIcon.cjs");
 const SendIcon = require("./components/Icons/SendIcon.cjs");
 const SettingsIcon = require("./components/Icons/SettingsIcon.cjs");
@@ -162,6 +163,8 @@ const Snackbar = require("./components/Snackbar/Snackbar.cjs");
 const Switch = require("./components/Switch/Switch.cjs");
 const SwitchField = require("./components/SwitchField/SwitchField.cjs");
 const SwitchToggle = require("./components/SwitchToggle/SwitchToggle.cjs");
+const Table = require("./components/Table/Table.cjs");
+const TablePagination = require("./components/Table/TablePagination.cjs");
 const Tabs = require("./components/Tabs/Tabs.cjs");
 const TabsContent = require("./components/Tabs/TabsContent.cjs");
 const TabsList = require("./components/Tabs/TabsList.cjs");
@@ -184,7 +187,6 @@ exports.AvatarFallback = Avatar.AvatarFallback;
 exports.AvatarImage = Avatar.AvatarImage;
 exports.AvatarRoot = Avatar.AvatarRoot;
 exports.Badge = Badge.Badge;
-exports.Banner = Banner.Banner;
 exports.BottomNavigation = BottomNavigation.BottomNavigation;
 exports.BottomNavigationAction = BottomNavigationAction.BottomNavigationAction;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;
@@ -306,6 +308,7 @@ exports.MinusIcon = MinusIcon.MinusIcon;
 exports.MoonIcon = MoonIcon.MoonIcon;
 exports.MoreIcon = MoreIcon.MoreIcon;
 exports.MoreVerticalIcon = MoreVerticalIcon.MoreVerticalIcon;
+exports.NewMessageIcon = NewMessageIcon.NewMessageIcon;
 exports.PauseIcon = PauseIcon.PauseIcon;
 exports.PhoneIcon = PhoneIcon.PhoneIcon;
 exports.PhoneOffIcon = PhoneOffIcon.PhoneOffIcon;
@@ -316,6 +319,7 @@ exports.PrivacyIcon = PrivacyIcon.PrivacyIcon;
 exports.RepeatIcon = RepeatIcon.RepeatIcon;
 exports.Reply2Icon = Reply2Icon.Reply2Icon;
 exports.ReplyIcon = ReplyIcon.ReplyIcon;
+exports.ReverseIcon = ReverseIcon.ReverseIcon;
 exports.SearchIcon = SearchIcon.SearchIcon;
 exports.SendIcon = SendIcon.SendIcon;
 exports.SettingsIcon = SettingsIcon.SettingsIcon;
@@ -375,6 +379,26 @@ exports.Snackbar = Snackbar.Snackbar;
 exports.Switch = Switch.Switch;
 exports.SwitchField = SwitchField.SwitchField;
 exports.SwitchToggle = SwitchToggle.SwitchToggle;
+exports.Table = Table.Table;
+exports.TableBody = Table.TableBody;
+exports.TableCard = Table.TableCard;
+exports.TableCell = Table.TableCell;
+exports.TableCellGroup = Table.TableCellGroup;
+exports.TableFooter = Table.TableFooter;
+exports.TableHead = Table.TableHead;
+exports.TableHeader = Table.TableHeader;
+exports.TableLineClamp = Table.TableLineClamp;
+exports.TableMediaThumbnail = Table.TableMediaThumbnail;
+exports.TablePillProgressLayout = Table.TablePillProgressLayout;
+exports.TableProgressTrack = Table.TableProgressTrack;
+exports.TableRow = Table.TableRow;
+exports.TableRowsPerPageSelect = Table.TableRowsPerPageSelect;
+exports.TableScrollArea = Table.TableScrollArea;
+exports.TableSortLabel = Table.TableSortLabel;
+exports.TableStackedText = Table.TableStackedText;
+exports.TableStatusDot = Table.TableStatusDot;
+exports.TableToolbar = Table.TableToolbar;
+exports.TablePagination = TablePagination.TablePagination;
 exports.Tabs = Tabs.Tabs;
 exports.TabsContent = TabsContent.TabsContent;
 exports.TabsList = TabsList.TabsList;

package/dist/cjs/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/utils/floatingContentCollisionPadding.cjs

@@ -0,0 +1,6 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const FLOATING_CONTENT_COLLISION_PADDING = 16;
+exports.FLOATING_CONTENT_COLLISION_PADDING = FLOATING_CONTENT_COLLISION_PADDING;
+//# sourceMappingURL=floatingContentCollisionPadding.cjs.map