@timmbr/ui 1.4.2 → 1.6.0

package/dist/components/AuthModal/subcomponents/AuthModalPasswordForm.js

@@ -0,0 +1,54 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useAuthModalLabels } from '../AuthModal.labels.js';
+import { AuthStepHeader, AuthDestination, AuthForm, AuthPasswordField, AuthFieldError, AuthSubmitButton, AuthTextLink } from './AuthModalParts.js';
+
+const ERROR_ID = "auth-password-error";
+function AuthModalPasswordForm({ form }) {
+  const labels = useAuthModalLabels();
+  const {
+    identifier = "",
+    password = "",
+    onPasswordChange,
+    onPasswordSubmit,
+    onForgotPassword,
+    onEditIdentifier,
+    isLoading = false,
+    error
+  } = form;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "auth-modal-password-step", className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx(
+      AuthStepHeader,
+      {
+        title: labels.passwordTitle,
+        subtitle: /* @__PURE__ */ jsx(AuthDestination, { value: identifier, onEdit: onEditIdentifier, disabled: isLoading })
+      }
+    ),
+    /* @__PURE__ */ jsxs(AuthForm, { onSubmit: onPasswordSubmit, className: "space-y-4", children: [
+      /* @__PURE__ */ jsx("input", { type: "hidden", name: "username", autoComplete: "username", value: identifier, readOnly: true }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          AuthPasswordField,
+          {
+            id: "auth-password-input",
+            label: labels.passwordLabel,
+            placeholder: labels.passwordPlaceholder,
+            autoComplete: "current-password",
+            value: password,
+            onValueChange: onPasswordChange,
+            disabled: isLoading,
+            autoFocus: true,
+            invalid: !!error,
+            describedBy: error ? ERROR_ID : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(AuthFieldError, { id: ERROR_ID, children: error })
+      ] }),
+      /* @__PURE__ */ jsx(AuthSubmitButton, { isLoading, disabled: !password, children: labels.passwordSubmit }),
+      onForgotPassword && /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(AuthTextLink, { onClick: onForgotPassword, disabled: isLoading, className: "text-body-2", children: labels.forgotPassword }) })
+    ] })
+  ] });
+}
+AuthModalPasswordForm.displayName = "AuthModalPasswordForm";
+
+export { AuthModalPasswordForm };

package/dist/components/AuthModal/subcomponents/AuthModalSetPasswordForm.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { AuthModalFormProps } from '../AuthModal.types';
+export interface AuthModalSetPasswordFormProps {
+    form: AuthModalFormProps;
+}
+export declare function AuthModalSetPasswordForm({ form }: AuthModalSetPasswordFormProps): React.JSX.Element;
+export declare namespace AuthModalSetPasswordForm {
+    var displayName: string;
+}
+//# sourceMappingURL=AuthModalSetPasswordForm.d.ts.map

package/dist/components/AuthModal/subcomponents/AuthModalSetPasswordForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthModalSetPasswordForm.d.ts","sourceRoot":"","sources":["../../../../src/components/AuthModal/subcomponents/AuthModalSetPasswordForm.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAU7D,MAAM,WAAW,6BAA6B;IAC5C,IAAI,EAAE,kBAAkB,CAAC;CAC1B;AAKD,wBAAgB,wBAAwB,CAAC,EAAE,IAAI,EAAE,EAAE,6BAA6B,qBA0E/E;yBA1Ee,wBAAwB"}

package/dist/components/AuthModal/subcomponents/AuthModalSetPasswordForm.js

@@ -0,0 +1,79 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useAuthModalLabels } from '../AuthModal.labels.js';
+import { AuthStepHeader, AuthForm, AuthPasswordField, AuthFieldError, AuthSubmitButton, AuthTextLink } from './AuthModalParts.js';
+
+const HINT_ID = "auth-new-password-hint";
+const ERROR_ID = "auth-set-password-error";
+function AuthModalSetPasswordForm({ form }) {
+  const labels = useAuthModalLabels();
+  const {
+    setPasswordMode = "create",
+    newPassword = "",
+    onNewPasswordChange,
+    confirmPassword = "",
+    onConfirmPasswordChange,
+    onSetPasswordSubmit,
+    onSkipSetPassword,
+    isLoading = false,
+    error
+  } = form;
+  const isReset = setPasswordMode === "reset";
+  const mismatch = confirmPassword.length > 0 && confirmPassword !== newPassword;
+  const shownError = error ?? (mismatch ? labels.passwordMismatch : null);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "auth-modal-set-password-step", className: "flex flex-col", children: [
+    /* @__PURE__ */ jsx(
+      AuthStepHeader,
+      {
+        title: isReset ? labels.setPasswordResetTitle : labels.setPasswordCreateTitle,
+        subtitle: isReset ? labels.setPasswordResetSubtitle : labels.setPasswordCreateSubtitle
+      }
+    ),
+    /* @__PURE__ */ jsxs(AuthForm, { onSubmit: onSetPasswordSubmit, className: "space-y-4", children: [
+      /* @__PURE__ */ jsx(
+        AuthPasswordField,
+        {
+          id: "auth-new-password-input",
+          label: labels.newPasswordLabel,
+          placeholder: labels.newPasswordLabel,
+          autoComplete: "new-password",
+          value: newPassword,
+          onValueChange: onNewPasswordChange,
+          disabled: isLoading,
+          autoFocus: true,
+          describedBy: HINT_ID
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx(
+          AuthPasswordField,
+          {
+            id: "auth-confirm-password-input",
+            label: labels.confirmPasswordLabel,
+            placeholder: labels.confirmPasswordLabel,
+            autoComplete: "new-password",
+            value: confirmPassword,
+            onValueChange: onConfirmPasswordChange,
+            disabled: isLoading,
+            invalid: !!shownError,
+            describedBy: shownError ? ERROR_ID : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx(AuthFieldError, { id: ERROR_ID, children: shownError })
+      ] }),
+      /* @__PURE__ */ jsx("p", { id: HINT_ID, className: "text-body-3 text-grey-600", children: labels.passwordHint }),
+      /* @__PURE__ */ jsx(
+        AuthSubmitButton,
+        {
+          isLoading,
+          disabled: !newPassword || newPassword !== confirmPassword,
+          children: labels.setPasswordSubmit
+        }
+      ),
+      !isReset && onSkipSetPassword && /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx(AuthTextLink, { onClick: onSkipSetPassword, disabled: isLoading, className: "text-body-2", children: labels.skipForNow }) })
+    ] })
+  ] });
+}
+AuthModalSetPasswordForm.displayName = "AuthModalSetPasswordForm";
+
+export { AuthModalSetPasswordForm };

package/dist/components/AuthModal/subcomponents/AuthModalSuccess.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import type { AuthModalFormProps } from '../AuthModal.types';
+export interface AuthModalSuccessProps {
+    form: AuthModalFormProps;
+}
+export declare function AuthModalSuccess({ form }: AuthModalSuccessProps): React.JSX.Element;
+export declare namespace AuthModalSuccess {
+    var displayName: string;
+}
+//# sourceMappingURL=AuthModalSuccess.d.ts.map

package/dist/components/AuthModal/subcomponents/AuthModalSuccess.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AuthModalSuccess.d.ts","sourceRoot":"","sources":["../../../../src/components/AuthModal/subcomponents/AuthModalSuccess.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAG7D,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,kBAAkB,CAAC;CAC1B;AAED,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,EAAE,qBAAqB,qBAkB/D;yBAlBe,gBAAgB"}

package/dist/components/AuthModal/subcomponents/AuthModalSuccess.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CheckCircle } from '@timmbr/icons';
+import { useAuthModalLabels } from '../AuthModal.labels.js';
+import { AuthStepHeader } from './AuthModalParts.js';
+
+function AuthModalSuccess({ form }) {
+  const labels = useAuthModalLabels();
+  const { successTitle = labels.successTitle, successMessage } = form;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "auth-modal-success-step",
+      role: "status",
+      "aria-live": "polite",
+      className: "flex flex-col items-center justify-center text-center gap-4 py-10 min-h-[320px]",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex size-16 items-center justify-center rounded-full bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(CheckCircle, { className: "size-9", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx(AuthStepHeader, { title: successTitle, subtitle: successMessage, focusOnMount: true })
+      ]
+    }
+  );
+}
+AuthModalSuccess.displayName = "AuthModalSuccess";
+
+export { AuthModalSuccess };

package/dist/components/AuthModal/subcomponents/OAuthButton.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { AuthOAuthProvider } from '../AuthModal.types';
+export interface OAuthButtonProps {
+    provider: AuthOAuthProvider;
+    /** Disable while another sign-in request is in flight */
+    disabled?: boolean;
+}
+export declare function OAuthButton({ provider, disabled }: OAuthButtonProps): React.JSX.Element;
+export declare namespace OAuthButton {
+    var displayName: string;
+}
+//# sourceMappingURL=OAuthButton.d.ts.map

package/dist/components/AuthModal/subcomponents/OAuthButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OAuthButton.d.ts","sourceRoot":"","sources":["../../../../src/components/AuthModal/subcomponents/OAuthButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAe5D,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,iBAAiB,CAAC;IAC5B,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,gBAAgB,qBAoBnE;yBApBe,WAAW"}

package/dist/components/AuthModal/subcomponents/OAuthButton.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { GitHubIcon, AppleIcon, GoogleIcon } from '@timmbr/icons';
+import { useAuthModalLabels } from '../AuthModal.labels.js';
+import { authModalSecondaryButtonVariants } from '../AuthModal.styles.js';
+import { Spinner } from '../../Spinner/Spinner.js';
+
+const PROVIDER_ICONS = {
+  google: GoogleIcon,
+  apple: AppleIcon,
+  github: GitHubIcon
+};
+function ProviderIcon({ provider }) {
+  if (provider.icon) return /* @__PURE__ */ jsx(Fragment, { children: provider.icon });
+  const BuiltIn = PROVIDER_ICONS[provider.id.toLowerCase()];
+  return BuiltIn ? /* @__PURE__ */ jsx(BuiltIn, { className: "size-5 shrink-0" }) : null;
+}
+function OAuthButton({ provider, disabled }) {
+  const labels = useAuthModalLabels();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: provider.onClick,
+      disabled: disabled || provider.disabled || provider.isLoading,
+      "aria-busy": provider.isLoading || void 0,
+      "data-slot": `oauth-button-${provider.id}`,
+      className: authModalSecondaryButtonVariants(),
+      children: [
+        provider.isLoading ? /* @__PURE__ */ jsx(Spinner, { size: "sm", variant: "primary", decorative: true }) : /* @__PURE__ */ jsx(ProviderIcon, { provider }),
+        /* @__PURE__ */ jsx("span", { children: labels.oauthContinueWith(provider.name) })
+      ]
+    }
+  );
+}
+OAuthButton.displayName = "OAuthButton";
+
+export { OAuthButton };

package/dist/components/AuthModal/subcomponents/index.d.ts

@@ -0,0 +1,9 @@
+export * from './OAuthButton';
+export * from './AuthModalBanner';
+export * from './AuthModalIdentifierForm';
+export * from './AuthModalOtpForm';
+export * from './AuthModalPasswordForm';
+export * from './AuthModalSetPasswordForm';
+export * from './AuthModalOAuth';
+export * from './AuthModalSuccess';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/AuthModal/subcomponents/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/AuthModal/subcomponents/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC"}

package/dist/components/Avatar/Avatar.styles.d.ts

@@ -1,11 +1,11 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const avatarRootVariants: (props?: ({
-    size?: "sm" | "lg" | "md" | "xl" | "2xl" | "xs" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
     variant?: "grey" | "outline" | "subtle" | "primary" | "secondary" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const avatarStatusVariants: (props?: ({
     status?: "offline" | "online" | "busy" | "away" | null | undefined;
-    size?: "sm" | "lg" | "md" | "xl" | "2xl" | "xs" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type AvatarVariants = VariantProps<typeof avatarRootVariants>;
 //# sourceMappingURL=Avatar.styles.d.ts.map

package/dist/components/Avatar/Avatar.styles.js

@@ -5,18 +5,18 @@ const avatarRootVariants = cva(
   {
     variants: {
       size: {
-        xs: "size-6 text-[10px]",
-        sm: "size-8 text-xs",
-        md: "size-10 text-[15px]",
-        lg: "size-12 text-base",
-        xl: "size-16 text-xl",
-        "2xl": "size-20 text-2xl"
+        xs: "size-6 text-caption",
+        sm: "size-8 text-body-3",
+        md: "size-10 text-body-2",
+        lg: "size-12 text-body-1",
+        xl: "size-16 text-h5",
+        "2xl": "size-20 text-h4"
       },
       variant: {
-        primary: "bg-primary text-white",
+        primary: "bg-primary text-grey-50",
         secondary: "bg-secondary text-secondary-foreground",
         subtle: "bg-bg-subtle text-foreground",
-        grey: "bg-grey-700 text-white",
+        grey: "bg-grey-700 text-grey-50",
         outline: "bg-background border border-grey-300 dark:border-grey-700 text-foreground"
       }
     },
@@ -31,10 +31,10 @@ const avatarStatusVariants = cva(
   {
     variants: {
       status: {
-        online: "bg-emerald-500",
+        online: "bg-success",
         offline: "bg-grey-400",
-        busy: "bg-rose-500",
-        away: "bg-amber-500"
+        busy: "bg-destructive",
+        away: "bg-warning"
       },
       size: {
         xs: "size-1.5",

package/dist/components/Badge/Badge.styles.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "success" | "outline" | "subtle" | "primary" | "secondary" | "brand" | null | undefined;
-    size?: "sm" | "lg" | "md" | null | undefined;
+    variant?: "default" | "destructive" | "success" | "warning" | "info" | "outline" | "subtle" | "primary" | "secondary" | "brand" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type BadgeVariants = VariantProps<typeof badgeVariants>;
 //# sourceMappingURL=Badge.styles.d.ts.map

package/dist/components/Badge/Badge.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,aAAa;;;8EAyBzB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}
+{"version":3,"file":"Badge.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Badge/Badge.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,aAAa;;;8EA2BzB,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC"}

package/dist/components/Badge/Badge.styles.js

@@ -5,19 +5,21 @@ const badgeVariants = cva(
   {
     variants: {
       variant: {
-        primary: "bg-primary-300 text-white",
-        brand: "bg-primary text-white",
-        default: "bg-primary text-white",
+        primary: "bg-primary-300 text-grey-50",
+        brand: "bg-primary text-grey-50",
+        default: "bg-primary text-grey-50",
         secondary: "bg-secondary text-secondary-foreground",
         outline: "border border-grey-300 dark:border-grey-700 bg-transparent text-foreground",
         subtle: "bg-bg-subtle text-foreground",
-        success: "bg-emerald-600 text-white",
-        destructive: "bg-destructive text-white"
+        success: "bg-success text-grey-50",
+        destructive: "bg-destructive text-grey-50",
+        warning: "bg-warning text-warning-foreground",
+        info: "bg-info text-info-foreground"
       },
       size: {
-        sm: "px-1.5 py-0.5 text-xs",
-        md: "px-2 py-1 text-[14px]",
-        lg: "px-3 py-1.5 text-base font-medium"
+        sm: "px-1.5 py-0.5 text-body-3",
+        md: "px-2 py-1 text-body-2",
+        lg: "px-3 py-1.5 text-body-1 font-medium"
       }
     },
     defaultVariants: {

package/dist/components/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,uFA+FlB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,eAAO,MAAM,MAAM,uFAqGlB,CAAC"}

package/dist/components/Button/Button.js

@@ -15,6 +15,8 @@ const Button = React.forwardRef(
     style,
     variant,
     size,
+    shape,
+    fullWidth,
     asChild = false,
     motion,
     leftIcon,
@@ -40,6 +42,8 @@ const Button = React.forwardRef(
             buttonVariants({
               variant: resolvedVariant,
               size: resolvedSize,
+              shape,
+              fullWidth,
               className
             }),
             !shouldAnimate && "transition-none active:scale-100",
@@ -66,6 +70,8 @@ const Button = React.forwardRef(
           buttonVariants({
             variant: resolvedVariant,
             size: resolvedSize,
+            shape,
+            fullWidth,
             className
           }),
           !shouldAnimate && "transition-none active:scale-100",

package/dist/components/Button/Button.styles.d.ts

@@ -1,7 +1,9 @@
 import { type VariantProps } from 'class-variance-authority';
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "default" | "destructive" | "outline" | "ghost" | "primary" | "secondary" | null | undefined;
-    size?: "default" | "icon" | "sm" | "lg" | "md" | null | undefined;
+    variant?: "link" | "default" | "destructive" | "overlay" | "outline" | "ghost" | "primary" | "secondary" | "destructive-outline" | "destructive-ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | "default" | "icon" | "icon-sm" | null | undefined;
+    shape?: "default" | "circle" | null | undefined;
+    fullWidth?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonVariants = VariantProps<typeof buttonVariants>;
 //# sourceMappingURL=Button.styles.d.ts.map

package/dist/components/Button/Button.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,cAAc;;;8EAiC1B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}
+{"version":3,"file":"Button.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAElE,eAAO,MAAM,cAAc;;;;;8EAuD1B,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC"}

package/dist/components/Button/Button.styles.js

@@ -1,29 +1,48 @@
 import { cva } from 'class-variance-authority';
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[2px] font-sans font-semibold transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none active:scale-[0.98]",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap font-sans font-semibold transition-all duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer select-none active:scale-[0.98]",
   {
     variants: {
       variant: {
-        default: "bg-primary text-white hover:bg-primary-600 hover:brightness-105 hover:shadow-md active:bg-primary-700 active:brightness-95 shadow-sm",
-        primary: "bg-primary text-white hover:bg-primary-600 hover:brightness-105 hover:shadow-md active:bg-primary-700 active:brightness-95 shadow-sm",
+        default: "bg-primary text-grey-50 hover:bg-primary-600 hover:brightness-105 hover:shadow-md active:bg-primary-700 active:brightness-95 shadow-sm",
+        primary: "bg-primary text-grey-50 hover:bg-primary-600 hover:brightness-105 hover:shadow-md active:bg-primary-700 active:brightness-95 shadow-sm",
         secondary: "bg-secondary text-secondary-foreground hover:bg-bg-subtle hover:brightness-105 active:bg-secondary-foreground/10 active:brightness-95 shadow-xs hover:shadow-sm",
         outline: "border border-grey-300 dark:border-grey-700 bg-transparent text-foreground hover:bg-grey-100 dark:hover:bg-grey-900 active:bg-grey-200 dark:active:bg-grey-800 hover:border-grey-400 dark:hover:border-grey-600",
         ghost: "text-foreground hover:bg-grey-100 dark:hover:bg-grey-900 active:bg-grey-200 dark:active:bg-grey-800",
-        destructive: "bg-destructive text-white hover:bg-red-700 hover:brightness-105 hover:shadow-md active:brightness-95 shadow-sm",
+        destructive: "bg-destructive text-grey-50 hover:bg-destructive/90 hover:brightness-105 hover:shadow-md active:brightness-95 shadow-sm",
+        "destructive-outline": "border border-destructive/40 bg-transparent text-destructive hover:bg-destructive/10 hover:border-destructive active:bg-destructive/15",
+        "destructive-ghost": "text-destructive hover:bg-destructive/10 active:bg-destructive/15",
+        /** Floating over imagery (e.g. a wishlist toggle on a product photo). */
+        overlay: "bg-card/90 text-foreground shadow-xs backdrop-blur-xs hover:bg-card hover:text-primary aria-pressed:text-primary [&[aria-pressed=true]_svg]:fill-current",
         link: "text-primary underline-offset-4 hover:underline p-0 h-auto active:scale-100 font-normal"
       },
       size: {
-        sm: "h-9 px-3 text-xs",
-        default: "h-11 px-5 text-sm",
-        md: "h-11 px-5 text-sm",
-        lg: "h-[52px] px-6 text-base",
-        icon: "h-10 w-10 p-0 shrink-0"
+        sm: "h-9 px-3 text-body-3 [&_svg]:size-3.5",
+        default: "h-11 px-5 text-body-2 [&_svg]:size-4",
+        md: "h-11 px-5 text-body-2 [&_svg]:size-4",
+        lg: "h-[52px] px-6 text-body-1 [&_svg]:size-5",
+        icon: "h-10 w-10 p-0 shrink-0 [&_svg]:size-5",
+        "icon-sm": "h-8 w-8 p-0 shrink-0 [&_svg]:size-4.5"
+      },
+      shape: {
+        default: "rounded-[2px]",
+        circle: "rounded-full"
+      },
+      fullWidth: {
+        true: "w-full",
+        false: ""
       }
     },
+    compoundVariants: [
+      // A text link keeps its inline size: no button height or padding.
+      { variant: "link", className: "h-auto px-0 py-0" }
+    ],
     defaultVariants: {
       variant: "default",
-      size: "default"
+      size: "default",
+      shape: "default",
+      fullWidth: false
     }
   }
 );

package/dist/components/Card/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,KAAK,EACV,SAAS,EACT,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,EAChB,MAAM,cAAc,CAAC;AAEtB,eAAO,MAAM,IAAI,kFAWhB,CAAC;AAGF,eAAO,MAAM,UAAU,wFAWtB,CAAC;AAGF,eAAO,MAAM,SAAS,2FAWrB,CAAC;AAGF,eAAO,MAAM,eAAe,mGAY1B,CAAC;AAGH,eAAO,MAAM,WAAW,yFAWvB,CAAC;AAGF,eAAO,MAAM,UAAU,wFAWtB,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAa/B,OAAO,KAAK,EACV,SAAS,EACT,eAAe,EACf,cAAc,EACd,oBAAoB,EACpB,gBAAgB,EAChB,eAAe,EAChB,MAAM,cAAc,CAAC;AAUtB,eAAO,MAAM,IAAI,kFAkBhB,CAAC;AAGF,eAAO,MAAM,UAAU,wFAmCtB,CAAC;AAGF,eAAO,MAAM,SAAS,2FAKrB,CAAC;AAGF,eAAO,MAAM,eAAe,mGAK3B,CAAC;AAGF,eAAO,MAAM,WAAW,yFAYvB,CAAC;AAGF,eAAO,MAAM,UAAU,wFAgBtB,CAAC"}

package/dist/components/Card/Card.js

@@ -1,32 +1,57 @@
-import { jsx } from 'react/jsx-runtime';
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { cn } from '@timmbr/utils';
-import { cardVariants, cardContentVariants, cardDescriptionVariants, cardFooterVariants, cardHeaderVariants, cardTitleVariants } from './Card.styles.js';
+import { cardVariants, cardContentVariants, cardSectionPadding, cardDescriptionVariants, cardFooterVariants, cardSectionFooterPadding, cardHeaderVariants, cardTitleVariants } from './Card.styles.js';
 
+const CardContext = React.createContext({
+  sectioned: false,
+  padding: "default"
+});
 const Card = React.forwardRef(
-  ({ className, variant, padding, asChild = false, ...props }, ref) => {
+  ({ className, variant, padding, selected = false, sectioned = false, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "div";
-    return /* @__PURE__ */ jsx(
+    const context = React.useMemo(
+      () => ({ sectioned, padding: padding ?? "default" }),
+      [sectioned, padding]
+    );
+    return /* @__PURE__ */ jsx(CardContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
-        className: cn(cardVariants({ variant, padding }), className),
+        "data-selected": selected || void 0,
+        className: cn(cardVariants({ variant, padding, selected, sectioned }), className),
         ...props
       }
-    );
+    ) });
   }
 );
 Card.displayName = "Card";
 const CardHeader = React.forwardRef(
-  ({ className, asChild = false, ...props }, ref) => {
+  ({ className, asChild = false, divider = false, actions, children, ...props }, ref) => {
+    const { sectioned, padding } = React.useContext(CardContext);
     const Comp = asChild ? Slot : "div";
-    return /* @__PURE__ */ jsx(
+    const classes = cn(
+      cardHeaderVariants({ sectioned, divider }),
+      sectioned && cardSectionPadding[padding],
+      // Without a divider the content's own top padding is the gap.
+      sectioned && !divider && "pb-0",
+      className
+    );
+    if (actions === void 0 || actions === null || actions === false) {
+      return /* @__PURE__ */ jsx(Comp, { ref, className: classes, ...props, children });
+    }
+    return /* @__PURE__ */ jsxs(
       Comp,
       {
         ref,
-        className: cn(cardHeaderVariants(), className),
-        ...props
+        className: cn(classes, "flex-row flex-wrap items-start justify-between gap-3"),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-col gap-1.5", "data-slot": "card-header-text", children }),
+          /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", "data-slot": "card-header-actions", children: actions })
+        ]
       }
     );
   }
@@ -35,37 +60,26 @@ CardHeader.displayName = "CardHeader";
 const CardTitle = React.forwardRef(
   ({ className, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "h3";
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ref,
-        className: cn(cardTitleVariants(), className),
-        ...props
-      }
-    );
+    return /* @__PURE__ */ jsx(Comp, { ref, className: cn(cardTitleVariants(), className), ...props });
   }
 );
 CardTitle.displayName = "CardTitle";
-const CardDescription = React.forwardRef(({ className, asChild = false, ...props }, ref) => {
-  const Comp = asChild ? Slot : "p";
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      ref,
-      className: cn(cardDescriptionVariants(), className),
-      ...props
-    }
-  );
-});
+const CardDescription = React.forwardRef(
+  ({ className, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "p";
+    return /* @__PURE__ */ jsx(Comp, { ref, className: cn(cardDescriptionVariants(), className), ...props });
+  }
+);
 CardDescription.displayName = "CardDescription";
 const CardContent = React.forwardRef(
   ({ className, asChild = false, ...props }, ref) => {
+    const { sectioned, padding } = React.useContext(CardContext);
     const Comp = asChild ? Slot : "div";
     return /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
-        className: cn(cardContentVariants(), className),
+        className: cn(cardContentVariants({ sectioned }), sectioned && cardSectionPadding[padding], className),
         ...props
       }
     );
@@ -73,13 +87,18 @@ const CardContent = React.forwardRef(
 );
 CardContent.displayName = "CardContent";
 const CardFooter = React.forwardRef(
-  ({ className, asChild = false, ...props }, ref) => {
+  ({ className, asChild = false, justify, ...props }, ref) => {
+    const { sectioned, padding } = React.useContext(CardContext);
     const Comp = asChild ? Slot : "div";
     return /* @__PURE__ */ jsx(
       Comp,
       {
         ref,
-        className: cn(cardFooterVariants(), className),
+        className: cn(
+          cardFooterVariants({ sectioned, justify }),
+          sectioned && cardSectionFooterPadding[padding],
+          className
+        ),
         ...props
       }
     );