@auronui/styles 1.0.0

package/src/components/number-field/number-field.styles.ts

@@ -0,0 +1,80 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const numberFieldVariants = tv({
+  slots: {
+    base: "number-field",
+    group: "number-field__group",
+    input: "number-field__input",
+    incrementButton: "number-field__increment-button",
+    decrementButton: "number-field__decrement-button",
+  },
+  defaultVariants: {
+    variant: "flat",
+    size: "md",
+    color: "default",
+    fullWidth: false,
+    isInvalid: false,
+    isDisabled: false,
+    isReadonly: false,
+  },
+  variants: {
+    variant: {
+      flat:       { base: "number-field--flat" },
+      bordered:   { base: "number-field--bordered" },
+      faded:      { base: "number-field--faded" },
+      underlined: { base: "number-field--underlined" },
+      raised:     { base: "number-field--raised" },
+    },
+    size: {
+      sm: {
+        base: "number-field--sm",
+        group: "number-field__group--sm",
+        incrementButton: "number-field__increment-button--sm",
+        decrementButton: "number-field__decrement-button--sm",
+      },
+      md: {
+        base: "",
+        group: "",
+        incrementButton: "",
+        decrementButton: "",
+      },
+      lg: {
+        base: "number-field--lg",
+        group: "number-field__group--lg",
+        incrementButton: "number-field__increment-button--lg",
+        decrementButton: "number-field__decrement-button--lg",
+      },
+    },
+    color: {
+      default:   { base: "number-field--default" },
+      primary:   { base: "number-field--primary" },
+      secondary: { base: "number-field--secondary" },
+      success:   { base: "number-field--success" },
+      warning:   { base: "number-field--warning" },
+      danger:    { base: "number-field--danger" },
+    },
+    fullWidth: {
+      false: {},
+      true:  {
+        base: "number-field--full-width",
+        group: "number-field__group--full-width",
+      },
+    },
+    isInvalid: {
+      false: {},
+      true:  { base: "number-field--invalid" },
+    },
+    isDisabled: {
+      false: {},
+      true:  { base: "number-field--disabled" },
+    },
+    isReadonly: {
+      false: {},
+      true:  { base: "number-field--readonly" },
+    },
+  },
+});
+
+export type NumberFieldVariants = VariantProps<typeof numberFieldVariants>;

package/src/components/pagination/index.ts

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

package/src/components/pagination/pagination.styles.ts

@@ -0,0 +1,32 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const paginationVariants = tv({
+  defaultVariants: {
+    size: "md",
+  },
+  slots: {
+    base: "pagination",
+    content: "pagination__content",
+    ellipsis: "pagination__ellipsis",
+    item: "pagination__item",
+    link: "pagination__link",
+    summary: "pagination__summary",
+  },
+  variants: {
+    size: {
+      lg: {
+        base: "pagination--lg",
+      },
+      md: {
+        base: "pagination--md",
+      },
+      sm: {
+        base: "pagination--sm",
+      },
+    },
+  },
+});
+
+export type PaginationVariants = VariantProps<typeof paginationVariants>;

package/src/components/popover/index.ts

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

package/src/components/popover/popover.styles.ts

@@ -0,0 +1,14 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const popoverVariants = tv({
+  slots: {
+    base: "popover",
+    dialog: "popover__dialog",
+    heading: "popover__heading",
+    trigger: "popover__trigger",
+  },
+});
+
+export type PopoverVariants = VariantProps<typeof popoverVariants>;

package/src/components/progress-bar/index.ts

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

package/src/components/progress-bar/progress-bar.styles.ts

@@ -0,0 +1,97 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const progressBarVariants = tv({
+  defaultVariants: {
+    color: "default",
+    size: "md",
+    radius: "full",
+    isStriped: false,
+    isIndeterminate: false,
+    isDisabled: false,
+  },
+  slots: {
+    base: "progress-bar",
+    labelWrapper: "progress-bar__label-wrapper flex justify-between",
+    label: "progress-bar__label text-sm font-medium text-foreground",
+    value: "progress-bar__value text-sm font-medium text-foreground",
+    track: "progress-bar__track",
+    indicator: "progress-bar__indicator transition-transform duration-300 ease-out",
+  },
+  variants: {
+    color: {
+      default: {
+        indicator: "bg-default-400 progress-bar--default",
+      },
+      primary: {
+        indicator: "bg-primary progress-bar--primary",
+      },
+      secondary: {
+        indicator: "bg-secondary progress-bar--secondary",
+      },
+      success: {
+        indicator: "bg-success progress-bar--success",
+      },
+      warning: {
+        indicator: "bg-warning progress-bar--warning",
+      },
+      danger: {
+        indicator: "bg-danger progress-bar--danger",
+      },
+      accent: {
+        indicator: "bg-primary progress-bar--accent",
+      },
+    },
+    size: {
+      sm: {
+        track: "h-1 rounded-full progress-bar--sm",
+      },
+      md: {
+        track: "h-2 rounded-full progress-bar--md",
+      },
+      lg: {
+        track: "h-3 rounded-full progress-bar--lg",
+      },
+    },
+    radius: {
+      none: {
+        track: "rounded-none",
+        indicator: "rounded-none",
+      },
+      sm: {
+        track: "rounded-sm",
+        indicator: "rounded-sm",
+      },
+      md: {
+        track: "rounded-md",
+        indicator: "rounded-md",
+      },
+      lg: {
+        track: "rounded-lg",
+        indicator: "rounded-lg",
+      },
+      full: {
+        track: "rounded-full",
+        indicator: "rounded-full",
+      },
+    },
+    isStriped: {
+      true: {
+        indicator: "progress-bar__indicator--striped",
+      },
+    },
+    isIndeterminate: {
+      true: {
+        indicator: "progress-bar__indicator--indeterminate animate-indeterminate",
+      },
+    },
+    isDisabled: {
+      true: {
+        base: "opacity-50 cursor-not-allowed",
+      },
+    },
+  },
+});
+
+export type ProgressBarVariants = VariantProps<typeof progressBarVariants>;

package/src/components/progress-circle/index.ts

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

package/src/components/progress-circle/progress-circle.styles.ts

@@ -0,0 +1,74 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const progressCircleVariants = tv({
+  defaultVariants: {
+    color: "default",
+    size: "md",
+    isIndeterminate: false,
+    isDisabled: false,
+  },
+  slots: {
+    base: "progress-circle relative inline-flex items-center justify-center",
+    svg: "progress-circle__svg",
+    track: "progress-circle__track stroke-default-200",
+    indicator: "progress-circle__indicator",
+    label: "progress-circle__label absolute flex items-center justify-center",
+    value: "progress-circle__value text-sm font-medium text-foreground",
+  },
+  variants: {
+    color: {
+      default: {
+        indicator: "stroke-default-foreground progress-circle--default",
+      },
+      primary: {
+        indicator: "stroke-accent progress-circle--primary",
+      },
+      secondary: {
+        indicator: "stroke-default-foreground progress-circle--secondary",
+      },
+      success: {
+        indicator: "stroke-success progress-circle--success",
+      },
+      warning: {
+        indicator: "stroke-warning progress-circle--warning",
+      },
+      danger: {
+        indicator: "stroke-danger progress-circle--danger",
+      },
+      accent: {
+        indicator: "stroke-accent progress-circle--accent",
+      },
+    },
+    size: {
+      sm: {
+        base: "h-12 w-12 progress-circle--sm",
+        svg: "h-12 w-12",
+        value: "text-xs",
+      },
+      md: {
+        base: "h-16 w-16 progress-circle--md",
+        svg: "h-16 w-16",
+        value: "text-sm",
+      },
+      lg: {
+        base: "h-24 w-24 progress-circle--lg",
+        svg: "h-24 w-24",
+        value: "text-base",
+      },
+    },
+    isIndeterminate: {
+      true: {
+        svg: "animate-spin",
+      },
+    },
+    isDisabled: {
+      true: {
+        base: "opacity-50 cursor-not-allowed",
+      },
+    },
+  },
+});
+
+export type ProgressCircleVariants = VariantProps<typeof progressCircleVariants>;

package/src/components/radio/index.ts

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

package/src/components/radio/radio.styles.ts

@@ -0,0 +1,14 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const radioVariants = tv({
+  slots: {
+    base: "radio",
+    content: "radio__content",
+    control: "radio__control",
+    indicator: "radio__indicator",
+  },
+});
+
+export type RadioVariants = VariantProps<typeof radioVariants>;

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

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

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

@@ -0,0 +1,18 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const radioGroupVariants = tv({
+  base: "radio-group",
+  defaultVariants: {
+    variant: "primary",
+  },
+  variants: {
+    variant: {
+      primary: "radio-group--primary",
+      secondary: "radio-group--secondary",
+    },
+  },
+});
+
+export type RadioGroupVariants = VariantProps<typeof radioGroupVariants>;

package/src/components/range-calendar/index.ts

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

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

@@ -0,0 +1,60 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const rangeCalendarVariants = tv({
+  defaultVariants: {},
+  slots: {
+    /** Root range calendar container */
+    base: "range-calendar",
+    /** Calendar cell (td) */
+    cell: "range-calendar__cell",
+    /** Inner cell trigger button (renders the day number, hover + cap circle) */
+    cellButton: "range-calendar__cell-button",
+    /** Cell indicator (small dot at bottom of cell) */
+    cellIndicator: "range-calendar__cell-indicator",
+    /** Calendar grid (table) */
+    grid: "range-calendar__grid",
+    /** Grid body (tbody) */
+    gridBody: "range-calendar__grid-body",
+    /** Grid header (thead) */
+    gridHeader: "range-calendar__grid-header",
+    /** Grid row (tr) */
+    gridRow: "range-calendar__grid-row",
+    /** Calendar header containing heading and navigation */
+    header: "range-calendar__header",
+    /** Header cell (th - day names) */
+    headerCell: "range-calendar__header-cell",
+    /** Month/year heading text */
+    heading: "range-calendar__heading",
+    /** Clickable heading button that cycles date/month/year views */
+    headingButton: "range-calendar__heading-button px-4 py-2",
+    /** Month-view grid (3 cols x 4 rows of month cells) */
+    monthGrid: "range-calendar__month-grid",
+    /** Month-view grid body (tbody) */
+    monthGridBody: "range-calendar__month-grid-body",
+    /** Month-view grid row (tr) */
+    monthGridRow: "range-calendar__month-grid-row",
+    /** Month cell (button per month) */
+    monthCell: "range-calendar__month-cell px-4 py-2",
+    /** Month cell label */
+    monthCellLabel: "range-calendar__month-cell-label",
+    /** Year-view grid (3 cols x 4 rows of year cells) */
+    yearGrid: "range-calendar__year-grid",
+    /** Year-view grid body (tbody) */
+    yearGridBody: "range-calendar__year-grid-body",
+    /** Year-view grid row (tr) */
+    yearGridRow: "range-calendar__year-grid-row",
+    /** Year cell (button per year) */
+    yearCell: "range-calendar__year-cell px-4 py-2",
+    /** Year cell label */
+    yearCellLabel: "range-calendar__year-cell-label",
+    /** Previous/Next navigation button */
+    navButton: "range-calendar__nav-button",
+    /** Navigation button icon */
+    navButtonIcon: "range-calendar__nav-button-icon",
+  },
+  variants: {},
+});
+
+export type RangeCalendarVariants = VariantProps<typeof rangeCalendarVariants>;

package/src/components/scroll-shadow/index.ts

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

package/src/components/scroll-shadow/scroll-shadow.styles.ts

@@ -0,0 +1,37 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const scrollShadowVariants = tv({
+  defaultVariants: {
+    hideScrollBar: false,
+    orientation: "vertical",
+    variant: "fade",
+  },
+  slots: {
+    base: "scroll-shadow",
+  },
+  variants: {
+    hideScrollBar: {
+      false: {},
+      true: {
+        base: "scroll-shadow--hide-scrollbar",
+      },
+    },
+    orientation: {
+      horizontal: {
+        base: "scroll-shadow--horizontal",
+      },
+      vertical: {
+        base: "scroll-shadow--vertical",
+      },
+    },
+    variant: {
+      fade: {
+        base: "scroll-shadow--fade",
+      },
+    },
+  },
+});
+
+export type ScrollShadowVariants = VariantProps<typeof scrollShadowVariants>;

package/src/components/select/index.ts

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

package/src/components/select/select.styles.ts

@@ -0,0 +1,86 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const selectVariants = tv({
+  slots: {
+    base: "select-root",
+    mainWrapper: "select__main-wrapper",
+    trigger: "select__trigger",
+    value: "select__value",
+    startContent: "select__start-content",
+    indicator: "select__indicator",
+    label: "select__label",
+    helperWrapper: "select__helper-wrapper",
+    description: "select__description",
+    errorMessage: "select__error-message",
+    popover: "select__popover",
+  },
+  defaultVariants: {
+    variant: "flat",
+    size: "md",
+    color: "default",
+    fullWidth: false,
+    isInvalid: false,
+    isDisabled: false,
+    isReadonly: false,
+    hasLabel: false,
+    labelPlacement: "inside",
+  },
+  variants: {
+    variant: {
+      flat:       { trigger: "select__trigger--flat" },
+      bordered:   { trigger: "select__trigger--bordered" },
+      faded:      { trigger: "select__trigger--faded" },
+      underlined: { trigger: "select__trigger--underlined" },
+      raised:     { trigger: "select__trigger--raised" },
+    },
+    size: {
+      sm: { trigger: "select__trigger--sm" },
+      md: {},
+      lg: { trigger: "select__trigger--lg" },
+    },
+    color: {
+      default:   { trigger: "select__trigger--default" },
+      primary:   { trigger: "select__trigger--primary" },
+      secondary: { trigger: "select__trigger--secondary" },
+      success:   { trigger: "select__trigger--success" },
+      warning:   { trigger: "select__trigger--warning" },
+      danger:    { trigger: "select__trigger--danger" },
+    },
+    fullWidth: {
+      false: {},
+      true:  { base: "select-root--full-width", trigger: "select__trigger--full-width" },
+    },
+    isInvalid: {
+      false: {},
+      true:  { base: "select-root--invalid", trigger: "select__trigger--invalid" },
+    },
+    isDisabled: {
+      false: {},
+      true:  { base: "select-root--disabled", trigger: "select__trigger--disabled" },
+    },
+    isReadonly: {
+      false: {},
+      true:  { trigger: "select__trigger--readonly" },
+    },
+    hasLabel: {
+      false: {},
+      true:  {},
+    },
+    labelPlacement: {
+      inside:         { base: "select-root--label-inside" },
+      outside:        { base: "select-root--label-outside" },
+      "outside-left": { base: "select-root--label-outside-left" },
+    },
+  },
+  compoundVariants: [
+    {
+      hasLabel: true,
+      labelPlacement: "inside",
+      class: { trigger: "select__trigger--label-inside" },
+    },
+  ],
+});
+
+export type SelectVariants = VariantProps<typeof selectVariants>;

package/src/components/separator/index.ts

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

package/src/components/separator/separator.styles.ts

@@ -0,0 +1,25 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+const separatorVariants = tv({
+  base: "separator",
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "default",
+  },
+  variants: {
+    orientation: {
+      horizontal: "separator--horizontal",
+      vertical: "separator--vertical",
+    },
+    variant: {
+      default: "separator--default",
+      secondary: "separator--secondary",
+      tertiary: "separator--tertiary",
+    },
+  },
+});
+
+export {separatorVariants};
+export type SeparatorVariants = VariantProps<typeof separatorVariants>;

package/src/components/skeleton/index.ts

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

package/src/components/skeleton/skeleton.styles.ts

@@ -0,0 +1,21 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const skeletonVariants = tv({
+  defaultVariants: {
+    animationType: "shimmer",
+  },
+  slots: {
+    base: "skeleton",
+  },
+  variants: {
+    animationType: {
+      none: "skeleton--none",
+      pulse: "skeleton--pulse",
+      shimmer: "skeleton--shimmer",
+    },
+  },
+});
+
+export type SkeletonVariants = VariantProps<typeof skeletonVariants>;

package/src/components/slider/index.ts

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

package/src/components/slider/slider.styles.ts

@@ -0,0 +1,40 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const sliderVariants = tv({
+  slots: {
+    base: "slider",
+    fill: "slider__fill",
+    marks: "slider__marks",
+    output: "slider__output",
+    thumb: "slider__thumb",
+    track: "slider__track",
+  },
+  variants: {
+    size: {
+      sm: { track: "slider--size-sm", thumb: "slider--size-sm" },
+      md: { track: "slider--size-md", thumb: "slider--size-md" },
+      lg: { track: "slider--size-lg", thumb: "slider--size-lg" },
+    },
+    color: {
+      primary:   { fill: "slider--primary",   thumb: "slider--primary" },
+      secondary: { fill: "slider--secondary", thumb: "slider--secondary" },
+      success:   { fill: "slider--success",   thumb: "slider--success" },
+      warning:   { fill: "slider--warning",   thumb: "slider--warning" },
+      danger:    { fill: "slider--danger",    thumb: "slider--danger" },
+    },
+    radius: {
+      none: { track: "slider--radius-none", thumb: "slider--radius-none" },
+      sm:   { track: "slider--radius-sm",   thumb: "slider--radius-sm" },
+      md:   { track: "slider--radius-md",   thumb: "slider--radius-md" },
+      lg:   { track: "slider--radius-lg",   thumb: "slider--radius-lg" },
+      full: { track: "slider--radius-full", thumb: "slider--radius-full" },
+    },
+  },
+  defaultVariants: {
+    color: "primary",
+  },
+});
+
+export type SliderVariants = VariantProps<typeof sliderVariants>;

package/src/components/spinner/index.ts

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

package/src/components/spinner/spinner.styles.ts

@@ -0,0 +1,28 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const spinnerVariants = tv({
+  base: "spinner",
+  defaultVariants: {
+    color: "accent",
+    size: "md",
+  },
+  variants: {
+    color: {
+      accent: "spinner--accent",
+      current: "spinner--current",
+      danger: "spinner--danger",
+      success: "spinner--success",
+      warning: "spinner--warning",
+    },
+    size: {
+      lg: "spinner--lg",
+      md: "spinner--md",
+      sm: "spinner--sm",
+      xl: "spinner--xl",
+    },
+  },
+});
+
+export type SpinnerVariants = VariantProps<typeof spinnerVariants>;