@auronui/styles 1.0.0

package/src/components/aspect-ratio/aspect-ratio.styles.ts

@@ -0,0 +1,10 @@
+import type {VariantProps} from "../../utils";
+import { tv } from "tailwind-variants";
+
+export const aspectRatioVariants = tv({
+  slots: {
+    base: "aspect-ratio",
+  },
+});
+
+export type AspectRatioVariants = VariantProps<typeof aspectRatioVariants>;

package/src/components/aspect-ratio/index.ts

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

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

@@ -0,0 +1,86 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const autocompleteVariants = tv({
+  slots: {
+    base: "autocomplete-root",
+    mainWrapper: "autocomplete__main-wrapper",
+    trigger: "autocomplete__trigger",
+    input: "autocomplete__input",
+    startContent: "autocomplete__start-content",
+    indicator: "autocomplete__indicator",
+    clearButton: "autocomplete__clear-button",
+    label: "autocomplete__label",
+    helperWrapper: "autocomplete__helper-wrapper",
+    description: "autocomplete__description",
+    errorMessage: "autocomplete__error-message",
+  },
+  defaultVariants: {
+    variant: "flat",
+    size: "md",
+    color: "default",
+    fullWidth: false,
+    isInvalid: false,
+    isDisabled: false,
+    isReadonly: false,
+    hasLabel: false,
+    labelPlacement: "inside",
+  },
+  variants: {
+    variant: {
+      flat:       { trigger: "autocomplete__trigger--flat" },
+      bordered:   { trigger: "autocomplete__trigger--bordered" },
+      faded:      { trigger: "autocomplete__trigger--faded" },
+      underlined: { trigger: "autocomplete__trigger--underlined" },
+      raised:     { trigger: "autocomplete__trigger--raised" },
+    },
+    size: {
+      sm: { trigger: "autocomplete__trigger--sm" },
+      md: {},
+      lg: { trigger: "autocomplete__trigger--lg" },
+    },
+    color: {
+      default:   { trigger: "autocomplete__trigger--default" },
+      primary:   { trigger: "autocomplete__trigger--primary" },
+      secondary: { trigger: "autocomplete__trigger--secondary" },
+      success:   { trigger: "autocomplete__trigger--success" },
+      warning:   { trigger: "autocomplete__trigger--warning" },
+      danger:    { trigger: "autocomplete__trigger--danger" },
+    },
+    fullWidth: {
+      false: {},
+      true:  { base: "autocomplete-root--full-width", trigger: "autocomplete__trigger--full-width" },
+    },
+    isInvalid: {
+      false: {},
+      true:  { base: "autocomplete-root--invalid", trigger: "autocomplete__trigger--invalid" },
+    },
+    isDisabled: {
+      false: {},
+      true:  { base: "autocomplete-root--disabled", trigger: "autocomplete__trigger--disabled" },
+    },
+    isReadonly: {
+      false: {},
+      true:  { trigger: "autocomplete__trigger--readonly" },
+    },
+    hasLabel: {
+      false: {},
+      true:  {},
+    },
+    labelPlacement: {
+      inside:         { base: "autocomplete-root--label-inside" },
+      outside:        { base: "autocomplete-root--label-outside" },
+      "outside-left": { base: "autocomplete-root--label-outside-left" },
+    },
+  },
+  compoundVariants: [
+    {
+      hasLabel: true,
+      labelPlacement: "inside",
+      class: { trigger: "autocomplete__trigger--label-inside" },
+    },
+  ],
+});
+
+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 "../../utils";
+
+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,77 @@
+import type {VariantProps} from "../../utils";
+
+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",
+      },
+      xs: {
+        base: "badge--xs",
+      },
+    },
+    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 "../../utils";
+
+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/__tests__/button.styles.test.ts

@@ -0,0 +1,79 @@
+import { describe, it, expect } from 'vitest'
+import { buttonVariants } from '../button.styles'
+
+describe('buttonVariants (slots)', () => {
+  it('returns slot functions for base, startContent, label, endContent, spinner', () => {
+    const slots = buttonVariants({})
+    expect(typeof slots.base).toBe('function')
+    expect(typeof slots.startContent).toBe('function')
+    expect(typeof slots.label).toBe('function')
+    expect(typeof slots.endContent).toBe('function')
+    expect(typeof slots.spinner).toBe('function')
+  })
+
+  it('base slot includes "button" class always', () => {
+    expect(buttonVariants({}).base()).toContain('button')
+  })
+
+  it('primary variant (default)', () => {
+    expect(buttonVariants({ variant: 'primary' }).base()).toContain('button--primary')
+  })
+
+  it('success variant', () => {
+    expect(buttonVariants({ variant: 'success' }).base()).toContain('button--success')
+  })
+
+  it('success-soft variant', () => {
+    expect(buttonVariants({ variant: 'success-soft' }).base()).toContain('button--success-soft')
+  })
+
+  it('warning variant', () => {
+    expect(buttonVariants({ variant: 'warning' }).base()).toContain('button--warning')
+  })
+
+  it('warning-soft variant', () => {
+    expect(buttonVariants({ variant: 'warning-soft' }).base()).toContain('button--warning-soft')
+  })
+
+  it('danger variant', () => {
+    expect(buttonVariants({ variant: 'danger' }).base()).toContain('button--danger')
+  })
+
+  it('danger-soft variant', () => {
+    expect(buttonVariants({ variant: 'danger-soft' }).base()).toContain('button--danger-soft')
+  })
+
+  it('isLoading=true adds button--loading to base', () => {
+    expect(buttonVariants({ isLoading: true }).base()).toContain('button--loading')
+  })
+
+  it('isLoading=true adds button__label--loading to label', () => {
+    expect(buttonVariants({ isLoading: true }).label()).toContain('button__label--loading')
+  })
+
+  it('isLoading=false (default) does not add loading classes', () => {
+    const slots = buttonVariants({ isLoading: false })
+    expect(slots.base()).not.toContain('button--loading')
+    expect(slots.label()).not.toContain('button__label--loading')
+  })
+
+  it('startContent slot', () => {
+    expect(buttonVariants({}).startContent()).toContain('button__start-content')
+  })
+
+  it('endContent slot', () => {
+    expect(buttonVariants({}).endContent()).toContain('button__end-content')
+  })
+
+  it('spinner slot', () => {
+    expect(buttonVariants({}).spinner()).toContain('button__spinner')
+  })
+
+  it('fullWidth=true adds button--full-width', () => {
+    expect(buttonVariants({ fullWidth: true }).base()).toContain('button--full-width')
+  })
+
+  it('isIconOnly=true adds button--icon-only', () => {
+    expect(buttonVariants({ isIconOnly: true }).base()).toContain('button--icon-only')
+  })
+})

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

@@ -0,0 +1,65 @@
+import type {VariantProps} from "../../utils";
+import { tv } from "tailwind-variants";
+
+export const buttonVariants = tv({
+  slots: {
+    base: "button",
+    startContent: "button__start-content",
+    label: "button__label",
+    endContent: "button__end-content",
+    spinner: "button__spinner",
+  },
+  defaultVariants: {
+    fullWidth: false,
+    isIconOnly: false,
+    isLoading: false,
+    size: "md",
+    variant: "primary",
+  },
+  variants: {
+    fullWidth: {
+      false: { base: "" },
+      true: { base: "button--full-width" },
+    },
+    isIconOnly: {
+      false: {},
+      true: { base: "button--icon-only" },
+    },
+    isLoading: {
+      false: {},
+      true: {
+        base: "button--loading",
+        label: "button__label--loading",
+      },
+    },
+    radius: {
+      none: { base: "button--radius-none" },
+      sm: { base: "button--radius-sm" },
+      md: { base: "button--radius-md" },
+      lg: { base: "button--radius-lg" },
+      full: { base: "button--radius-full" },
+    },
+    size: {
+      xl: { base: "button--xl" },
+      lg: { base: "button--lg" },
+      md: { base: "button--md" },
+      sm: { base: "button--sm" },
+      xs: { base: "button--xs" },
+    },
+    variant: {
+      danger: { base: "button--danger" },
+      "danger-soft": { base: "button--danger-soft" },
+      ghost: { base: "button--ghost" },
+      outline: { base: "button--outline" },
+      primary: { base: "button--primary" },
+      secondary: { base: "button--secondary" },
+      success: { base: "button--success" },
+      "success-soft": { base: "button--success-soft" },
+      tertiary: { base: "button--tertiary" },
+      warning: { base: "button--warning" },
+      "warning-soft": { base: "button--warning-soft" },
+    },
+  },
+});
+
+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 "../../utils";
+
+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,60 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const calendarVariants = tv({
+  defaultVariants: {},
+  slots: {
+    /** Root calendar container */
+    base: "calendar",
+    /** Calendar cell (td) */
+    cell: "calendar__cell",
+    /** Inner cell trigger button (full-cell hit target over the TD's circle) */
+    cellButton: "calendar__cell-button",
+    /** 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",
+    /** Clickable heading button that cycles date/month/year views */
+    headingButton: "calendar__heading-button px-4 py-2",
+    /** Month-view grid (3 cols x 4 rows of month cells) */
+    monthGrid: "calendar__month-grid",
+    /** Month-view grid body (tbody) */
+    monthGridBody: "calendar__month-grid-body",
+    /** Month-view grid row (tr) */
+    monthGridRow: "calendar__month-grid-row",
+    /** Month cell (button per month) */
+    monthCell: "calendar__month-cell px-4 py-2",
+    /** Month cell label */
+    monthCellLabel: "calendar__month-cell-label",
+    /** Year-view grid (3 cols x 4 rows of year cells) */
+    yearGrid: "calendar__year-grid",
+    /** Year-view grid body (tbody) */
+    yearGridBody: "calendar__year-grid-body",
+    /** Year-view grid row (tr) */
+    yearGridRow: "calendar__year-grid-row",
+    /** Year cell (button per year) */
+    yearCell: "calendar__year-cell px-4 py-2",
+    /** Year cell label */
+    yearCellLabel: "calendar__year-cell-label",
+    /** 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 "../../utils";
+
+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";

package/src/components/card/card.styles.ts

@@ -0,0 +1,65 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+const cardVariants = tv({
+  defaultVariants: {
+    variant: "default",
+    shadow: "sm",
+    radius: "lg",
+    isHoverable: false,
+    isPressable: false,
+    isDisabled: false,
+    fullWidth: false,
+  },
+  slots: {
+    base: "card",
+    content: "card__content",
+    description: "card__description",
+    footer: "card__footer",
+    header: "card__header",
+    title: "card__title",
+  },
+  variants: {
+    variant: {
+      default: {base: "card--default"},
+      secondary: {base: "card--secondary"},
+      tertiary: {base: "card--tertiary"},
+      transparent: {base: "card--transparent"},
+      bordered: {base: "card--bordered"},
+      blurred: {base: "card--blurred"},
+    },
+    shadow: {
+      none: {base: "card--shadow-none"},
+      sm: {base: "card--shadow-sm"},
+      md: {base: "card--shadow-md"},
+      lg: {base: "card--shadow-lg"},
+    },
+    radius: {
+      none: {base: "card--radius-none"},
+      sm: {base: "card--radius-sm"},
+      md: {base: "card--radius-md"},
+      lg: {base: "card--radius-lg"},
+      xl: {base: ""},
+    },
+    isHoverable: {
+      true: {base: "card--hoverable"},
+      false: {},
+    },
+    isPressable: {
+      true: {base: "card--pressable"},
+      false: {},
+    },
+    isDisabled: {
+      true: {base: "card--disabled"},
+      false: {},
+    },
+    fullWidth: {
+      true: {base: "card--full-width"},
+      false: {},
+    },
+  },
+});
+
+export {cardVariants};
+export type CardVariants = VariantProps<typeof cardVariants>;

package/src/components/card/index.ts

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

package/src/components/checkbox/checkbox.styles.ts

@@ -0,0 +1,27 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const checkboxVariants = tv({
+  defaultVariants: {
+    variant: "primary",
+  },
+  slots: {
+    base: "checkbox",
+    content: "checkbox__content",
+    control: "checkbox__control",
+    indicator: "checkbox__indicator",
+  },
+  variants: {
+    variant: {
+      primary: {
+        base: "checkbox--primary",
+      },
+      secondary: {
+        base: "checkbox--secondary",
+      },
+    },
+  },
+});
+
+export type CheckboxVariants = VariantProps<typeof checkboxVariants>;

package/src/components/checkbox/index.ts

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

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

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

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

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