@uisatin/ui 0.0.0-stage → 0.1.1

package/chunk-TKO44NDI.js

@@ -0,0 +1,84 @@
+import { CloseIcon } from './chunk-JPNWHWAQ.js';
+import { Button } from './chunk-HNQUX43Z.js';
+import { cn } from './chunk-H63FYCMY.js';
+import 'react';
+import { Dialog } from 'radix-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Sheet({
+  open,
+  defaultOpen,
+  onOpenChange,
+  trigger,
+  side = "right",
+  title,
+  description,
+  footer,
+  children,
+  modal = true,
+  container,
+  onOpenAutoFocus,
+  className
+}) {
+  const position = container ? "absolute" : "fixed";
+  return /* @__PURE__ */ jsxs(Dialog.Root, { open, defaultOpen, onOpenChange, modal, children: [
+    trigger && /* @__PURE__ */ jsx(Dialog.Trigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs(Dialog.Portal, { container, children: [
+      /* @__PURE__ */ jsx(
+        Dialog.Overlay,
+        {
+          className: cn(
+            position,
+            "inset-0 z-50 bg-black-a40",
+            "data-[state=open]:animate-[satin-fade-in_var(--duration-slow)_var(--ease-out)]",
+            "data-[state=closed]:animate-[satin-fade-out_var(--duration-base)_var(--ease-out)]"
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        Dialog.Content,
+        {
+          "data-slot": "sheet",
+          "data-side": side,
+          onOpenAutoFocus,
+          ...description ? {} : { "aria-describedby": void 0 },
+          className: cn(
+            position,
+            "z-50 flex flex-col gap-4 bg-bg-card p-4 outline-none",
+            "[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]",
+            // Flush with its edge: no radius and no border on the side that touches it.
+            side === "bottom" && "inset-x-0 bottom-0 max-h-[85%] rounded-t-2xl border-t border-border-subtle pt-6",
+            side === "right" && "inset-y-0 right-0 w-[400px] max-w-[calc(100%-32px)] rounded-l-2xl border-l border-border-subtle",
+            side === "left" && "inset-y-0 left-0 w-[400px] max-w-[calc(100%-32px)] rounded-r-2xl border-r border-border-subtle",
+            side === "bottom" && "data-[state=open]:animate-[satin-sheet-up_var(--duration-slow)_var(--ease-out)] data-[state=closed]:animate-[satin-sheet-down_var(--duration-base)_var(--ease-out)]",
+            side === "right" && "data-[state=open]:animate-[satin-sheet-left_var(--duration-slow)_var(--ease-out)] data-[state=closed]:animate-[satin-sheet-right_var(--duration-base)_var(--ease-out)]",
+            side === "left" && "data-[state=open]:animate-[satin-sheet-from-left_var(--duration-slow)_var(--ease-out)] data-[state=closed]:animate-[satin-sheet-to-left_var(--duration-base)_var(--ease-out)]",
+            className
+          ),
+          children: [
+            side === "bottom" && /* @__PURE__ */ jsx(
+              Dialog.Close,
+              {
+                "aria-label": "Close",
+                className: "absolute inset-x-4 top-0 flex h-6 cursor-pointer items-center justify-center rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-action-focus-ring",
+                children: /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "h-1 w-9 rounded-full bg-border-strong" })
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-0.5", side !== "bottom" && "pr-8"), children: [
+              /* @__PURE__ */ jsx(Dialog.Title, { className: "text-base leading-[21px] font-medium text-text-default", children: title }),
+              description ? /* @__PURE__ */ jsx(Dialog.Description, { className: "text-sm text-text-muted", children: description }) : null
+            ] }),
+            children != null && /* @__PURE__ */ jsx("div", { className: "flex min-h-0 flex-1 flex-col overflow-y-auto", children }),
+            footer && /* @__PURE__ */ jsx("div", { className: cn("flex shrink-0 items-center justify-end gap-2", side === "bottom" && "*:flex-1"), children: footer }),
+            side !== "bottom" && /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "xl", iconOnly: true, "aria-label": "Close", className: "absolute top-[7px] right-[7px] rounded-lg", children: /* @__PURE__ */ jsx(CloseIcon, {}) }) })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var SheetClose = Dialog.Close;
+
+export { Sheet, SheetClose };
+//# sourceMappingURL=chunk-TKO44NDI.js.map
+//# sourceMappingURL=chunk-TKO44NDI.js.map

package/chunk-TKO44NDI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/sheet.tsx"],"names":["DialogPrimitive"],"mappings":"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","file":"chunk-TKO44NDI.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Dialog as DialogPrimitive } from 'radix-ui'\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\nimport { CloseIcon } from './dialog'\n\n/**\n * Sheet, 1:1 with the uiKit `Sheet` set (4025:3504): a panel that slides in from an edge and sits\n * flush with it, square and borderless on that side. bottom for phones (full width, radius-2xl\n * on the top corners, a 24px handle band with a 36 × 4 border/strong grip); right or left for\n * wider screens (400px, full height, radius-2xl on the inner corners, the Dialog's 36px close\n * button 7px from the top-right corner). Both are bg/card with a\n * border/subtle edge on the open side and the shadcn `lg` shadow, 16px in and 16px between a\n * header (14px medium title over a 13px muted description, 2px apart), the content and a\n * right-aligned footer of buttons 8px apart (on the bottom sheet they share the width).\n *\n * Built on the Radix Dialog: focus moves in on open and back to the trigger on close; Escape,\n * the backdrop or the handle closes it. It slides in over 250 ms on ease-out and out over 200.\n */\nexport interface SheetProps {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Optional element that opens the sheet (rendered with `asChild`, so pass a Button). */\n  trigger?: React.ReactNode\n  side?: 'bottom' | 'right' | 'left'\n  title: React.ReactNode\n  description?: React.ReactNode\n  /** The buttons at the bottom. Wrap one in `SheetClose` to make it close the sheet. */\n  footer?: React.ReactNode\n  children?: React.ReactNode\n  /** Modal blocks the page and shows the overlay; turn it off for inline previews. */\n  modal?: boolean\n  /** Portal target. Defaults to `document.body`. */\n  container?: HTMLElement | null\n  onOpenAutoFocus?: (event: Event) => void\n  className?: string\n}\n\nexport function Sheet({\n  open,\n  defaultOpen,\n  onOpenChange,\n  trigger,\n  side = 'right',\n  title,\n  description,\n  footer,\n  children,\n  modal = true,\n  container,\n  onOpenAutoFocus,\n  className,\n}: SheetProps) {\n  const position = container ? 'absolute' : 'fixed'\n  return (\n    <DialogPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} modal={modal}>\n      {trigger && <DialogPrimitive.Trigger asChild>{trigger}</DialogPrimitive.Trigger>}\n      <DialogPrimitive.Portal container={container}>\n        <DialogPrimitive.Overlay\n          className={cn(\n            position,\n            'inset-0 z-50 bg-black-a40',\n            'data-[state=open]:animate-[satin-fade-in_var(--duration-slow)_var(--ease-out)]',\n            'data-[state=closed]:animate-[satin-fade-out_var(--duration-base)_var(--ease-out)]',\n          )}\n        />\n        <DialogPrimitive.Content\n          data-slot=\"sheet\"\n          data-side={side}\n          onOpenAutoFocus={onOpenAutoFocus}\n          {...(description ? {} : { 'aria-describedby': undefined })}\n          className={cn(\n            position,\n            'z-50 flex flex-col gap-4 bg-bg-card p-4 outline-none',\n            '[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]',\n            // Flush with its edge: no radius and no border on the side that touches it.\n            side === 'bottom' && 'inset-x-0 bottom-0 max-h-[85%] rounded-t-2xl border-t border-border-subtle pt-6',\n            side === 'right' && 'inset-y-0 right-0 w-[400px] max-w-[calc(100%-32px)] rounded-l-2xl border-l border-border-subtle',\n            side === 'left' && 'inset-y-0 left-0 w-[400px] max-w-[calc(100%-32px)] rounded-r-2xl border-r border-border-subtle',\n            side === 'bottom' &&\n              'data-[state=open]:animate-[satin-sheet-up_var(--duration-slow)_var(--ease-out)] data-[state=closed]:animate-[satin-sheet-down_var(--duration-base)_var(--ease-out)]',\n            side === 'right' &&\n              'data-[state=open]:animate-[satin-sheet-left_var(--duration-slow)_var(--ease-out)] data-[state=closed]:animate-[satin-sheet-right_var(--duration-base)_var(--ease-out)]',\n            side === 'left' &&\n              'data-[state=open]:animate-[satin-sheet-from-left_var(--duration-slow)_var(--ease-out)] data-[state=closed]:animate-[satin-sheet-to-left_var(--duration-base)_var(--ease-out)]',\n            className,\n          )}\n        >\n          {side === 'bottom' && (\n            <DialogPrimitive.Close\n              aria-label=\"Close\"\n              className=\"absolute inset-x-4 top-0 flex h-6 cursor-pointer items-center justify-center rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-action-focus-ring\"\n            >\n              <span aria-hidden className=\"h-1 w-9 rounded-full bg-border-strong\" />\n            </DialogPrimitive.Close>\n          )}\n\n          <div className={cn('flex flex-col gap-0.5', side !== 'bottom' && 'pr-8')}>\n            <DialogPrimitive.Title className=\"text-base leading-[21px] font-medium text-text-default\">{title}</DialogPrimitive.Title>\n            {description ? (\n              <DialogPrimitive.Description className=\"text-sm text-text-muted\">{description}</DialogPrimitive.Description>\n            ) : null}\n          </div>\n\n          {children != null && <div className=\"flex min-h-0 flex-1 flex-col overflow-y-auto\">{children}</div>}\n\n          {footer && (\n            <div className={cn('flex shrink-0 items-center justify-end gap-2', side === 'bottom' && '*:flex-1')}>{footer}</div>\n          )}\n\n          {side !== 'bottom' && (\n            <DialogPrimitive.Close asChild>\n              <Button variant=\"tertiary\" size=\"xl\" iconOnly aria-label=\"Close\" className=\"absolute top-[7px] right-[7px] rounded-lg\">\n                <CloseIcon />\n              </Button>\n            </DialogPrimitive.Close>\n          )}\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  )\n}\n\n/** Wrap a footer button in this to make it close the sheet: `<SheetClose asChild><Button…/></SheetClose>`. */\nexport const SheetClose = DialogPrimitive.Close\n"]}

package/chunk-TVLGZGYN.js

@@ -0,0 +1,59 @@
+import { Tooltip } from './chunk-B6V4VSGH.js';
+import { cn } from './chunk-H63FYCMY.js';
+import 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var avatarVariants = cva(
+  "inline-flex shrink-0 items-center justify-center overflow-clip bg-tone-bg text-center whitespace-nowrap text-tone-fg select-none",
+  {
+    variants: {
+      size: {
+        16: "size-4 text-[7px] leading-[8px] font-semibold tracking-normal",
+        20: "size-5 text-[9px] leading-[10px] font-semibold tracking-normal",
+        24: "size-6 text-2xs font-semibold",
+        32: "size-8 text-sm leading-4 font-medium tracking-normal",
+        40: "size-10 text-base leading-[14px] font-medium tracking-normal",
+        48: "size-12 text-lg font-medium"
+      },
+      shape: {
+        circle: "rounded-full",
+        rounded: ""
+      }
+    },
+    compoundVariants: [
+      { shape: "rounded", size: 16, className: "rounded-xs" },
+      { shape: "rounded", size: 20, className: "rounded-xs" },
+      { shape: "rounded", size: 24, className: "rounded-sm" },
+      { shape: "rounded", size: 32, className: "rounded-md" },
+      { shape: "rounded", size: 40, className: "rounded-lg" },
+      { shape: "rounded", size: 48, className: "rounded-xl" }
+    ],
+    defaultVariants: { size: 32, shape: "circle" }
+  }
+);
+var AVATAR_TOOLTIP_DELAY = 400;
+var AVATAR_TOOLTIP_CLOSE = 150;
+function Avatar({ className, initials, tone = "neutral", size = 32, shape, name, ...props }) {
+  const avatar = /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "avatar",
+      "data-tone": tone,
+      ...name ? { role: "img", "aria-label": name, tabIndex: 0 } : {},
+      className: cn(
+        avatarVariants({ size, shape }),
+        name && "outline-none focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": name ? true : void 0, children: initials })
+    }
+  );
+  if (!name) return avatar;
+  return /* @__PURE__ */ jsx(Tooltip, { label: name, delay: AVATAR_TOOLTIP_DELAY, closeDelay: AVATAR_TOOLTIP_CLOSE, children: avatar });
+}
+
+export { AVATAR_TOOLTIP_DELAY, Avatar, avatarVariants };
+//# sourceMappingURL=chunk-TVLGZGYN.js.map
+//# sourceMappingURL=chunk-TVLGZGYN.js.map

package/chunk-TVLGZGYN.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/avatar.tsx"],"names":[],"mappings":";;;;;;AAwBA,IAAM,cAAA,GAAiB,GAAA;AAAA,EACrB,kIAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,+DAAA;AAAA,QACJ,EAAA,EAAI,gEAAA;AAAA,QACJ,EAAA,EAAI,+BAAA;AAAA,QACJ,EAAA,EAAI,sDAAA;AAAA,QACJ,EAAA,EAAI,8DAAA;AAAA,QACJ,EAAA,EAAI;AAAA,OACN;AAAA,MACA,KAAA,EAAO;AAAA,QACL,MAAA,EAAQ,cAAA;AAAA,QACR,OAAA,EAAS;AAAA;AACX,KACF;AAAA,IACA,gBAAA,EAAkB;AAAA,MAChB,EAAE,KAAA,EAAO,SAAA,EAAW,IAAA,EAAM,EAAA,EAAI,WAAW,YAAA,EAAa;AAAA,MACtD,EAAE,KAAA,EAAO,SAAA,EAAW,IAAA,EAAM,EAAA,EAAI,WAAW,YAAA,EAAa;AAAA,MACtD,EAAE,KAAA,EAAO,SAAA,EAAW,IAAA,EAAM,EAAA,EAAI,WAAW,YAAA,EAAa;AAAA,MACtD,EAAE,KAAA,EAAO,SAAA,EAAW,IAAA,EAAM,EAAA,EAAI,WAAW,YAAA,EAAa;AAAA,MACtD,EAAE,KAAA,EAAO,SAAA,EAAW,IAAA,EAAM,EAAA,EAAI,WAAW,YAAA,EAAa;AAAA,MACtD,EAAE,KAAA,EAAO,SAAA,EAAW,IAAA,EAAM,EAAA,EAAI,WAAW,YAAA;AAAa,KACxD;AAAA,IACA,eAAA,EAAiB,EAAE,IAAA,EAAM,EAAA,EAAI,OAAO,QAAA;AAAS;AAEjD;AAcO,IAAM,oBAAA,GAAuB;AACpC,IAAM,oBAAA,GAAuB,GAAA;AAEtB,SAAS,MAAA,CAAO,EAAE,SAAA,EAAW,QAAA,EAAU,IAAA,GAAO,SAAA,EAAW,IAAA,GAAO,EAAA,EAAI,KAAA,EAAO,IAAA,EAAM,GAAG,KAAA,EAAM,EAAgB;AAC/G,EAAA,MAAM,MAAA,mBACJ,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,QAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACV,GAAI,IAAA,GAAO,EAAE,IAAA,EAAM,KAAA,EAAO,cAAc,IAAA,EAAM,QAAA,EAAU,CAAA,EAAE,GAAI,EAAC;AAAA,MAChE,SAAA,EAAW,EAAA;AAAA,QACT,cAAA,CAAe,EAAE,IAAA,EAAM,KAAA,EAAO,CAAA;AAAA,QAC9B,IAAA,IAAQ,4EAAA;AAAA,QACR;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEJ,8BAAC,MAAA,EAAA,EAAK,aAAA,EAAa,IAAA,GAAO,IAAA,GAAO,QAAY,QAAA,EAAA,QAAA,EAAS;AAAA;AAAA,GACxD;AAEF,EAAA,IAAI,CAAC,MAAM,OAAO,MAAA;AAClB,EAAA,uBACE,GAAA,CAAC,WAAQ,KAAA,EAAO,IAAA,EAAM,OAAO,oBAAA,EAAsB,UAAA,EAAY,sBAC5D,QAAA,EAAA,MAAA,EACH,CAAA;AAEJ","file":"chunk-TVLGZGYN.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../lib/utils'\nimport { Tooltip } from './tooltip'\n\nexport type AvatarTone = 'neutral' | 'brand' | 'sky' | 'green' | 'amber' | 'red' | 'fuchsia' | 'plum'\nexport type AvatarSize = 16 | 20 | 24 | 32 | 40 | 48\n\n/**\n * Avatar, 1:1 with the uiKit `Avatar` set (992:20199): initials on a tone fill, the same eight\n * hue pairs as Badge (`tone/bg` fill, `tone/fg` text, no border), six px sizes and a Circle or\n * Rounded shape. Rounded steps the radius with the size: 4 / 4 / 6 / 8 / 10 / 12.\n *\n * Type per size, from Figma: 16 → SemiBold 7/8, 20 → SemiBold 9/10 (no kit token for either),\n * 24 → text/2xs SemiBold, 32 → Label/sm 13/16, 40 → Label/lg 14/14, 48 → text/lg Medium.\n * Groups (docs example 3889:7365) overlap with -8px and stack the first on top.\n *\n * With `name` the avatar says who it is: it becomes an image named after the person, takes\n * keyboard focus, and shows the name in a Tooltip. On hover the tooltip waits 400 ms — the middle\n * of the 0.3–0.5 s NN/g recommends, so a pointer passing over a row of faces doesn't flash names —\n * and stays 150 ms after the pointer leaves. Keyboard focus shows it at once.\n */\nconst avatarVariants = cva(\n  'inline-flex shrink-0 items-center justify-center overflow-clip bg-tone-bg text-center whitespace-nowrap text-tone-fg select-none',\n  {\n    variants: {\n      size: {\n        16: 'size-4 text-[7px] leading-[8px] font-semibold tracking-normal',\n        20: 'size-5 text-[9px] leading-[10px] font-semibold tracking-normal',\n        24: 'size-6 text-2xs font-semibold',\n        32: 'size-8 text-sm leading-4 font-medium tracking-normal',\n        40: 'size-10 text-base leading-[14px] font-medium tracking-normal',\n        48: 'size-12 text-lg font-medium',\n      },\n      shape: {\n        circle: 'rounded-full',\n        rounded: '',\n      },\n    },\n    compoundVariants: [\n      { shape: 'rounded', size: 16, className: 'rounded-xs' },\n      { shape: 'rounded', size: 20, className: 'rounded-xs' },\n      { shape: 'rounded', size: 24, className: 'rounded-sm' },\n      { shape: 'rounded', size: 32, className: 'rounded-md' },\n      { shape: 'rounded', size: 40, className: 'rounded-lg' },\n      { shape: 'rounded', size: 48, className: 'rounded-xl' },\n    ],\n    defaultVariants: { size: 32, shape: 'circle' },\n  },\n)\n\nexport interface AvatarProps\n  extends Omit<React.ComponentProps<'span'>, 'children'>,\n    Omit<VariantProps<typeof avatarVariants>, 'size'> {\n  /** One or two letters, or a count like \"+3\" at the end of a group. */\n  initials: string\n  tone?: AvatarTone\n  size?: AvatarSize\n  /** The person's name: shown in a tooltip on hover and focus, and read by screen readers. */\n  name?: string\n}\n\n/** NN/g: wait 0.3–0.5 s before showing hidden content on hover; we take the middle. */\nexport const AVATAR_TOOLTIP_DELAY = 400\nconst AVATAR_TOOLTIP_CLOSE = 150\n\nexport function Avatar({ className, initials, tone = 'neutral', size = 32, shape, name, ...props }: AvatarProps) {\n  const avatar = (\n    <span\n      data-slot=\"avatar\"\n      data-tone={tone}\n      {...(name ? { role: 'img', 'aria-label': name, tabIndex: 0 } : {})}\n      className={cn(\n        avatarVariants({ size, shape }),\n        name && 'outline-none focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]',\n        className,\n      )}\n      {...props}\n    >\n      <span aria-hidden={name ? true : undefined}>{initials}</span>\n    </span>\n  )\n  if (!name) return avatar\n  return (\n    <Tooltip label={name} delay={AVATAR_TOOLTIP_DELAY} closeDelay={AVATAR_TOOLTIP_CLOSE}>\n      {avatar}\n    </Tooltip>\n  )\n}\n\nexport { avatarVariants }\n"]}