@ropav/styles 0.6.0 → 0.7.0

package/dist/themes.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Every bundled theme — GENERATED, do not edit by hand.
+ *
+ * Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
+ *
+ * `themeIds` is in presentation order, which a picker should follow. `themeLabels` is keyed
+ * for the linter, so read the order from `themeIds` and the name from here.
+ */
+export declare const themeIds: readonly ["default", "hero", "sky", "lavender", "mint", "netflix", "uber", "spotify", "coinbase", "airbnb", "discord", "rabbit"];
+export type ThemeId = (typeof themeIds)[number];
+export declare const themeLabels: Record<ThemeId, string>;
+//# sourceMappingURL=themes.d.ts.map

package/dist/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../src/themes.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,eAAO,MAAM,QAAQ,YACnB,SAAS,EACT,MAAM,EACN,KAAK,EACL,UAAU,EACV,MAAM,EACN,SAAS,EACT,MAAM,EACN,SAAS,EACT,UAAU,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,CACA,CAAC;AAEX,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC;AAEhD,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAa/C,CAAC"}

package/dist/themes.js

@@ -0,0 +1,39 @@
+//#region src/themes.ts
+/**
+* Every bundled theme — GENERATED, do not edit by hand.
+*
+* Run `pnpm generate:themes` after changing `scripts/themes/presets.ts`.
+*
+* `themeIds` is in presentation order, which a picker should follow. `themeLabels` is keyed
+* for the linter, so read the order from `themeIds` and the name from here.
+*/
+const themeIds = [
+	"default",
+	"hero",
+	"sky",
+	"lavender",
+	"mint",
+	"netflix",
+	"uber",
+	"spotify",
+	"coinbase",
+	"airbnb",
+	"discord",
+	"rabbit"
+];
+const themeLabels = {
+	airbnb: "Airbnb",
+	coinbase: "Coinbase",
+	default: "Default",
+	discord: "Discord",
+	hero: "Hero",
+	lavender: "Lavender",
+	mint: "Mint",
+	netflix: "Netflix",
+	rabbit: "Rabbit",
+	sky: "Sky",
+	spotify: "Spotify",
+	uber: "Uber"
+};
+//#endregion
+export { themeIds, themeLabels };

package/dist/tv.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Maps variant props onto class names.
+ *
+ * Every class a recipe emits is a BEM name, so there is nothing to deduplicate and no conflict
+ * to resolve: a caller's utility already wins on cascade order, since component rules sit in the
+ * `components` layer and utilities in the later `utilities` one. Concatenation is the whole job.
+ */
+type ClassValue = ClassValue[] | string | false | null | undefined;
+type VariantClasses = string | Record<string, string>;
+interface Config {
+    base?: string;
+    defaultVariants?: Record<string, unknown>;
+    slots?: Record<string, string>;
+    variants?: Record<string, Record<string, VariantClasses>>;
+}
+type ClassProp = {
+    class?: ClassValue;
+};
+type StringToBoolean<T> = T extends "false" | "true" ? boolean : T;
+type Selection<C> = C extends {
+    variants: infer V;
+} ? {
+    [K in keyof V]?: StringToBoolean<keyof V[K] & string>;
+} : object;
+type Recipe<C> = C extends {
+    slots: infer S;
+} ? (props?: ClassProp & Selection<C>) => {
+    [K in keyof S]: (props?: ClassProp & Selection<C>) => string;
+} : (props?: ClassProp & Selection<C>) => string;
+/** The variant props a recipe accepts, for deriving a component's own prop types. */
+export type VariantProps<T> = T extends (props?: infer P) => unknown ? Omit<NonNullable<P>, "class"> : never;
+export declare const tv: <C extends Config>(config: C) => Recipe<C>;
+export {};
+//# sourceMappingURL=tv.d.ts.map

package/dist/tv.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tv.d.ts","sourceRoot":"","sources":["../src/tv.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,KAAK,UAAU,GAAG,UAAU,EAAE,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC;AAInE,KAAK,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAEtD,UAAU,MAAM;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC1C,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC,CAAC;CAC3D;AAED,KAAK,SAAS,GAAG;IAAE,KAAK,CAAC,EAAE,UAAU,CAAA;CAAE,CAAC;AAExC,KAAK,eAAe,CAAC,CAAC,IAAI,CAAC,SAAS,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,CAAC,CAAC;AAEnE,KAAK,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS;IAAE,QAAQ,EAAE,MAAM,CAAC,CAAA;CAAE,GAC/C;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,eAAe,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC;CAAE,GACzD,MAAM,CAAC;AAEX,KAAK,MAAM,CAAC,CAAC,IAAI,CAAC,SAAS;IAAE,KAAK,EAAE,MAAM,CAAC,CAAA;CAAE,GACzC,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK;KACnC,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,MAAM;CAC7D,GACD,CAAC,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC,CAAC,KAAK,MAAM,CAAC;AAEjD,qFAAqF;AACrF,MAAM,MAAM,YAAY,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,KAAK,OAAO,GAChE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,GAC7B,KAAK,CAAC;AAKV,eAAO,MAAM,EAAE,GAAI,CAAC,SAAS,MAAM,UAAU,CAAC,KAAG,MAAM,CAAC,CAAC,CAsCxD,CAAC"}

package/dist/tv.js

@@ -0,0 +1,21 @@
+//#region src/tv.ts
+const flatten = (value) => Array.isArray(value) ? value.map(flatten).filter(Boolean).join(" ") : value || "";
+const tv = (config) => {
+	const { base, defaultVariants, slots, variants } = config;
+	const slotClasses = slots ?? { base: base ?? "" };
+	/** `inherited` carries what the root call resolved, for a slot resolving itself afterwards. */
+	const build = (slot, props, inherited = {}) => {
+		const parts = [slotClasses[slot]];
+		for (const [name, group] of Object.entries(variants ?? {})) {
+			const selected = props[name] ?? inherited[name] ?? defaultVariants?.[name];
+			if (typeof selected !== "boolean" && typeof selected !== "string") continue;
+			const classes = group[String(selected)];
+			parts.push(typeof classes === "string" ? slot === "base" ? classes : void 0 : classes?.[slot]);
+		}
+		parts.push(flatten(props["class"]));
+		return parts.filter(Boolean).join(" ");
+	};
+	return slots ? (props = {}) => Object.fromEntries(Object.keys(slots).map((slot) => [slot, (args = {}) => build(slot, args, props)])) : (props = {}) => build("base", props);
+};
+//#endregion
+export { tv };

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@ropav/styles",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Ropav core styles - framework-agnostic CSS and Tailwind variants",
   "keywords": [
     "css",
     "design system",
     "ropav",
-    "tailwind-variants",
     "tailwindcss"
   ],
   "homepage": "https://github.com/daopk/ropav",
@@ -42,6 +41,10 @@
       "style": "./dist/index.css",
       "default": "./dist/index.css"
     },
+    "./no-preflight": {
+      "style": "./dist/no-preflight.css",
+      "default": "./dist/no-preflight.css"
+    },
     "./components/*": {
       "types": "./dist/components/*/index.d.ts",
       "import": "./dist/components/*/index.js",
@@ -60,7 +63,6 @@
     "access": "public"
   },
   "dependencies": {
-    "tailwind-variants": "3.3.1",
     "tw-animate-css": "1.4.0"
   },
   "peerDependencies": {

package/src/components/accordion/accordion.styles.ts

@@ -1,23 +1,23 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const accordionVariants = tv({
   slots: {
-    base: "accordion",
-    body: "accordion__body",
-    bodyInner: "accordion__body-inner",
-    heading: "accordion__heading",
-    indicator: "accordion__indicator",
-    item: "accordion__item",
-    panel: "accordion__panel",
-    trigger: "accordion__trigger",
+    base: "rp-accordion",
+    body: "rp-accordion__body",
+    bodyInner: "rp-accordion__body-inner",
+    heading: "rp-accordion__heading",
+    indicator: "rp-accordion__indicator",
+    item: "rp-accordion__item",
+    panel: "rp-accordion__panel",
+    trigger: "rp-accordion__trigger",
   },
   variants: {
     variant: {
       default: {},
       surface: {
-        base: "accordion--surface",
+        base: "rp-accordion--surface",
       },
     },
   },

package/src/components/alert/alert.styles.ts

@@ -1,34 +1,34 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const alertVariants = tv({
   defaultVariants: {
     status: "default",
   },
   slots: {
-    base: "alert",
-    content: "alert__content",
-    description: "alert__description",
-    indicator: "alert__indicator",
-    title: "alert__title",
+    base: "rp-alert",
+    content: "rp-alert__content",
+    description: "rp-alert__description",
+    indicator: "rp-alert__indicator",
+    title: "rp-alert__title",
   },
   variants: {
     status: {
       accent: {
-        base: "alert--accent",
+        base: "rp-alert--accent",
       },
       danger: {
-        base: "alert--danger",
+        base: "rp-alert--danger",
       },
       default: {
-        base: "alert--default",
+        base: "rp-alert--default",
       },
       success: {
-        base: "alert--success",
+        base: "rp-alert--success",
       },
       warning: {
-        base: "alert--warning",
+        base: "rp-alert--warning",
       },
     },
   },

package/src/components/alert-dialog/alert-dialog.styles.ts

@@ -1,6 +1,6 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const alertDialogVariants = tv({
   defaultVariants: {
@@ -9,61 +9,61 @@ export const alertDialogVariants = tv({
     variant: "opaque",
   },
   slots: {
-    backdrop: "alert-dialog__backdrop",
-    body: "alert-dialog__body",
-    closeTrigger: "alert-dialog__close-trigger",
-    container: "alert-dialog__container",
-    dialog: "alert-dialog__dialog",
-    footer: "alert-dialog__footer",
-    header: "alert-dialog__header",
-    heading: "alert-dialog__heading",
-    icon: "alert-dialog__icon",
-    trigger: "alert-dialog__trigger",
+    backdrop: "rp-alert-dialog__backdrop",
+    body: "rp-alert-dialog__body",
+    closeTrigger: "rp-alert-dialog__close-trigger",
+    container: "rp-alert-dialog__container",
+    dialog: "rp-alert-dialog__dialog",
+    footer: "rp-alert-dialog__footer",
+    header: "rp-alert-dialog__header",
+    heading: "rp-alert-dialog__heading",
+    icon: "rp-alert-dialog__icon",
+    trigger: "rp-alert-dialog__trigger",
   },
   variants: {
     size: {
       cover: {
-        dialog: "alert-dialog__dialog--cover",
+        dialog: "rp-alert-dialog__dialog--cover",
       },
       lg: {
-        dialog: "alert-dialog__dialog--lg",
+        dialog: "rp-alert-dialog__dialog--lg",
       },
       md: {
-        dialog: "alert-dialog__dialog--md",
+        dialog: "rp-alert-dialog__dialog--md",
       },
       sm: {
-        dialog: "alert-dialog__dialog--sm",
+        dialog: "rp-alert-dialog__dialog--sm",
       },
       xs: {
-        dialog: "alert-dialog__dialog--xs",
+        dialog: "rp-alert-dialog__dialog--xs",
       },
     },
     status: {
       accent: {
-        icon: "alert-dialog__icon--accent",
+        icon: "rp-alert-dialog__icon--accent",
       },
       danger: {
-        icon: "alert-dialog__icon--danger",
+        icon: "rp-alert-dialog__icon--danger",
       },
       default: {
-        icon: "alert-dialog__icon--default",
+        icon: "rp-alert-dialog__icon--default",
       },
       success: {
-        icon: "alert-dialog__icon--success",
+        icon: "rp-alert-dialog__icon--success",
       },
       warning: {
-        icon: "alert-dialog__icon--warning",
+        icon: "rp-alert-dialog__icon--warning",
       },
     },
     variant: {
       blur: {
-        backdrop: "alert-dialog__backdrop--blur",
+        backdrop: "rp-alert-dialog__backdrop--blur",
       },
       opaque: {
-        backdrop: "alert-dialog__backdrop--opaque",
+        backdrop: "rp-alert-dialog__backdrop--opaque",
       },
       transparent: {
-        backdrop: "alert-dialog__backdrop--transparent",
+        backdrop: "rp-alert-dialog__backdrop--transparent",
       },
     },
   },

package/src/components/autocomplete/autocomplete.styles.ts

@@ -1,6 +1,6 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const autocompleteVariants = tv({
   defaultVariants: {
@@ -9,39 +9,39 @@ export const autocompleteVariants = tv({
     variant: "primary",
   },
   slots: {
-    base: "autocomplete",
-    clearButton: "autocomplete__clear-button",
-    filter: "autocomplete__filter",
-    indicator: "autocomplete__indicator",
-    popover: "autocomplete__popover",
-    trigger: "autocomplete__trigger",
-    value: "autocomplete__value",
+    base: "rp-autocomplete",
+    clearButton: "rp-autocomplete__clear-button",
+    filter: "rp-autocomplete__filter",
+    indicator: "rp-autocomplete__indicator",
+    popover: "rp-autocomplete__popover",
+    trigger: "rp-autocomplete__trigger",
+    value: "rp-autocomplete__value",
   },
   variants: {
     fullWidth: {
       false: {},
       true: {
-        base: "autocomplete--full-width",
-        trigger: "autocomplete__trigger--full-width",
+        base: "rp-autocomplete--full-width",
+        trigger: "rp-autocomplete__trigger--full-width",
       },
     },
     size: {
       lg: {
-        base: "autocomplete--lg",
-        popover: "autocomplete__popover--lg",
+        base: "rp-autocomplete--lg",
+        popover: "rp-autocomplete__popover--lg",
       },
       md: {},
       sm: {
-        base: "autocomplete--sm",
-        popover: "autocomplete__popover--sm",
+        base: "rp-autocomplete--sm",
+        popover: "rp-autocomplete__popover--sm",
       },
     },
     variant: {
       primary: {
-        base: "autocomplete--primary",
+        base: "rp-autocomplete--primary",
       },
       secondary: {
-        base: "autocomplete--secondary",
+        base: "rp-autocomplete--secondary",
       },
     },
   },

package/src/components/avatar/avatar.styles.ts

@@ -1,6 +1,6 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const avatarVariants = tv({
   defaultVariants: {
@@ -8,43 +8,43 @@ export const avatarVariants = tv({
     size: "md",
   },
   slots: {
-    base: "avatar",
-    fallback: "avatar__fallback",
-    image: "avatar__image",
+    base: "rp-avatar",
+    fallback: "rp-avatar__fallback",
+    image: "rp-avatar__image",
   },
   variants: {
     color: {
       accent: {
-        fallback: "avatar__fallback--accent",
+        fallback: "rp-avatar__fallback--accent",
       },
       danger: {
-        fallback: "avatar__fallback--danger",
+        fallback: "rp-avatar__fallback--danger",
       },
       default: {
-        fallback: "avatar__fallback--default",
+        fallback: "rp-avatar__fallback--default",
       },
       success: {
-        fallback: "avatar__fallback--success",
+        fallback: "rp-avatar__fallback--success",
       },
       warning: {
-        fallback: "avatar__fallback--warning",
+        fallback: "rp-avatar__fallback--warning",
       },
     },
     size: {
       lg: {
-        base: "avatar--lg",
+        base: "rp-avatar--lg",
       },
       md: {
-        base: "avatar--md",
+        base: "rp-avatar--md",
       },
       sm: {
-        base: "avatar--sm",
+        base: "rp-avatar--sm",
       },
     },
     variant: {
       default: {},
       soft: {
-        base: "avatar--soft",
+        base: "rp-avatar--soft",
       },
     },
   },

package/src/components/badge/badge.styles.ts

@@ -1,6 +1,6 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const badgeVariants = tv({
   defaultVariants: {
@@ -10,62 +10,62 @@ export const badgeVariants = tv({
     variant: "primary",
   },
   slots: {
-    anchor: "badge-anchor",
-    base: "badge",
-    label: "badge__label",
+    anchor: "rp-badge-anchor",
+    base: "rp-badge",
+    label: "rp-badge__label",
   },
   variants: {
     color: {
       accent: {
-        base: "badge--accent",
+        base: "rp-badge--accent",
       },
       danger: {
-        base: "badge--danger",
+        base: "rp-badge--danger",
       },
       default: {
-        base: "badge--default",
+        base: "rp-badge--default",
       },
       success: {
-        base: "badge--success",
+        base: "rp-badge--success",
       },
       warning: {
-        base: "badge--warning",
+        base: "rp-badge--warning",
       },
     },
     placement: {
       "bottom-left": {
-        base: "badge--bottom-left",
+        base: "rp-badge--bottom-left",
       },
       "bottom-right": {
-        base: "badge--bottom-right",
+        base: "rp-badge--bottom-right",
       },
       "top-left": {
-        base: "badge--top-left",
+        base: "rp-badge--top-left",
       },
       "top-right": {
-        base: "badge--top-right",
+        base: "rp-badge--top-right",
       },
     },
     size: {
       lg: {
-        base: "badge--lg",
+        base: "rp-badge--lg",
       },
       md: {
-        base: "badge--md",
+        base: "rp-badge--md",
       },
       sm: {
-        base: "badge--sm",
+        base: "rp-badge--sm",
       },
     },
     variant: {
       primary: {
-        base: "badge--primary",
+        base: "rp-badge--primary",
       },
       secondary: {
-        base: "badge--secondary",
+        base: "rp-badge--secondary",
       },
       soft: {
-        base: "badge--soft",
+        base: "rp-badge--soft",
       },
     },
   },

package/src/components/breadcrumbs/breadcrumbs.styles.ts

@@ -1,13 +1,13 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const breadcrumbsVariants = tv({
   slots: {
-    base: "breadcrumbs",
-    item: "breadcrumbs__item",
-    link: "breadcrumbs__link",
-    separator: "breadcrumbs__separator",
+    base: "rp-breadcrumbs",
+    item: "rp-breadcrumbs__item",
+    link: "rp-breadcrumbs__link",
+    separator: "rp-breadcrumbs__separator",
   },
 });
 

package/src/components/button/button.styles.ts

@@ -1,9 +1,9 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const buttonVariants = tv({
-  base: "button",
+  base: "rp-button",
   defaultVariants: {
     fullWidth: false,
     isIconOnly: false,
@@ -13,24 +13,24 @@ export const buttonVariants = tv({
   variants: {
     fullWidth: {
       false: "",
-      true: "button--full-width",
+      true: "rp-button--full-width",
     },
     isIconOnly: {
-      true: "button--icon-only",
+      true: "rp-button--icon-only",
     },
     size: {
-      lg: "button--lg",
-      md: "button--md",
-      sm: "button--sm",
+      lg: "rp-button--lg",
+      md: "rp-button--md",
+      sm: "rp-button--sm",
     },
     variant: {
-      danger: "button--danger",
-      "danger-soft": "button--danger-soft",
-      ghost: "button--ghost",
-      outline: "button--outline",
-      primary: "button--primary",
-      secondary: "button--secondary",
-      tertiary: "button--tertiary",
+      danger: "rp-button--danger",
+      "danger-soft": "rp-button--danger-soft",
+      ghost: "rp-button--ghost",
+      outline: "rp-button--outline",
+      primary: "rp-button--primary",
+      secondary: "rp-button--secondary",
+      tertiary: "rp-button--tertiary",
     },
   },
 });

package/src/components/button-group/button-group.styles.ts

@@ -1,6 +1,6 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const buttonGroupVariants = tv({
   defaultVariants: {
@@ -8,22 +8,22 @@ export const buttonGroupVariants = tv({
     orientation: "horizontal",
   },
   slots: {
-    base: "button-group",
-    separator: "button-group__separator",
+    base: "rp-button-group",
+    separator: "rp-button-group__separator",
   },
   variants: {
     fullWidth: {
       false: {},
       true: {
-        base: "button-group--full-width",
+        base: "rp-button-group--full-width",
       },
     },
     orientation: {
       horizontal: {
-        base: "button-group--horizontal",
+        base: "rp-button-group--horizontal",
       },
       vertical: {
-        base: "button-group--vertical",
+        base: "rp-button-group--vertical",
       },
     },
   },