@ropav/styles 0.3.0

package/dist/variants/index.css

@@ -0,0 +1,106 @@
+/**
+ * ================================================================================================
+ * Ropav Custom Tailwind CSS Variants
+ * ================================================================================================
+ *
+ * Custom variants with intelligent fallback: explicit controls override system preferences.
+ *
+ * Usage:
+ *   motion-reduce:opacity-0      - Reduced motion accessibility
+ *   motion-safe:animate-spin     - Full motion effects
+ *   dark:bg-gray-900             - Dark mode styles
+ *
+ * Priority: Explicit data attributes/classes → System preferences (fallback)
+ * ================================================================================================
+ */
+
+/* -------------------------------------------------------------------------------------------------
+ * motion-reduce — Minimize animations for accessibility
+ * Priority: data-reduce-motion="true" → prefers-reduced-motion: reduce
+ * ------------------------------------------------------------------------------------------------- */
+@custom-variant motion-reduce {
+  /* Explicit: data-reduce-motion="true" on element or ancestor */
+  &:is([data-reduce-motion="true"], [data-reduce-motion="true"] *) {
+    @slot;
+
+    &::before,
+    &::after {
+      @slot;
+    }
+  }
+
+  /* Fallback: system prefers-reduced-motion setting */
+  @media (prefers-reduced-motion: reduce) {
+    &:not(:is([data-reduce-motion="true"], [data-reduce-motion="true"] *)) {
+      @slot;
+
+      &::before,
+      &::after {
+        @slot;
+      }
+    }
+  }
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * motion-safe — Enable full animations and transitions
+ * Priority: data-reduce-motion="false" → prefers-reduced-motion: no-preference
+ * ------------------------------------------------------------------------------------------------- */
+@custom-variant motion-safe {
+  /* Explicit: data-reduce-motion="false" on element or ancestor */
+  &:is([data-reduce-motion="false"], [data-reduce-motion="false"] *) {
+    @slot;
+
+    &::before,
+    &::after {
+      @slot;
+    }
+  }
+
+  /* Fallback: system has no motion preference set */
+  @media (prefers-reduced-motion: no-preference) {
+    &:not(
+      :is(
+        [data-reduce-motion="true"],
+        [data-reduce-motion="true"] *,
+        [data-reduce-motion="false"],
+        [data-reduce-motion="false"] *
+      )
+    ) {
+      @slot;
+
+      &::before,
+      &::after {
+        @slot;
+      }
+    }
+  }
+}
+
+/* -------------------------------------------------------------------------------------------------
+ * dark — Dark mode styles
+ * Priority: .dark class / data-theme="dark" → prefers-color-scheme: dark
+ * ------------------------------------------------------------------------------------------------- */
+@custom-variant dark {
+  /* Explicit: .dark class or data-theme="dark" on element or ancestor */
+  &:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *) {
+    @slot;
+
+    &::before,
+    &::after {
+      @slot;
+    }
+  }
+
+  /* Fallback: system prefers dark color scheme */
+  @media (prefers-color-scheme: dark) {
+    &:not(:is(.dark, .dark *, [data-theme="dark"], [data-theme="dark"] *)) & {
+      @slot;
+
+      &::before,
+      &::after {
+        @slot;
+      }
+    }
+  }
+}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "@ropav/styles",
+  "version": "0.3.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",
+  "bugs": {
+    "url": "https://github.com/daopk/ropav/issues"
+  },
+  "license": "Apache-2.0",
+  "author": "daopk",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/daopk/ropav.git",
+    "directory": "packages/styles"
+  },
+  "style": "./dist/index.css",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "style": "./dist/index.css",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./css": {
+      "style": "./dist/index.css",
+      "default": "./dist/index.css"
+    },
+    "./components/*": {
+      "types": "./dist/components/*/index.d.ts",
+      "import": "./dist/components/*/index.js",
+      "default": "./dist/components/*/index.js"
+    },
+    "./base": "./dist/base/base.css",
+    "./base/*.css": "./dist/base/*.css",
+    "./components/*.css": "./dist/components/*.css",
+    "./themes/default": "./dist/themes/default/index.css",
+    "./themes/*/*.css": "./dist/themes/*/*.css",
+    "./themes/*.css": "./dist/themes/*.css",
+    "./utilities": "./dist/utilities/index.css",
+    "./variants": "./dist/variants/index.css",
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "tailwind-variants": "3.3.1",
+    "tw-animate-css": "1.4.0"
+  },
+  "peerDependencies": {
+    "tailwindcss": ">=4.0.0"
+  },
+  "browser": "./dist/ropav.min.css"
+}

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

@@ -0,0 +1,32 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+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",
+  },
+  variants: {
+    variant: {
+      default: {},
+      surface: {
+        base: "accordion--surface",
+      },
+    },
+  },
+});
+
+// Render props that should be excluded from AccordionVariants (framework-specific)
+type DisclosureRenderPropsKeys = "isExpanded" | "isDisabled" | "state";
+
+export type AccordionVariants = Omit<
+  VariantProps<typeof accordionVariants>,
+  DisclosureRenderPropsKeys
+>;

package/src/components/accordion/index.ts

@@ -0,0 +1 @@
+export * from "./accordion.styles";

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

@@ -0,0 +1,37 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const alertVariants = tv({
+  defaultVariants: {
+    status: "default",
+  },
+  slots: {
+    base: "alert",
+    content: "alert__content",
+    description: "alert__description",
+    indicator: "alert__indicator",
+    title: "alert__title",
+  },
+  variants: {
+    status: {
+      accent: {
+        base: "alert--accent",
+      },
+      danger: {
+        base: "alert--danger",
+      },
+      default: {
+        base: "alert--default",
+      },
+      success: {
+        base: "alert--success",
+      },
+      warning: {
+        base: "alert--warning",
+      },
+    },
+  },
+});
+
+export type AlertVariants = VariantProps<typeof alertVariants>;

package/src/components/alert/index.ts

@@ -0,0 +1 @@
+export * from "./alert.styles";

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

@@ -0,0 +1,72 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const alertDialogVariants = tv({
+  defaultVariants: {
+    size: "md",
+    status: "danger",
+    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",
+  },
+  variants: {
+    size: {
+      cover: {
+        dialog: "alert-dialog__dialog--cover",
+      },
+      lg: {
+        dialog: "alert-dialog__dialog--lg",
+      },
+      md: {
+        dialog: "alert-dialog__dialog--md",
+      },
+      sm: {
+        dialog: "alert-dialog__dialog--sm",
+      },
+      xs: {
+        dialog: "alert-dialog__dialog--xs",
+      },
+    },
+    status: {
+      accent: {
+        icon: "alert-dialog__icon--accent",
+      },
+      danger: {
+        icon: "alert-dialog__icon--danger",
+      },
+      default: {
+        icon: "alert-dialog__icon--default",
+      },
+      success: {
+        icon: "alert-dialog__icon--success",
+      },
+      warning: {
+        icon: "alert-dialog__icon--warning",
+      },
+    },
+    variant: {
+      blur: {
+        backdrop: "alert-dialog__backdrop--blur",
+      },
+      opaque: {
+        backdrop: "alert-dialog__backdrop--opaque",
+      },
+      transparent: {
+        backdrop: "alert-dialog__backdrop--transparent",
+      },
+    },
+  },
+});
+
+export type AlertDialogVariants = VariantProps<typeof alertDialogVariants>;

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

@@ -0,0 +1 @@
+export * from "./alert-dialog.styles";

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

@@ -0,0 +1,38 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const autocompleteVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    variant: "primary",
+  },
+  slots: {
+    base: "autocomplete",
+    clearButton: "autocomplete__clear-button",
+    filter: "autocomplete__filter",
+    indicator: "autocomplete__indicator",
+    popover: "autocomplete__popover",
+    trigger: "autocomplete__trigger",
+    value: "autocomplete__value",
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "autocomplete--full-width",
+        trigger: "autocomplete__trigger--full-width",
+      },
+    },
+    variant: {
+      primary: {
+        base: "autocomplete--primary",
+      },
+      secondary: {
+        base: "autocomplete--secondary",
+      },
+    },
+  },
+});
+
+export type AutocompleteVariants = VariantProps<typeof autocompleteVariants>;

package/src/components/autocomplete/index.ts

@@ -0,0 +1 @@
+export * from "./autocomplete.styles";

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

@@ -0,0 +1,53 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const avatarVariants = tv({
+  defaultVariants: {
+    color: "default",
+    size: "md",
+  },
+  slots: {
+    base: "avatar",
+    fallback: "avatar__fallback",
+    image: "avatar__image",
+  },
+  variants: {
+    color: {
+      accent: {
+        fallback: "avatar__fallback--accent",
+      },
+      danger: {
+        fallback: "avatar__fallback--danger",
+      },
+      default: {
+        fallback: "avatar__fallback--default",
+      },
+      success: {
+        fallback: "avatar__fallback--success",
+      },
+      warning: {
+        fallback: "avatar__fallback--warning",
+      },
+    },
+    size: {
+      lg: {
+        base: "avatar--lg",
+      },
+      md: {
+        base: "avatar--md",
+      },
+      sm: {
+        base: "avatar--sm",
+      },
+    },
+    variant: {
+      default: {},
+      soft: {
+        base: "avatar--soft",
+      },
+    },
+  },
+});
+
+export type AvatarVariants = VariantProps<typeof avatarVariants>;

package/src/components/avatar/index.ts

@@ -0,0 +1 @@
+export * from "./avatar.styles";

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

@@ -0,0 +1,74 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const badgeVariants = tv({
+  defaultVariants: {
+    color: "default",
+    placement: "top-right",
+    size: "md",
+    variant: "primary",
+  },
+  slots: {
+    anchor: "badge-anchor",
+    base: "badge",
+    label: "badge__label",
+  },
+  variants: {
+    color: {
+      accent: {
+        base: "badge--accent",
+      },
+      danger: {
+        base: "badge--danger",
+      },
+      default: {
+        base: "badge--default",
+      },
+      success: {
+        base: "badge--success",
+      },
+      warning: {
+        base: "badge--warning",
+      },
+    },
+    placement: {
+      "bottom-left": {
+        base: "badge--bottom-left",
+      },
+      "bottom-right": {
+        base: "badge--bottom-right",
+      },
+      "top-left": {
+        base: "badge--top-left",
+      },
+      "top-right": {
+        base: "badge--top-right",
+      },
+    },
+    size: {
+      lg: {
+        base: "badge--lg",
+      },
+      md: {
+        base: "badge--md",
+      },
+      sm: {
+        base: "badge--sm",
+      },
+    },
+    variant: {
+      primary: {
+        base: "badge--primary",
+      },
+      secondary: {
+        base: "badge--secondary",
+      },
+      soft: {
+        base: "badge--soft",
+      },
+    },
+  },
+});
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>;

package/src/components/badge/index.ts

@@ -0,0 +1 @@
+export * from "./badge.styles";

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

@@ -0,0 +1,14 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const breadcrumbsVariants = tv({
+  slots: {
+    base: "breadcrumbs",
+    item: "breadcrumbs__item",
+    link: "breadcrumbs__link",
+    separator: "breadcrumbs__separator",
+  },
+});
+
+export type BreadcrumbsVariants = VariantProps<typeof breadcrumbsVariants>;

package/src/components/breadcrumbs/index.ts

@@ -0,0 +1 @@
+export * from "./breadcrumbs.styles";

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

@@ -0,0 +1,38 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const buttonVariants = tv({
+  base: "button",
+  defaultVariants: {
+    fullWidth: false,
+    isIconOnly: false,
+    size: "md",
+    variant: "primary",
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "button--full-width",
+    },
+    isIconOnly: {
+      true: "button--icon-only",
+    },
+    size: {
+      lg: "button--lg",
+      md: "button--md",
+      sm: "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",
+    },
+  },
+});
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/src/components/button/index.ts

@@ -0,0 +1 @@
+export * from "./button.styles";

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

@@ -0,0 +1,32 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const buttonGroupVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    orientation: "horizontal",
+  },
+  slots: {
+    base: "button-group",
+    separator: "button-group__separator",
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "button-group--full-width",
+      },
+    },
+    orientation: {
+      horizontal: {
+        base: "button-group--horizontal",
+      },
+      vertical: {
+        base: "button-group--vertical",
+      },
+    },
+  },
+});
+
+export type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>;

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

@@ -0,0 +1 @@
+export * from "./button-group.styles";

package/src/components/calendar/calendar.styles.ts

@@ -0,0 +1,36 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+export const calendarVariants = tv({
+  defaultVariants: {},
+  slots: {
+    /** Root calendar container */
+    base: "calendar",
+    /** Calendar cell (td) */
+    cell: "calendar__cell",
+    /** Cell indicator (small dot at bottom of cell) */
+    cellIndicator: "calendar__cell-indicator",
+    /** Calendar grid (table) */
+    grid: "calendar__grid",
+    /** Grid body (tbody) */
+    gridBody: "calendar__grid-body",
+    /** Grid header (thead) */
+    gridHeader: "calendar__grid-header",
+    /** Grid row (tr) */
+    gridRow: "calendar__grid-row",
+    /** Calendar header containing heading and navigation */
+    header: "calendar__header",
+    /** Header cell (th - day names) */
+    headerCell: "calendar__header-cell",
+    /** Month/year heading text */
+    heading: "calendar__heading",
+    /** Previous/Next navigation button */
+    navButton: "calendar__nav-button",
+    /** Navigation button icon */
+    navButtonIcon: "calendar__nav-button-icon",
+  },
+  variants: {},
+});
+
+export type CalendarVariants = VariantProps<typeof calendarVariants>;

package/src/components/calendar/index.ts

@@ -0,0 +1 @@
+export * from "./calendar.styles";

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

@@ -0,0 +1,15 @@
+import type { VariantProps } from "tailwind-variants";
+
+import { tv } from "tailwind-variants";
+
+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",
+  },
+});
+
+export type CalendarYearPickerVariants = VariantProps<typeof calendarYearPickerVariants>;

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

@@ -0,0 +1 @@
+export * from "./calendar-year-picker.styles";