@slyxup/ui 2.4.0 → 2.5.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 SlyxUp
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,11 +1,11 @@
 # @slyxup/ui
 
-Prebuilt, themeable auth + billing components — sign-in cards, user button, password flows, pricing table. Built on [`@slyxup/react`](../react). **Zero CSS dependencies** — styles are self-contained and injected once.
+Prebuilt, themeable auth + billing components — sign-in cards, user button, password flows, pricing table. Built on [`@slyxup/core`](../core). **Zero CSS dependencies** — styles are self-contained and injected once.
 
 ## Install
 
 ```bash
-npm install @slyxup/ui @slyxup/react @slyxup/core
+npm install @slyxup/ui @slyxup/core
 ```
 
 > Peer: `react ^18 || ^19`
@@ -15,13 +15,13 @@ npm install @slyxup/ui @slyxup/react @slyxup/core
 Inject the stylesheet once at your app root:
 
 ```tsx
-import { SlyxUpProvider } from '@slyxup/react';
+import { SlyxupClient } from '@slyxup/core';
 import { SlyxUpStyles } from '@slyxup/ui';
 
-<SlyxUpProvider publishableKey="pk_test_xxx">
-  <SlyxUpStyles />
-  <App />
-</SlyxUpProvider>
+const client = new SlyxupClient({ publishableKey: 'pk_test_xxx', apiUrl: '...' });
+
+<SlyxUpStyles />
+<App />
 ```
 
 (Components also auto-inject on first mount if you skip this.)
@@ -89,7 +89,7 @@ const [open, setOpen] = useState(false);
 | `onClose` | no | — | Modal close callback |
 | `onDeleted` | no | — | Fired after the account is deleted |
 
-Requires the endpoints shipped in the auth worker (`POST /v1/user/password`, `GET/DELETE /v1/sessions`, `GET/POST /v1/user/2fa/*`, `GET/DELETE /v1/user/accounts`) and `@slyxup/react >= auth hooks`.
+Requires the endpoints shipped in the auth worker (`POST /v1/user/password`, `GET/DELETE /v1/sessions`, `GET/POST /v1/user/2fa/*`, `GET/DELETE /v1/user/accounts`).
 
 ### Password flows
 
@@ -116,20 +116,25 @@ Redirects to the hosted OAuth flow.
 
 ```tsx
 import { PricingTable } from '@slyxup/ui';
-import { usePlans, useCheckout } from '@slyxup/react';
+import { SlyxupClient } from '@slyxup/core';
 
-const { plans, loading } = usePlans(projectId);
-const { checkout } = useCheckout();
+const client = new SlyxupClient({ publishableKey: 'pk_test_xxx', apiUrl: '...' });
 
+// Fetch plans via client API and handle checkout with Paddle
 <PricingTable
   plans={plans}
   loading={loading}
-  onSelect={(plan) => checkout(plan.id)}   // → Paddle hosted checkout
+  currentPlanId={subscription?.planId ?? (isFreeTier ? freePlanId : null)}
+  onSelect={(plan) => checkout(plan.id)}
 />
 ```
 
 Clean pricing grid with a "popular" badge driven by `plan.isPopular`.
 
+Pass `currentPlanId` to render that plan's button as a disabled "Current plan"
+(`currentLabel` overrides the text) — e.g. the active subscription's plan, or
+the `$0` plan's id while on the free tier.
+
 You can also drive checkout directly without React hooks:
 
 ```ts
@@ -149,20 +154,94 @@ openPaddleCheckout(priceId, customerEmail?, { userId, planId, projectId });
 
 ```tsx
 import { BillingPortal } from '@slyxup/ui';
-import { useSubscription, useInvoices } from '@slyxup/react';
+import { SlyxupClient } from '@slyxup/core';
 
-const { subscription } = useSubscription(projectId);
-const { invoices } = useInvoices();
+const client = new SlyxupClient({ publishableKey: 'pk_test_xxx', apiUrl: '...' });
 
 <BillingPortal
   subscription={subscription}
   invoices={invoices}
-  onCancel={cancelSubscription}            // optional; omit to hide button
+  onCancel={cancelSubscription}
 />
 ```
 
 Shows current plan, status, renewal date, invoice history, and an optional cancel action.
 
+### Granular billing parts — compose your own layouts
+
+Don't need the whole portal? Use the parts directly (same props style on each:
+`theme?`, `style?`, `className?`):
+
+```tsx
+import {
+  PlanCard,            // single pricing card (PricingTable renders these)
+  CurrentPlanCard,     // "your plan" card, incl. free-tier empty state
+  InvoicesTable,       // invoice history (renders null when empty)
+  SubscriptionStatus,  // tiny status pill
+} from '@slyxup/ui';
+
+// Settings page with only the current plan:
+<CurrentPlanCard
+  subscription={subscription}   // null = free tier empty state
+  onCancel={cancelSubscription}
+  theme={{ accent: 'emerald' }}
+/>
+
+// Fully custom pricing section:
+{plans.map((p) => (
+  <PlanCard
+    key={p.id}
+    plan={p}
+    current={p.id === currentPlanId}
+    onSelect={(plan) => checkout(plan.id)}
+  />
+))}
+```
+
+### Theming every component
+
+Three levels, weakest first:
+
+1. **Global** — `applyTheme({ accent: 'violet', mode: 'dark', radius: 12 })`
+   (or raw `--slx-*` CSS variables on `:root`).
+2. **Per-component** — `theme={{ accent: '#7c3aed', mode: 'dark' }}` on any
+   billing component. Scoped to that subtree via `slyxup-root`; siblings and
+   the host app are untouched. `accent` accepts a preset name (`mono`,
+   `violet`, `blue`, `emerald`, `amber`, `rose`, `cyan`) or any CSS color.
+3. **Escape hatches** — every component also takes `style?` and `className?`
+   (e.g. `style={{ background: '#0a0a0f' }}` for full background control).
+
+```tsx
+// Dark dashboard card matching your brand:
+<CurrentPlanCard
+  subscription={subscription}
+  theme={{ accent: '#7c3aed', mode: 'dark', radius: 14 }}
+  style={{ background: '#0a0a0f', border: '1px solid #1f1f2a' }}
+/>
+```
+
+### Headless billing hooks — real data for custom designs
+
+Build your own UI on live data (no components required):
+
+```tsx
+import {
+  usePlans,         // plans for a project
+  useSubscription,  // active subscription (pass YOUR projectId!)
+  useInvoices,      // invoice history
+  useCheckout,      // checkout(planId, { origin }) → opens Paddle
+  useTransaction,   // verify a transaction: { paid, status }
+} from '@slyxup/ui';
+
+const { plans } = usePlans(projectId);
+const { subscription, reload } = useSubscription(projectId);
+const { checkout } = useCheckout();
+await checkout(plan.id, { origin: 'https://your-app.com/billing/done' });
+```
+
+> Always pass your own `projectId` to `useSubscription` — subscriptions are
+> scoped per project, and omitting it returns `null`.
+
 ### `<AdminPanel />` — admin dashboard with sk key
 
 A full-featured, responsive admin panel for managing users, sessions, and API keys using a **secret key** (`sk_test_xxx` / `sk_live_xxx`).
@@ -311,6 +390,27 @@ Or go fully manual with CSS variables on any wrapper — light/dark is automatic
 
 Extra classes: `.slx-btn-accent` renders the primary button in your accent instead of ink — `<button className="slx-btn slx-btn-accent">`.
 
+## Form primitives
+
+Small building blocks for custom auth screens — same tokens, same theme:
+
+```tsx
+import { OtpInput, PasswordStrength, CopyField, EmptyState, passwordScore } from "@slyxup/ui"
+
+// 6-box authenticator / verification code (paste + arrow-key support)
+<OtpInput length={6} onComplete={(code) => verify(code)} />
+
+// Strength meter — pair with any password field
+<PasswordStrength password={pw} />
+if (passwordScore(pw) < 2) return "Pick something stronger"
+
+// Masked value + copy button (API keys, secrets)
+<CopyField label="Secret key" value="sk_live_abc..." />
+
+// Friendly placeholder for empty lists
+<EmptyState title="No keys yet" desc="Create one to get started." action={<button>Create key</button>} />
+```
+
 Responsive + accessible by default: auth cards reflow under 460px, UserProfile nav collapses to a horizontal strip under 680px, labeled fields, visible focus rings, `prefers-reduced-motion` respected, semantic buttons throughout.
 
 Contrast is engineered, not eyeballed: body/secondary/link/error/success text pass WCAG AA (≥4.5) in both modes, and every gradient surface (avatars, marks, badges, split panels, accent buttons) deepens automatically so white text stays readable under **any** accent — including custom hex colors.

package/dist/components/BillingPortal/BillingPortal.d.ts

@@ -1,22 +1,24 @@
-interface Subscription {
+import type { CSSProperties } from 'react';
+import type { SlyxUpTheme } from '../../theme';
+import { type CurrentPlanSubscription } from '../CurrentPlanCard/CurrentPlanCard';
+import { type InvoiceRow } from '../InvoicesTable/InvoicesTable';
+export interface PortalSubscription extends CurrentPlanSubscription {
     id: string;
-    status: string;
-    currentPeriodEnd: string | null;
-    cancelAtPeriodEnd: boolean;
-}
-interface Invoice {
-    id: string;
-    amount: number;
-    currency: string;
-    status: 'paid' | 'pending' | 'overdue' | 'refunded';
-    billedAt: string | null;
+    planId?: string;
 }
 export interface BillingPortalProps {
-    subscription: Subscription | null;
-    invoices: Invoice[];
+    subscription: PortalSubscription | null;
+    invoices: InvoiceRow[];
     onCancel?: () => void;
+    /** Per-component theme (accent, mode, radius…) — scoped, never global. */
+    theme?: SlyxUpTheme;
+    style?: CSSProperties;
+    className?: string;
 }
-/** Current plan + invoices table */
-export declare function BillingPortal({ subscription, invoices, onCancel, }: BillingPortalProps): import("react").JSX.Element;
-export {};
+/**
+ * Billing section without a full profile: current plan + invoices.
+ * Composes CurrentPlanCard + InvoicesTable — use those directly for
+ * finer-grained layouts.
+ */
+export declare function BillingPortal({ subscription, invoices, onCancel, theme, style, className, }: BillingPortalProps): import("react").JSX.Element;
 //# sourceMappingURL=BillingPortal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"BillingPortal.d.ts","sourceRoot":"","sources":["../../../src/components/BillingPortal/BillingPortal.tsx"],"names":[],"mappings":"AAKA,UAAU,YAAY;IACpB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AACD,UAAU,OAAO;IACf,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IACpD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,YAAY,GAAG,IAAI,CAAC;IAClC,QAAQ,EAAE,OAAO,EAAE,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,oCAAoC;AACpC,wBAAgB,aAAa,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,QAAQ,GACT,EAAE,kBAAkB,+BAyJpB"}
+{"version":3,"file":"BillingPortal.d.ts","sourceRoot":"","sources":["../../../src/components/BillingPortal/BillingPortal.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,EAEL,KAAK,uBAAuB,EAC7B,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EAEL,KAAK,UAAU,EAChB,MAAM,gCAAgC,CAAC;AAExC,MAAM,WAAW,kBAAmB,SAAQ,uBAAuB;IACjE,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACxC,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0EAA0E;IAC1E,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,kBAAkB,+BAepB"}

package/dist/components/BillingPortal/BillingPortal.js

@@ -1,61 +1,15 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { injectStyles } from '../../styles';
-/** Current plan + invoices table */
-export function BillingPortal({ subscription, invoices, onCancel, }) {
+import { CurrentPlanCard, } from '../CurrentPlanCard/CurrentPlanCard';
+import { InvoicesTable, } from '../InvoicesTable/InvoicesTable';
+/**
+ * Billing section without a full profile: current plan + invoices.
+ * Composes CurrentPlanCard + InvoicesTable — use those directly for
+ * finer-grained layouts.
+ */
+export function BillingPortal({ subscription, invoices, onCancel, theme, style, className, }) {
     injectStyles();
-    if (!subscription) {
-        return (_jsxs("div", { className: "slx-card", children: [_jsx("h3", { style: { fontSize: 16, fontWeight: 600 }, children: "No active subscription" }), _jsx("p", { style: { fontSize: 13.5, color: 'var(--slx-muted)', marginTop: 6 }, children: "You don't have a subscription yet. Choose a plan to get started." })] }));
-    }
-    return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 18 }, children: [_jsx("div", { className: "slx-card", children: _jsxs("div", { style: {
-                        display: 'flex',
-                        justifyContent: 'space-between',
-                        alignItems: 'center',
-                    }, children: [_jsxs("div", { children: [_jsx("h3", { style: { fontSize: 15, fontWeight: 600 }, children: "Current plan" }), _jsxs("p", { style: { fontSize: 13, color: 'var(--slx-muted)', marginTop: 4 }, children: ["Status:", ' ', _jsx("span", { style: {
-                                                fontWeight: 650,
-                                                color: subscription.status === 'active' ||
-                                                    subscription.status === 'trialing'
-                                                    ? '#34d399'
-                                                    : subscription.status === 'past_due'
-                                                        ? 'var(--slx-danger)'
-                                                        : 'var(--slx-muted)',
-                                            }, children: subscription.status })] }), subscription.currentPeriodEnd && (_jsxs("p", { style: {
-                                        fontSize: 12.5,
-                                        color: 'var(--slx-muted)',
-                                        marginTop: 4,
-                                    }, children: ["Renews", ' ', new Date(subscription.currentPeriodEnd).toLocaleDateString(), subscription.cancelAtPeriodEnd
-                                            ? ' (cancels at period end)'
-                                            : ''] }))] }), subscription.status !== 'canceled' &&
-                            !subscription.cancelAtPeriodEnd &&
-                            onCancel && (_jsx("button", { type: "button", onClick: onCancel, style: {
-                                fontSize: 13,
-                                fontWeight: 550,
-                                background: 'transparent',
-                                border: '1px solid var(--slx-border)',
-                                borderRadius: 'var(--slx-radius)',
-                                padding: '8px 14px',
-                                cursor: 'pointer',
-                                color: 'var(--slx-danger)',
-                            }, children: "Cancel" }))] }) }), invoices.length > 0 && (_jsxs("div", { className: "slx-card", children: [_jsx("h3", { style: { fontSize: 15, fontWeight: 600, marginBottom: 12 }, children: "Invoices" }), _jsxs("table", { style: { width: '100%', fontSize: 13, borderCollapse: 'collapse' }, children: [_jsx("thead", { children: _jsxs("tr", { style: {
-                                        borderBottom: '1px solid var(--slx-border)',
-                                        textAlign: 'left',
-                                    }, children: [_jsx("th", { style: { padding: '6px 0', fontWeight: 550 }, children: "Date" }), _jsx("th", { style: { padding: '6px 0', fontWeight: 550 }, children: "Amount" }), _jsx("th", { style: { padding: '6px 0', fontWeight: 550 }, children: "Status" })] }) }), _jsx("tbody", { children: invoices.map((inv) => (_jsxs("tr", { style: { borderBottom: '1px solid var(--slx-border)' }, children: [_jsx("td", { style: { padding: '8px 0' }, children: inv.billedAt
-                                                ? new Date(inv.billedAt).toLocaleDateString()
-                                                : '—' }), _jsxs("td", { style: { padding: '8px 0' }, children: ["$", (inv.amount / 100).toFixed(2), " ", inv.currency] }), _jsx("td", { style: { padding: '8px 0' }, children: _jsx("span", { style: {
-                                                    fontSize: 11.5,
-                                                    fontWeight: 600,
-                                                    padding: '2px 8px',
-                                                    borderRadius: 999,
-                                                    background: inv.status === 'paid'
-                                                        ? 'rgba(52,211,153,.1)'
-                                                        : inv.status === 'overdue'
-                                                            ? 'rgba(214,69,80,.1)'
-                                                            : 'rgba(108,108,232,.08)',
-                                                    color: inv.status === 'paid'
-                                                        ? '#34d399'
-                                                        : inv.status === 'overdue'
-                                                            ? 'var(--slx-danger)'
-                                                            : 'var(--slx-accent)',
-                                                }, children: inv.status }) })] }, inv.id))) })] })] }))] }));
+    return (_jsxs("div", { className: className, style: { display: 'flex', flexDirection: 'column', gap: 18, ...style }, children: [_jsx(CurrentPlanCard, { subscription: subscription, onCancel: onCancel, theme: theme }), _jsx(InvoicesTable, { invoices: invoices, theme: theme })] }));
 }
 //# sourceMappingURL=BillingPortal.js.map

package/dist/components/BillingPortal/BillingPortal.js.map

@@ -1 +1 @@
-{"version":3,"file":"BillingPortal.js","sourceRoot":"","sources":["../../../src/components/BillingPortal/BillingPortal.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BillingPortal.js","sourceRoot":"","sources":["../../../src/components/BillingPortal/BillingPortal.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EACL,eAAe,GAEhB,MAAM,oCAAoC,CAAC;AAC5C,OAAO,EACL,aAAa,GAEd,MAAM,gCAAgC,CAAC;AAiBxC;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,KAAK,EACL,SAAS,GACU;IACnB,YAAY,EAAE,CAAC;IACf,OAAO,CACL,eACE,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,aAEtE,KAAC,eAAe,IACd,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,GACZ,EACF,KAAC,aAAa,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,IAC/C,CACP,CAAC;AACJ,CAAC"}

package/dist/components/CopyField.d.ts

@@ -0,0 +1,9 @@
+export interface CopyFieldProps {
+    value: string;
+    label?: string;
+    /** Mask the middle of long values (ideal for API keys). Default true. */
+    masked?: boolean;
+}
+/** Read-only value with a copy button — API keys, tokens, webhook secrets. */
+export declare function CopyField({ value, label, masked }: CopyFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=CopyField.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CopyField.d.ts","sourceRoot":"","sources":["../../src/components/CopyField.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,cAAc;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yEAAyE;IACzE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,8EAA8E;AAC9E,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAa,EAAE,EAAE,cAAc,+BA+CxE"}

package/dist/components/CopyField.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { CheckIcon } from '../icons';
+import { injectStyles } from '../styles';
+/** Read-only value with a copy button — API keys, tokens, webhook secrets. */
+export function CopyField({ value, label, masked = true }) {
+    injectStyles();
+    const [copied, setCopied] = useState(false);
+    const display = masked && value.length > 16
+        ? `${value.slice(0, 10)}…${value.slice(-4)}`
+        : value;
+    async function copy() {
+        try {
+            await navigator.clipboard.writeText(value);
+        }
+        catch {
+            const ta = document.createElement('textarea');
+            ta.value = value;
+            document.body.appendChild(ta);
+            ta.select();
+            document.execCommand('copy');
+            ta.remove();
+        }
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1400);
+    }
+    return (_jsxs("div", { className: "slx-copyfield-wrap", children: [label && (_jsx("p", { className: "slx-label", style: { marginBottom: 6 }, children: label })), _jsxs("div", { className: "slx-copyfield", children: [_jsx("code", { className: "slx-copyfield-value", title: value, children: display }), _jsxs("button", { type: "button", className: "slx-btn-secondary slx-copyfield-btn", onClick: copy, "aria-live": "polite", children: [copied ? _jsx(CheckIcon, {}) : null, copied ? 'Copied' : 'Copy'] })] })] }));
+}
+//# sourceMappingURL=CopyField.js.map

package/dist/components/CopyField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CopyField.js","sourceRoot":"","sources":["../../src/components/CopyField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AASzC,8EAA8E;AAC9E,MAAM,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,EAAkB;IACvE,YAAY,EAAE,CAAC;IACf,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,OAAO,GACX,MAAM,IAAI,KAAK,CAAC,MAAM,GAAG,EAAE;QACzB,CAAC,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE;QAC5C,CAAC,CAAC,KAAK,CAAC;IAEZ,KAAK,UAAU,IAAI;QACjB,IAAI,CAAC;YACH,MAAM,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;QAC7C,CAAC;QAAC,MAAM,CAAC;YACP,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YAC9C,EAAE,CAAC,KAAK,GAAG,KAAK,CAAC;YACjB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;YAC9B,EAAE,CAAC,MAAM,EAAE,CAAC;YACZ,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;YAC7B,EAAE,CAAC,MAAM,EAAE,CAAC;QACd,CAAC;QACD,SAAS,CAAC,IAAI,CAAC,CAAC;QAChB,UAAU,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,CAAC;IAC3C,CAAC;IAED,OAAO,CACL,eAAK,SAAS,EAAC,oBAAoB,aAChC,KAAK,IAAI,CACR,YAAG,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,EAAE,YAAY,EAAE,CAAC,EAAE,YAChD,KAAK,GACJ,CACL,EACD,eAAK,SAAS,EAAC,eAAe,aAC5B,eAAM,SAAS,EAAC,qBAAqB,EAAC,KAAK,EAAE,KAAK,YAC/C,OAAO,GACH,EACP,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,qCAAqC,EAC/C,OAAO,EAAE,IAAI,eACH,QAAQ,aAEjB,MAAM,CAAC,CAAC,CAAC,KAAC,SAAS,KAAG,CAAC,CAAC,CAAC,IAAI,EAC7B,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,IACpB,IACL,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/components/CurrentPlanCard/CurrentPlanCard.d.ts

@@ -0,0 +1,30 @@
+import type { CSSProperties } from 'react';
+import type { SlyxUpTheme } from '../../theme';
+export interface CurrentPlanSubscription {
+    planName?: string | null;
+    status: string;
+    currentPeriodEnd: string | null;
+    cancelAtPeriodEnd: boolean;
+}
+export interface CurrentPlanCardLabels {
+    title?: string;
+    cancel?: string;
+    emptyTitle?: string;
+    emptyText?: string;
+}
+export interface CurrentPlanCardProps {
+    /** Null = free tier / no subscription (renders the empty state). */
+    subscription: CurrentPlanSubscription | null;
+    onCancel?: () => void;
+    labels?: CurrentPlanCardLabels;
+    /** Per-component theme (accent, mode, radius…) — scoped, never global. */
+    theme?: SlyxUpTheme;
+    style?: CSSProperties;
+    className?: string;
+}
+/**
+ * Standalone "your plan" card — drop it anywhere without mounting a full
+ * profile/portal. Shows status, renewal date and cancel action.
+ */
+export declare function CurrentPlanCard({ subscription, onCancel, labels, theme, style, className, }: CurrentPlanCardProps): import("react").JSX.Element;
+//# sourceMappingURL=CurrentPlanCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CurrentPlanCard.d.ts","sourceRoot":"","sources":["../../../src/components/CurrentPlanCard/CurrentPlanCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAI/C,MAAM,WAAW,uBAAuB;IACtC,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,gBAAgB,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,oBAAoB;IACnC,oEAAoE;IACpE,YAAY,EAAE,uBAAuB,GAAG,IAAI,CAAC;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,qBAAqB,CAAC;IAC/B,0EAA0E;IAC1E,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,EAC9B,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,oBAAoB,+BA4EtB"}

package/dist/components/CurrentPlanCard/CurrentPlanCard.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { injectStyles } from '../../styles';
+import { useScopedTheme } from '../../lib/scoped-theme';
+import { SubscriptionStatus } from '../SubscriptionStatus/SubscriptionStatus';
+/**
+ * Standalone "your plan" card — drop it anywhere without mounting a full
+ * profile/portal. Shows status, renewal date and cancel action.
+ */
+export function CurrentPlanCard({ subscription, onCancel, labels, theme, style, className, }) {
+    injectStyles();
+    const ref = useScopedTheme(theme);
+    if (!subscription) {
+        return (_jsxs("div", { ref: ref, className: `slx-card ${className ?? ''}`, style: style, children: [_jsx("h3", { style: { fontSize: 16, fontWeight: 600 }, children: labels?.emptyTitle ?? 'No active subscription' }), _jsx("p", { style: { fontSize: 13.5, color: 'var(--slx-muted)', marginTop: 6 }, children: labels?.emptyText ??
+                        "You don't have a subscription yet. Choose a plan to get started." })] }));
+    }
+    return (_jsx("div", { ref: ref, className: `slx-card ${className ?? ''}`, style: style, children: _jsxs("div", { style: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+            }, children: [_jsxs("div", { children: [_jsxs("h3", { style: { fontSize: 15, fontWeight: 600 }, children: [labels?.title ?? 'Current plan', subscription.planName ? ` — ${subscription.planName}` : ''] }), _jsxs("p", { style: { fontSize: 13, color: 'var(--slx-muted)', marginTop: 4 }, children: ["Status: ", _jsx(SubscriptionStatus, { status: subscription.status })] }), subscription.currentPeriodEnd && (_jsxs("p", { style: {
+                                fontSize: 12.5,
+                                color: 'var(--slx-muted)',
+                                marginTop: 4,
+                            }, children: ["Renews", ' ', new Date(subscription.currentPeriodEnd).toLocaleDateString(), subscription.cancelAtPeriodEnd
+                                    ? ' (cancels at period end)'
+                                    : ''] }))] }), subscription.status !== 'canceled' &&
+                    !subscription.cancelAtPeriodEnd &&
+                    onCancel && (_jsx("button", { type: "button", onClick: onCancel, style: {
+                        fontSize: 13,
+                        fontWeight: 550,
+                        background: 'transparent',
+                        border: '1px solid var(--slx-border)',
+                        borderRadius: 'var(--slx-radius)',
+                        padding: '8px 14px',
+                        cursor: 'pointer',
+                        color: 'var(--slx-danger)',
+                    }, children: labels?.cancel ?? 'Cancel' }))] }) }));
+}
+//# sourceMappingURL=CurrentPlanCard.js.map

package/dist/components/CurrentPlanCard/CurrentPlanCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CurrentPlanCard.js","sourceRoot":"","sources":["../../../src/components/CurrentPlanCard/CurrentPlanCard.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AA2B9E;;;GAGG;AACH,MAAM,UAAU,eAAe,CAAC,EAC9B,YAAY,EACZ,QAAQ,EACR,MAAM,EACN,KAAK,EACL,KAAK,EACL,SAAS,GACY;IACrB,YAAY,EAAE,CAAC;IACf,MAAM,GAAG,GAAG,cAAc,CAAiB,KAAK,CAAC,CAAC;IAElD,IAAI,CAAC,YAAY,EAAE,CAAC;QAClB,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY,SAAS,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,aACnE,aAAI,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,YACzC,MAAM,EAAE,UAAU,IAAI,wBAAwB,GAC5C,EACL,YAAG,KAAK,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,CAAC,EAAE,YAClE,MAAM,EAAE,SAAS;wBAChB,kEAAkE,GAClE,IACA,CACP,CAAC;IACJ,CAAC;IAED,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY,SAAS,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,YACnE,eACE,KAAK,EAAE;gBACL,OAAO,EAAE,MAAM;gBACf,cAAc,EAAE,eAAe;gBAC/B,UAAU,EAAE,QAAQ;aACrB,aAED,0BACE,cAAI,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,aACzC,MAAM,EAAE,KAAK,IAAI,cAAc,EAC/B,YAAY,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,EAAE,IACxD,EACL,aACE,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,KAAK,EAAE,kBAAkB,EAAE,SAAS,EAAE,CAAC,EAAE,yBAExD,KAAC,kBAAkB,IAAC,MAAM,EAAE,YAAY,CAAC,MAAM,GAAI,IACzD,EACH,YAAY,CAAC,gBAAgB,IAAI,CAChC,aACE,KAAK,EAAE;gCACL,QAAQ,EAAE,IAAI;gCACd,KAAK,EAAE,kBAAkB;gCACzB,SAAS,EAAE,CAAC;6BACb,uBAEM,GAAG,EACT,IAAI,IAAI,CAAC,YAAY,CAAC,gBAAgB,CAAC,CAAC,kBAAkB,EAAE,EAC5D,YAAY,CAAC,iBAAiB;oCAC7B,CAAC,CAAC,0BAA0B;oCAC5B,CAAC,CAAC,EAAE,IACJ,CACL,IACG,EACL,YAAY,CAAC,MAAM,KAAK,UAAU;oBACjC,CAAC,YAAY,CAAC,iBAAiB;oBAC/B,QAAQ,IAAI,CACV,iBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,QAAQ,EACjB,KAAK,EAAE;wBACL,QAAQ,EAAE,EAAE;wBACZ,UAAU,EAAE,GAAG;wBACf,UAAU,EAAE,aAAa;wBACzB,MAAM,EAAE,6BAA6B;wBACrC,YAAY,EAAE,mBAAmB;wBACjC,OAAO,EAAE,UAAU;wBACnB,MAAM,EAAE,SAAS;wBACjB,KAAK,EAAE,mBAAmB;qBAC3B,YAEA,MAAM,EAAE,MAAM,IAAI,QAAQ,GACpB,CACV,IACC,GACF,CACP,CAAC;AACJ,CAAC"}

package/dist/components/EmptyState.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+export interface EmptyStateProps {
+    title: string;
+    desc?: string;
+    action?: ReactNode;
+    icon?: ReactNode;
+}
+/** Friendly placeholder for empty lists, states and results. */
+export declare function EmptyState({ title, desc, action, icon }: EmptyStateProps): import("react").JSX.Element;
+//# sourceMappingURL=EmptyState.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,gEAAgE;AAChE,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,EAAE,eAAe,+BAcxE"}

package/dist/components/EmptyState.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { injectStyles } from '../styles';
+/** Friendly placeholder for empty lists, states and results. */
+export function EmptyState({ title, desc, action, icon }) {
+    injectStyles();
+    return (_jsxs("div", { className: "slx-empty", children: [icon && (_jsx("div", { className: "slx-empty-icon", "aria-hidden": "true", children: icon })), _jsx("p", { className: "slx-empty-title", children: title }), desc && _jsx("p", { className: "slx-empty-desc", children: desc }), action && _jsx("div", { className: "slx-empty-action", children: action })] }));
+}
+//# sourceMappingURL=EmptyState.js.map

package/dist/components/EmptyState.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.js","sourceRoot":"","sources":["../../src/components/EmptyState.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AASzC,gEAAgE;AAChE,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAmB;IACvE,YAAY,EAAE,CAAC;IACf,OAAO,CACL,eAAK,SAAS,EAAC,WAAW,aACvB,IAAI,IAAI,CACP,cAAK,SAAS,EAAC,gBAAgB,iBAAa,MAAM,YAC/C,IAAI,GACD,CACP,EACD,YAAG,SAAS,EAAC,iBAAiB,YAAE,KAAK,GAAK,EACzC,IAAI,IAAI,YAAG,SAAS,EAAC,gBAAgB,YAAE,IAAI,GAAK,EAChD,MAAM,IAAI,cAAK,SAAS,EAAC,kBAAkB,YAAE,MAAM,GAAO,IACvD,CACP,CAAC;AACJ,CAAC"}

package/dist/components/InvoicesTable/InvoicesTable.d.ts

@@ -0,0 +1,20 @@
+import type { CSSProperties } from 'react';
+import type { SlyxUpTheme } from '../../theme';
+export interface InvoiceRow {
+    id: string;
+    amount: number;
+    currency: string;
+    status: 'paid' | 'pending' | 'overdue' | 'refunded';
+    billedAt: string | null;
+}
+export interface InvoicesTableProps {
+    invoices: InvoiceRow[];
+    title?: string;
+    /** Per-component theme (accent, mode, radius…) — scoped, never global. */
+    theme?: SlyxUpTheme;
+    style?: CSSProperties;
+    className?: string;
+}
+/** Invoice history table. Renders nothing when there are no invoices. */
+export declare function InvoicesTable({ invoices, title, theme, style, className, }: InvoicesTableProps): import("react").JSX.Element | null;
+//# sourceMappingURL=InvoicesTable.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InvoicesTable.d.ts","sourceRoot":"","sources":["../../../src/components/InvoicesTable/InvoicesTable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAG/C,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC;IACpD,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;CACzB;AAED,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,UAAU,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0EAA0E;IAC1E,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,yEAAyE;AACzE,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAkB,EAClB,KAAK,EACL,KAAK,EACL,SAAS,GACV,EAAE,kBAAkB,sCAoEpB"}

package/dist/components/InvoicesTable/InvoicesTable.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { injectStyles } from '../../styles';
+import { useScopedTheme } from '../../lib/scoped-theme';
+/** Invoice history table. Renders nothing when there are no invoices. */
+export function InvoicesTable({ invoices, title = 'Invoices', theme, style, className, }) {
+    injectStyles();
+    const ref = useScopedTheme(theme);
+    if (invoices.length === 0)
+        return null;
+    return (_jsxs("div", { ref: ref, className: `slx-card ${className ?? ''}`, style: style, children: [_jsx("h3", { style: { fontSize: 15, fontWeight: 600, marginBottom: 12 }, children: title }), _jsxs("table", { style: { width: '100%', fontSize: 13, borderCollapse: 'collapse' }, children: [_jsx("thead", { children: _jsxs("tr", { style: {
+                                borderBottom: '1px solid var(--slx-border)',
+                                textAlign: 'left',
+                            }, children: [_jsx("th", { style: { padding: '6px 0', fontWeight: 550 }, children: "Date" }), _jsx("th", { style: { padding: '6px 0', fontWeight: 550 }, children: "Amount" }), _jsx("th", { style: { padding: '6px 0', fontWeight: 550 }, children: "Status" })] }) }), _jsx("tbody", { children: invoices.map((inv) => (_jsxs("tr", { style: { borderBottom: '1px solid var(--slx-border)' }, children: [_jsx("td", { style: { padding: '8px 0' }, children: inv.billedAt
+                                        ? new Date(inv.billedAt).toLocaleDateString()
+                                        : '—' }), _jsxs("td", { style: { padding: '8px 0' }, children: ["$", (inv.amount / 100).toFixed(2), " ", inv.currency] }), _jsx("td", { style: { padding: '8px 0' }, children: _jsx("span", { style: {
+                                            fontSize: 11.5,
+                                            fontWeight: 600,
+                                            padding: '2px 8px',
+                                            borderRadius: 999,
+                                            background: inv.status === 'paid'
+                                                ? 'rgba(52,211,153,.1)'
+                                                : inv.status === 'overdue'
+                                                    ? 'rgba(214,69,80,.1)'
+                                                    : 'rgba(108,108,232,.08)',
+                                            color: inv.status === 'paid'
+                                                ? '#34d399'
+                                                : inv.status === 'overdue'
+                                                    ? 'var(--slx-danger)'
+                                                    : 'var(--slx-accent)',
+                                        }, children: inv.status }) })] }, inv.id))) })] })] }));
+}
+//# sourceMappingURL=InvoicesTable.js.map

package/dist/components/InvoicesTable/InvoicesTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvoicesTable.js","sourceRoot":"","sources":["../../../src/components/InvoicesTable/InvoicesTable.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAE5C,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAmBxD,yEAAyE;AACzE,MAAM,UAAU,aAAa,CAAC,EAC5B,QAAQ,EACR,KAAK,GAAG,UAAU,EAClB,KAAK,EACL,KAAK,EACL,SAAS,GACU;IACnB,YAAY,EAAE,CAAC;IACf,MAAM,GAAG,GAAG,cAAc,CAAiB,KAAK,CAAC,CAAC;IAClD,IAAI,QAAQ,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAC;IACvC,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,YAAY,SAAS,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,aACnE,aAAI,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,YAAY,EAAE,EAAE,EAAE,YAC3D,KAAK,GACH,EACL,iBACE,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,EAAE,cAAc,EAAE,UAAU,EAAE,aAElE,0BACE,cACE,KAAK,EAAE;gCACL,YAAY,EAAE,6BAA6B;gCAC3C,SAAS,EAAE,MAAM;6BAClB,aAED,aAAI,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,qBAAW,EAC3D,aAAI,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,uBAAa,EAC7D,aAAI,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,uBAAa,IAC1D,GACC,EACR,0BACG,QAAQ,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACrB,cAEE,KAAK,EAAE,EAAE,YAAY,EAAE,6BAA6B,EAAE,aAEtD,aAAI,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,YAC5B,GAAG,CAAC,QAAQ;wCACX,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,kBAAkB,EAAE;wCAC7C,CAAC,CAAC,GAAG,GACJ,EACL,cAAI,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,kBAC3B,CAAC,GAAG,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAG,GAAG,CAAC,QAAQ,IAC3C,EACL,aAAI,KAAK,EAAE,EAAE,OAAO,EAAE,OAAO,EAAE,YAC7B,eACE,KAAK,EAAE;4CACL,QAAQ,EAAE,IAAI;4CACd,UAAU,EAAE,GAAG;4CACf,OAAO,EAAE,SAAS;4CAClB,YAAY,EAAE,GAAG;4CACjB,UAAU,EACR,GAAG,CAAC,MAAM,KAAK,MAAM;gDACnB,CAAC,CAAC,qBAAqB;gDACvB,CAAC,CAAC,GAAG,CAAC,MAAM,KAAK,SAAS;oDACxB,CAAC,CAAC,oBAAoB;oDACtB,CAAC,CAAC,uBAAuB;4CAC/B,KAAK,EACH,GAAG,CAAC,MAAM,KAAK,MAAM;gDACnB,CAAC,CAAC,SAAS;gDACX,CAAC,CAAC,GAAG,CAAC,MAAM,KAAK,SAAS;oDACxB,CAAC,CAAC,mBAAmB;oDACrB,CAAC,CAAC,mBAAmB;yCAC5B,YAEA,GAAG,CAAC,MAAM,GACN,GACJ,KAlCA,GAAG,CAAC,EAAE,CAmCR,CACN,CAAC,GACI,IACF,IACJ,CACP,CAAC;AACJ,CAAC"}

package/dist/components/OtpInput.d.ts

@@ -0,0 +1,15 @@
+export interface OtpInputProps {
+    /** Number of boxes (default 6). */
+    length?: number;
+    /** Controlled value (digits only). Omit for uncontrolled. */
+    value?: string;
+    onChange?: (value: string) => void;
+    /** Fires once every box is filled. */
+    onComplete?: (value: string) => void;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    label?: string;
+}
+/** One-time-code input — authenticator codes, email verification. Handles paste + backspace navigation. */
+export declare function OtpInput({ length, value, onChange, onComplete, autoFocus, disabled, label, }: OtpInputProps): import("react").JSX.Element;
+//# sourceMappingURL=OtpInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.d.ts","sourceRoot":"","sources":["../../src/components/OtpInput.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,aAAa;IAC5B,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,6DAA6D;IAC7D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,sCAAsC;IACtC,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,2GAA2G;AAC3G,wBAAgB,QAAQ,CAAC,EACvB,MAAU,EACV,KAAK,EACL,QAAQ,EACR,UAAU,EACV,SAAS,EACT,QAAQ,EACR,KAAwB,GACzB,EAAE,aAAa,+BAqFf"}