@jfrader/ui 0.7.0 → 0.7.3

package/dist/{billing-toggle-CgC7yxxo.js → toggle-subscription-Ytz7ew1q.js}

@@ -11,11 +11,11 @@ import { vars as p } from "@jfrader/tokens/vars";
 import { jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
 import { AnimatePresence as g, MotionConfig as _, motion as v, useReducedMotion as y } from "motion/react";
 import { base as b } from "@jfrader/tokens";
-//#region src/components/billing-toggle/billing-toggle.tsx
+//#region src/components/toggle-subscription/toggle-subscription.tsx
 var x = s(null);
 function S() {
 	let e = c(x);
-	if (!e) throw Error("BillingToggle parts must be rendered inside <BillingToggle>.");
+	if (!e) throw Error("ToggleSubscription parts must be rendered inside <ToggleSubscription>.");
 	return e;
 }
 var C = e({
@@ -97,7 +97,7 @@ function B({ ref: e, nativeProps: t, ...n }) {
 		...t,
 		...n,
 		ref: e,
-		"data-ui": "billing-toggle-price"
+		"data-ui": "toggle-subscription-price"
 	});
 }
 var V = v.create(B);
@@ -137,14 +137,14 @@ function H({ ref: e, value: t, defaultValue: i, onValueChange: a, disabled: o =
 					...v,
 					ref: e,
 					className: t,
-					"data-ui": "billing-toggle",
+					"data-ui": "toggle-subscription",
 					children: g
 				})
 			})
 		})
 	});
 }
-H.displayName = "BillingToggle";
+H.displayName = "ToggleSubscription";
 function U({ ref: e, id: t, className: r, sx: i, children: o, ...s }) {
 	let { setLabels: c } = S(), d = l(), f = t ?? d, p = a(o) && o !== "";
 	return u(() => {
@@ -161,17 +161,17 @@ function U({ ref: e, id: t, className: r, sx: i, children: o, ...s }) {
 			...s,
 			ref: e,
 			id: f,
-			"data-ui": "billing-toggle-label",
+			"data-ui": "toggle-subscription-label",
 			className: t,
 			children: o
 		})
 	}) : null;
 }
-U.displayName = "BillingToggle.Label";
+U.displayName = "ToggleSubscription.Label";
 function W({ ref: e, className: t, sx: r, children: i, ...a }) {
 	let s = S(), c = s.value === void 0 ? void 0 : s.selections.get(s.value);
 	return /* @__PURE__ */ m("div", {
-		"data-ui": "billing-toggle-list",
+		"data-ui": "toggle-subscription-list",
 		css: w,
 		children: /* @__PURE__ */ m(n, {
 			className: t,
@@ -200,7 +200,7 @@ function W({ ref: e, className: t, sx: r, children: i, ...a }) {
 		})
 	});
 }
-W.displayName = "BillingToggle.List";
+W.displayName = "ToggleSubscription.List";
 function G({ badge: e, activeBadge: t, slotProps: r, children: i, className: s, sx: c, ...l }) {
 	let d = S(), { setSelections: f } = d, p = r?.selection, g = l.value;
 	u(() => {
@@ -215,7 +215,7 @@ function G({ badge: e, activeBadge: t, slotProps: r, children: i, className: s,
 	]);
 	let _ = d.value === l.value && t !== void 0 ? t : e, v = a(_) && _ !== "";
 	return /* @__PURE__ */ m("span", {
-		"data-ui": "billing-toggle-item",
+		"data-ui": "toggle-subscription-item",
 		css: T,
 		children: /* @__PURE__ */ m(n, {
 			className: s,
@@ -225,7 +225,7 @@ function G({ badge: e, activeBadge: t, slotProps: r, children: i, className: s,
 				className: n,
 				accessory: v ? /* @__PURE__ */ h("span", {
 					...r?.badge,
-					"data-ui": "billing-toggle-badge",
+					"data-ui": "toggle-subscription-badge",
 					css: [
 						D,
 						A[d.tone],
@@ -250,7 +250,7 @@ function G({ badge: e, activeBadge: t, slotProps: r, children: i, className: s,
 				}) : void 0,
 				children: a(i) && i !== "" && /* @__PURE__ */ m("span", {
 					...r?.label,
-					"data-ui": "billing-toggle-item-label",
+					"data-ui": "toggle-subscription-item-label",
 					css: r?.label?.css,
 					children: i
 				})
@@ -258,9 +258,9 @@ function G({ badge: e, activeBadge: t, slotProps: r, children: i, className: s,
 		})
 	});
 }
-G.displayName = "BillingToggle.Item";
+G.displayName = "ToggleSubscription.Item";
 function K({ ref: e, amount: t, currency: r, locale: o, formatOptions: s, was: c, period: l, previousLabel: u, slotProps: f, className: p, sx: _, ...b }) {
-	if (!Number.isFinite(t)) throw RangeError("BillingToggle.Price amount must be finite.");
+	if (!Number.isFinite(t)) throw RangeError("ToggleSubscription.Price amount must be finite.");
 	let { locale: x } = S(), C = y(), w = o ?? x, T = JSON.stringify([
 		Intl.getCanonicalLocales(w === void 0 ? [] : [w].flat().map(String)),
 		r,
@@ -273,7 +273,7 @@ function K({ ref: e, amount: t, currency: r, locale: o, formatOptions: s, was: c
 			currency: t
 		});
 	}, [T]), D = E.format(t), O = c !== void 0 && Number.isFinite(c) && c > t;
-	if (O && !u) throw Error("BillingToggle.Price requires previousLabel when was exceeds amount.");
+	if (O && !u) throw Error("ToggleSubscription.Price requires previousLabel when was exceeds amount.");
 	return /* @__PURE__ */ m(n, {
 		className: p,
 		styles: N,
@@ -288,7 +288,7 @@ function K({ ref: e, amount: t, currency: r, locale: o, formatOptions: s, was: c
 			children: [
 				/* @__PURE__ */ h("span", {
 					...f?.amount,
-					"data-ui": "billing-toggle-amount",
+					"data-ui": "toggle-subscription-amount",
 					css: [P, f?.amount?.css],
 					children: [/* @__PURE__ */ m("span", {
 						css: i,
@@ -321,7 +321,7 @@ function K({ ref: e, amount: t, currency: r, locale: o, formatOptions: s, was: c
 				}),
 				O && /* @__PURE__ */ h("del", {
 					...f?.previous,
-					"data-ui": "billing-toggle-previous",
+					"data-ui": "toggle-subscription-previous",
 					css: [L, f?.previous?.css],
 					children: [/* @__PURE__ */ m("span", {
 						css: i,
@@ -330,7 +330,7 @@ function K({ ref: e, amount: t, currency: r, locale: o, formatOptions: s, was: c
 				}),
 				a(l) && l !== "" && /* @__PURE__ */ m("span", {
 					...f?.period,
-					"data-ui": "billing-toggle-period",
+					"data-ui": "toggle-subscription-period",
 					css: [R, f?.period?.css],
 					children: l
 				})
@@ -338,7 +338,7 @@ function K({ ref: e, amount: t, currency: r, locale: o, formatOptions: s, was: c
 		})
 	});
 }
-K.displayName = "BillingToggle.Price";
+K.displayName = "ToggleSubscription.Price";
 var q = Object.assign(H, {
 	List: W,
 	Item: G,

package/dist/toggle-subscription.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as ToggleSubscription } from "./toggle-subscription-Ytz7ew1q.js";

package/dist/types/components/avatar/avatar.d.ts

@@ -13,6 +13,8 @@ export interface AvatarProps extends Omit<ComponentPropsWithRef<'span'>, 'childr
     src?: string;
     size?: AvatarSize;
     status?: AvatarStatus;
+    /** Pulse the presence ring only when `status="online"`. Defaults to `false`. */
+    pulse?: boolean;
     /** Spoken status word; defaults to the `status` value. Pass a translated word for other locales. */
     statusLabel?: string;
     slotProps?: {
@@ -21,7 +23,7 @@ export interface AvatarProps extends Omit<ComponentPropsWithRef<'span'>, 'childr
         status?: AvatarPartProps;
     };
 }
-export declare function Avatar({ ref, name, src, size, status, statusLabel, slotProps, className, sx, ...rest }: AvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Avatar({ ref, name, src, size, status, pulse, statusLabel, slotProps, className, sx, ...rest }: AvatarProps): import("@emotion/react/jsx-runtime").JSX.Element;
 export declare namespace Avatar {
     var displayName: string;
 }

package/dist/types/components/editable-details/editable-details.d.ts

@@ -0,0 +1,58 @@
+import { type ComponentPropsWithRef, type ReactNode, type Ref, type RefCallback } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+export interface EditableDetailsMessages {
+    edit: string;
+}
+export interface EditableDetailsPartProps {
+    className?: string;
+    css?: Interpolation<Theme>;
+}
+export interface EditableDetailsProps extends ComponentPropsWithRef<'div'>, SxProps {
+    messages?: Partial<EditableDetailsMessages>;
+}
+export interface EditableDetailsSectionProps extends Omit<ComponentPropsWithRef<'section'>, 'title'>, SxProps {
+    title: ReactNode;
+    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    triggerRef?: Ref<HTMLButtonElement>;
+    slotProps?: {
+        heading?: EditableDetailsPartProps;
+        trigger?: EditableDetailsPartProps;
+        panel?: EditableDetailsPartProps;
+    };
+}
+export interface EditableDetailsListProps extends ComponentPropsWithRef<'dl'>, SxProps {
+}
+export interface EditableDetailsEditorProps {
+    initialFocusRef: RefCallback<HTMLElement>;
+    complete: () => void;
+    cancel: () => void;
+    visible: boolean;
+}
+export interface EditableDetailsItemProps extends ComponentPropsWithRef<'div'>, SxProps {
+    label: ReactNode;
+    renderEditor?: (props: EditableDetailsEditorProps) => ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    slotProps?: {
+        label?: EditableDetailsPartProps;
+        description?: EditableDetailsPartProps;
+        summary?: EditableDetailsPartProps;
+        edit?: EditableDetailsPartProps;
+        editor?: EditableDetailsPartProps;
+    };
+}
+declare function EditableDetailsRoot({ messages, className, sx, ...rest }: EditableDetailsProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function EditableDetailsSection({ ref, title, headingLevel, open: openProp, defaultOpen, onOpenChange, triggerRef, slotProps, children, className, sx, ...rest }: EditableDetailsSectionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function EditableDetailsList({ className, sx, ...rest }: EditableDetailsListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function EditableDetailsItem({ ref, label, renderEditor, open: openProp, defaultOpen, onOpenChange, children, slotProps, className, sx, ...rest }: EditableDetailsItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const EditableDetails: typeof EditableDetailsRoot & {
+    Section: typeof EditableDetailsSection;
+    List: typeof EditableDetailsList;
+    Item: typeof EditableDetailsItem;
+};
+export {};

package/dist/types/components/editable-details/index.d.ts

@@ -0,0 +1,2 @@
+export { EditableDetails } from './editable-details';
+export type { EditableDetailsProps, EditableDetailsMessages, EditableDetailsPartProps, EditableDetailsSectionProps, EditableDetailsListProps, EditableDetailsItemProps, EditableDetailsEditorProps, } from './editable-details';

package/dist/types/components/flip-game-card/flip-game-card.d.ts

@@ -0,0 +1,22 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type SxProps } from '../../styling/sx';
+import type { GameCardPartProps, GameCardSize } from '../game-card';
+export interface FlipGameCardProps extends Omit<ComponentPropsWithRef<'div'>, 'children'>, SxProps {
+    /** Shows `back` when true and `front` when false. No interaction changes this prop. */
+    flipped: boolean;
+    /** Content shown when `flipped` is false. */
+    front: ReactNode;
+    /** Content shown when `flipped` is true. Both faces stay mounted. */
+    back: ReactNode;
+    /** Card width, using the GameCard scale. Defaults to `md`. */
+    size?: GameCardSize;
+    slotProps?: {
+        rotator?: GameCardPartProps;
+        front?: GameCardPartProps;
+        back?: GameCardPartProps;
+    };
+}
+export declare function FlipGameCard({ ref, flipped, front, back, size, slotProps, className, sx, ...rest }: FlipGameCardProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare namespace FlipGameCard {
+    var displayName: string;
+}

package/dist/types/components/flip-game-card/index.d.ts

@@ -0,0 +1,2 @@
+export { FlipGameCard } from './flip-game-card';
+export type { FlipGameCardProps } from './flip-game-card';

package/dist/types/components/locale-switcher/locale-switcher.d.ts

@@ -2,7 +2,7 @@ import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactNo
 import { type Placement } from '@floating-ui/react';
 import { type Interpolation, type Theme } from '../../styling/css';
 import { type SxProps } from '../../styling/sx';
-export type LocaleSwitcherVariant = 'menu' | 'swap' | 'inline' | 'segmented';
+export type LocaleSwitcherVariant = 'menu' | 'swap' | 'inline' | 'pills';
 export type LocaleSwitcherSize = 'sm' | 'md' | 'lg';
 /** Spread these props onto the link returned by an option's `render` callback. */
 export interface LocaleSwitcherLinkProps extends Omit<ComponentPropsWithRef<'a'>, 'href' | 'children'> {
@@ -44,7 +44,7 @@ export interface LocaleSwitcherProps extends Omit<ComponentPropsWithRef<'nav'>,
     size?: LocaleSwitcherSize;
     /** Names the menu trigger's action, such as "Change language". Read before the current label. */
     triggerLabel?: string;
-    /** Names the navigation landmark in the inline and segmented variants. */
+    /** Names the navigation landmark in the inline and pills variants. */
     label?: string;
     /** Shows a decorative icon before the menu's current label. Defaults to a globe. `null` removes it. */
     icon?: ReactNode;

package/dist/types/components/toggle-subscription/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleSubscription } from './toggle-subscription';
+export type { ToggleSubscriptionProps, ToggleSubscriptionListProps, ToggleSubscriptionItemProps, ToggleSubscriptionLabelProps, ToggleSubscriptionPriceProps, ToggleSubscriptionSize, ToggleSubscriptionTone, } from './toggle-subscription';

package/dist/types/components/toggle-subscription/toggle-subscription.d.ts

@@ -0,0 +1,57 @@
+import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type Interpolation, type Theme } from '../../styling/css';
+import { type SxProps } from '../../styling/sx';
+import { type SegmentedControlItemProps } from '../segmented-control';
+export type ToggleSubscriptionSize = 'md' | 'lg';
+export type ToggleSubscriptionTone = 'neutral' | 'accent' | 'success';
+type SlotProps<Element extends 'span' | 'del'> = ComponentPropsWithoutRef<Element> & {
+    css?: Interpolation<Theme>;
+};
+export interface ToggleSubscriptionProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange'>, SxProps {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    disabled?: boolean;
+    size?: ToggleSubscriptionSize;
+    tone?: ToggleSubscriptionTone;
+    locale?: Intl.LocalesArgument;
+}
+export interface ToggleSubscriptionListProps extends Omit<ComponentPropsWithRef<'div'>, 'defaultValue' | 'onChange'>, SxProps {
+}
+export interface ToggleSubscriptionLabelProps extends ComponentPropsWithRef<'span'>, SxProps {
+}
+export interface ToggleSubscriptionItemProps extends Omit<SegmentedControlItemProps, 'accessory'> {
+    badge?: ReactNode;
+    activeBadge?: ReactNode;
+    slotProps?: {
+        label?: SlotProps<'span'>;
+        badge?: SlotProps<'span'>;
+        selection?: SlotProps<'span'>;
+    };
+}
+export interface ToggleSubscriptionPriceProps extends Omit<ComponentPropsWithRef<'span'>, 'children'>, SxProps {
+    amount: number;
+    currency: string;
+    locale?: Intl.LocalesArgument;
+    formatOptions?: Omit<Intl.NumberFormatOptions, 'style' | 'currency'>;
+    was?: number;
+    period?: ReactNode;
+    previousLabel?: string;
+    slotProps?: {
+        amount?: SlotProps<'span'>;
+        previous?: SlotProps<'del'>;
+        period?: SlotProps<'span'>;
+    };
+}
+declare function ToggleSubscriptionRoot({ ref, value: valueProp, defaultValue, onValueChange, disabled, size, tone, locale, className, sx, children, ...rest }: ToggleSubscriptionProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ToggleSubscriptionLabel({ ref, id: idProp, className, sx, children, ...rest }: ToggleSubscriptionLabelProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+declare function ToggleSubscriptionList({ ref, className, sx, children, ...rest }: ToggleSubscriptionListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ToggleSubscriptionItem({ badge, activeBadge, slotProps, children, className, sx, ...rest }: ToggleSubscriptionItemProps): import("@emotion/react/jsx-runtime").JSX.Element;
+declare function ToggleSubscriptionPrice({ ref, amount, currency, locale: localeProp, formatOptions, was, period, previousLabel, slotProps, className, sx, ...rest }: ToggleSubscriptionPriceProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const ToggleSubscription: typeof ToggleSubscriptionRoot & {
+    List: typeof ToggleSubscriptionList;
+    Item: typeof ToggleSubscriptionItem;
+    Label: typeof ToggleSubscriptionLabel;
+    Price: typeof ToggleSubscriptionPrice;
+};
+export {};

package/dist/types/index.d.ts

@@ -5,7 +5,6 @@ export * from './components/announcement-bar';
 export * from './components/avatar';
 export * from './components/avatar-group';
 export * from './components/badge';
-export * from './components/billing-toggle';
 export * from './components/bottom-sheet';
 export * from './components/breadcrumbs';
 export * from './components/button';
@@ -29,6 +28,7 @@ export * from './components/date-range-picker';
 export * from './components/dialog';
 export * from './components/divider';
 export * from './components/drawer';
+export * from './components/editable-details';
 export * from './components/emblem';
 export * from './components/empty-state';
 export * from './components/expandable-card';
@@ -36,10 +36,10 @@ export * from './components/expanding-search';
 export * from './components/file-dropzone';
 export * from './components/filter-toolbar';
 export * from './components/flex';
+export * from './components/flip-game-card';
 export * from './components/game-card';
 export * from './components/hold-to-confirm';
 export * from './components/image-compare';
-export * from './components/in-view-title';
 export * from './components/inline-edit';
 export * from './components/hover-card';
 export * from './components/json-viewer';
@@ -68,7 +68,6 @@ export * from './components/search-field';
 export * from './components/segmented-control';
 export * from './components/select';
 export * from './components/sheet-stack';
-export * from './components/shortcut-recorder';
 export * from './components/signature-pad';
 export * from './components/skeleton';
 export * from './components/slider';
@@ -92,6 +91,7 @@ export * from './components/timeline';
 export * from './components/toast';
 export * from './components/toast-stack';
 export * from './components/toggle-group';
+export * from './components/toggle-subscription';
 export * from './components/tooltip';
 export * from './components/tree-view';
 export * from './components/typewriter-terminal';

package/dist/types/styling/motion-timings.d.ts

@@ -1,5 +1,13 @@
+/**
+ * Parses a `120ms` token into a number. A token that is missing or stops being milliseconds resolves
+ * to `0` — no animation, and the state still completes — because a design system cannot take the page
+ * down over a configuration mistake. Exported for the Foundations/Motion page to prove the fallback;
+ * the report is loud in development and silent in production.
+ */
+export declare function resolveMotionDurationMs(name: string, value: unknown): number;
 export declare const motionDurationMs: {
     readonly fast: number;
     readonly base: number;
     readonly slow: number;
+    readonly cardFlip: number;
 };

package/dist/types/styling/theme.d.ts

@@ -102,8 +102,12 @@ export declare const theme: {
             readonly fast: "var(--ui-motion-duration-fast)";
             readonly base: "var(--ui-motion-duration-base)";
             readonly slow: "var(--ui-motion-duration-slow)";
+            readonly presence: "var(--ui-motion-duration-presence)";
+            readonly cardFlip: "var(--ui-motion-duration-card-flip)";
         };
         readonly easeStandard: "var(--ui-motion-ease-standard)";
+        readonly easePresence: "var(--ui-motion-ease-presence)";
+        readonly easeCardFlip: "var(--ui-motion-ease-card-flip)";
     };
     readonly size: {
         readonly emblemSm: "var(--ui-size-emblem-sm)";
@@ -113,6 +117,7 @@ export declare const theme: {
         readonly gameCardSm: "var(--ui-size-game-card-sm)";
         readonly gameCardMd: "var(--ui-size-game-card-md)";
         readonly gameCardLg: "var(--ui-size-game-card-lg)";
+        readonly gameCardPerspective: "var(--ui-size-game-card-perspective)";
         readonly sheetStackBreakpoint: "var(--ui-size-sheet-stack-breakpoint)";
         readonly sheetStackSheetPeek: "var(--ui-size-sheet-stack-sheet-peek)";
         readonly sheetStackDialogPeek: "var(--ui-size-sheet-stack-dialog-peek)";

package/dist/{user-menu-MctRu_Lh.js → user-menu-Czrrk93A.js}

@@ -8,7 +8,7 @@ import { t as c } from "./use-controlled-state-DpeVQZNR.js";
 import { t as l } from "./visually-hidden-DgVO3NaB.js";
 import { t as u } from "./renderable-DzcIj1Lo.js";
 import { t as d } from "./icon-wrapper-C-zMD0uL.js";
-import { t as f } from "./avatar-sPxDqFiZ.js";
+import { t as f } from "./avatar-BuM1zB_f.js";
 import { t as p } from "./use-scroll-lock-40gXwwAy.js";
 import { s as m } from "./listbox-style-DNOxAulu.js";
 import { t as h } from "./overlay-portal-C9igMHnC.js";

package/dist/user-menu.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as UserMenu } from "./user-menu-MctRu_Lh.js";
+export { t as UserMenu } from "./user-menu-Czrrk93A.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jfrader/ui",
-  "version": "0.7.0",
+  "version": "0.7.3",
   "description": "React components styled with Emotion and themed through CSS custom properties.",
   "keywords": [
     "react",
@@ -54,10 +54,6 @@
       "types": "./dist/types/components/badge/index.d.ts",
       "import": "./dist/badge.js"
     },
-    "./billing-toggle": {
-      "types": "./dist/types/components/billing-toggle/index.d.ts",
-      "import": "./dist/billing-toggle.js"
-    },
     "./bottom-sheet": {
       "types": "./dist/types/components/bottom-sheet/index.d.ts",
       "import": "./dist/bottom-sheet.js"
@@ -154,6 +150,10 @@
       "types": "./dist/types/components/drawer/index.d.ts",
       "import": "./dist/drawer.js"
     },
+    "./editable-details": {
+      "types": "./dist/types/components/editable-details/index.d.ts",
+      "import": "./dist/editable-details.js"
+    },
     "./emblem": {
       "types": "./dist/types/components/emblem/index.d.ts",
       "import": "./dist/emblem.js"
@@ -182,6 +182,10 @@
       "types": "./dist/types/components/flex/index.d.ts",
       "import": "./dist/flex.js"
     },
+    "./flip-game-card": {
+      "types": "./dist/types/components/flip-game-card/index.d.ts",
+      "import": "./dist/flip-game-card.js"
+    },
     "./game-card": {
       "types": "./dist/types/components/game-card/index.d.ts",
       "import": "./dist/game-card.js"
@@ -194,10 +198,6 @@
       "types": "./dist/types/components/image-compare/index.d.ts",
       "import": "./dist/image-compare.js"
     },
-    "./in-view-title": {
-      "types": "./dist/types/components/in-view-title/index.d.ts",
-      "import": "./dist/in-view-title.js"
-    },
     "./inline-edit": {
       "types": "./dist/types/components/inline-edit/index.d.ts",
       "import": "./dist/inline-edit.js"
@@ -314,10 +314,6 @@
       "types": "./dist/types/components/sheet-stack/index.d.ts",
       "import": "./dist/sheet-stack.js"
     },
-    "./shortcut-recorder": {
-      "types": "./dist/types/components/shortcut-recorder/index.d.ts",
-      "import": "./dist/shortcut-recorder.js"
-    },
     "./signature-pad": {
       "types": "./dist/types/components/signature-pad/index.d.ts",
       "import": "./dist/signature-pad.js"
@@ -406,6 +402,10 @@
       "types": "./dist/types/components/toggle-group/index.d.ts",
       "import": "./dist/toggle-group.js"
     },
+    "./toggle-subscription": {
+      "types": "./dist/types/components/toggle-subscription/index.d.ts",
+      "import": "./dist/toggle-subscription.js"
+    },
     "./tooltip": {
       "types": "./dist/types/components/tooltip/index.d.ts",
       "import": "./dist/tooltip.js"
@@ -435,7 +435,7 @@
     "@emotion/styled": "^11.14.0",
     "@floating-ui/react": "^0.27.20",
     "motion": "^14.1.0",
-    "@jfrader/tokens": "0.7.0"
+    "@jfrader/tokens": "0.7.3"
   },
   "peerDependencies": {
     "@emotion/cache": "^11.14.0",

package/dist/avatar-sPxDqFiZ.js

@@ -1,133 +0,0 @@
-'use client';
-import { i as e } from "./css-BYJhdGh-.js";
-import { n as t } from "./media-8yrN85VT.js";
-import { t as n } from "./sx-BJXJ2xJK.js";
-import { t as r } from "./initials-DEdwNe9_.js";
-import { useState as i } from "react";
-import { vars as a } from "@jfrader/tokens/vars";
-import { jsx as o, jsxs as s } from "@emotion/react/jsx-runtime";
-//#region src/components/avatar/avatar.tsx
-var c = 2, l = e({
-	position: "relative",
-	display: "inline-flex",
-	alignItems: "center",
-	justifyContent: "center",
-	flexShrink: 0,
-	boxSizing: "border-box",
-	borderRadius: a.radius.full,
-	backgroundColor: a.color.surfaceHover,
-	color: a.color.text,
-	fontWeight: a.fontWeight.medium,
-	lineHeight: 1,
-	userSelect: "none",
-	verticalAlign: "middle",
-	[t]: { outline: "1px solid CanvasText" }
-}), u = {
-	sm: e({
-		inlineSize: a.space[6],
-		blockSize: a.space[6],
-		fontSize: a.textSize.xs
-	}),
-	md: e({
-		inlineSize: a.space[8],
-		blockSize: a.space[8],
-		fontSize: a.textSize.sm
-	}),
-	lg: e({
-		inlineSize: a.space[10],
-		blockSize: a.space[10],
-		fontSize: a.textSize.md
-	})
-}, d = e({
-	display: "block",
-	inlineSize: "100%",
-	blockSize: "100%",
-	borderRadius: a.radius.full,
-	objectFit: "cover"
-}), f = e({
-	position: "absolute",
-	insetBlockEnd: 0,
-	insetInlineEnd: 0,
-	inlineSize: "25%",
-	blockSize: "25%",
-	"&::before": {
-		content: "\"\"",
-		position: "absolute",
-		insetBlockStart: 0,
-		insetInlineStart: 0,
-		inlineSize: "100%",
-		blockSize: "100%",
-		boxSizing: "border-box",
-		borderRadius: a.radius.full,
-		boxShadow: `0 0 0 2px ${a.color.bg}`
-	}
-}), p = {
-	online: e({ "&::before": { backgroundColor: a.color.success } }),
-	away: e({ "&::before": {
-		border: `2px solid ${a.color.warning}`,
-		backgroundColor: "transparent"
-	} }),
-	busy: e({ "&::before": {
-		backgroundColor: a.color.danger,
-		blockSize: "30%",
-		insetBlockStart: "35%"
-	} }),
-	offline: e({ "&::before": {
-		backgroundColor: a.color.textSubtle,
-		inlineSize: "60%",
-		blockSize: "60%",
-		insetBlockStart: "20%",
-		insetInlineStart: "20%"
-	} })
-}, m = e({ [t]: {
-	"&::before": {
-		forcedColorAdjust: "none",
-		backgroundColor: "CanvasText",
-		outline: "2px solid Canvas"
-	},
-	"&[data-status=\"away\"]::before": {
-		borderColor: "CanvasText",
-		backgroundColor: "Canvas"
-	}
-} });
-function h({ ref: e, name: t, src: a, size: h = "md", status: g, statusLabel: _, slotProps: v, className: y, sx: b, ...x }) {
-	let [S, C] = i(), w = a !== void 0 && a !== "" && a !== S, T = g === void 0 ? t : `${t}, ${_ ?? g}`;
-	return /* @__PURE__ */ o(n, {
-		className: y,
-		styles: [l, u[h]],
-		sx: b,
-		children: (n) => /* @__PURE__ */ s("span", {
-			...x,
-			ref: e,
-			"data-ui": "avatar",
-			role: "img",
-			"aria-label": T,
-			className: n,
-			children: [w ? /* @__PURE__ */ o("img", {
-				src: a,
-				alt: "",
-				onError: () => C(a),
-				className: v?.image?.className,
-				css: [d, v?.image?.css]
-			}) : /* @__PURE__ */ o("span", {
-				"aria-hidden": "true",
-				className: v?.fallback?.className,
-				css: v?.fallback?.css,
-				children: r(t, c)
-			}), g !== void 0 && /* @__PURE__ */ o("span", {
-				"aria-hidden": "true",
-				"data-status": g,
-				className: v?.status?.className,
-				css: [
-					f,
-					p[g],
-					m,
-					v?.status?.css
-				]
-			})]
-		})
-	});
-}
-h.displayName = "Avatar";
-//#endregion
-export { h as t };

package/dist/billing-toggle.js

@@ -1,2 +0,0 @@
-'use client';
-export { t as BillingToggle } from "./billing-toggle-CgC7yxxo.js";