@nozle-js/react 0.10.2 → 0.12.0

package/dist/tokens-Bm4VWWb0.d.cts

@@ -0,0 +1,82 @@
+import { CSSProperties } from 'react';
+
+/** Design tokens. Every value is a CSS value, for example `#4f46e5`, `oklch(...)` or `var(--primary)`. */
+interface Variables {
+    colorPrimary?: string;
+    colorPrimaryForeground?: string;
+    colorBackground?: string;
+    colorCard?: string;
+    colorForeground?: string;
+    colorMuted?: string;
+    colorMutedForeground?: string;
+    colorAccent?: string;
+    colorAccentForeground?: string;
+    colorBorder?: string;
+    colorDanger?: string;
+    colorWarning?: string;
+    colorSuccess?: string;
+    /** Fill of secondary buttons. Defaults to `colorMuted`. */
+    colorSecondary?: string;
+    /** Border of secondary buttons and other controls. Defaults to `colorBorder`. */
+    colorInput?: string;
+    /** The highlighted pricing card (`highlightPlan`). Defaults to `colorPrimary`. */
+    colorHighlight?: string;
+    /** Text on a filled highlighted card. Defaults to `colorPrimaryForeground`. */
+    colorHighlightForeground?: string;
+    fontFamily?: string;
+    /** Font of numbers in tables. Defaults to the surrounding font. */
+    fontFamilyNumbers?: string;
+    /** CSS `font` shorthand of small labels: table headers and plan card status labels. */
+    labelFont?: string;
+    /** `text-transform` of small labels, for example `uppercase`. */
+    labelTextTransform?: string;
+    /** `letter-spacing` of small labels. */
+    labelLetterSpacing?: string;
+    /** CSS `font` shorthand of titles: dialog and portal titles. Default `700 20px/1.25` in `fontFamily`. */
+    fontTitle?: string;
+    /** CSS `font` shorthand of headings: plan names and section headings. Default `600 16px/1.35` in `fontFamily`. */
+    fontHeading?: string;
+    /**
+     * CSS `font` shorthand of large numbers: prices, balances and totals, shown in tabular figures.
+     * Default `700 28px/1.1` in `fontFamilyNumbers`, else `fontFamily`.
+     */
+    fontMetric?: string;
+    /** CSS `font` shorthand of body text and descriptions. Default `400 14px/1.5` in `fontFamily`. */
+    fontBody?: string;
+    /** CSS `font` shorthand of small text: dates, intervals and hints. Default `400 12px/1.4` in `fontFamily`. */
+    fontMeta?: string;
+    /** CSS `font` shorthand of buttons and links. Default `600 14px/1.4` in `fontFamily`. */
+    fontAction?: string;
+    borderRadius?: string;
+    borderWidth?: string;
+    shadow?: string;
+    /** Corner radius of buttons. Defaults to a fraction of `borderRadius`. */
+    buttonRadius?: string;
+    /** Border width of buttons. Defaults to `borderWidth`. */
+    buttonBorderWidth?: string;
+    /** Border colour of primary buttons. Defaults to the button's fill colour. */
+    buttonBorderColor?: string;
+    /** Shadow of primary buttons only, for example a hard offset. Defaults to none. */
+    buttonShadow?: string;
+    /** Sets the CSS `color-scheme` of the component, so native controls follow the theme. */
+    colorScheme?: "light" | "dark" | "light dark";
+}
+type ElementKey = "pricingTable" | "pricingTable__toggle" | "pricingTable__toggleButton" | "pricingTable__grid" | "planCard" | "planCard__header" | "planCard__badge" | "planCard__name" | "planCard__description" | "planCard__price" | "planCard__features" | "planCard__feature" | "planCard__cta" | "planComparison" | "planComparison__table" | "planComparison__row" | "planComparison__cell" | "creditBalance" | "creditBalance__amount" | "creditHistory" | "creditHistory__table" | "creditHistory__row" | "usageBreakdown" | "usageBreakdown__row" | "usageTrend" | "usageTrend__bar" | "usageMeter" | "usageMeter__label" | "usageMeter__value" | "usageMeter__track" | "usageMeter__fill" | "usageDashboard" | "usageAlert" | "usageAlert__dismiss" | "currentPlan" | "currentPlan__name" | "currentPlan__status" | "currentPlan__price" | "currentPlan__scheduled" | "currentPlan__notice" | "currentPlan__usage" | "currentPlan__details" | "planBadge" | "paymentMethod" | "checkoutButton" | "upgradeButton" | "checkout" | "checkout__submit" | "checkout__error" | "upgradeModal" | "upgradeModal__dialog" | "upgradeModal__actions" | "upgradePrompt" | "lockedOverlay" | "lockedOverlay__panel" | "billingPortal" | "billingPortal__section" | "billingPortal__card" | "billingPortal__table" | "billingPortal__error" | "cancellationControl" | "planChangeControl" | "poweredBy";
+/** A string adds a class name; an object adds inline styles. */
+type Elements = Partial<Record<ElementKey, string | CSSProperties>>;
+interface Theme {
+    variables?: Variables;
+    elements?: Elements;
+    /**
+     * How plan cards are laid out. `card` (default): name, description, price and ticked features.
+     * `panel`: the name in a header band with the plan's status on the right, then price,
+     * description and plain feature lines.
+     */
+    planCardLayout?: "card" | "panel";
+}
+/** A theme (or a stack of themes, last wins) plus your own variables and elements on top. */
+interface Appearance extends Theme {
+    theme?: Theme | Theme[];
+}
+
+export type { Appearance as A, ElementKey as E, Theme as T, Variables as V, Elements as a };

package/dist/tokens-Bm4VWWb0.d.ts

@@ -0,0 +1,82 @@
+import { CSSProperties } from 'react';
+
+/** Design tokens. Every value is a CSS value, for example `#4f46e5`, `oklch(...)` or `var(--primary)`. */
+interface Variables {
+    colorPrimary?: string;
+    colorPrimaryForeground?: string;
+    colorBackground?: string;
+    colorCard?: string;
+    colorForeground?: string;
+    colorMuted?: string;
+    colorMutedForeground?: string;
+    colorAccent?: string;
+    colorAccentForeground?: string;
+    colorBorder?: string;
+    colorDanger?: string;
+    colorWarning?: string;
+    colorSuccess?: string;
+    /** Fill of secondary buttons. Defaults to `colorMuted`. */
+    colorSecondary?: string;
+    /** Border of secondary buttons and other controls. Defaults to `colorBorder`. */
+    colorInput?: string;
+    /** The highlighted pricing card (`highlightPlan`). Defaults to `colorPrimary`. */
+    colorHighlight?: string;
+    /** Text on a filled highlighted card. Defaults to `colorPrimaryForeground`. */
+    colorHighlightForeground?: string;
+    fontFamily?: string;
+    /** Font of numbers in tables. Defaults to the surrounding font. */
+    fontFamilyNumbers?: string;
+    /** CSS `font` shorthand of small labels: table headers and plan card status labels. */
+    labelFont?: string;
+    /** `text-transform` of small labels, for example `uppercase`. */
+    labelTextTransform?: string;
+    /** `letter-spacing` of small labels. */
+    labelLetterSpacing?: string;
+    /** CSS `font` shorthand of titles: dialog and portal titles. Default `700 20px/1.25` in `fontFamily`. */
+    fontTitle?: string;
+    /** CSS `font` shorthand of headings: plan names and section headings. Default `600 16px/1.35` in `fontFamily`. */
+    fontHeading?: string;
+    /**
+     * CSS `font` shorthand of large numbers: prices, balances and totals, shown in tabular figures.
+     * Default `700 28px/1.1` in `fontFamilyNumbers`, else `fontFamily`.
+     */
+    fontMetric?: string;
+    /** CSS `font` shorthand of body text and descriptions. Default `400 14px/1.5` in `fontFamily`. */
+    fontBody?: string;
+    /** CSS `font` shorthand of small text: dates, intervals and hints. Default `400 12px/1.4` in `fontFamily`. */
+    fontMeta?: string;
+    /** CSS `font` shorthand of buttons and links. Default `600 14px/1.4` in `fontFamily`. */
+    fontAction?: string;
+    borderRadius?: string;
+    borderWidth?: string;
+    shadow?: string;
+    /** Corner radius of buttons. Defaults to a fraction of `borderRadius`. */
+    buttonRadius?: string;
+    /** Border width of buttons. Defaults to `borderWidth`. */
+    buttonBorderWidth?: string;
+    /** Border colour of primary buttons. Defaults to the button's fill colour. */
+    buttonBorderColor?: string;
+    /** Shadow of primary buttons only, for example a hard offset. Defaults to none. */
+    buttonShadow?: string;
+    /** Sets the CSS `color-scheme` of the component, so native controls follow the theme. */
+    colorScheme?: "light" | "dark" | "light dark";
+}
+type ElementKey = "pricingTable" | "pricingTable__toggle" | "pricingTable__toggleButton" | "pricingTable__grid" | "planCard" | "planCard__header" | "planCard__badge" | "planCard__name" | "planCard__description" | "planCard__price" | "planCard__features" | "planCard__feature" | "planCard__cta" | "planComparison" | "planComparison__table" | "planComparison__row" | "planComparison__cell" | "creditBalance" | "creditBalance__amount" | "creditHistory" | "creditHistory__table" | "creditHistory__row" | "usageBreakdown" | "usageBreakdown__row" | "usageTrend" | "usageTrend__bar" | "usageMeter" | "usageMeter__label" | "usageMeter__value" | "usageMeter__track" | "usageMeter__fill" | "usageDashboard" | "usageAlert" | "usageAlert__dismiss" | "currentPlan" | "currentPlan__name" | "currentPlan__status" | "currentPlan__price" | "currentPlan__scheduled" | "currentPlan__notice" | "currentPlan__usage" | "currentPlan__details" | "planBadge" | "paymentMethod" | "checkoutButton" | "upgradeButton" | "checkout" | "checkout__submit" | "checkout__error" | "upgradeModal" | "upgradeModal__dialog" | "upgradeModal__actions" | "upgradePrompt" | "lockedOverlay" | "lockedOverlay__panel" | "billingPortal" | "billingPortal__section" | "billingPortal__card" | "billingPortal__table" | "billingPortal__error" | "cancellationControl" | "planChangeControl" | "poweredBy";
+/** A string adds a class name; an object adds inline styles. */
+type Elements = Partial<Record<ElementKey, string | CSSProperties>>;
+interface Theme {
+    variables?: Variables;
+    elements?: Elements;
+    /**
+     * How plan cards are laid out. `card` (default): name, description, price and ticked features.
+     * `panel`: the name in a header band with the plan's status on the right, then price,
+     * description and plain feature lines.
+     */
+    planCardLayout?: "card" | "panel";
+}
+/** A theme (or a stack of themes, last wins) plus your own variables and elements on top. */
+interface Appearance extends Theme {
+    theme?: Theme | Theme[];
+}
+
+export type { Appearance as A, ElementKey as E, Theme as T, Variables as V, Elements as a };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nozle-js/react",
-  "version": "0.10.2",
+  "version": "0.12.0",
   "type": "module",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
@@ -25,18 +25,28 @@
         "types": "./dist/styles/preset.d.cts",
         "default": "./dist/styles/preset.cjs"
       }
+    },
+    "./themes": {
+      "import": {
+        "types": "./dist/themes.d.ts",
+        "default": "./dist/themes.js"
+      },
+      "require": {
+        "types": "./dist/themes.d.cts",
+        "default": "./dist/themes.cjs"
+      }
     }
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsup",
+    "build": "tsup && node scripts/check-use-client.mjs",
     "test": "vitest run",
     "typecheck": "tsc --noEmit"
   },
-  "dependencies": {},
   "devDependencies": {
+    "@tanstack/react-query": "^5.101.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
@@ -45,18 +55,24 @@
     "react-dom": "^19.2.6",
     "tsup": "^8.4.0",
     "typescript": "^5.8.0",
-    "vitest": "^3.1.0"
+    "vitest": "^4.1.12"
   },
   "peerDependencies": {
     "@stripe/react-stripe-js": ">=3.0.0",
     "@stripe/stripe-js": ">=5.0.0",
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "@tanstack/react-query": ">=5.0.0"
   },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/nozle-dev/nozle-js.git",
     "directory": "packages/react"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "overrides": {
+    "esbuild": "^0.28.2",
+    "postcss": "^8.5.23",
+    "source-map-js": "^1.2.2"
+  }
 }