@ropav/styles 0.5.0 → 0.7.0

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.5.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",
       },
     },
   },

package/src/components/calendar/calendar.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 calendarVariants = tv({
   defaultVariants: {},
   slots: {
     /** Root calendar container */
-    base: "calendar",
+    base: "rp-calendar",
     /** Calendar cell (td) */
-    cell: "calendar__cell",
+    cell: "rp-calendar__cell",
     /** Cell indicator (small dot at bottom of cell) */
-    cellIndicator: "calendar__cell-indicator",
+    cellIndicator: "rp-calendar__cell-indicator",
     /** Calendar grid (table) */
-    grid: "calendar__grid",
+    grid: "rp-calendar__grid",
     /** Grid body (tbody) */
-    gridBody: "calendar__grid-body",
+    gridBody: "rp-calendar__grid-body",
     /** Grid header (thead) */
-    gridHeader: "calendar__grid-header",
+    gridHeader: "rp-calendar__grid-header",
     /** Grid row (tr) */
-    gridRow: "calendar__grid-row",
+    gridRow: "rp-calendar__grid-row",
     /** Calendar header containing heading and navigation */
-    header: "calendar__header",
+    header: "rp-calendar__header",
     /** Header cell (th - day names) */
-    headerCell: "calendar__header-cell",
+    headerCell: "rp-calendar__header-cell",
     /** Month/year heading text */
-    heading: "calendar__heading",
+    heading: "rp-calendar__heading",
     /** Previous/Next navigation button */
-    navButton: "calendar__nav-button",
+    navButton: "rp-calendar__nav-button",
     /** Navigation button icon */
-    navButtonIcon: "calendar__nav-button-icon",
+    navButtonIcon: "rp-calendar__nav-button-icon",
   },
   variants: {},
 });

package/src/components/calendar-year-picker/calendar-year-picker.styles.ts

@@ -1,14 +1,14 @@
-import type { VariantProps } from "tailwind-variants";
+import type { VariantProps } from "../../tv";
 
-import { tv } from "tailwind-variants";
+import { tv } from "../../tv";
 
 export const calendarYearPickerVariants = tv({
   slots: {
-    trigger: "calendar-year-picker__trigger",
-    triggerHeading: "calendar-year-picker__trigger-heading",
-    triggerIndicator: "calendar-year-picker__trigger-indicator",
-    yearCell: "calendar-year-picker__year-cell",
-    yearGrid: "calendar-year-picker__year-grid",
+    trigger: "rp-calendar-year-picker__trigger",
+    triggerHeading: "rp-calendar-year-picker__trigger-heading",
+    triggerIndicator: "rp-calendar-year-picker__trigger-indicator",
+    yearCell: "rp-calendar-year-picker__year-cell",
+    yearGrid: "rp-calendar-year-picker__year-grid",
   },
 });