@ropav/styles 0.5.0 → 0.7.0

package/src/components/toast/toast.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 toastVariants = tv({
   defaultVariants: {
@@ -8,57 +8,57 @@ export const toastVariants = tv({
     variant: "default",
   },
   slots: {
-    action: "toast__action",
-    close: "toast__close-button",
-    content: "toast__content",
-    description: "toast__description",
-    indicator: "toast__indicator",
-    region: "toast-region",
-    title: "toast__title",
-    toast: "toast",
+    action: "rp-toast__action",
+    close: "rp-toast__close-button",
+    content: "rp-toast__content",
+    description: "rp-toast__description",
+    indicator: "rp-toast__indicator",
+    region: "rp-toast-region",
+    title: "rp-toast__title",
+    toast: "rp-toast",
   },
   variants: {
     placement: {
       bottom: {
-        region: "toast-region--bottom",
-        toast: "toast--bottom",
+        region: "rp-toast-region--bottom",
+        toast: "rp-toast--bottom",
       },
       "bottom end": {
-        region: "toast-region--bottom-end",
-        toast: "toast--bottom-end",
+        region: "rp-toast-region--bottom-end",
+        toast: "rp-toast--bottom-end",
       },
       "bottom start": {
-        region: "toast-region--bottom-start",
-        toast: "toast--bottom-start",
+        region: "rp-toast-region--bottom-start",
+        toast: "rp-toast--bottom-start",
       },
       top: {
-        region: "toast-region--top",
-        toast: "toast--top",
+        region: "rp-toast-region--top",
+        toast: "rp-toast--top",
       },
       "top end": {
-        region: "toast-region--top-end",
-        toast: "toast--top-end",
+        region: "rp-toast-region--top-end",
+        toast: "rp-toast--top-end",
       },
       "top start": {
-        region: "toast-region--top-start",
-        toast: "toast--top-start",
+        region: "rp-toast-region--top-start",
+        toast: "rp-toast--top-start",
       },
     },
     variant: {
       accent: {
-        toast: "toast--accent",
+        toast: "rp-toast--accent",
       },
       danger: {
-        toast: "toast--danger",
+        toast: "rp-toast--danger",
       },
       default: {
-        toast: "toast--default",
+        toast: "rp-toast--default",
       },
       success: {
-        toast: "toast--success",
+        toast: "rp-toast--success",
       },
       warning: {
-        toast: "toast--warning",
+        toast: "rp-toast--warning",
       },
     },
   },

package/src/components/toggle-button/toggle-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 toggleButtonVariants = tv({
-  base: "toggle-button",
+  base: "rp-toggle-button",
   defaultVariants: {
     isIconOnly: false,
     size: "md",
@@ -11,16 +11,16 @@ export const toggleButtonVariants = tv({
   },
   variants: {
     isIconOnly: {
-      true: "toggle-button--icon-only",
+      true: "rp-toggle-button--icon-only",
     },
     size: {
-      lg: "toggle-button--lg",
-      md: "toggle-button--md",
-      sm: "toggle-button--sm",
+      lg: "rp-toggle-button--lg",
+      md: "rp-toggle-button--md",
+      sm: "rp-toggle-button--sm",
     },
     variant: {
-      default: "toggle-button--default",
-      ghost: "toggle-button--ghost",
+      default: "rp-toggle-button--default",
+      ghost: "rp-toggle-button--ghost",
     },
   },
 });

package/src/components/toggle-button-group/toggle-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 toggleButtonGroupVariants = tv({
   defaultVariants: {
@@ -9,28 +9,28 @@ export const toggleButtonGroupVariants = tv({
     orientation: "horizontal",
   },
   slots: {
-    base: "toggle-button-group",
-    separator: "toggle-button-group__separator",
+    base: "rp-toggle-button-group",
+    separator: "rp-toggle-button-group__separator",
   },
   variants: {
     fullWidth: {
       false: {},
       true: {
-        base: "toggle-button-group--full-width",
+        base: "rp-toggle-button-group--full-width",
       },
     },
     isDetached: {
       false: {},
       true: {
-        base: "toggle-button-group--detached",
+        base: "rp-toggle-button-group--detached",
       },
     },
     orientation: {
       horizontal: {
-        base: "toggle-button-group--horizontal",
+        base: "rp-toggle-button-group--horizontal",
       },
       vertical: {
-        base: "toggle-button-group--vertical",
+        base: "rp-toggle-button-group--vertical",
       },
     },
   },

package/src/components/toolbar/toolbar.styles.ts

@@ -1,20 +1,20 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 const toolbarVariants = tv({
-  base: "toolbar",
+  base: "rp-toolbar",
   defaultVariants: {
     isAttached: false,
     orientation: "horizontal",
   },
   variants: {
     isAttached: {
-      true: "toolbar--attached",
+      true: "rp-toolbar--attached",
     },
     orientation: {
-      horizontal: "toolbar--horizontal",
-      vertical: "toolbar--vertical",
+      horizontal: "rp-toolbar--horizontal",
+      vertical: "rp-toolbar--vertical",
     },
   },
 });

package/src/components/tooltip/tooltip.styles.ts

@@ -1,11 +1,11 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const tooltipVariants = tv({
   slots: {
-    base: "tooltip",
-    trigger: "tooltip__trigger",
+    base: "rp-tooltip",
+    trigger: "rp-tooltip__trigger",
   },
 });
 

package/src/components/typography/typography.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 typographyVariants = tv({
   defaultVariants: {
@@ -9,40 +9,40 @@ export const typographyVariants = tv({
     type: "body",
   },
   slots: {
-    base: "typography",
-    prose: "typography-prose",
+    base: "rp-typography",
+    prose: "rp-typography-prose",
   },
   variants: {
     align: {
-      center: "typography--align-center",
-      end: "typography--align-end",
-      justify: "typography--align-justify",
-      start: "typography--align-start",
+      center: "rp-typography--align-center",
+      end: "rp-typography--align-end",
+      justify: "rp-typography--align-justify",
+      start: "rp-typography--align-start",
     },
     color: {
-      default: "typography--color-default",
-      muted: "typography--color-muted",
+      default: "rp-typography--color-default",
+      muted: "rp-typography--color-muted",
     },
     truncate: {
-      true: "typography--truncate",
+      true: "rp-typography--truncate",
     },
     type: {
-      body: "typography--body",
-      "body-sm": "typography--body-sm",
-      "body-xs": "typography--body-xs",
-      code: "typography--code",
-      h1: "typography--h1",
-      h2: "typography--h2",
-      h3: "typography--h3",
-      h4: "typography--h4",
-      h5: "typography--h5",
-      h6: "typography--h6",
+      body: "rp-typography--body",
+      "body-sm": "rp-typography--body-sm",
+      "body-xs": "rp-typography--body-xs",
+      code: "rp-typography--code",
+      h1: "rp-typography--h1",
+      h2: "rp-typography--h2",
+      h3: "rp-typography--h3",
+      h4: "rp-typography--h4",
+      h5: "rp-typography--h5",
+      h6: "rp-typography--h6",
     },
     weight: {
-      bold: "typography--weight-bold",
-      medium: "typography--weight-medium",
-      normal: "typography--weight-normal",
-      semibold: "typography--weight-semibold",
+      bold: "rp-typography--weight-bold",
+      medium: "rp-typography--weight-medium",
+      normal: "rp-typography--weight-normal",
+      semibold: "rp-typography--weight-semibold",
     },
   },
 });

package/src/components/virtualizer/virtualizer.styles.ts

@@ -1,4 +1,4 @@
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 /**
  * The parts a windowed collection draws for itself, whichever collection it is.
@@ -8,8 +8,8 @@ import { tv } from "tailwind-variants";
  */
 export const virtualizerVariants = tv({
   slots: {
-    scrollbar: "virtualizer__scrollbar",
-    scrollbarThumb: "virtualizer__scrollbar-thumb",
-    scrollbarTrack: "virtualizer__scrollbar-track",
+    scrollbar: "rp-virtualizer__scrollbar",
+    scrollbarThumb: "rp-virtualizer__scrollbar-thumb",
+    scrollbarTrack: "rp-virtualizer__scrollbar-track",
   },
 });

package/src/index.ts

@@ -1,8 +1,11 @@
-// Re-export tailwind-variants for convenience
-export { tv, cn, type VariantProps } from "tailwind-variants";
+// The type recipes derive their prop unions from; `tv` itself stays internal.
+export type { VariantProps } from "./tv";
 
 // Export utility classes
 export * from "./utils";
 
 // Export all component variants
 export * from "./components";
+
+// The bundled themes, for a consumer that has to build a picker rather than a stylesheet.
+export * from "./themes";

package/src/themes.ts

@@ -0,0 +1,40 @@
+/**
+ * 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 const themeIds = [
+  "default",
+  "hero",
+  "sky",
+  "lavender",
+  "mint",
+  "netflix",
+  "uber",
+  "spotify",
+  "coinbase",
+  "airbnb",
+  "discord",
+  "rabbit",
+] as const;
+
+export type ThemeId = (typeof themeIds)[number];
+
+export const themeLabels: Record<ThemeId, string> = {
+  airbnb: "Airbnb",
+  coinbase: "Coinbase",
+  default: "Default",
+  discord: "Discord",
+  hero: "Hero",
+  lavender: "Lavender",
+  mint: "Mint",
+  netflix: "Netflix",
+  rabbit: "Rabbit",
+  sky: "Sky",
+  spotify: "Spotify",
+  uber: "Uber",
+};

package/src/tv.ts

@@ -0,0 +1,82 @@
+/**
+ * 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 Props = Record<string, unknown>;
+
+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;
+
+const flatten = (value: ClassValue): string =>
+  Array.isArray(value) ? value.map(flatten).filter(Boolean).join(" ") : value || "";
+
+export const tv = <C extends Config>(config: C): Recipe<C> => {
+  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: string, props: Props, inherited: Props = {}): string => {
+    const parts: (string | undefined)[] = [slotClasses[slot]];
+
+    for (const [name, group] of Object.entries(variants ?? {})) {
+      // Key by key rather than by spread: a slot naming a variant it has no value for must fall
+      // through to the root call instead of erasing it.
+      const selected = props[name] ?? inherited[name] ?? defaultVariants?.[name];
+
+      if (typeof selected !== "boolean" && typeof selected !== "string") continue;
+
+      const classes = group[String(selected)];
+
+      // A bare string under `slots` belongs to `base`, the same slot a slotless recipe names.
+      parts.push(
+        typeof classes === "string" ? (slot === "base" ? classes : undefined) : classes?.[slot],
+      );
+    }
+
+    parts.push(flatten(props["class"] as ClassValue));
+
+    return parts.filter(Boolean).join(" ");
+  };
+
+  const recipe = slots
+    ? (props: Props = {}) =>
+        Object.fromEntries(
+          // Only variants are inherited. A `class` on the root call is not: spreading it across
+          // every slot would stamp the caller's classes on the whole component.
+          Object.keys(slots).map((slot) => [slot, (args: Props = {}) => build(slot, args, props)]),
+        )
+    : (props: Props = {}) => build("base", props);
+
+  return recipe as Recipe<C>;
+};