@devalok/shilp-sutra 0.56.0 → 0.59.0

package/dist/_chunks/mention-suggestion.js

@@ -19,7 +19,7 @@ function m({ node: e }) {
 			href: /^https?:\/\//.test(e.attrs.url) ? e.attrs.url : "#",
 			target: "_blank",
 			rel: "noopener noreferrer",
-			className: "inline-flex items-center gap-ds-03 rounded-control border border-surface-border-strong bg-surface-raised px-ds-04 py-ds-03 text-body-sm text-surface-fg transition-colors hover:border-surface-border-strong hover:bg-surface-raised-hover",
+			className: "inline-flex items-center gap-ds-03 rounded-control border border-surface-border-strong bg-surface-panel px-ds-04 py-ds-03 text-body-sm text-surface-fg transition-colors hover:border-surface-border-strong hover:bg-surface-panel-hover",
 			contentEditable: !1,
 			children: [
 				/* @__PURE__ */ i(t, {
@@ -80,7 +80,7 @@ var h = u.create({
 			role: "option",
 			"aria-selected": r === s,
 			onClick: () => n(t),
-			className: e("flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-body-sm", r === s ? "bg-surface-raised text-surface-fg" : "text-surface-fg-muted hover:bg-surface-raised"),
+			className: e("flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-body-sm", r === s ? "bg-surface-panel-hover text-surface-fg" : "text-surface-fg-muted hover:bg-surface-panel-hover"),
 			children: [t.avatar ? /* @__PURE__ */ i("img", {
 				src: t.avatar,
 				alt: "",

package/dist/_chunks/mention-suggestion.js.map

@@ -1 +1 @@
-{"version":3,"file":"mention-suggestion.js","names":[],"sources":["../../src/composed/extensions/file-attachment.tsx","../../src/composed/extensions/mention-suggestion.tsx"],"sourcesContent":["import { IconDownload,IconFile } from '@tabler/icons-react'\nimport { mergeAttributes,Node } from '@tiptap/core'\nimport { type NodeViewProps,NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'\n\nimport { Icon } from '../../ui/icon'\nimport { TruncatedText } from '../../ui/truncated-text'\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes < 1024) return `${bytes} B`\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n\nfunction FileAttachmentView({ node }: NodeViewProps) {\n  const safeUrl = /^https?:\\/\\//.test(node.attrs.url) ? node.attrs.url : '#'\n  return (\n    <NodeViewWrapper className=\"my-ds-02\">\n      <a\n        href={safeUrl}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className=\"inline-flex items-center gap-ds-03 rounded-control border border-surface-border-strong bg-surface-raised px-ds-04 py-ds-03 text-body-sm text-surface-fg transition-colors hover:border-surface-border-strong hover:bg-surface-raised-hover\"\n        contentEditable={false}\n      >\n        <Icon icon={IconFile} size=\"sm\" className=\"shrink-0 text-surface-fg-subtle\" />\n        <TruncatedText mode=\"middle\" className=\"min-w-0\">{node.attrs.name}</TruncatedText>\n        <span className=\"shrink-0 text-surface-fg-subtle\">({formatFileSize(node.attrs.size)})</span>\n        <Icon icon={IconDownload} size=\"sm\" className=\"shrink-0 text-surface-fg-subtle\" />\n      </a>\n    </NodeViewWrapper>\n  )\n}\n\nexport const FileAttachment = Node.create({\n  name: 'fileAttachment',\n  group: 'block',\n  atom: true,\n\n  addAttributes() {\n    return {\n      url: { default: null },\n      name: { default: 'Untitled' },\n      size: { default: 0 },\n    }\n  },\n\n  parseHTML() {\n    return [{ tag: 'div[data-file-attachment]' }]\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return ['div', mergeAttributes({ 'data-file-attachment': '' }, HTMLAttributes)]\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(FileAttachmentView)\n  },\n})\n","import type { SuggestionKeyDownProps,SuggestionProps } from '@tiptap/suggestion'\nimport * as React from 'react'\nimport { createRoot, type Root } from 'react-dom/client'\n\nimport { cn } from '../../ui/lib/utils'\nimport type { MentionItem } from '../rich-text-editor'\n\ninterface MentionListRef {\n  onKeyDown: (props: SuggestionKeyDownProps) => boolean\n}\n\ninterface MentionListProps {\n  items: MentionItem[]\n  command: (item: MentionItem) => void\n}\n\nconst MentionList = React.forwardRef<MentionListRef, MentionListProps>(\n  ({ items, command }, ref) => {\n    const [selectedIndex, setSelectedIndex] = React.useState(0)\n\n    React.useEffect(() => setSelectedIndex(0), [items])\n\n    React.useImperativeHandle(ref, () => ({\n      onKeyDown: ({ event }: SuggestionKeyDownProps) => {\n        if (event.key === 'ArrowUp') {\n          setSelectedIndex((i) => (i + items.length - 1) % items.length)\n          return true\n        }\n        if (event.key === 'ArrowDown') {\n          setSelectedIndex((i) => (i + 1) % items.length)\n          return true\n        }\n        if (event.key === 'Enter') {\n          if (items[selectedIndex]) command(items[selectedIndex])\n          return true\n        }\n        return false\n      },\n    }))\n\n    if (!items.length) return null\n\n    return (\n      <div role=\"listbox\" aria-label=\"Mention suggestions\" className=\"z-popover overflow-hidden rounded-control bg-surface-overlay shadow-raised-hover\">\n        {items.map((item, index) => (\n          <button\n            key={item.id}\n            type=\"button\"\n            role=\"option\"\n            aria-selected={index === selectedIndex}\n            onClick={() => command(item)}\n            className={cn(\n              'flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-body-sm',\n              index === selectedIndex ? 'bg-surface-raised text-surface-fg' : 'text-surface-fg-muted hover:bg-surface-raised',\n            )}\n          >\n            {item.avatar ? (\n              <img src={item.avatar} alt=\"\" className=\"h-ico-md w-ico-md rounded-pill object-cover\" />\n            ) : (\n              <span className=\"flex h-ico-md w-ico-md items-center justify-center rounded-pill bg-accent-2 text-[10px] font-semibold text-accent-11\">\n                {item.label.charAt(0).toUpperCase()}\n              </span>\n            )}\n            <span>{item.label}</span>\n          </button>\n        ))}\n      </div>\n    )\n  },\n)\nMentionList.displayName = 'MentionList'\n\nexport function createSuggestionRenderer(onMentionSelect?: (item: MentionItem) => void) {\n  return () => {\n    let root: Root | null = null\n    let container: HTMLDivElement | null = null\n    let componentRef: MentionListRef | null = null\n\n    return {\n      onStart: (props: SuggestionProps<MentionItem>) => {\n        container = document.createElement('div')\n        container.style.position = 'absolute'\n        container.style.zIndex = '1400' // z-popover\n\n        const rect = props.clientRect?.()\n        if (rect) {\n          container.style.left = `${rect.left}px`\n          container.style.top = `${rect.bottom + 4}px`\n        }\n        document.body.appendChild(container)\n\n        root = createRoot(container)\n        root.render(\n          <MentionList\n            ref={(r) => { componentRef = r }}\n            items={props.items as MentionItem[]}\n            command={(item) => {\n              props.command({ id: item.id, label: item.label })\n              onMentionSelect?.(item)\n            }}\n          />,\n        )\n      },\n\n      onUpdate: (props: SuggestionProps<MentionItem>) => {\n        if (!root || !container) return\n\n        const rect = props.clientRect?.()\n        if (rect) {\n          container.style.left = `${rect.left}px`\n          container.style.top = `${rect.bottom + 4}px`\n        }\n\n        root.render(\n          <MentionList\n            ref={(r) => { componentRef = r }}\n            items={props.items as MentionItem[]}\n            command={(item) => {\n              props.command({ id: item.id, label: item.label })\n              onMentionSelect?.(item)\n            }}\n          />,\n        )\n      },\n\n      onKeyDown: (props: SuggestionKeyDownProps) => {\n        if (props.event.key === 'Escape') {\n          if (container) {\n            root?.unmount()\n            container.remove()\n            container = null\n            root = null\n          }\n          return true\n        }\n        return componentRef?.onKeyDown(props) ?? false\n      },\n\n      onExit: () => {\n        if (container) {\n          root?.unmount()\n          container.remove()\n          container = null\n          root = null\n        }\n      },\n    }\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"mention-suggestion.js","names":[],"sources":["../../src/composed/extensions/file-attachment.tsx","../../src/composed/extensions/mention-suggestion.tsx"],"sourcesContent":["import { IconDownload,IconFile } from '@tabler/icons-react'\nimport { mergeAttributes,Node } from '@tiptap/core'\nimport { type NodeViewProps,NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'\n\nimport { Icon } from '../../ui/icon'\nimport { TruncatedText } from '../../ui/truncated-text'\n\nfunction formatFileSize(bytes: number): string {\n  if (bytes < 1024) return `${bytes} B`\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`\n}\n\nfunction FileAttachmentView({ node }: NodeViewProps) {\n  const safeUrl = /^https?:\\/\\//.test(node.attrs.url) ? node.attrs.url : '#'\n  return (\n    <NodeViewWrapper className=\"my-ds-02\">\n      <a\n        href={safeUrl}\n        target=\"_blank\"\n        rel=\"noopener noreferrer\"\n        className=\"inline-flex items-center gap-ds-03 rounded-control border border-surface-border-strong bg-surface-panel px-ds-04 py-ds-03 text-body-sm text-surface-fg transition-colors hover:border-surface-border-strong hover:bg-surface-panel-hover\"\n        contentEditable={false}\n      >\n        <Icon icon={IconFile} size=\"sm\" className=\"shrink-0 text-surface-fg-subtle\" />\n        <TruncatedText mode=\"middle\" className=\"min-w-0\">{node.attrs.name}</TruncatedText>\n        <span className=\"shrink-0 text-surface-fg-subtle\">({formatFileSize(node.attrs.size)})</span>\n        <Icon icon={IconDownload} size=\"sm\" className=\"shrink-0 text-surface-fg-subtle\" />\n      </a>\n    </NodeViewWrapper>\n  )\n}\n\nexport const FileAttachment = Node.create({\n  name: 'fileAttachment',\n  group: 'block',\n  atom: true,\n\n  addAttributes() {\n    return {\n      url: { default: null },\n      name: { default: 'Untitled' },\n      size: { default: 0 },\n    }\n  },\n\n  parseHTML() {\n    return [{ tag: 'div[data-file-attachment]' }]\n  },\n\n  renderHTML({ HTMLAttributes }) {\n    return ['div', mergeAttributes({ 'data-file-attachment': '' }, HTMLAttributes)]\n  },\n\n  addNodeView() {\n    return ReactNodeViewRenderer(FileAttachmentView)\n  },\n})\n","import type { SuggestionKeyDownProps,SuggestionProps } from '@tiptap/suggestion'\nimport * as React from 'react'\nimport { createRoot, type Root } from 'react-dom/client'\n\nimport { cn } from '../../ui/lib/utils'\nimport type { MentionItem } from '../rich-text-editor'\n\ninterface MentionListRef {\n  onKeyDown: (props: SuggestionKeyDownProps) => boolean\n}\n\ninterface MentionListProps {\n  items: MentionItem[]\n  command: (item: MentionItem) => void\n}\n\nconst MentionList = React.forwardRef<MentionListRef, MentionListProps>(\n  ({ items, command }, ref) => {\n    const [selectedIndex, setSelectedIndex] = React.useState(0)\n\n    React.useEffect(() => setSelectedIndex(0), [items])\n\n    React.useImperativeHandle(ref, () => ({\n      onKeyDown: ({ event }: SuggestionKeyDownProps) => {\n        if (event.key === 'ArrowUp') {\n          setSelectedIndex((i) => (i + items.length - 1) % items.length)\n          return true\n        }\n        if (event.key === 'ArrowDown') {\n          setSelectedIndex((i) => (i + 1) % items.length)\n          return true\n        }\n        if (event.key === 'Enter') {\n          if (items[selectedIndex]) command(items[selectedIndex])\n          return true\n        }\n        return false\n      },\n    }))\n\n    if (!items.length) return null\n\n    return (\n      <div role=\"listbox\" aria-label=\"Mention suggestions\" className=\"z-popover overflow-hidden rounded-control bg-surface-overlay shadow-raised-hover\">\n        {items.map((item, index) => (\n          <button\n            key={item.id}\n            type=\"button\"\n            role=\"option\"\n            aria-selected={index === selectedIndex}\n            onClick={() => command(item)}\n            className={cn(\n              'flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left text-body-sm',\n              index === selectedIndex ? 'bg-surface-panel-hover text-surface-fg' : 'text-surface-fg-muted hover:bg-surface-panel-hover',\n            )}\n          >\n            {item.avatar ? (\n              <img src={item.avatar} alt=\"\" className=\"h-ico-md w-ico-md rounded-pill object-cover\" />\n            ) : (\n              <span className=\"flex h-ico-md w-ico-md items-center justify-center rounded-pill bg-accent-2 text-[10px] font-semibold text-accent-11\">\n                {item.label.charAt(0).toUpperCase()}\n              </span>\n            )}\n            <span>{item.label}</span>\n          </button>\n        ))}\n      </div>\n    )\n  },\n)\nMentionList.displayName = 'MentionList'\n\nexport function createSuggestionRenderer(onMentionSelect?: (item: MentionItem) => void) {\n  return () => {\n    let root: Root | null = null\n    let container: HTMLDivElement | null = null\n    let componentRef: MentionListRef | null = null\n\n    return {\n      onStart: (props: SuggestionProps<MentionItem>) => {\n        container = document.createElement('div')\n        container.style.position = 'absolute'\n        container.style.zIndex = '1400' // z-popover\n\n        const rect = props.clientRect?.()\n        if (rect) {\n          container.style.left = `${rect.left}px`\n          container.style.top = `${rect.bottom + 4}px`\n        }\n        document.body.appendChild(container)\n\n        root = createRoot(container)\n        root.render(\n          <MentionList\n            ref={(r) => { componentRef = r }}\n            items={props.items as MentionItem[]}\n            command={(item) => {\n              props.command({ id: item.id, label: item.label })\n              onMentionSelect?.(item)\n            }}\n          />,\n        )\n      },\n\n      onUpdate: (props: SuggestionProps<MentionItem>) => {\n        if (!root || !container) return\n\n        const rect = props.clientRect?.()\n        if (rect) {\n          container.style.left = `${rect.left}px`\n          container.style.top = `${rect.bottom + 4}px`\n        }\n\n        root.render(\n          <MentionList\n            ref={(r) => { componentRef = r }}\n            items={props.items as MentionItem[]}\n            command={(item) => {\n              props.command({ id: item.id, label: item.label })\n              onMentionSelect?.(item)\n            }}\n          />,\n        )\n      },\n\n      onKeyDown: (props: SuggestionKeyDownProps) => {\n        if (props.event.key === 'Escape') {\n          if (container) {\n            root?.unmount()\n            container.remove()\n            container = null\n            root = null\n          }\n          return true\n        }\n        return componentRef?.onKeyDown(props) ?? false\n      },\n\n      onExit: () => {\n        if (container) {\n          root?.unmount()\n          container.remove()\n          container = null\n          root = null\n        }\n      },\n    }\n  }\n}\n"],"mappings":"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"}

package/dist/_chunks/motion-preference.js

@@ -0,0 +1,15 @@
+"use client";
+import { MotionContext as e } from "./motion-provider.js";
+import * as t from "react";
+import { Fragment as n, jsx as r } from "react/jsx-runtime";
+import { MotionConfig as i, MotionConfigContext as a } from "framer-motion";
+//#region src/motion/motion-preference.tsx
+function o({ children: o }) {
+	let s = t.useContext(e), c = t.useContext(a);
+	return s || c.reducedMotion !== "never" ? /* @__PURE__ */ r(n, { children: o }) : /* @__PURE__ */ r(i, {
+		reducedMotion: "user",
+		children: o
+	});
+}
+//#endregion
+export { o as MotionPreference };

package/dist/_chunks/motion-preference.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion-preference.js","names":[],"sources":["../../src/motion/motion-preference.tsx"],"sourcesContent":["'use client'\n\nimport { MotionConfig, MotionConfigContext } from 'framer-motion'\nimport * as React from 'react'\n\nimport { MotionContext } from './motion-provider'\n\ntype MotionPreferenceProps = {\n  children: React.ReactNode\n}\n\n/**\n * Makes the OS `prefers-reduced-motion` setting the DEFAULT for a component's\n * animations, instead of something the consumer has to opt into.\n *\n * Framer Motion's `MotionConfigContext` defaults to `reducedMotion: \"never\"` —\n * meaning every `motion.*` element ignores the OS setting until some ancestor\n * says otherwise. Our only ancestor that says otherwise is `<MotionProvider>`,\n * which consumers are not required to mount, so out of the box the whole\n * library animated straight through a reduced-motion preference.\n *\n * Wrapping a component's root in this fixes that for the subtree. Under\n * `\"user\"`, Framer suppresses exactly the positional keys — width, height,\n * top/left/right/bottom and every transform — and leaves opacity, colour and\n * filter animating normally. That is the behaviour WCAG 2.3.3 asks for: kill\n * the movement, keep the fade.\n *\n * It renders no DOM, and defers to anything that has already made the call:\n *\n * - a mounted `<MotionProvider>` owns the decision, including the deliberate\n *   `reducedMotion={false}` \"animate regardless\" override;\n * - a bare `<MotionConfig>` that has moved off the default was set on purpose;\n * - nesting is self-cancelling — the outermost wrapper configures the context,\n *   and every one below it sees a non-default value and passes straight through.\n *\n * The one case it cannot read is a consumer who mounts `<MotionConfig\n * reducedMotion=\"never\">` by hand to force animation on. That is\n * indistinguishable from the framework default, so this wrapper overrides it.\n * `<MotionProvider reducedMotion={false}>` is the supported way to express it.\n */\nfunction MotionPreference({ children }: MotionPreferenceProps) {\n  const provider = React.useContext(MotionContext)\n  const framerConfig = React.useContext(MotionConfigContext)\n\n  if (provider) return <>{children}</>\n  if (framerConfig.reducedMotion !== 'never') return <>{children}</>\n\n  return <MotionConfig reducedMotion=\"user\">{children}</MotionConfig>\n}\n\nexport { MotionPreference, type MotionPreferenceProps }\n"],"mappings":";;;;;AAwCA,SAAS,EAAiB,EAAE,eAAmC;CAC7D,IAAM,IAAW,EAAM,WAAW,CAAa,GACzC,IAAe,EAAM,WAAW,CAAmB;CAKzD,OAHI,KACA,EAAa,kBAAkB,UAAgB,kBAAA,GAAA,EAAG,YAAW,CAAA,IAE1D,kBAAC,GAAD;EAAc,eAAc;EAAQ;CAAuB,CAAA;AACpE"}

package/dist/_chunks/motion-provider.js

@@ -28,4 +28,4 @@ function c() {
 	};
 }
 //#endregion
-export { s as MotionProvider, c as useMotion };
+export { o as MotionContext, s as MotionProvider, c as useMotion };

package/dist/_chunks/motion-provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"motion-provider.js","names":[],"sources":["../../src/motion/motion-provider.tsx"],"sourcesContent":["'use client'\n\nimport { MotionConfig, useReducedMotion as useFMReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs, tweens } from '../ui/lib/motion'\n\ntype ReducedMotionMode = 'user' | boolean\n\ntype MotionContextValue = {\n  springs: typeof springs\n  tweens: typeof tweens\n  reducedMotion: boolean\n}\n\n// `null` default = \"no MotionProvider mounted\". `useMotion()` detects this and\n// falls back to the OS `prefers-reduced-motion` setting, so components respect\n// reduced motion out of the box — a provider is an override, not a requirement.\nconst MotionContext = React.createContext<MotionContextValue | null>(null)\n\ntype MotionProviderProps = {\n  children: React.ReactNode\n  /** 'user' = detect OS preference, true = force off, false = force on */\n  reducedMotion?: ReducedMotionMode\n}\n\nfunction MotionProvider({ children, reducedMotion = 'user' }: MotionProviderProps) {\n  const osPreference = useFMReducedMotion() ?? false\n  const isReduced = reducedMotion === 'user' ? osPreference : reducedMotion\n\n  const value = React.useMemo<MotionContextValue>(\n    () => ({ springs, tweens, reducedMotion: isReduced }),\n    [isReduced],\n  )\n\n  return (\n    <MotionContext.Provider value={value}>\n      <MotionConfig reducedMotion={reducedMotion === 'user' ? 'user' : reducedMotion ? 'always' : 'never'}>\n        {children}\n      </MotionConfig>\n    </MotionContext.Provider>\n  )\n}\n\nfunction useMotion(): MotionContextValue {\n  const ctx = React.useContext(MotionContext)\n  // Always called (hook order stable); only used when no provider is mounted.\n  const osPreference = useFMReducedMotion() ?? false\n  if (ctx) return ctx\n  return { springs, tweens, reducedMotion: osPreference }\n}\n\nexport { MotionProvider, type MotionProviderProps,useMotion }\n"],"mappings":";;;;;AAkBA,IAAM,IAAgB,EAAM,cAAyC,IAAI;AAQzE,SAAS,EAAe,EAAE,aAAU,mBAAgB,UAA+B;CACjF,IAAM,IAAe,EAAmB,KAAK,IACvC,IAAY,MAAkB,SAAS,IAAe,GAEtD,IAAQ,EAAM,eACX;EAAE;EAAS;EAAQ,eAAe;CAAU,IACnD,CAAC,CAAS,CACZ;CAEA,OACE,kBAAC,EAAc,UAAf;EAA+B;YAC7B,kBAAC,GAAD;GAAc,eAAe,MAAkB,SAAS,SAAS,IAAgB,WAAW;GACzF;EACW,CAAA;CACQ,CAAA;AAE5B;AAEA,SAAS,IAAgC;CACvC,IAAM,IAAM,EAAM,WAAW,CAAa,GAEpC,IAAe,EAAmB,KAAK;CAE7C,OADI,KACG;EAAE;EAAS;EAAQ,eAAe;CAAa;AACxD"}
+{"version":3,"file":"motion-provider.js","names":[],"sources":["../../src/motion/motion-provider.tsx"],"sourcesContent":["'use client'\n\nimport { MotionConfig, useReducedMotion as useFMReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs, tweens } from '../ui/lib/motion'\n\ntype ReducedMotionMode = 'user' | boolean\n\ntype MotionContextValue = {\n  springs: typeof springs\n  tweens: typeof tweens\n  reducedMotion: boolean\n}\n\n// `null` default = \"no MotionProvider mounted\". `useMotion()` detects this and\n// falls back to the OS `prefers-reduced-motion` setting, so components respect\n// reduced motion out of the box — a provider is an override, not a requirement.\nconst MotionContext = React.createContext<MotionContextValue | null>(null)\n\ntype MotionProviderProps = {\n  children: React.ReactNode\n  /** 'user' = detect OS preference, true = force off, false = force on */\n  reducedMotion?: ReducedMotionMode\n}\n\nfunction MotionProvider({ children, reducedMotion = 'user' }: MotionProviderProps) {\n  const osPreference = useFMReducedMotion() ?? false\n  const isReduced = reducedMotion === 'user' ? osPreference : reducedMotion\n\n  const value = React.useMemo<MotionContextValue>(\n    () => ({ springs, tweens, reducedMotion: isReduced }),\n    [isReduced],\n  )\n\n  return (\n    <MotionContext.Provider value={value}>\n      <MotionConfig reducedMotion={reducedMotion === 'user' ? 'user' : reducedMotion ? 'always' : 'never'}>\n        {children}\n      </MotionConfig>\n    </MotionContext.Provider>\n  )\n}\n\nfunction useMotion(): MotionContextValue {\n  const ctx = React.useContext(MotionContext)\n  // Always called (hook order stable); only used when no provider is mounted.\n  const osPreference = useFMReducedMotion() ?? false\n  if (ctx) return ctx\n  return { springs, tweens, reducedMotion: osPreference }\n}\n\nexport { MotionContext, MotionProvider, type MotionProviderProps,useMotion }\n"],"mappings":";;;;;AAkBA,IAAM,IAAgB,EAAM,cAAyC,IAAI;AAQzE,SAAS,EAAe,EAAE,aAAU,mBAAgB,UAA+B;CACjF,IAAM,IAAe,EAAmB,KAAK,IACvC,IAAY,MAAkB,SAAS,IAAe,GAEtD,IAAQ,EAAM,eACX;EAAE;EAAS;EAAQ,eAAe;CAAU,IACnD,CAAC,CAAS,CACZ;CAEA,OACE,kBAAC,EAAc,UAAf;EAA+B;YAC7B,kBAAC,GAAD;GAAc,eAAe,MAAkB,SAAS,SAAS,IAAgB,WAAW;GACzF;EACW,CAAA;CACQ,CAAA;AAE5B;AAEA,SAAS,IAAgC;CACvC,IAAM,IAAM,EAAM,WAAW,CAAa,GAEpC,IAAe,EAAmB,KAAK;CAE7C,OADI,KACG;EAAE;EAAS;EAAQ,eAAe;CAAa;AACxD"}

package/dist/_chunks/oauth-button.js

@@ -162,7 +162,7 @@ var M = i.forwardRef(({ provider: i, accountLabel: s, connected: c, onAction: l,
 	let _ = x[i], v = b[i], y = d ?? (c ? "Disconnect" : `Connect ${v}`);
 	return /* @__PURE__ */ o("div", {
 		ref: g,
-		className: e("flex items-center justify-between gap-ds-04 py-ds-04 px-ds-04 rounded-surface border border-surface-border bg-surface-raised", m),
+		className: e("flex items-center justify-between gap-ds-04 py-ds-04 px-ds-04 rounded-surface border border-surface-border bg-surface-panel", m),
 		"data-provider": i,
 		"data-connected": c ? "true" : "false",
 		...h,

package/dist/_chunks/oauth-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"oauth-button.js","names":[],"sources":["../../src/ui/oauth-button/oauth-button.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconBrandApple,\n  IconBrandDiscord,\n  IconBrandFacebook,\n  IconBrandGithub,\n  IconBrandGitlab,\n  IconBrandGoogleFilled,\n  IconBrandLinkedin,\n  IconBrandSlack,\n  IconBrandWindows,\n  IconBrandXFilled,\n  IconFingerprint,\n  IconKey,\n  IconMail,\n} from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Button, type ButtonProps } from '../button'\nimport type { IconInput } from '../lib/icon-input'\nimport { normalizeIcon } from '../lib/normalize-icon'\nimport { cn } from '../lib/utils'\nimport { TruncatedText } from '../truncated-text'\n\n// ── Types ───────────────────────────────────────────────────────\n\nexport type OAuthProvider =\n  | 'google'\n  | 'apple'\n  | 'github'\n  | 'microsoft'\n  | 'x'\n  | 'linkedin'\n  | 'facebook'\n  | 'discord'\n  | 'slack'\n  | 'gitlab'\n  | 'sso'\n  | 'email'\n  | 'passkey'\n\nexport type OAuthIntent = 'continue' | 'signin' | 'signup'\n\n/**\n * Visual treatment — 1:1 with Button's variant axis. OAuthButton is a thin\n * wrapper over Button, so every variant renders pixel-for-pixel identical\n * to a regular Button at the same variant + size. Brand identity lives in\n * the glyph (override via `icon` for a brand-multicolour SVG), not the\n * button surface.\n *\n * - `solid` (default) | `soft` | `outline` | `ghost`\n */\nexport type OAuthVariant = 'solid' | 'soft' | 'outline' | 'ghost'\n\n/** @deprecated Use `OAuthVariant`. brand/dark map to solid; outline passes through. */\nexport type OAuthAppearance = 'brand' | 'outline' | 'dark'\n\n// ── Static metadata ─────────────────────────────────────────────\n\nconst providerDisplay: Record<OAuthProvider, string> = {\n  google: 'Google',\n  apple: 'Apple',\n  github: 'GitHub',\n  microsoft: 'Microsoft',\n  x: 'X',\n  linkedin: 'LinkedIn',\n  facebook: 'Facebook',\n  discord: 'Discord',\n  slack: 'Slack',\n  gitlab: 'GitLab',\n  sso: 'SSO',\n  email: 'email',\n  passkey: 'a passkey',\n}\n\n// Default glyph per provider — sourced from Tabler (already a peer dep).\n// Consumer can override with the `icon` prop to drop in a brand-multicolour SVG.\nconst providerIcon: Record<OAuthProvider, React.ComponentType<{ size?: number | string; 'aria-hidden'?: boolean }>> = {\n  google: IconBrandGoogleFilled,\n  apple: IconBrandApple,\n  github: IconBrandGithub,\n  microsoft: IconBrandWindows,\n  x: IconBrandXFilled,\n  linkedin: IconBrandLinkedin,\n  facebook: IconBrandFacebook,\n  discord: IconBrandDiscord,\n  slack: IconBrandSlack,\n  gitlab: IconBrandGitlab,\n  sso: IconKey,\n  email: IconMail,\n  passkey: IconFingerprint,\n}\n\nfunction providerName(provider: OAuthProvider): string {\n  // Display name for `compact` mode — drops the \"a\" article on passkey.\n  return provider === 'passkey' ? 'Passkey' : providerDisplay[provider]\n}\n\nfunction defaultLabel(provider: OAuthProvider, intent: OAuthIntent, compact: boolean): string {\n  if (compact) return providerName(provider)\n  const name = providerDisplay[provider]\n  switch (intent) {\n    case 'signin':\n      return `Sign in with ${name}`\n    case 'signup':\n      return `Sign up with ${name}`\n    case 'continue':\n    default:\n      return `Continue with ${name}`\n  }\n}\n\nconst providerCopyOverride: Partial<Record<OAuthProvider, Partial<Record<OAuthIntent, string>>>> = {\n  passkey: {\n    continue: 'Continue with a passkey',\n    signin: 'Sign in with a passkey',\n    signup: 'Create a passkey',\n  },\n}\n\nfunction resolveLabel(provider: OAuthProvider, intent: OAuthIntent, compact: boolean): string {\n  if (compact) return providerName(provider)\n  return providerCopyOverride[provider]?.[intent] ?? defaultLabel(provider, intent, compact)\n}\n\n/** Long-form name used for aria-label even when compact label is rendered. */\nfunction resolveAriaName(provider: OAuthProvider, intent: OAuthIntent): string {\n  return providerCopyOverride[provider]?.[intent] ?? defaultLabel(provider, intent, false)\n}\n\n// **Visual treatment:** OAuthButton is a thin wrapper over `<Button>` — every\n// height, padding, radius, border, hover, focus, active, and disabled state is\n// the DS Button's. We do NOT inject per-provider hex backgrounds: brand\n// identity lives in the glyph (Tabler default; consumer can pass a real\n// multicolour SVG via `icon`). This guarantees pixel-for-pixel consistency\n// with every other button in the system at every variant.\n\nconst ICON_PX: Record<string, number> = {\n  xs: 14,\n  sm: 16,\n  md: 18,\n  lg: 20,\n  'compact-xs': 14,\n  'compact-sm': 14,\n  'compact-md': 16,\n  icon: 18,\n  'icon-xs': 14,\n  'icon-sm': 16,\n  'icon-md': 18,\n  'icon-lg': 20,\n}\n\nconst ICON_ONLY_SIZE: Record<string, NonNullable<ButtonProps['size']>> = {\n  xs: 'icon-xs',\n  sm: 'icon-sm',\n  md: 'icon-md',\n  lg: 'icon-lg',\n  'compact-xs': 'icon-xs',\n  'compact-sm': 'icon-sm',\n  'compact-md': 'icon-md',\n}\n\n// ── Component ───────────────────────────────────────────────────\n\n/**\n * Props for `OAuthButton` — a brand-aware sign-in button for OAuth providers.\n *\n * Composes on top of `<Button>`, inheriting `size`, `loading`, `onClickAsync`,\n * `fullWidth`, and async state machinery. The provider's icon, label, and\n * brand-coloured styling are derived from the `provider` prop.\n *\n * **Provider** (required): includes 10 social providers + 3 generic\n * identifiers (`sso` enterprise, `email` magic-link, `passkey` WebAuthn).\n *\n * **Intent**: drives the verb in the label.\n * - `continue` (default) — \"Continue with Google\" — works on login and signup.\n * - `signin` — \"Sign in with Google\".\n * - `signup` — \"Sign up with Google\".\n *\n * **Appearance**: visual treatment.\n * - `brand` (default) — provider's brand background colour.\n * - `outline` — DS-neutral outline with monochrome glyph. Best for uniform rows.\n * - `dark` — unified Apple-style across all providers for visual consistency.\n *\n * **icon**: override the default Tabler glyph (e.g. drop in the provider's\n * official multicolour SVG downloaded from their brand page).\n *\n * **iconOnly**: render a square icon button. Provider name kept in `aria-label`.\n *\n * **lastUsed**: shows a small \"Last used\" pill above the button — high-converting\n * UX hint. Consumer tracks which provider the user picked previously.\n *\n * **helperText**: optional reassurance copy rendered below the button.\n *\n * @example\n * <OAuthButton provider=\"google\" intent=\"continue\" fullWidth onClickAsync={signInWithGoogle} />\n *\n * @example\n * // True brand-multicolour glyph:\n * <OAuthButton provider=\"google\" icon={<GoogleGSvg />} />\n *\n * @example\n * <OAuthGroup>\n *   <OAuthButton provider=\"google\" appearance=\"dark\" />\n *   <OAuthButton provider=\"apple\"  appearance=\"dark\" />\n *   <OAuthButton provider=\"github\" appearance=\"dark\" />\n * </OAuthGroup>\n */\nexport interface OAuthButtonProps\n  extends Omit<\n    ButtonProps,\n    'variant' | 'color' | 'startIcon' | 'endIcon' | 'shape' | 'children'\n  > {\n  /** OAuth provider this button represents */\n  provider: OAuthProvider\n  /** Verb in the default label. Default: `continue` */\n  intent?: OAuthIntent\n  /**\n   * Visual treatment. Default: `solid`. Mirrors Button's variant axis with\n   * an extra `dark` for row coherence across providers.\n   */\n  variant?: OAuthVariant\n  /** @deprecated Use `variant`. `appearance=\"brand\"` maps to `variant=\"solid\"`. */\n  appearance?: OAuthAppearance\n  /** Override the default glyph (e.g. brand-multicolour SVG). Accepts any `IconInput`. */\n  icon?: IconInput\n  /** Render a compact icon-only button (provider name kept in aria-label) */\n  iconOnly?: boolean\n  /**\n   * Short label — renders just the provider name (\"Google\") instead of the\n   * full \"Continue with Google\". Use under an explicit \"Or sign in with\"\n   * divider where the verb is already established. aria-label still gets the\n   * full long form for screen readers.\n   */\n  compact?: boolean\n  /**\n   * Show \"Last used\" hint — a small pill anchored to the top-right corner of\n   * the button (sits ON the corner, half outside the button bounds).\n   */\n  lastUsed?: boolean\n  /**\n   * Customise the \"Last used\" badge. Pass a ReactNode to replace the entire\n   * pill (use this for custom copy, icons, or styling), or a render fn that\n   * receives the default props for tweaks. Only rendered when `lastUsed` is\n   * also set so the wrapper / aria augmentation logic stays consistent.\n   *\n   * @example\n   * <OAuthButton provider=\"google\" lastUsed lastUsedSlot={<MyBadge />} />\n   */\n  lastUsedSlot?: React.ReactNode | ((defaults: { label: string }) => React.ReactNode)\n  /** Override the visible badge label text. Default: \"Last used\". */\n  lastUsedLabel?: string\n  /** Reassurance copy rendered below the button */\n  helperText?: React.ReactNode\n  /** Override the default label entirely (i18n / custom copy) */\n  children?: React.ReactNode\n}\n\nconst OAuthButton = React.forwardRef<HTMLButtonElement, OAuthButtonProps>(\n  (\n    {\n      provider,\n      intent = 'continue',\n      variant: variantProp,\n      appearance,\n      icon,\n      iconOnly = false,\n      compact = false,\n      lastUsed = false,\n      lastUsedSlot,\n      lastUsedLabel = 'Last used',\n      helperText,\n      children,\n      className,\n      size: sizeProp,\n      fullWidth = false,\n      ...buttonProps\n    },\n    ref,\n  ) => {\n    const size: NonNullable<ButtonProps['size']> = sizeProp ?? 'md'\n    const DefaultGlyph = providerIcon[provider]\n    const iconPx = ICON_PX[size] ?? 18\n    const glyphNode = normalizeIcon(icon) ?? <DefaultGlyph size={iconPx} aria-hidden />\n    const label = children ?? resolveLabel(provider, intent, compact)\n\n    // Resolve final variant. `appearance` is a deprecated alias mapped to\n    // the closest DS variant — brand/dark both collapse to solid since\n    // OAuthButton no longer injects per-provider brand colours.\n    const variant: OAuthVariant =\n      variantProp ??\n      (appearance === 'outline' ? 'outline' : 'solid')\n\n    // aria-label always carries the long-form name so screen readers stay\n    // informative even when the visual label is compact or icon-only.\n    const longName = resolveAriaName(provider, intent)\n    const ariaLabelForButton = iconOnly || compact || lastUsed\n      ? `${longName}${lastUsed ? ' (last used)' : ''}`\n      : undefined\n\n    // \"Last used\" badge — sits ON the top-right corner of the button,\n    // overlapping the button edge for the classic \"notification badge\"\n    // look. Rendered as a SIBLING to Button (not a child) because Button's\n    // `overflow-hidden` would clip a child poking outside the corner.\n    //\n    // Composable: pass `lastUsedSlot` (ReactNode or render fn) to replace\n    // the default pill. `lastUsedLabel` swaps just the text inside it.\n    // aria-label augments the accessible name with \"(last used)\".\n    // intentional: a 9px corner pill, smaller than Badge's smallest size (xs).\n    // Not worth a sub-xs Badge size for one call site — kept as a documented exception.\n    const defaultBadge = (\n      <span className=\"pointer-events-none inline-flex items-center rounded-pill bg-accent-9 text-accent-fg px-2 py-1 text-label-xs leading-none font-semibold uppercase tracking-wide shadow-overlay\">\n        {lastUsedLabel}\n      </span>\n    )\n    const customBadge =\n      typeof lastUsedSlot === 'function' ? lastUsedSlot({ label: lastUsedLabel }) : lastUsedSlot\n    const renderedBadge = customBadge ?? defaultBadge\n\n    const buttonEl = (\n      <Button\n        ref={ref}\n        variant={variant}\n        color=\"neutral\"\n        size={iconOnly ? ICON_ONLY_SIZE[size] ?? 'icon-md' : size}\n        fullWidth={fullWidth && !iconOnly}\n        startIcon={iconOnly ? undefined : (glyphNode as React.ReactElement)}\n        aria-label={ariaLabelForButton}\n        data-provider={provider}\n        data-oauth-variant={variant}\n        data-last-used={lastUsed || undefined}\n        className={className}\n        {...buttonProps}\n      >\n        {iconOnly ? glyphNode : label}\n      </Button>\n    )\n\n    const showBadge = lastUsed && !iconOnly\n    if (!showBadge && !helperText) return buttonEl\n\n    return (\n      <div className={cn('relative inline-flex flex-col', fullWidth && 'w-full')}>\n        {buttonEl}\n        {showBadge ? (\n          <span\n            aria-hidden=\"true\"\n            data-last-used-badge=\"\"\n            className=\"pointer-events-none absolute -top-[10px] -right-2 z-10\"\n          >\n            {renderedBadge}\n          </span>\n        ) : null}\n        {helperText ? (\n          <span className=\"mt-ds-02 text-body-sm text-surface-fg-subtle\">{helperText}</span>\n        ) : null}\n      </div>\n    )\n  },\n)\nOAuthButton.displayName = 'OAuthButton'\n\nexport { OAuthButton }\n\n// ── OAuthGroup ─────────────────────────────────────────────────\n\nexport interface OAuthGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Layout. `vertical` (default) stacks full-width buttons. */\n  orientation?: 'vertical' | 'horizontal'\n  /** Gap token between buttons. Default: `ds-03` */\n  gap?: 'ds-02' | 'ds-03' | 'ds-04'\n  /** Stretch children to fill width (vertical only). Default: true */\n  fullWidth?: boolean\n  /**\n   * Move any child with `lastUsed` to position 0. Stripe-style ordering — the\n   * provider the user picked last time becomes the top option, which gives a\n   * stronger conversion lift than a \"Last used\" badge does on its own.\n   * Default: false (preserve source order).\n   */\n  reorderLastUsedFirst?: boolean\n}\n\n/**\n * Stacked layout wrapper for OAuth buttons with consistent spacing. Defaults to\n * vertical, full-width children — the dominant sign-in pattern. For an icon-only\n * row, set `orientation=\"horizontal\"` and use `<OAuthButton iconOnly />`.\n */\nconst OAuthGroup = React.forwardRef<HTMLDivElement, OAuthGroupProps>(\n  (\n    {\n      orientation = 'vertical',\n      gap = 'ds-03',\n      fullWidth = true,\n      reorderLastUsedFirst = false,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const gapClass =\n      gap === 'ds-02' ? 'gap-ds-02' : gap === 'ds-04' ? 'gap-ds-04' : 'gap-ds-03'\n    const stretch = orientation === 'vertical' && fullWidth\n\n    const ordered = React.useMemo(() => {\n      if (!reorderLastUsedFirst) return children\n      const arr = React.Children.toArray(children)\n      const lastUsedIdx = arr.findIndex(\n        (c) => React.isValidElement(c) && (c.props as { lastUsed?: boolean })?.lastUsed,\n      )\n      if (lastUsedIdx <= 0) return children\n      const next = [...arr]\n      const [pulled] = next.splice(lastUsedIdx, 1)\n      next.unshift(pulled)\n      return next\n    }, [children, reorderLastUsedFirst])\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex',\n          orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap items-center',\n          gapClass,\n          // Force both the direct wrapper AND the leaf <button> to stretch.\n          // OAuthButton's outer wrapper picks up [&>*]:w-full; the button itself\n          // sits two layers deep when a helperText wrapper exists, so\n          // [&_button]:w-full covers both cases (wrapped + unwrapped) without\n          // affecting unrelated descendants — only Buttons live inside.\n          stretch && 'w-full [&>*]:w-full [&_button]:w-full',\n          className,\n        )}\n        {...props}\n      >\n        {ordered}\n      </div>\n    )\n  },\n)\nOAuthGroup.displayName = 'OAuthGroup'\n\nexport { OAuthGroup }\n\n// ── OAuthDivider ───────────────────────────────────────────────\n\nexport interface OAuthDividerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Text between the rules. Default: \"or\" */\n  label?: React.ReactNode\n}\n\nconst OAuthDivider = React.forwardRef<HTMLDivElement, OAuthDividerProps>(\n  ({ label = 'or', className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn('flex items-center gap-ds-03', className)}\n      {...props}\n    >\n      <hr aria-hidden=\"true\" className=\"flex-1 border-t border-surface-border-subtle\" />\n      <span className=\"text-label-sm text-surface-fg-subtle uppercase tracking-wide\">{label}</span>\n      <hr aria-hidden=\"true\" className=\"flex-1 border-t border-surface-border-subtle\" />\n    </div>\n  ),\n)\nOAuthDivider.displayName = 'OAuthDivider'\n\nexport { OAuthDivider }\n\n// ── OAuthConnectionRow (settings page — linked state) ──────────\n\nexport interface OAuthConnectionRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  provider: OAuthProvider\n  /** Optional account identifier shown next to the provider name (e.g. email) */\n  accountLabel?: React.ReactNode\n  /** Whether the provider is currently linked */\n  connected: boolean\n  /** Click handler for the connect/disconnect action */\n  onAction?: (e: React.MouseEvent<HTMLButtonElement>) => void\n  /** Promise-returning click handler — uses Button's async state machine */\n  onActionAsync?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>\n  /** Override the action label */\n  actionLabel?: React.ReactNode\n  /** Disable the action button */\n  disabled?: boolean\n  /** Override the default glyph. Accepts any `IconInput`. */\n  icon?: IconInput\n}\n\n/**\n * Settings-page row representing a linked OAuth provider. Different surface\n * from sign-in: this is an existing connection the user can disconnect or\n * (re-)connect. Renders glyph + provider name + optional account label + a\n * connect/disconnect button.\n */\nconst OAuthConnectionRow = React.forwardRef<HTMLDivElement, OAuthConnectionRowProps>(\n  (\n    {\n      provider,\n      accountLabel,\n      connected,\n      onAction,\n      onActionAsync,\n      actionLabel,\n      disabled,\n      icon,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const DefaultGlyph = providerIcon[provider]\n    const name = providerDisplay[provider]\n    const resolvedLabel = actionLabel ?? (connected ? 'Disconnect' : `Connect ${name}`)\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex items-center justify-between gap-ds-04 py-ds-04 px-ds-04 rounded-surface border border-surface-border bg-surface-raised',\n          className,\n        )}\n        data-provider={provider}\n        data-connected={connected ? 'true' : 'false'}\n        {...props}\n      >\n        <div className=\"flex items-center gap-ds-03 min-w-0\">\n          {normalizeIcon(icon) ?? <DefaultGlyph size={24} aria-hidden />}\n          <div className=\"flex flex-col min-w-0\">\n            <TruncatedText className=\"text-body-md font-semibold text-surface-fg\">{name}</TruncatedText>\n            {accountLabel ? (\n              // Account labels are usually an email — middle-truncate to keep the domain.\n              // Only a string can be measured/truncated; fall back to a plain clip otherwise.\n              typeof accountLabel === 'string' ? (\n                <TruncatedText mode=\"middle\" className=\"text-body-sm text-surface-fg-muted\">\n                  {accountLabel}\n                </TruncatedText>\n              ) : (\n                <span className=\"text-body-sm text-surface-fg-muted truncate\">{accountLabel}</span>\n              )\n            ) : connected ? (\n              <span className=\"text-body-sm text-success-11\">Connected</span>\n            ) : (\n              <span className=\"text-body-sm text-surface-fg-subtle\">Not connected</span>\n            )}\n          </div>\n        </div>\n        <Button\n          size=\"sm\"\n          variant={connected ? 'soft' : 'solid'}\n          color={connected ? 'neutral' : 'accent'}\n          disabled={disabled}\n          onClick={onAction}\n          onClickAsync={onActionAsync}\n        >\n          {resolvedLabel}\n        </Button>\n      </div>\n    )\n  },\n)\nOAuthConnectionRow.displayName = 'OAuthConnectionRow'\n\nexport { OAuthConnectionRow }\n\n// ── OAuthGlyph (atomic glyph render) ───────────────────────────\n\nexport interface OAuthGlyphProps extends Omit<React.SVGAttributes<SVGElement>, 'children'> {\n  provider: OAuthProvider\n  /** Glyph pixel size. Default 18. */\n  size?: number\n}\n\n/**\n * Render just the provider glyph — useful when building a custom OAuth\n * trigger (e.g. an icon-button inside a Tooltip, or a provider chip on a\n * profile card). Defaults to the Tabler glyph; the icon prop on\n * `OAuthButton` is the right escape hatch for the brand multi-colour mark.\n */\nconst OAuthGlyph = React.forwardRef<SVGSVGElement, OAuthGlyphProps>(\n  ({ provider, size = 18, ...props }, ref) => {\n    const Cmp = providerIcon[provider] as React.ComponentType<{\n      size?: number\n      'aria-hidden'?: boolean\n      ref?: React.Ref<SVGSVGElement>\n    }>\n    return <Cmp ref={ref} size={size} aria-hidden {...(props as Record<string, unknown>)} />\n  },\n)\nOAuthGlyph.displayName = 'OAuthGlyph'\n\nexport { OAuthGlyph }\n\n// ── Static helpers (composable building blocks) ────────────────\n\n/**\n * Resolve the visible label for a provider × intent combo. Useful when\n * rendering OAuth UIs outside of `OAuthButton` (e.g. a Confirm dialog\n * \"Disconnect from Google?\" title).\n */\nexport function getOAuthLabel(provider: OAuthProvider, intent: OAuthIntent = 'continue', compact = false): string {\n  return resolveLabel(provider, intent, compact)\n}\n\n/** Display name for a provider, ready for sentence interpolation. */\nexport function getOAuthName(provider: OAuthProvider): string {\n  return providerName(provider)\n}\n\n// ── Compound namespace ─────────────────────────────────────────\n\n/**\n * Namespaced API — drop-in alternative to importing each piece separately.\n *\n * @example\n * import { OAuth } from '@devalok/shilp-sutra/ui/oauth-button'\n *\n * <OAuth.Group reorderLastUsedFirst>\n *   <OAuth.Button provider=\"google\" lastUsed />\n *   <OAuth.Button provider=\"passkey\" />\n *   <OAuth.Divider />\n *   <OAuth.Button provider=\"sso\" variant=\"ghost\" />\n * </OAuth.Group>\n */\nexport const OAuth = {\n  Button: OAuthButton,\n  Group: OAuthGroup,\n  Divider: OAuthDivider,\n  ConnectionRow: OAuthConnectionRow,\n  Glyph: OAuthGlyph,\n  getLabel: getOAuthLabel,\n  getName: getOAuthName,\n} as const\n"],"mappings":"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"}
+{"version":3,"file":"oauth-button.js","names":[],"sources":["../../src/ui/oauth-button/oauth-button.tsx"],"sourcesContent":["'use client'\n\nimport {\n  IconBrandApple,\n  IconBrandDiscord,\n  IconBrandFacebook,\n  IconBrandGithub,\n  IconBrandGitlab,\n  IconBrandGoogleFilled,\n  IconBrandLinkedin,\n  IconBrandSlack,\n  IconBrandWindows,\n  IconBrandXFilled,\n  IconFingerprint,\n  IconKey,\n  IconMail,\n} from '@tabler/icons-react'\nimport * as React from 'react'\n\nimport { Button, type ButtonProps } from '../button'\nimport type { IconInput } from '../lib/icon-input'\nimport { normalizeIcon } from '../lib/normalize-icon'\nimport { cn } from '../lib/utils'\nimport { TruncatedText } from '../truncated-text'\n\n// ── Types ───────────────────────────────────────────────────────\n\nexport type OAuthProvider =\n  | 'google'\n  | 'apple'\n  | 'github'\n  | 'microsoft'\n  | 'x'\n  | 'linkedin'\n  | 'facebook'\n  | 'discord'\n  | 'slack'\n  | 'gitlab'\n  | 'sso'\n  | 'email'\n  | 'passkey'\n\nexport type OAuthIntent = 'continue' | 'signin' | 'signup'\n\n/**\n * Visual treatment — 1:1 with Button's variant axis. OAuthButton is a thin\n * wrapper over Button, so every variant renders pixel-for-pixel identical\n * to a regular Button at the same variant + size. Brand identity lives in\n * the glyph (override via `icon` for a brand-multicolour SVG), not the\n * button surface.\n *\n * - `solid` (default) | `soft` | `outline` | `ghost`\n */\nexport type OAuthVariant = 'solid' | 'soft' | 'outline' | 'ghost'\n\n/** @deprecated Use `OAuthVariant`. brand/dark map to solid; outline passes through. */\nexport type OAuthAppearance = 'brand' | 'outline' | 'dark'\n\n// ── Static metadata ─────────────────────────────────────────────\n\nconst providerDisplay: Record<OAuthProvider, string> = {\n  google: 'Google',\n  apple: 'Apple',\n  github: 'GitHub',\n  microsoft: 'Microsoft',\n  x: 'X',\n  linkedin: 'LinkedIn',\n  facebook: 'Facebook',\n  discord: 'Discord',\n  slack: 'Slack',\n  gitlab: 'GitLab',\n  sso: 'SSO',\n  email: 'email',\n  passkey: 'a passkey',\n}\n\n// Default glyph per provider — sourced from Tabler (already a peer dep).\n// Consumer can override with the `icon` prop to drop in a brand-multicolour SVG.\nconst providerIcon: Record<OAuthProvider, React.ComponentType<{ size?: number | string; 'aria-hidden'?: boolean }>> = {\n  google: IconBrandGoogleFilled,\n  apple: IconBrandApple,\n  github: IconBrandGithub,\n  microsoft: IconBrandWindows,\n  x: IconBrandXFilled,\n  linkedin: IconBrandLinkedin,\n  facebook: IconBrandFacebook,\n  discord: IconBrandDiscord,\n  slack: IconBrandSlack,\n  gitlab: IconBrandGitlab,\n  sso: IconKey,\n  email: IconMail,\n  passkey: IconFingerprint,\n}\n\nfunction providerName(provider: OAuthProvider): string {\n  // Display name for `compact` mode — drops the \"a\" article on passkey.\n  return provider === 'passkey' ? 'Passkey' : providerDisplay[provider]\n}\n\nfunction defaultLabel(provider: OAuthProvider, intent: OAuthIntent, compact: boolean): string {\n  if (compact) return providerName(provider)\n  const name = providerDisplay[provider]\n  switch (intent) {\n    case 'signin':\n      return `Sign in with ${name}`\n    case 'signup':\n      return `Sign up with ${name}`\n    case 'continue':\n    default:\n      return `Continue with ${name}`\n  }\n}\n\nconst providerCopyOverride: Partial<Record<OAuthProvider, Partial<Record<OAuthIntent, string>>>> = {\n  passkey: {\n    continue: 'Continue with a passkey',\n    signin: 'Sign in with a passkey',\n    signup: 'Create a passkey',\n  },\n}\n\nfunction resolveLabel(provider: OAuthProvider, intent: OAuthIntent, compact: boolean): string {\n  if (compact) return providerName(provider)\n  return providerCopyOverride[provider]?.[intent] ?? defaultLabel(provider, intent, compact)\n}\n\n/** Long-form name used for aria-label even when compact label is rendered. */\nfunction resolveAriaName(provider: OAuthProvider, intent: OAuthIntent): string {\n  return providerCopyOverride[provider]?.[intent] ?? defaultLabel(provider, intent, false)\n}\n\n// **Visual treatment:** OAuthButton is a thin wrapper over `<Button>` — every\n// height, padding, radius, border, hover, focus, active, and disabled state is\n// the DS Button's. We do NOT inject per-provider hex backgrounds: brand\n// identity lives in the glyph (Tabler default; consumer can pass a real\n// multicolour SVG via `icon`). This guarantees pixel-for-pixel consistency\n// with every other button in the system at every variant.\n\nconst ICON_PX: Record<string, number> = {\n  xs: 14,\n  sm: 16,\n  md: 18,\n  lg: 20,\n  'compact-xs': 14,\n  'compact-sm': 14,\n  'compact-md': 16,\n  icon: 18,\n  'icon-xs': 14,\n  'icon-sm': 16,\n  'icon-md': 18,\n  'icon-lg': 20,\n}\n\nconst ICON_ONLY_SIZE: Record<string, NonNullable<ButtonProps['size']>> = {\n  xs: 'icon-xs',\n  sm: 'icon-sm',\n  md: 'icon-md',\n  lg: 'icon-lg',\n  'compact-xs': 'icon-xs',\n  'compact-sm': 'icon-sm',\n  'compact-md': 'icon-md',\n}\n\n// ── Component ───────────────────────────────────────────────────\n\n/**\n * Props for `OAuthButton` — a brand-aware sign-in button for OAuth providers.\n *\n * Composes on top of `<Button>`, inheriting `size`, `loading`, `onClickAsync`,\n * `fullWidth`, and async state machinery. The provider's icon, label, and\n * brand-coloured styling are derived from the `provider` prop.\n *\n * **Provider** (required): includes 10 social providers + 3 generic\n * identifiers (`sso` enterprise, `email` magic-link, `passkey` WebAuthn).\n *\n * **Intent**: drives the verb in the label.\n * - `continue` (default) — \"Continue with Google\" — works on login and signup.\n * - `signin` — \"Sign in with Google\".\n * - `signup` — \"Sign up with Google\".\n *\n * **Appearance**: visual treatment.\n * - `brand` (default) — provider's brand background colour.\n * - `outline` — DS-neutral outline with monochrome glyph. Best for uniform rows.\n * - `dark` — unified Apple-style across all providers for visual consistency.\n *\n * **icon**: override the default Tabler glyph (e.g. drop in the provider's\n * official multicolour SVG downloaded from their brand page).\n *\n * **iconOnly**: render a square icon button. Provider name kept in `aria-label`.\n *\n * **lastUsed**: shows a small \"Last used\" pill above the button — high-converting\n * UX hint. Consumer tracks which provider the user picked previously.\n *\n * **helperText**: optional reassurance copy rendered below the button.\n *\n * @example\n * <OAuthButton provider=\"google\" intent=\"continue\" fullWidth onClickAsync={signInWithGoogle} />\n *\n * @example\n * // True brand-multicolour glyph:\n * <OAuthButton provider=\"google\" icon={<GoogleGSvg />} />\n *\n * @example\n * <OAuthGroup>\n *   <OAuthButton provider=\"google\" appearance=\"dark\" />\n *   <OAuthButton provider=\"apple\"  appearance=\"dark\" />\n *   <OAuthButton provider=\"github\" appearance=\"dark\" />\n * </OAuthGroup>\n */\nexport interface OAuthButtonProps\n  extends Omit<\n    ButtonProps,\n    'variant' | 'color' | 'startIcon' | 'endIcon' | 'shape' | 'children'\n  > {\n  /** OAuth provider this button represents */\n  provider: OAuthProvider\n  /** Verb in the default label. Default: `continue` */\n  intent?: OAuthIntent\n  /**\n   * Visual treatment. Default: `solid`. Mirrors Button's variant axis with\n   * an extra `dark` for row coherence across providers.\n   */\n  variant?: OAuthVariant\n  /** @deprecated Use `variant`. `appearance=\"brand\"` maps to `variant=\"solid\"`. */\n  appearance?: OAuthAppearance\n  /** Override the default glyph (e.g. brand-multicolour SVG). Accepts any `IconInput`. */\n  icon?: IconInput\n  /** Render a compact icon-only button (provider name kept in aria-label) */\n  iconOnly?: boolean\n  /**\n   * Short label — renders just the provider name (\"Google\") instead of the\n   * full \"Continue with Google\". Use under an explicit \"Or sign in with\"\n   * divider where the verb is already established. aria-label still gets the\n   * full long form for screen readers.\n   */\n  compact?: boolean\n  /**\n   * Show \"Last used\" hint — a small pill anchored to the top-right corner of\n   * the button (sits ON the corner, half outside the button bounds).\n   */\n  lastUsed?: boolean\n  /**\n   * Customise the \"Last used\" badge. Pass a ReactNode to replace the entire\n   * pill (use this for custom copy, icons, or styling), or a render fn that\n   * receives the default props for tweaks. Only rendered when `lastUsed` is\n   * also set so the wrapper / aria augmentation logic stays consistent.\n   *\n   * @example\n   * <OAuthButton provider=\"google\" lastUsed lastUsedSlot={<MyBadge />} />\n   */\n  lastUsedSlot?: React.ReactNode | ((defaults: { label: string }) => React.ReactNode)\n  /** Override the visible badge label text. Default: \"Last used\". */\n  lastUsedLabel?: string\n  /** Reassurance copy rendered below the button */\n  helperText?: React.ReactNode\n  /** Override the default label entirely (i18n / custom copy) */\n  children?: React.ReactNode\n}\n\nconst OAuthButton = React.forwardRef<HTMLButtonElement, OAuthButtonProps>(\n  (\n    {\n      provider,\n      intent = 'continue',\n      variant: variantProp,\n      appearance,\n      icon,\n      iconOnly = false,\n      compact = false,\n      lastUsed = false,\n      lastUsedSlot,\n      lastUsedLabel = 'Last used',\n      helperText,\n      children,\n      className,\n      size: sizeProp,\n      fullWidth = false,\n      ...buttonProps\n    },\n    ref,\n  ) => {\n    const size: NonNullable<ButtonProps['size']> = sizeProp ?? 'md'\n    const DefaultGlyph = providerIcon[provider]\n    const iconPx = ICON_PX[size] ?? 18\n    const glyphNode = normalizeIcon(icon) ?? <DefaultGlyph size={iconPx} aria-hidden />\n    const label = children ?? resolveLabel(provider, intent, compact)\n\n    // Resolve final variant. `appearance` is a deprecated alias mapped to\n    // the closest DS variant — brand/dark both collapse to solid since\n    // OAuthButton no longer injects per-provider brand colours.\n    const variant: OAuthVariant =\n      variantProp ??\n      (appearance === 'outline' ? 'outline' : 'solid')\n\n    // aria-label always carries the long-form name so screen readers stay\n    // informative even when the visual label is compact or icon-only.\n    const longName = resolveAriaName(provider, intent)\n    const ariaLabelForButton = iconOnly || compact || lastUsed\n      ? `${longName}${lastUsed ? ' (last used)' : ''}`\n      : undefined\n\n    // \"Last used\" badge — sits ON the top-right corner of the button,\n    // overlapping the button edge for the classic \"notification badge\"\n    // look. Rendered as a SIBLING to Button (not a child) because Button's\n    // `overflow-hidden` would clip a child poking outside the corner.\n    //\n    // Composable: pass `lastUsedSlot` (ReactNode or render fn) to replace\n    // the default pill. `lastUsedLabel` swaps just the text inside it.\n    // aria-label augments the accessible name with \"(last used)\".\n    // intentional: a 9px corner pill, smaller than Badge's smallest size (xs).\n    // Not worth a sub-xs Badge size for one call site — kept as a documented exception.\n    const defaultBadge = (\n      <span className=\"pointer-events-none inline-flex items-center rounded-pill bg-accent-9 text-accent-fg px-2 py-1 text-label-xs leading-none font-semibold uppercase tracking-wide shadow-overlay\">\n        {lastUsedLabel}\n      </span>\n    )\n    const customBadge =\n      typeof lastUsedSlot === 'function' ? lastUsedSlot({ label: lastUsedLabel }) : lastUsedSlot\n    const renderedBadge = customBadge ?? defaultBadge\n\n    const buttonEl = (\n      <Button\n        ref={ref}\n        variant={variant}\n        color=\"neutral\"\n        size={iconOnly ? ICON_ONLY_SIZE[size] ?? 'icon-md' : size}\n        fullWidth={fullWidth && !iconOnly}\n        startIcon={iconOnly ? undefined : (glyphNode as React.ReactElement)}\n        aria-label={ariaLabelForButton}\n        data-provider={provider}\n        data-oauth-variant={variant}\n        data-last-used={lastUsed || undefined}\n        className={className}\n        {...buttonProps}\n      >\n        {iconOnly ? glyphNode : label}\n      </Button>\n    )\n\n    const showBadge = lastUsed && !iconOnly\n    if (!showBadge && !helperText) return buttonEl\n\n    return (\n      <div className={cn('relative inline-flex flex-col', fullWidth && 'w-full')}>\n        {buttonEl}\n        {showBadge ? (\n          <span\n            aria-hidden=\"true\"\n            data-last-used-badge=\"\"\n            className=\"pointer-events-none absolute -top-[10px] -right-2 z-10\"\n          >\n            {renderedBadge}\n          </span>\n        ) : null}\n        {helperText ? (\n          <span className=\"mt-ds-02 text-body-sm text-surface-fg-subtle\">{helperText}</span>\n        ) : null}\n      </div>\n    )\n  },\n)\nOAuthButton.displayName = 'OAuthButton'\n\nexport { OAuthButton }\n\n// ── OAuthGroup ─────────────────────────────────────────────────\n\nexport interface OAuthGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Layout. `vertical` (default) stacks full-width buttons. */\n  orientation?: 'vertical' | 'horizontal'\n  /** Gap token between buttons. Default: `ds-03` */\n  gap?: 'ds-02' | 'ds-03' | 'ds-04'\n  /** Stretch children to fill width (vertical only). Default: true */\n  fullWidth?: boolean\n  /**\n   * Move any child with `lastUsed` to position 0. Stripe-style ordering — the\n   * provider the user picked last time becomes the top option, which gives a\n   * stronger conversion lift than a \"Last used\" badge does on its own.\n   * Default: false (preserve source order).\n   */\n  reorderLastUsedFirst?: boolean\n}\n\n/**\n * Stacked layout wrapper for OAuth buttons with consistent spacing. Defaults to\n * vertical, full-width children — the dominant sign-in pattern. For an icon-only\n * row, set `orientation=\"horizontal\"` and use `<OAuthButton iconOnly />`.\n */\nconst OAuthGroup = React.forwardRef<HTMLDivElement, OAuthGroupProps>(\n  (\n    {\n      orientation = 'vertical',\n      gap = 'ds-03',\n      fullWidth = true,\n      reorderLastUsedFirst = false,\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const gapClass =\n      gap === 'ds-02' ? 'gap-ds-02' : gap === 'ds-04' ? 'gap-ds-04' : 'gap-ds-03'\n    const stretch = orientation === 'vertical' && fullWidth\n\n    const ordered = React.useMemo(() => {\n      if (!reorderLastUsedFirst) return children\n      const arr = React.Children.toArray(children)\n      const lastUsedIdx = arr.findIndex(\n        (c) => React.isValidElement(c) && (c.props as { lastUsed?: boolean })?.lastUsed,\n      )\n      if (lastUsedIdx <= 0) return children\n      const next = [...arr]\n      const [pulled] = next.splice(lastUsedIdx, 1)\n      next.unshift(pulled)\n      return next\n    }, [children, reorderLastUsedFirst])\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex',\n          orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap items-center',\n          gapClass,\n          // Force both the direct wrapper AND the leaf <button> to stretch.\n          // OAuthButton's outer wrapper picks up [&>*]:w-full; the button itself\n          // sits two layers deep when a helperText wrapper exists, so\n          // [&_button]:w-full covers both cases (wrapped + unwrapped) without\n          // affecting unrelated descendants — only Buttons live inside.\n          stretch && 'w-full [&>*]:w-full [&_button]:w-full',\n          className,\n        )}\n        {...props}\n      >\n        {ordered}\n      </div>\n    )\n  },\n)\nOAuthGroup.displayName = 'OAuthGroup'\n\nexport { OAuthGroup }\n\n// ── OAuthDivider ───────────────────────────────────────────────\n\nexport interface OAuthDividerProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Text between the rules. Default: \"or\" */\n  label?: React.ReactNode\n}\n\nconst OAuthDivider = React.forwardRef<HTMLDivElement, OAuthDividerProps>(\n  ({ label = 'or', className, ...props }, ref) => (\n    <div\n      ref={ref}\n      role=\"separator\"\n      aria-orientation=\"horizontal\"\n      className={cn('flex items-center gap-ds-03', className)}\n      {...props}\n    >\n      <hr aria-hidden=\"true\" className=\"flex-1 border-t border-surface-border-subtle\" />\n      <span className=\"text-label-sm text-surface-fg-subtle uppercase tracking-wide\">{label}</span>\n      <hr aria-hidden=\"true\" className=\"flex-1 border-t border-surface-border-subtle\" />\n    </div>\n  ),\n)\nOAuthDivider.displayName = 'OAuthDivider'\n\nexport { OAuthDivider }\n\n// ── OAuthConnectionRow (settings page — linked state) ──────────\n\nexport interface OAuthConnectionRowProps extends React.HTMLAttributes<HTMLDivElement> {\n  provider: OAuthProvider\n  /** Optional account identifier shown next to the provider name (e.g. email) */\n  accountLabel?: React.ReactNode\n  /** Whether the provider is currently linked */\n  connected: boolean\n  /** Click handler for the connect/disconnect action */\n  onAction?: (e: React.MouseEvent<HTMLButtonElement>) => void\n  /** Promise-returning click handler — uses Button's async state machine */\n  onActionAsync?: (e: React.MouseEvent<HTMLButtonElement>) => Promise<void>\n  /** Override the action label */\n  actionLabel?: React.ReactNode\n  /** Disable the action button */\n  disabled?: boolean\n  /** Override the default glyph. Accepts any `IconInput`. */\n  icon?: IconInput\n}\n\n/**\n * Settings-page row representing a linked OAuth provider. Different surface\n * from sign-in: this is an existing connection the user can disconnect or\n * (re-)connect. Renders glyph + provider name + optional account label + a\n * connect/disconnect button.\n */\nconst OAuthConnectionRow = React.forwardRef<HTMLDivElement, OAuthConnectionRowProps>(\n  (\n    {\n      provider,\n      accountLabel,\n      connected,\n      onAction,\n      onActionAsync,\n      actionLabel,\n      disabled,\n      icon,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const DefaultGlyph = providerIcon[provider]\n    const name = providerDisplay[provider]\n    const resolvedLabel = actionLabel ?? (connected ? 'Disconnect' : `Connect ${name}`)\n\n    return (\n      <div\n        ref={ref}\n        className={cn(\n          'flex items-center justify-between gap-ds-04 py-ds-04 px-ds-04 rounded-surface border border-surface-border bg-surface-panel',\n          className,\n        )}\n        data-provider={provider}\n        data-connected={connected ? 'true' : 'false'}\n        {...props}\n      >\n        <div className=\"flex items-center gap-ds-03 min-w-0\">\n          {normalizeIcon(icon) ?? <DefaultGlyph size={24} aria-hidden />}\n          <div className=\"flex flex-col min-w-0\">\n            <TruncatedText className=\"text-body-md font-semibold text-surface-fg\">{name}</TruncatedText>\n            {accountLabel ? (\n              // Account labels are usually an email — middle-truncate to keep the domain.\n              // Only a string can be measured/truncated; fall back to a plain clip otherwise.\n              typeof accountLabel === 'string' ? (\n                <TruncatedText mode=\"middle\" className=\"text-body-sm text-surface-fg-muted\">\n                  {accountLabel}\n                </TruncatedText>\n              ) : (\n                <span className=\"text-body-sm text-surface-fg-muted truncate\">{accountLabel}</span>\n              )\n            ) : connected ? (\n              <span className=\"text-body-sm text-success-11\">Connected</span>\n            ) : (\n              <span className=\"text-body-sm text-surface-fg-subtle\">Not connected</span>\n            )}\n          </div>\n        </div>\n        <Button\n          size=\"sm\"\n          variant={connected ? 'soft' : 'solid'}\n          color={connected ? 'neutral' : 'accent'}\n          disabled={disabled}\n          onClick={onAction}\n          onClickAsync={onActionAsync}\n        >\n          {resolvedLabel}\n        </Button>\n      </div>\n    )\n  },\n)\nOAuthConnectionRow.displayName = 'OAuthConnectionRow'\n\nexport { OAuthConnectionRow }\n\n// ── OAuthGlyph (atomic glyph render) ───────────────────────────\n\nexport interface OAuthGlyphProps extends Omit<React.SVGAttributes<SVGElement>, 'children'> {\n  provider: OAuthProvider\n  /** Glyph pixel size. Default 18. */\n  size?: number\n}\n\n/**\n * Render just the provider glyph — useful when building a custom OAuth\n * trigger (e.g. an icon-button inside a Tooltip, or a provider chip on a\n * profile card). Defaults to the Tabler glyph; the icon prop on\n * `OAuthButton` is the right escape hatch for the brand multi-colour mark.\n */\nconst OAuthGlyph = React.forwardRef<SVGSVGElement, OAuthGlyphProps>(\n  ({ provider, size = 18, ...props }, ref) => {\n    const Cmp = providerIcon[provider] as React.ComponentType<{\n      size?: number\n      'aria-hidden'?: boolean\n      ref?: React.Ref<SVGSVGElement>\n    }>\n    return <Cmp ref={ref} size={size} aria-hidden {...(props as Record<string, unknown>)} />\n  },\n)\nOAuthGlyph.displayName = 'OAuthGlyph'\n\nexport { OAuthGlyph }\n\n// ── Static helpers (composable building blocks) ────────────────\n\n/**\n * Resolve the visible label for a provider × intent combo. Useful when\n * rendering OAuth UIs outside of `OAuthButton` (e.g. a Confirm dialog\n * \"Disconnect from Google?\" title).\n */\nexport function getOAuthLabel(provider: OAuthProvider, intent: OAuthIntent = 'continue', compact = false): string {\n  return resolveLabel(provider, intent, compact)\n}\n\n/** Display name for a provider, ready for sentence interpolation. */\nexport function getOAuthName(provider: OAuthProvider): string {\n  return providerName(provider)\n}\n\n// ── Compound namespace ─────────────────────────────────────────\n\n/**\n * Namespaced API — drop-in alternative to importing each piece separately.\n *\n * @example\n * import { OAuth } from '@devalok/shilp-sutra/ui/oauth-button'\n *\n * <OAuth.Group reorderLastUsedFirst>\n *   <OAuth.Button provider=\"google\" lastUsed />\n *   <OAuth.Button provider=\"passkey\" />\n *   <OAuth.Divider />\n *   <OAuth.Button provider=\"sso\" variant=\"ghost\" />\n * </OAuth.Group>\n */\nexport const OAuth = {\n  Button: OAuthButton,\n  Group: OAuthGroup,\n  Divider: OAuthDivider,\n  ConnectionRow: OAuthConnectionRow,\n  Glyph: OAuthGlyph,\n  getLabel: getOAuthLabel,\n  getName: getOAuthName,\n} as const\n"],"mappings":"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"}

package/dist/_chunks/popover.js

@@ -1,53 +1,54 @@
 "use client";
 import { springs as e, tweens as t } from "../ui/lib/motion.js";
-import { cn as n } from "../ui/lib/utils.js";
-import { Content as r, Overlay as i, Portal as a, Root as o } from "./primitives/react-alert-dialog.js";
-import { useIsMobile as s } from "../hooks/use-mobile.js";
-import { Anchor2 as c, Content2 as l, Portal as u, Root2 as d, Trigger as f } from "./primitives/react-popover.js";
-import { useControllableOpen as p } from "./use-controllable-open.js";
-import * as m from "react";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { AnimatePresence as _, motion as v, useReducedMotion as y } from "framer-motion";
+import { MotionPreference as n } from "./motion-preference.js";
+import { cn as r } from "../ui/lib/utils.js";
+import { Content as i, Overlay as a, Portal as o, Root as s } from "./primitives/react-alert-dialog.js";
+import { useIsMobile as c } from "../hooks/use-mobile.js";
+import { Anchor2 as l, Content2 as u, Portal as d, Root2 as f, Trigger as p } from "./primitives/react-popover.js";
+import { useControllableOpen as m } from "./use-controllable-open.js";
+import * as h from "react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { AnimatePresence as v, motion as y, useReducedMotion as b } from "framer-motion";
 //#region src/ui/lib/bottom-sheet.tsx
-function b({ open: s, onOpenChange: c, children: l, className: u, dragHandle: d = !0, swipeable: f = !0, title: p }) {
-	let b = y(), x = m.useRef(null), S = m.useCallback((e, t) => {
+function x({ open: n, onOpenChange: c, children: l, className: u, dragHandle: d = !0, swipeable: f = !0, title: p }) {
+	let m = b(), x = h.useRef(null), S = h.useCallback((e, t) => {
 		let n = x.current?.getBoundingClientRect().height ?? 300;
 		(t.offset.y > n * .3 || t.velocity.y > 500) && c(!1);
 	}, [c]);
-	return /* @__PURE__ */ h(o, {
-		open: s,
+	return /* @__PURE__ */ g(s, {
+		open: n,
 		onOpenChange: c,
-		children: /* @__PURE__ */ h(_, { children: s && /* @__PURE__ */ g(a, {
+		children: /* @__PURE__ */ g(v, { children: n && /* @__PURE__ */ _(o, {
 			forceMount: !0,
-			children: [/* @__PURE__ */ h(i, {
+			children: [/* @__PURE__ */ g(a, {
 				forceMount: !0,
 				asChild: !0,
-				children: /* @__PURE__ */ h(v.div, {
+				children: /* @__PURE__ */ g(y.div, {
 					className: "fixed inset-0 z-modal bg-overlay",
 					initial: { opacity: 0 },
 					animate: { opacity: 1 },
 					exit: { opacity: 0 },
 					transition: t.fade
 				})
-			}), /* @__PURE__ */ h(r, {
+			}), /* @__PURE__ */ g(i, {
 				forceMount: !0,
 				asChild: !0,
 				"aria-label": p,
-				children: /* @__PURE__ */ g(v.div, {
+				children: /* @__PURE__ */ _(y.div, {
 					ref: x,
-					className: n("fixed inset-x-0 bottom-0 z-modal max-h-[85vh] overflow-y-auto rounded-t-overlay-lg border-t border-surface-border-strong bg-surface-overlay shadow-overlay outline-hidden", u),
+					className: r("fixed inset-x-0 bottom-0 z-modal max-h-[85vh] overflow-y-auto rounded-t-overlay-lg border-t border-surface-border-strong bg-surface-overlay shadow-overlay outline-hidden", u),
 					initial: { y: "100%" },
 					animate: { y: 0 },
 					exit: { y: "100%" },
-					transition: b ? { duration: 0 } : e.smooth,
-					drag: f && !b ? "y" : !1,
+					transition: m ? { duration: 0 } : e.smooth,
+					drag: f && !m ? "y" : !1,
 					dragConstraints: { top: 0 },
 					dragElastic: .2,
 					onDragEnd: S,
-					children: [d && /* @__PURE__ */ h("div", {
+					children: [d && /* @__PURE__ */ g("div", {
 						className: "flex justify-center pt-ds-03 pb-ds-02",
-						children: /* @__PURE__ */ h("div", { className: "h-1 w-8 rounded-pill bg-surface-border" })
-					}), /* @__PURE__ */ h("div", {
+						children: /* @__PURE__ */ g("div", { className: "h-1 w-8 rounded-pill bg-surface-border" })
+					}), /* @__PURE__ */ g("div", {
 						className: "px-ds-05 pb-ds-06",
 						children: l
 					})]
@@ -58,48 +59,48 @@ function b({ open: s, onOpenChange: c, children: l, className: u, dragHandle: d
 }
 //#endregion
 //#region src/ui/popover.tsx
-var x = m.createContext({
+var S = h.createContext({
 	open: !1,
 	onClose: () => {}
-}), S = ({ open: e, defaultOpen: t = !1, onOpenChange: n, ...r }) => {
-	let { open: i, setOpen: a, close: o } = p({
+}), C = ({ open: e, defaultOpen: t = !1, onOpenChange: n, ...r }) => {
+	let { open: i, setOpen: a, close: o } = m({
 		open: e,
 		defaultOpen: t,
 		onOpenChange: n
-	}), s = m.useMemo(() => ({
+	}), s = h.useMemo(() => ({
 		open: i,
 		onClose: o
 	}), [i, o]);
-	return /* @__PURE__ */ h(x.Provider, {
+	return /* @__PURE__ */ g(S.Provider, {
 		value: s,
-		children: /* @__PURE__ */ h(d, {
+		children: /* @__PURE__ */ g(f, {
 			open: i,
 			onOpenChange: a,
 			...r
 		})
 	});
 };
-S.displayName = "Popover";
-var C = f, w = c, T = m.forwardRef(({ className: r, align: i = "center", sideOffset: a = 4, children: o, ...c }, d) => {
-	let f = s(), { open: p, onClose: g } = m.useContext(x);
-	return f ? /* @__PURE__ */ h(b, {
-		open: p,
+C.displayName = "Popover";
+var w = p, T = l, E = h.forwardRef(({ className: i, align: a = "center", sideOffset: o = 4, children: s, ...l }, f) => {
+	let p = c(), { open: m, onClose: _ } = h.useContext(S);
+	return p ? /* @__PURE__ */ g(x, {
+		open: m,
 		onOpenChange: (e) => {
-			e || g();
+			e || _();
 		},
 		title: "Options",
-		className: r,
-		children: o
-	}) : /* @__PURE__ */ h(_, { children: p && /* @__PURE__ */ h(u, {
+		className: i,
+		children: s
+	}) : /* @__PURE__ */ g(n, { children: /* @__PURE__ */ g(v, { children: m && /* @__PURE__ */ g(d, {
 		forceMount: !0,
-		children: /* @__PURE__ */ h(l, {
-			ref: d,
-			align: i,
-			sideOffset: a,
+		children: /* @__PURE__ */ g(u, {
+			ref: f,
+			align: a,
+			sideOffset: o,
 			forceMount: !0,
 			asChild: !0,
-			...c,
-			children: /* @__PURE__ */ h(v.div, {
+			...l,
+			children: /* @__PURE__ */ g(y.div, {
 				initial: {
 					opacity: 0,
 					scale: .95
@@ -116,12 +117,12 @@ var C = f, w = c, T = m.forwardRef(({ className: r, align: i = "center", sideOff
 					...e.snappy,
 					opacity: t.fade
 				},
-				className: n("z-popover w-72 rounded-overlay bg-surface-overlay p-ds-05 text-surface-fg shadow-floating outline-hidden", r),
-				children: o
+				className: r("z-popover w-72 rounded-overlay bg-surface-overlay p-ds-05 text-surface-fg shadow-floating outline-hidden", i),
+				children: s
 			})
 		})
-	}) });
+	}) }) });
 });
-T.displayName = l.displayName;
+E.displayName = u.displayName;
 //#endregion
-export { S as Popover, w as PopoverAnchor, T as PopoverContent, C as PopoverTrigger };
+export { C as Popover, T as PopoverAnchor, E as PopoverContent, w as PopoverTrigger };

package/dist/_chunks/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","names":[],"sources":["../../src/ui/lib/bottom-sheet.tsx","../../src/ui/popover.tsx"],"sourcesContent":["'use client'\n\nimport * as DialogPrimitive from '@primitives/react-dialog'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs, tweens } from './motion'\nimport { cn } from './utils'\n\nexport interface BottomSheetProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  children: React.ReactNode\n  className?: string\n  /** Show drag handle bar at top. @default true */\n  dragHandle?: boolean\n  /** Allow swipe-to-dismiss. @default true */\n  swipeable?: boolean\n  /** Title for accessibility (sets aria-label on the dialog). */\n  title?: string\n}\n\nexport function BottomSheet({\n  open,\n  onOpenChange,\n  children,\n  className,\n  dragHandle = true,\n  swipeable = true,\n  title,\n}: BottomSheetProps) {\n  const isReduced = useReducedMotion()\n  const sheetRef = React.useRef<HTMLDivElement>(null)\n\n  const handleDragEnd = React.useCallback(\n    (_: unknown, info: { offset: { y: number }; velocity: { y: number } }) => {\n      const sheetHeight = sheetRef.current?.getBoundingClientRect().height ?? 300\n      if (info.offset.y > sheetHeight * 0.3 || info.velocity.y > 500) {\n        onOpenChange(false)\n      }\n    },\n    [onOpenChange],\n  )\n\n  return (\n    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>\n      <AnimatePresence>\n        {open && (\n          <DialogPrimitive.Portal forceMount>\n            <DialogPrimitive.Overlay forceMount asChild>\n              <motion.div\n                className=\"fixed inset-0 z-modal bg-overlay\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={tweens.fade}\n              />\n            </DialogPrimitive.Overlay>\n\n            <DialogPrimitive.Content\n              forceMount\n              asChild\n              aria-label={title}\n            >\n              <motion.div\n                ref={sheetRef}\n                className={cn(\n                  'fixed inset-x-0 bottom-0 z-modal max-h-[85vh] overflow-y-auto rounded-t-overlay-lg border-t border-surface-border-strong bg-surface-overlay shadow-overlay outline-hidden',\n                  className,\n                )}\n                initial={{ y: '100%' }}\n                animate={{ y: 0 }}\n                exit={{ y: '100%' }}\n                transition={isReduced ? { duration: 0 } : springs.smooth}\n                drag={swipeable && !isReduced ? 'y' : false}\n                dragConstraints={{ top: 0 }}\n                dragElastic={0.2}\n                onDragEnd={handleDragEnd}\n              >\n                {dragHandle && (\n                  <div className=\"flex justify-center pt-ds-03 pb-ds-02\">\n                    <div className=\"h-1 w-8 rounded-pill bg-surface-border\" />\n                  </div>\n                )}\n                <div className=\"px-ds-05 pb-ds-06\">\n                  {children}\n                </div>\n              </motion.div>\n            </DialogPrimitive.Content>\n          </DialogPrimitive.Portal>\n        )}\n      </AnimatePresence>\n    </DialogPrimitive.Root>\n  )\n}\n","'use client'\n\nimport * as PopoverPrimitive from '@primitives/react-popover'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { BottomSheet } from './lib/bottom-sheet'\nimport { springs, tweens } from './lib/motion'\nimport { useControllableOpen } from './lib/use-controllable-open'\nimport { cn } from './lib/utils'\n\n// ── Internal context to thread `open` state to animated children ──\n\nconst PopoverOpenContext = React.createContext<{ open: boolean; onClose: () => void }>({ open: false, onClose: () => {} })\n\nconst Popover: React.FC<React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const { open, setOpen, close } = useControllableOpen({ open: controlledOpen, defaultOpen, onOpenChange })\n\n  const contextValue = React.useMemo(\n    () => ({ open, onClose: close }),\n    [open, close],\n  )\n\n  return (\n    <PopoverOpenContext.Provider value={contextValue}>\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen} {...props} />\n    </PopoverOpenContext.Provider>\n  )\n}\nPopover.displayName = 'Popover'\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, children, ...props }, ref) => {\n  const isMobileRaw = useIsMobile()\n  const { open, onClose } = React.useContext(PopoverOpenContext)\n\n  if (isMobileRaw) {\n    return (\n      <BottomSheet\n        open={open}\n        onOpenChange={(v) => { if (!v) onClose() }}\n        title=\"Options\"\n        className={className}\n      >\n        {children}\n      </BottomSheet>\n    )\n  }\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <PopoverPrimitive.Portal forceMount>\n          <PopoverPrimitive.Content\n            ref={ref}\n            align={align}\n            sideOffset={sideOffset}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover w-72 rounded-overlay bg-surface-overlay p-ds-05 text-surface-fg shadow-floating outline-hidden',\n                className,\n              )}\n            >\n              {children}\n            </motion.div>\n          </PopoverPrimitive.Content>\n        </PopoverPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  )\n})\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n\nexport { Popover, PopoverAnchor,PopoverContent, PopoverTrigger }\n"],"mappings":"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"}
+{"version":3,"file":"popover.js","names":[],"sources":["../../src/ui/lib/bottom-sheet.tsx","../../src/ui/popover.tsx"],"sourcesContent":["'use client'\n\nimport * as DialogPrimitive from '@primitives/react-dialog'\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs, tweens } from './motion'\nimport { cn } from './utils'\n\nexport interface BottomSheetProps {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  children: React.ReactNode\n  className?: string\n  /** Show drag handle bar at top. @default true */\n  dragHandle?: boolean\n  /** Allow swipe-to-dismiss. @default true */\n  swipeable?: boolean\n  /** Title for accessibility (sets aria-label on the dialog). */\n  title?: string\n}\n\nexport function BottomSheet({\n  open,\n  onOpenChange,\n  children,\n  className,\n  dragHandle = true,\n  swipeable = true,\n  title,\n}: BottomSheetProps) {\n  const isReduced = useReducedMotion()\n  const sheetRef = React.useRef<HTMLDivElement>(null)\n\n  const handleDragEnd = React.useCallback(\n    (_: unknown, info: { offset: { y: number }; velocity: { y: number } }) => {\n      const sheetHeight = sheetRef.current?.getBoundingClientRect().height ?? 300\n      if (info.offset.y > sheetHeight * 0.3 || info.velocity.y > 500) {\n        onOpenChange(false)\n      }\n    },\n    [onOpenChange],\n  )\n\n  return (\n    <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>\n      <AnimatePresence>\n        {open && (\n          <DialogPrimitive.Portal forceMount>\n            <DialogPrimitive.Overlay forceMount asChild>\n              <motion.div\n                className=\"fixed inset-0 z-modal bg-overlay\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={tweens.fade}\n              />\n            </DialogPrimitive.Overlay>\n\n            <DialogPrimitive.Content\n              forceMount\n              asChild\n              aria-label={title}\n            >\n              <motion.div\n                ref={sheetRef}\n                className={cn(\n                  'fixed inset-x-0 bottom-0 z-modal max-h-[85vh] overflow-y-auto rounded-t-overlay-lg border-t border-surface-border-strong bg-surface-overlay shadow-overlay outline-hidden',\n                  className,\n                )}\n                initial={{ y: '100%' }}\n                animate={{ y: 0 }}\n                exit={{ y: '100%' }}\n                transition={isReduced ? { duration: 0 } : springs.smooth}\n                drag={swipeable && !isReduced ? 'y' : false}\n                dragConstraints={{ top: 0 }}\n                dragElastic={0.2}\n                onDragEnd={handleDragEnd}\n              >\n                {dragHandle && (\n                  <div className=\"flex justify-center pt-ds-03 pb-ds-02\">\n                    <div className=\"h-1 w-8 rounded-pill bg-surface-border\" />\n                  </div>\n                )}\n                <div className=\"px-ds-05 pb-ds-06\">\n                  {children}\n                </div>\n              </motion.div>\n            </DialogPrimitive.Content>\n          </DialogPrimitive.Portal>\n        )}\n      </AnimatePresence>\n    </DialogPrimitive.Root>\n  )\n}\n","'use client'\n\nimport * as PopoverPrimitive from '@primitives/react-popover'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { MotionPreference } from '../motion/motion-preference'\nimport { BottomSheet } from './lib/bottom-sheet'\nimport { springs, tweens } from './lib/motion'\nimport { useControllableOpen } from './lib/use-controllable-open'\nimport { cn } from './lib/utils'\n\n// ── Internal context to thread `open` state to animated children ──\n\nconst PopoverOpenContext = React.createContext<{ open: boolean; onClose: () => void }>({ open: false, onClose: () => {} })\n\nconst Popover: React.FC<React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const { open, setOpen, close } = useControllableOpen({ open: controlledOpen, defaultOpen, onOpenChange })\n\n  const contextValue = React.useMemo(\n    () => ({ open, onClose: close }),\n    [open, close],\n  )\n\n  return (\n    <PopoverOpenContext.Provider value={contextValue}>\n      <PopoverPrimitive.Root open={open} onOpenChange={setOpen} {...props} />\n    </PopoverOpenContext.Provider>\n  )\n}\nPopover.displayName = 'Popover'\n\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\nconst PopoverContent = React.forwardRef<\n  React.ElementRef<typeof PopoverPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, children, ...props }, ref) => {\n  const isMobileRaw = useIsMobile()\n  const { open, onClose } = React.useContext(PopoverOpenContext)\n\n  if (isMobileRaw) {\n    return (\n      <BottomSheet\n        open={open}\n        onOpenChange={(v) => { if (!v) onClose() }}\n        title=\"Options\"\n        className={className}\n      >\n        {children}\n      </BottomSheet>\n    )\n  }\n\n  return (\n    <MotionPreference>\n      <AnimatePresence>\n        {open && (\n          <PopoverPrimitive.Portal forceMount>\n            <PopoverPrimitive.Content\n              ref={ref}\n              align={align}\n              sideOffset={sideOffset}\n              forceMount\n              asChild\n              {...props}\n            >\n              <motion.div\n                initial={{ opacity: 0, scale: 0.95 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.95 }}\n                transition={{ ...springs.snappy, opacity: tweens.fade }}\n                className={cn(\n                  'z-popover w-72 rounded-overlay bg-surface-overlay p-ds-05 text-surface-fg shadow-floating outline-hidden',\n                  className,\n                )}\n              >\n                {children}\n              </motion.div>\n            </PopoverPrimitive.Content>\n          </PopoverPrimitive.Portal>\n        )}\n      </AnimatePresence>\n    </MotionPreference>\n  )\n})\nPopoverContent.displayName = PopoverPrimitive.Content.displayName\n\nexport type PopoverContentProps = React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n\nexport { Popover, PopoverAnchor,PopoverContent, PopoverTrigger }\n"],"mappings":"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"}