@uisatin/ui 0.1.0 → 0.2.0

package/chunk-TOMSU4S4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/banner.tsx"],"names":[],"mappings":"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","file":"chunk-TOMSU4S4.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { Xmark } from 'iconoir-react'\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\n\n/**\n * Banner, 1:1 with the uiKit `Banner` set (3822:3475): a title, an optional description (one\n * or two lines) and one action, on bg/card with a 1px border/default and the shadcn md shadow.\n *\n * - layout=\"horizontal\": 450 wide, one row, 12 × 8 padding, 10 gap; the action and the close\n *   button sit on the right, 4px apart.\n * - layout=\"sidebar\": 222 wide (the navigation column's inner width), 12 padding, 12 gap; copy on\n *   top, the action stretched across the bottom, close pinned 3px from the top-right corner.\n * - shape=\"rounded\" is radius-xl (12). shape=\"pill\" is fully round on a one-line horizontal\n *   banner and radius-3xl (20) wherever the banner is taller.\n * - background=\"mesh\" lays two pre-rendered glows over the card: a light one in Multiply (shows\n *   on white, gone on dark) and a dark one in Screen (glows on dark, gone on white), so it follows\n *   the theme without variables. Figma renders one pair per layout and line count; the PNGs live\n *   in satin-lab/public/figma and can be swapped with `mesh`.\n *\n * tone=\"primary\" turns the card action/primary/bg (border action/primary/border) with\n * action/primary/fg copy (description at 80%); its mesh is the dark glow alone, in Screen, so it\n * lightens the primary. `shimmer` sends a soft band of light across now and then.\n *\n * Title is 14/18 medium, description Body/md in text/muted, 2px apart. The close\n * button only renders when `onDismiss` is passed.\n */\nconst bannerVariants = cva(\n  [\n    'relative isolate flex max-w-full overflow-clip border border-border-default bg-bg-card',\n    '[box-shadow:0_2px_4px_-2px_var(--effect-shadow-sm),0_4px_6px_-1px_var(--effect-shadow-sm)]',\n  ],\n  {\n    variants: {\n      layout: {\n        horizontal: 'w-[450px] items-center gap-2.5 px-3 py-2',\n        sidebar: 'w-[222px] flex-col items-start gap-3 p-3',\n      },\n      shape: {\n        rounded: 'rounded-xl',\n        pill: 'rounded-3xl',\n      },\n      lines: {\n        one: '',\n        two: '',\n      },\n    },\n    compoundVariants: [{ layout: 'horizontal', shape: 'pill', lines: 'one', className: 'rounded-pill' }],\n    defaultVariants: { layout: 'horizontal', shape: 'rounded', lines: 'one' },\n  },\n)\n\ntype Mesh = { light: string; dark: string }\n\n/** Figma's pre-rendered mesh pairs, per layout and line count (served from satin-lab/public). */\nexport const bannerMesh: Record<'horizontal' | 'sidebar', Record<'one' | 'two', Mesh>> = {\n  horizontal: {\n    one: { light: '/figma/banner-mesh-light.png', dark: '/figma/banner-mesh-dark.png' },\n    two: { light: '/figma/banner-mesh-two-light.png', dark: '/figma/banner-mesh-two-dark.png' },\n  },\n  sidebar: {\n    one: { light: '/figma/banner-mesh-sidebar-light.png', dark: '/figma/banner-mesh-sidebar-dark.png' },\n    two: { light: '/figma/mesh-light.png', dark: '/figma/mesh-dark.png' },\n  },\n}\n\nexport interface BannerProps\n  extends Omit<React.ComponentProps<'div'>, 'title'>,\n    Omit<VariantProps<typeof bannerVariants>, 'lines'> {\n  title: React.ReactNode\n  description?: React.ReactNode\n  /** One action, usually `<Button variant=\"secondary\">`. Stretches across a sidebar banner. */\n  action?: React.ReactNode\n  background?: 'mesh' | 'plain'\n  /** `primary`: action/primary/bg with action/primary/fg text; its mesh glows lighter on top. */\n  tone?: 'default' | 'primary'\n  /** Now and then a soft band of light crosses the banner (off under reduced motion). */\n  shimmer?: boolean\n  /** Shows the close button. */\n  onDismiss?: () => void\n  /** Accessible name of the close button. */\n  dismissLabel?: string\n  /** Replace the mesh images. */\n  mesh?: Mesh\n}\n\nexport function Banner({\n  className,\n  title,\n  description,\n  action,\n  layout = 'horizontal',\n  background = 'mesh',\n  tone = 'default',\n  shimmer = false,\n  shape = 'rounded',\n  onDismiss,\n  dismissLabel = 'Dismiss',\n  mesh,\n  ...props\n}: BannerProps) {\n  const lines = description ? 'two' : 'one'\n  const layoutKey = layout ?? 'horizontal'\n  const glow = mesh ?? bannerMesh[layoutKey][lines]\n  const sidebar = layoutKey === 'sidebar'\n  const primary = tone === 'primary'\n\n  const close = onDismiss && (\n    <Button\n      variant=\"tertiary\"\n      shape=\"rounded\"\n      iconOnly\n      aria-label={dismissLabel}\n      onClick={onDismiss}\n      className={cn(\n        sidebar && 'absolute top-[3px] right-[3px] z-10',\n        primary && 'text-action-primary-fg [&_svg]:text-action-primary-fg satin-hover:bg-action-primary-bg-hover',\n      )}\n    >\n      <Xmark aria-hidden />\n    </Button>\n  )\n\n  return (\n    <div\n      data-slot=\"banner\"\n      data-layout={layoutKey}\n      data-background={background}\n      data-tone={tone}\n      className={cn(\n        bannerVariants({ layout, shape, lines }),\n        primary && 'border-action-primary-border bg-action-primary-bg',\n        shimmer && 'satin-sheen',\n        className,\n      )}\n      {...props}\n    >\n      {background === 'mesh' && primary && (\n        <img\n          src={glow.dark}\n          alt=\"\"\n          aria-hidden\n          className=\"pointer-events-none absolute -inset-px -z-10 size-[calc(100%+2px)] max-w-none object-cover mix-blend-screen\"\n        />\n      )}\n      {background === 'mesh' && !primary && (\n        <>\n          <img\n            src={glow.light}\n            alt=\"\"\n            aria-hidden\n            className=\"pointer-events-none absolute -inset-px -z-10 size-[calc(100%+2px)] max-w-none object-cover mix-blend-multiply\"\n          />\n          <img\n            src={glow.dark}\n            alt=\"\"\n            aria-hidden\n            className=\"pointer-events-none absolute -inset-px -z-10 size-[calc(100%+2px)] max-w-none object-cover mix-blend-screen\"\n          />\n        </>\n      )}\n      <div\n        className={cn(\n          'flex min-w-0 flex-col justify-center text-sm',\n          sidebar ? 'w-full' : 'flex-1',\n          description && 'gap-0.5',\n        )}\n      >\n        <p className={cn('truncate text-base leading-[18px] font-medium', primary ? 'text-action-primary-fg' : 'text-text-default')}>{title}</p>\n        {description && (\n          <p className={cn('text-body', primary ? 'text-action-primary-fg/80' : 'text-text-muted', !sidebar && 'truncate')}>{description}</p>\n        )}\n      </div>\n      {sidebar ? (\n        <>\n          {action && <div className=\"flex w-full items-center *:flex-1\">{action}</div>}\n          {close}\n        </>\n      ) : (\n        (action || close) && (\n          <div className=\"flex shrink-0 items-center gap-1\">\n            {action}\n            {close}\n          </div>\n        )\n      )}\n    </div>\n  )\n}\n\nexport { bannerVariants }\n"]}

package/chunk-TVLGZGYN.js

@@ -1,59 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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"]}