panelui-native 0.2.0 → 0.5.1

package/lib/module/components/alert/index.js

@@ -1,33 +1,52 @@
 "use strict";
 
+/**
+ * Alert — a status message with an optional leading status icon.
+ *
+ * Adapted from: heroui-inc/heroui-native src/components/alert/alert.tsx
+ * (Indicator / Content / Title / Description anatomy, status-driven icon and
+ * title colour), restyled with Coss UI tokens.
+ *
+ * The `variant` prop name is kept from PanelUI v0.2 rather than renamed to
+ * HeroUI's `status`, so existing code keeps working.
+ */
 import { createContext, forwardRef, useContext } from 'react';
 import { View } from 'react-native';
 import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
 import { cn } from "../../utils/cn.js";
 import { Text } from "../../primitives/text.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertTriangleIcon, CheckCircleIcon, InfoIcon } from "../../icons/index.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const alertVariants = tv({
   slots: {
-    root: 'w-full gap-0.5 rounded-xl border px-3.5 py-3',
-    title: 'text-sm font-medium text-card-foreground',
+    root: 'w-full flex-row gap-3 rounded-xl border px-3.5 py-3',
+    indicator: 'pt-px',
+    content: 'flex-1 gap-0.5',
+    title: 'text-sm font-medium',
     description: 'text-sm text-muted-foreground'
   },
   variants: {
     variant: {
       default: {
-        root: 'border-border bg-surface'
+        root: 'border-border bg-surface',
+        title: 'text-card-foreground'
       },
       info: {
-        root: 'border-info/32 bg-info/10 dark:bg-info/[0.06]'
+        root: 'border-info/32 bg-info-soft',
+        title: 'text-info-foreground'
       },
       success: {
-        root: 'border-success/32 bg-success/10 dark:bg-success/[0.06]'
+        root: 'border-success/32 bg-success-soft',
+        title: 'text-success-foreground'
       },
       warning: {
-        root: 'border-warning/32 bg-warning/10 dark:bg-warning/[0.06]'
+        root: 'border-warning/32 bg-warning-soft',
+        title: 'text-warning-foreground'
       },
       destructive: {
-        root: 'border-destructive/32 bg-destructive/10 dark:bg-destructive/[0.06]'
+        root: 'border-destructive/32 bg-destructive-soft',
+        title: 'text-destructive-foreground'
       }
     }
   },
@@ -36,6 +55,22 @@ const alertVariants = tv({
   }
 });
 const AlertContext = /*#__PURE__*/createContext('default');
+
+/** CSS variable each variant's indicator icon takes its colour from. */
+const INDICATOR_COLOR_VAR = {
+  default: '--color-muted-foreground',
+  info: '--color-info-foreground',
+  success: '--color-success-foreground',
+  warning: '--color-warning-foreground',
+  destructive: '--color-destructive-foreground'
+};
+const INDICATOR_ICON = {
+  default: InfoIcon,
+  info: InfoIcon,
+  success: CheckCircleIcon,
+  warning: AlertTriangleIcon,
+  destructive: AlertTriangleIcon
+};
 const AlertRoot = /*#__PURE__*/forwardRef(({
   className,
   variant = 'default',
@@ -44,7 +79,9 @@ const AlertRoot = /*#__PURE__*/forwardRef(({
   ...props
 }, ref) => {
   const {
-    root
+    root,
+    indicator,
+    content
   } = alertVariants({
     variant
   });
@@ -57,13 +94,12 @@ const AlertRoot = /*#__PURE__*/forwardRef(({
         className
       }),
       ...props,
-      children: icon ? /*#__PURE__*/_jsxs(View, {
-        className: "flex-row items-start gap-3",
+      children: icon ? /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(View, {
-          className: "mt-0.5",
+          className: indicator(),
           children: icon
         }), /*#__PURE__*/_jsx(View, {
-          className: "flex-1 gap-1",
+          className: content(),
           children: children
         })]
       }) : children
@@ -71,6 +107,59 @@ const AlertRoot = /*#__PURE__*/forwardRef(({
   });
 });
 AlertRoot.displayName = 'Alert';
+/**
+ * Leading status icon. Resolves both the icon and its colour from the parent
+ * Alert's variant, so it follows the active theme.
+ */
+const AlertIndicator = /*#__PURE__*/forwardRef(({
+  className,
+  iconProps,
+  children,
+  ...props
+}, ref) => {
+  const variant = useContext(AlertContext);
+  const {
+    indicator
+  } = alertVariants({
+    variant
+  });
+  const themeColor = useCSSVariable(INDICATOR_COLOR_VAR[variant]);
+  const Icon = INDICATOR_ICON[variant];
+  const color = iconProps?.color ?? (typeof themeColor === 'string' ? themeColor : undefined);
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: indicator({
+      className
+    }),
+    ...props,
+    children: children ?? /*#__PURE__*/_jsx(Icon, {
+      size: iconProps?.size ?? 18,
+      color: color
+    })
+  });
+});
+AlertIndicator.displayName = 'Alert.Indicator';
+
+/** Flex-1 wrapper for Alert.Title and Alert.Description. */
+const AlertContent = /*#__PURE__*/forwardRef(({
+  className,
+  ...props
+}, ref) => {
+  const variant = useContext(AlertContext);
+  const {
+    content
+  } = alertVariants({
+    variant
+  });
+  return /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    className: content({
+      className
+    }),
+    ...props
+  });
+});
+AlertContent.displayName = 'Alert.Content';
 const AlertTitle = /*#__PURE__*/forwardRef(({
   className,
   ...props
@@ -106,6 +195,10 @@ const AlertDescription = /*#__PURE__*/forwardRef(({
 });
 AlertDescription.displayName = 'Alert.Description';
 export const Alert = Object.assign(AlertRoot, {
+  /** @optional Status icon rendered as the leading visual element. */
+  Indicator: AlertIndicator,
+  /** @optional Wrapper for title and description. */
+  Content: AlertContent,
   Title: AlertTitle,
   Description: AlertDescription
 });

package/lib/module/components/alert/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["createContext","forwardRef","useContext","View","tv","cn","Text","jsx","_jsx","jsxs","_jsxs","alertVariants","slots","root","title","description","variants","variant","default","info","success","warning","destructive","defaultVariants","AlertContext","AlertRoot","className","icon","children","props","ref","Provider","value","accessibilityRole","displayName","AlertTitle","AlertDescription","Alert","Object","assign","Title","Description"],"sourceRoot":"../../../../src","sources":["components/alert/index.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["createContext","forwardRef","useContext","View","tv","useCSSVariable","cn","Text","AlertTriangleIcon","CheckCircleIcon","InfoIcon","jsx","_jsx","Fragment","_Fragment","jsxs","_jsxs","alertVariants","slots","root","indicator","content","title","description","variants","variant","default","info","success","warning","destructive","defaultVariants","AlertContext","INDICATOR_COLOR_VAR","INDICATOR_ICON","AlertRoot","className","icon","children","props","ref","Provider","value","accessibilityRole","displayName","AlertIndicator","iconProps","themeColor","Icon","color","undefined","size","AlertContent","AlertTitle","AlertDescription","Alert","Object","assign","Indicator","Content","Title","Description"],"sourceRoot":"../../../../src","sources":["components/alert/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/avatar/index.js

@@ -4,7 +4,8 @@ import { forwardRef, useState } from 'react';
 import { Image, View } from 'react-native';
 import { tv } from 'tailwind-variants';
 import { Text } from "../../primitives/text.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const avatarVariants = tv({
   slots: {
     root: 'items-center justify-center overflow-hidden rounded-full border border-border bg-muted',
@@ -35,12 +36,13 @@ const avatarVariants = tv({
     size: 'md'
   }
 });
-export const Avatar = /*#__PURE__*/forwardRef(({
+const AvatarRoot = /*#__PURE__*/forwardRef(({
   className,
   size,
   source,
   fallback,
   imageProps,
+  children,
   ...props
 }, ref) => {
   const [errored, setErrored] = useState(false);
@@ -52,23 +54,62 @@ export const Avatar = /*#__PURE__*/forwardRef(({
     size
   });
   const showImage = !!source && !errored;
-  return /*#__PURE__*/_jsx(View, {
+  const face = showImage ? /*#__PURE__*/_jsx(Image, {
+    source: source,
+    onError: () => setErrored(true),
+    className: image(),
+    ...imageProps
+  }) : /*#__PURE__*/_jsx(Text, {
+    className: fallbackSlot(),
+    children: fallback ?? '?'
+  });
+
+  // The plain avatar is a single clipped node.
+  if (!children) {
+    return /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      accessibilityRole: "image",
+      className: root({
+        className
+      }),
+      ...props,
+      children: face
+    });
+  }
+
+  // With an overlay it needs two: the face keeps overflow-hidden to round
+  // the image, which would otherwise cut a corner badge in half, so the
+  // overlay hangs off an unclipped wrapper around it.
+  return /*#__PURE__*/_jsxs(View, {
     ref: ref,
-    accessibilityRole: "image",
-    className: root({
-      className
-    }),
+    className: cn('self-start', className),
     ...props,
-    children: showImage ? /*#__PURE__*/_jsx(Image, {
-      source: source,
-      onError: () => setErrored(true),
-      className: image(),
-      ...imageProps
-    }) : /*#__PURE__*/_jsx(Text, {
-      className: fallbackSlot(),
-      children: fallback ?? '?'
-    })
+    children: [/*#__PURE__*/_jsx(View, {
+      accessibilityRole: "image",
+      className: root(),
+      children: face
+    }), children]
   });
 });
-Avatar.displayName = 'Avatar';
+AvatarRoot.displayName = 'Avatar';
+/**
+ * Overlay pinned to the avatar's top-right — an unread count, a presence dot.
+ *
+ * The ring is `border-background` so the badge separates from the image
+ * whatever surface the avatar sits on.
+ */
+const AvatarBadge = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(View, {
+  ref: ref,
+  className: cn('absolute -right-1 -top-1 rounded-full border-2 border-background', className),
+  ...props,
+  children: children
+}));
+AvatarBadge.displayName = 'Avatar.Badge';
+export const Avatar = Object.assign(AvatarRoot, {
+  Badge: AvatarBadge
+});
 //# sourceMappingURL=index.js.map

package/lib/module/components/avatar/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","useState","Image","View","tv","Text","jsx","_jsx","avatarVariants","slots","root","image","fallback","variants","size","sm","md","lg","xl","defaultVariants","Avatar","className","source","imageProps","props","ref","errored","setErrored","fallbackSlot","showImage","accessibilityRole","children","onError","displayName"],"sourceRoot":"../../../../src","sources":["components/avatar/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,QAAQ,QAAQ,OAAO;AAC5C,SACEC,KAAK,EACLC,IAAI,QAIC,cAAc;AACrB,SAASC,EAAE,QAA2B,mBAAmB;AACzD,SAASC,IAAI,QAAQ,0BAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7C,MAAMC,cAAc,GAAGJ,EAAE,CAAC;EACxBK,KAAK,EAAE;IACLC,IAAI,EAAE,wFAAwF;IAC9FC,KAAK,EAAE,gCAAgC;IACvCC,QAAQ,EAAE;EACZ,CAAC;EACDC,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,EAAE,EAAE;QAAEL,IAAI,EAAE,SAAS;QAAEE,QAAQ,EAAE;MAAU,CAAC;MAC5CI,EAAE,EAAE;QAAEN,IAAI,EAAE,WAAW;QAAEE,QAAQ,EAAE;MAAU,CAAC;MAC9CK,EAAE,EAAE;QAAEP,IAAI,EAAE,WAAW;QAAEE,QAAQ,EAAE;MAAU,CAAC;MAC9CM,EAAE,EAAE;QAAER,IAAI,EAAE,WAAW;QAAEE,QAAQ,EAAE;MAAW;IAChD;EACF,CAAC;EACDO,eAAe,EAAE;IACfL,IAAI,EAAE;EACR;AACF,CAAC,CAAC;AAWF,OAAO,MAAMM,MAAM,gBAAGpB,UAAU,CAC9B,CAAC;EAAEqB,SAAS;EAAEP,IAAI;EAAEQ,MAAM;EAAEV,QAAQ;EAAEW,UAAU;EAAE,GAAGC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACpE,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAG1B,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAM;IAAES,IAAI;IAAEC,KAAK;IAAEC,QAAQ,EAAEgB;EAAa,CAAC,GAAGpB,cAAc,CAAC;IAAEM;EAAK,CAAC,CAAC;EACxE,MAAMe,SAAS,GAAG,CAAC,CAACP,MAAM,IAAI,CAACI,OAAO;EAEtC,oBACEnB,IAAA,CAACJ,IAAI;IACHsB,GAAG,EAAEA,GAAI;IACTK,iBAAiB,EAAC,OAAO;IACzBT,SAAS,EAAEX,IAAI,CAAC;MAAEW;IAAU,CAAC,CAAE;IAAA,GAC3BG,KAAK;IAAAO,QAAA,EAERF,SAAS,gBACRtB,IAAA,CAACL,KAAK;MACJoB,MAAM,EAAEA,MAAO;MACfU,OAAO,EAAEA,CAAA,KAAML,UAAU,CAAC,IAAI,CAAE;MAChCN,SAAS,EAAEV,KAAK,CAAC,CAAE;MAAA,GACfY;IAAU,CACf,CAAC,gBAEFhB,IAAA,CAACF,IAAI;MAACgB,SAAS,EAAEO,YAAY,CAAC,CAAE;MAAAG,QAAA,EAAEnB,QAAQ,IAAI;IAAG,CAAO;EACzD,CACG,CAAC;AAEX,CACF,CAAC;AAEDQ,MAAM,CAACa,WAAW,GAAG,QAAQ","ignoreList":[]}
+{"version":3,"names":["forwardRef","useState","Image","View","tv","Text","cn","jsx","_jsx","jsxs","_jsxs","avatarVariants","slots","root","image","fallback","variants","size","sm","md","lg","xl","defaultVariants","AvatarRoot","className","source","imageProps","children","props","ref","errored","setErrored","fallbackSlot","showImage","face","onError","accessibilityRole","displayName","AvatarBadge","Avatar","Object","assign","Badge"],"sourceRoot":"../../../../src","sources":["components/avatar/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/badge/index.js

@@ -11,6 +11,17 @@ const badgeVariants = tv({
     label: 'text-xs font-medium'
   },
   variants: {
+    shape: {
+      default: {},
+      /** A bare status dot, no label. */
+      dot: {
+        root: 'h-2 w-2 rounded-full px-0 py-0'
+      },
+      /** Circular, for a count sitting over an avatar or an icon. */
+      count: {
+        root: 'h-5 min-w-5 rounded-full px-1.5 py-0'
+      }
+    },
     variant: {
       default: {
         root: 'bg-primary',
@@ -29,48 +40,58 @@ const badgeVariants = tv({
         label: 'text-white'
       },
       success: {
-        root: 'bg-success/8 dark:bg-success/16',
+        root: 'bg-success-subtle',
         label: 'text-success-foreground'
       },
       warning: {
-        root: 'bg-warning/8 dark:bg-warning/16',
+        root: 'bg-warning-subtle',
         label: 'text-warning-foreground'
       },
       info: {
-        root: 'bg-info/8 dark:bg-info/16',
+        root: 'bg-info-subtle',
         label: 'text-info-foreground'
       }
     }
   },
   defaultVariants: {
-    variant: 'default'
+    variant: 'default',
+    shape: 'default'
   }
 });
+
+/** Counts past this render as "99+" so the badge keeps its shape. */
+const MAX_COUNT = 99;
 export const Badge = /*#__PURE__*/forwardRef(({
   children,
   className,
   labelClassName,
   variant,
+  shape,
+  count,
   ...props
 }, ref) => {
+  const resolvedShape = shape ?? (count !== undefined ? 'count' : 'default');
   const {
     root,
     label
   } = badgeVariants({
-    variant
+    variant,
+    shape: resolvedShape
   });
+  const content = count !== undefined ? `${Math.min(count, MAX_COUNT)}${count > MAX_COUNT ? '+' : ''}` : children;
   return /*#__PURE__*/_jsx(View, {
     ref: ref,
+    accessibilityLabel: count !== undefined ? `${count} unread` : undefined,
     className: root({
       className
     }),
     ...props,
-    children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+    children: resolvedShape === 'dot' ? null : typeof content === 'string' ? /*#__PURE__*/_jsx(Text, {
       className: label({
         className: labelClassName
       }),
-      children: children
-    }) : children
+      children: content
+    }) : content
   });
 });
 Badge.displayName = 'Badge';

package/lib/module/components/badge/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","View","tv","Text","jsx","_jsx","badgeVariants","slots","root","label","variants","variant","default","secondary","outline","destructive","success","warning","info","defaultVariants","Badge","children","className","labelClassName","props","ref","displayName"],"sourceRoot":"../../../../src","sources":["components/badge/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAwB,OAAO;AAClD,SAASC,IAAI,QAAwB,cAAc;AACnD,SAASC,EAAE,QAA2B,mBAAmB;AACzD,SAASC,IAAI,QAAQ,0BAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7C,MAAMC,aAAa,GAAGJ,EAAE,CAAC;EACvBK,KAAK,EAAE;IACLC,IAAI,EAAE,wGAAwG;IAC9GC,KAAK,EAAE;EACT,CAAC;EACDC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE;QAAEJ,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAA0B,CAAC;MACjEI,SAAS,EAAE;QAAEL,IAAI,EAAE,cAAc;QAAEC,KAAK,EAAE;MAA4B,CAAC;MACvEK,OAAO,EAAE;QAAEN,IAAI,EAAE,8BAA8B;QAAEC,KAAK,EAAE;MAAkB,CAAC;MAC3EM,WAAW,EAAE;QAAEP,IAAI,EAAE,gBAAgB;QAAEC,KAAK,EAAE;MAAa,CAAC;MAC5DO,OAAO,EAAE;QAAER,IAAI,EAAE,iCAAiC;QAAEC,KAAK,EAAE;MAA0B,CAAC;MACtFQ,OAAO,EAAE;QAAET,IAAI,EAAE,iCAAiC;QAAEC,KAAK,EAAE;MAA0B,CAAC;MACtFS,IAAI,EAAE;QAAEV,IAAI,EAAE,2BAA2B;QAAEC,KAAK,EAAE;MAAuB;IAC3E;EACF,CAAC;EACDU,eAAe,EAAE;IACfR,OAAO,EAAE;EACX;AACF,CAAC,CAAC;AAUF,OAAO,MAAMS,KAAK,gBAAGpB,UAAU,CAC7B,CAAC;EAAEqB,QAAQ;EAAEC,SAAS;EAAEC,cAAc;EAAEZ,OAAO;EAAE,GAAGa;AAAM,CAAC,EAAEC,GAAG,KAAK;EACnE,MAAM;IAAEjB,IAAI;IAAEC;EAAM,CAAC,GAAGH,aAAa,CAAC;IAAEK;EAAQ,CAAC,CAAC;EAElD,oBACEN,IAAA,CAACJ,IAAI;IAACwB,GAAG,EAAEA,GAAI;IAACH,SAAS,EAAEd,IAAI,CAAC;MAAEc;IAAU,CAAC,CAAE;IAAA,GAAKE,KAAK;IAAAH,QAAA,EACtD,OAAOA,QAAQ,KAAK,QAAQ,gBAC3BhB,IAAA,CAACF,IAAI;MAACmB,SAAS,EAAEb,KAAK,CAAC;QAAEa,SAAS,EAAEC;MAAe,CAAC,CAAE;MAAAF,QAAA,EAAEA;IAAQ,CAAO,CAAC,GAExEA;EACD,CACG,CAAC;AAEX,CACF,CAAC;AAEDD,KAAK,CAACM,WAAW,GAAG,OAAO","ignoreList":[]}
+{"version":3,"names":["forwardRef","View","tv","Text","jsx","_jsx","badgeVariants","slots","root","label","variants","shape","default","dot","count","variant","secondary","outline","destructive","success","warning","info","defaultVariants","MAX_COUNT","Badge","children","className","labelClassName","props","ref","resolvedShape","undefined","content","Math","min","accessibilityLabel","displayName"],"sourceRoot":"../../../../src","sources":["components/badge/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,QAAwB,OAAO;AAClD,SAASC,IAAI,QAAwB,cAAc;AACnD,SAASC,EAAE,QAA2B,mBAAmB;AACzD,SAASC,IAAI,QAAQ,0BAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7C,MAAMC,aAAa,GAAGJ,EAAE,CAAC;EACvBK,KAAK,EAAE;IACLC,IAAI,EAAE,wGAAwG;IAC9GC,KAAK,EAAE;EACT,CAAC;EACDC,QAAQ,EAAE;IACRC,KAAK,EAAE;MACLC,OAAO,EAAE,CAAC,CAAC;MACX;MACAC,GAAG,EAAE;QAAEL,IAAI,EAAE;MAAiC,CAAC;MAC/C;MACAM,KAAK,EAAE;QAAEN,IAAI,EAAE;MAAuC;IACxD,CAAC;IACDO,OAAO,EAAE;MACPH,OAAO,EAAE;QAAEJ,IAAI,EAAE,YAAY;QAAEC,KAAK,EAAE;MAA0B,CAAC;MACjEO,SAAS,EAAE;QAAER,IAAI,EAAE,cAAc;QAAEC,KAAK,EAAE;MAA4B,CAAC;MACvEQ,OAAO,EAAE;QAAET,IAAI,EAAE,8BAA8B;QAAEC,KAAK,EAAE;MAAkB,CAAC;MAC3ES,WAAW,EAAE;QAAEV,IAAI,EAAE,gBAAgB;QAAEC,KAAK,EAAE;MAAa,CAAC;MAC5DU,OAAO,EAAE;QAAEX,IAAI,EAAE,mBAAmB;QAAEC,KAAK,EAAE;MAA0B,CAAC;MACxEW,OAAO,EAAE;QAAEZ,IAAI,EAAE,mBAAmB;QAAEC,KAAK,EAAE;MAA0B,CAAC;MACxEY,IAAI,EAAE;QAAEb,IAAI,EAAE,gBAAgB;QAAEC,KAAK,EAAE;MAAuB;IAChE;EACF,CAAC;EACDa,eAAe,EAAE;IACfP,OAAO,EAAE,SAAS;IAClBJ,KAAK,EAAE;EACT;AACF,CAAC,CAAC;;AAEF;AACA,MAAMY,SAAS,GAAG,EAAE;AAepB,OAAO,MAAMC,KAAK,gBAAGxB,UAAU,CAC7B,CAAC;EAAEyB,QAAQ;EAAEC,SAAS;EAAEC,cAAc;EAAEZ,OAAO;EAAEJ,KAAK;EAAEG,KAAK;EAAE,GAAGc;AAAM,CAAC,EAAEC,GAAG,KAAK;EACjF,MAAMC,aAAa,GAAGnB,KAAK,KAAKG,KAAK,KAAKiB,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;EAC1E,MAAM;IAAEvB,IAAI;IAAEC;EAAM,CAAC,GAAGH,aAAa,CAAC;IAAES,OAAO;IAAEJ,KAAK,EAAEmB;EAAc,CAAC,CAAC;EAExE,MAAME,OAAO,GACXlB,KAAK,KAAKiB,SAAS,GACf,GAAGE,IAAI,CAACC,GAAG,CAACpB,KAAK,EAAES,SAAS,CAAC,GAAGT,KAAK,GAAGS,SAAS,GAAG,GAAG,GAAG,EAAE,EAAE,GAC9DE,QAAQ;EAEd,oBACEpB,IAAA,CAACJ,IAAI;IACH4B,GAAG,EAAEA,GAAI;IACTM,kBAAkB,EAChBrB,KAAK,KAAKiB,SAAS,GAAG,GAAGjB,KAAK,SAAS,GAAGiB,SAC3C;IACDL,SAAS,EAAElB,IAAI,CAAC;MAAEkB;IAAU,CAAC,CAAE;IAAA,GAC3BE,KAAK;IAAAH,QAAA,EAERK,aAAa,KAAK,KAAK,GAAG,IAAI,GAAG,OAAOE,OAAO,KAAK,QAAQ,gBAC3D3B,IAAA,CAACF,IAAI;MAACuB,SAAS,EAAEjB,KAAK,CAAC;QAAEiB,SAAS,EAAEC;MAAe,CAAC,CAAE;MAAAF,QAAA,EAAEO;IAAO,CAAO,CAAC,GAEvEA;EACD,CACG,CAAC;AAEX,CACF,CAAC;AAEDR,KAAK,CAACY,WAAW,GAAG,OAAO","ignoreList":[]}

package/lib/module/components/button/index.js

@@ -1,36 +1,51 @@
 "use strict";
 
-import { forwardRef, isValidElement } from 'react';
+import { forwardRef } from 'react';
 import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
 import { AnimatedPressable } from "../../primitives/animated-pressable.js";
 import { Text } from "../../primitives/text.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { IconColorProvider } from "../../icons/index.js";
+import { Spinner } from "../spinner/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const buttonVariants = tv({
   slots: {
     root: 'flex-row items-center justify-center gap-2 rounded-lg border border-transparent',
-    label: 'font-medium'
+    label: 'font-medium',
+    spinner: ''
   },
   variants: {
     variant: {
       primary: {
         root: 'border-primary bg-primary shadow-sm',
-        label: 'text-primary-foreground'
+        label: 'text-primary-foreground',
+        spinner: 'border-primary-foreground/32 border-t-primary-foreground'
       },
       secondary: {
         root: 'bg-secondary',
-        label: 'text-secondary-foreground'
+        label: 'text-secondary-foreground',
+        spinner: 'border-secondary-foreground/24 border-t-secondary-foreground'
       },
       outline: {
         root: 'border-input bg-popover shadow-sm',
-        label: 'text-foreground'
+        label: 'text-foreground',
+        spinner: 'border-muted border-t-foreground'
       },
       ghost: {
         root: 'bg-transparent',
-        label: 'text-foreground'
+        label: 'text-foreground',
+        spinner: 'border-muted border-t-foreground'
       },
       destructive: {
         root: 'border-destructive bg-destructive shadow-sm',
-        label: 'text-white'
+        label: 'text-white',
+        spinner: 'border-white/32 border-t-white'
+      },
+      /** Neutral surface for third-party sign-in, sized for a full-width stack. */
+      social: {
+        root: 'border-input bg-card shadow-sm',
+        label: 'text-foreground',
+        spinner: 'border-muted border-t-foreground'
       }
     },
     size: {
@@ -50,6 +65,11 @@ const buttonVariants = tv({
         root: 'h-11 w-11 px-0'
       }
     },
+    fullWidth: {
+      true: {
+        root: 'w-full'
+      }
+    },
     disabled: {
       true: {
         root: 'opacity-[0.64]'
@@ -61,40 +81,81 @@ const buttonVariants = tv({
     size: 'md'
   }
 });
+const SPINNER_SIZE = {
+  sm: 'sm',
+  md: 'sm',
+  lg: 'md',
+  icon: 'sm'
+};
+
+/**
+ * The theme token each variant's content reads against. Icons in the content
+ * slots inherit the resolved value, so they follow the theme automatically.
+ *
+ * `destructive` is absent on purpose: its background is a saturated red in
+ * every theme, so its content is always white rather than a themed token.
+ */
+const CONTENT_COLOR_VAR = {
+  primary: '--color-primary-foreground',
+  secondary: '--color-secondary-foreground',
+  outline: '--color-foreground',
+  ghost: '--color-foreground',
+  social: '--color-foreground'
+};
 export const Button = /*#__PURE__*/forwardRef(({
   children,
   className,
   labelClassName,
   variant,
   size,
+  fullWidth,
   disabled,
+  loading = false,
+  startContent,
+  endContent,
   ...props
 }, ref) => {
+  const isDisabled = disabled || loading;
   const {
     root,
-    label
+    label,
+    spinner
   } = buttonVariants({
     variant,
     size,
-    disabled: !!disabled
+    fullWidth,
+    disabled: isDisabled
   });
-  return /*#__PURE__*/_jsx(AnimatedPressable, {
-    ref: ref,
-    accessibilityRole: "button",
-    accessibilityState: {
-      disabled: !!disabled
-    },
-    disabled: disabled,
-    className: root({
-      className
-    }),
-    ...props,
-    children: typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
-      className: label({
-        className: labelClassName
+
+  // Icons in the content slots inherit this, so they stay legible when the
+  // theme inverts the button's background. Without it every caller has to
+  // hardcode a hex that is wrong in one theme or the other.
+  const themedColor = useCSSVariable(CONTENT_COLOR_VAR[variant === 'destructive' ? 'primary' : variant ?? 'primary']);
+  const contentColor = variant === 'destructive' ? '#ffffff' : typeof themedColor === 'string' ? themedColor : undefined;
+  return /*#__PURE__*/_jsx(IconColorProvider, {
+    color: contentColor,
+    children: /*#__PURE__*/_jsxs(AnimatedPressable, {
+      ref: ref,
+      accessibilityRole: "button",
+      accessibilityState: {
+        disabled: isDisabled,
+        busy: loading
+      },
+      disabled: isDisabled,
+      className: root({
+        className
       }),
-      children: children
-    }) : /*#__PURE__*/isValidElement(children) ? children : children
+      ...props,
+      children: [loading ? /*#__PURE__*/_jsx(Spinner, {
+        size: SPINNER_SIZE[size ?? 'md'],
+        className: spinner()
+      }) : startContent, typeof children === 'string' ? /*#__PURE__*/_jsx(Text, {
+        className: label({
+          className: labelClassName
+        }),
+        children: children
+      }) : children, endContent]
+    })
   });
 });
 Button.displayName = 'Button';

package/lib/module/components/button/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["forwardRef","isValidElement","tv","AnimatedPressable","Text","jsx","_jsx","buttonVariants","slots","root","label","variants","variant","primary","secondary","outline","ghost","destructive","size","sm","md","lg","icon","disabled","true","defaultVariants","Button","children","className","labelClassName","props","ref","accessibilityRole","accessibilityState","displayName"],"sourceRoot":"../../../../src","sources":["components/button/index.tsx"],"mappings":";;AAAA,SAASA,UAAU,EAAEC,cAAc,QAAwB,OAAO;AAElE,SAASC,EAAE,QAA2B,mBAAmB;AACzD,SACEC,iBAAiB,QAEZ,wCAAqC;AAC5C,SAASC,IAAI,QAAQ,0BAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAE7C,MAAMC,cAAc,GAAGL,EAAE,CAAC;EACxBM,KAAK,EAAE;IACLC,IAAI,EAAE,iFAAiF;IACvFC,KAAK,EAAE;EACT,CAAC;EACDC,QAAQ,EAAE;IACRC,OAAO,EAAE;MACPC,OAAO,EAAE;QACPJ,IAAI,EAAE,qCAAqC;QAC3CC,KAAK,EAAE;MACT,CAAC;MACDI,SAAS,EAAE;QACTL,IAAI,EAAE,cAAc;QACpBC,KAAK,EAAE;MACT,CAAC;MACDK,OAAO,EAAE;QACPN,IAAI,EAAE,mCAAmC;QACzCC,KAAK,EAAE;MACT,CAAC;MACDM,KAAK,EAAE;QACLP,IAAI,EAAE,gBAAgB;QACtBC,KAAK,EAAE;MACT,CAAC;MACDO,WAAW,EAAE;QACXR,IAAI,EAAE,6CAA6C;QACnDC,KAAK,EAAE;MACT;IACF,CAAC;IACDQ,IAAI,EAAE;MACJC,EAAE,EAAE;QAAEV,IAAI,EAAE,oBAAoB;QAAEC,KAAK,EAAE;MAAU,CAAC;MACpDU,EAAE,EAAE;QAAEX,IAAI,EAAE,WAAW;QAAEC,KAAK,EAAE;MAAY,CAAC;MAC7CW,EAAE,EAAE;QAAEZ,IAAI,EAAE,WAAW;QAAEC,KAAK,EAAE;MAAU,CAAC;MAC3CY,IAAI,EAAE;QAAEb,IAAI,EAAE;MAAiB;IACjC,CAAC;IACDc,QAAQ,EAAE;MACRC,IAAI,EAAE;QAAEf,IAAI,EAAE;MAAiB;IACjC;EACF,CAAC;EACDgB,eAAe,EAAE;IACfb,OAAO,EAAE,SAAS;IAClBM,IAAI,EAAE;EACR;AACF,CAAC,CAAC;AAaF,OAAO,MAAMQ,MAAM,gBAAG1B,UAAU,CAC9B,CACE;EAAE2B,QAAQ;EAAEC,SAAS;EAAEC,cAAc;EAAEjB,OAAO;EAAEM,IAAI;EAAEK,QAAQ;EAAE,GAAGO;AAAM,CAAC,EAC1EC,GAAG,KACA;EACH,MAAM;IAAEtB,IAAI;IAAEC;EAAM,CAAC,GAAGH,cAAc,CAAC;IAAEK,OAAO;IAAEM,IAAI;IAAEK,QAAQ,EAAE,CAAC,CAACA;EAAS,CAAC,CAAC;EAE/E,oBACEjB,IAAA,CAACH,iBAAiB;IAChB4B,GAAG,EAAEA,GAAI;IACTC,iBAAiB,EAAC,QAAQ;IAC1BC,kBAAkB,EAAE;MAAEV,QAAQ,EAAE,CAAC,CAACA;IAAS,CAAE;IAC7CA,QAAQ,EAAEA,QAAS;IACnBK,SAAS,EAAEnB,IAAI,CAAC;MAAEmB;IAAU,CAAC,CAAE;IAAA,GAC3BE,KAAK;IAAAH,QAAA,EAER,OAAOA,QAAQ,KAAK,QAAQ,gBAC3BrB,IAAA,CAACF,IAAI;MAACwB,SAAS,EAAElB,KAAK,CAAC;QAAEkB,SAAS,EAAEC;MAAe,CAAC,CAAE;MAAAF,QAAA,EAAEA;IAAQ,CAAO,CAAC,GACtE,aAAA1B,cAAc,CAAC0B,QAAQ,CAAC,GAC1BA,QAAQ,GAERA;EACD,CACgB,CAAC;AAExB,CACF,CAAC;AAEDD,MAAM,CAACQ,WAAW,GAAG,QAAQ","ignoreList":[]}
+{"version":3,"names":["forwardRef","tv","useCSSVariable","AnimatedPressable","Text","IconColorProvider","Spinner","jsx","_jsx","jsxs","_jsxs","buttonVariants","slots","root","label","spinner","variants","variant","primary","secondary","outline","ghost","destructive","social","size","sm","md","lg","icon","fullWidth","true","disabled","defaultVariants","SPINNER_SIZE","CONTENT_COLOR_VAR","Button","children","className","labelClassName","loading","startContent","endContent","props","ref","isDisabled","themedColor","contentColor","undefined","color","accessibilityRole","accessibilityState","busy","displayName"],"sourceRoot":"../../../../src","sources":["components/button/index.tsx"],"mappings":"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","ignoreList":[]}