@auronui/styles 1.0.0

package/src/components/chip/chip.styles.ts

@@ -0,0 +1,65 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const chipVariants = tv({
+  defaultVariants: {
+    color: "default",
+    variant: "solid",
+    size: "md",
+  },
+  slots: {
+    base: "chip",
+    label: "chip__label",
+    dot: "chip__dot",
+    startContent: "chip__start-content",
+    endContent: "chip__end-content",
+    closeButton: "chip__close-button",
+  },
+  variants: {
+    color: {
+      accent: {
+        base: "chip--accent",
+      },
+      danger: {
+        base: "chip--danger",
+      },
+      default: {
+        base: "chip--default",
+      },
+      success: {
+        base: "chip--success",
+      },
+      warning: {
+        base: "chip--warning",
+      },
+    },
+    size: {
+      lg: {
+        base: "chip--lg",
+      },
+      md: {
+        base: "chip--md",
+      },
+      sm: {
+        base: "chip--sm",
+      },
+    },
+    variant: {
+      solid: {
+        base: "chip--solid",
+      },
+      soft: {
+        base: "chip--soft",
+      },
+      outlined: {
+        base: "chip--outlined",
+      },
+      text: {
+        base: "chip--text",
+      },
+    },
+  },
+});
+
+export type ChipVariants = VariantProps<typeof chipVariants>;

package/src/components/chip/index.ts

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

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

@@ -0,0 +1,17 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const closeButtonVariants = tv({
+  base: "close-button",
+  defaultVariants: {
+    variant: "default",
+  },
+  variants: {
+    variant: {
+      default: "close-button--default",
+    },
+  },
+});
+
+export type CloseButtonVariants = VariantProps<typeof closeButtonVariants>;

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

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

package/src/components/collapsible/collapsible.styles.ts

@@ -0,0 +1,25 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const collapsibleVariants = tv({
+  defaultVariants: {},
+  slots: {
+    base: "collapsible",
+    body: "collapsible__body",
+    bodyInner: "collapsible__body-inner",
+    content: "collapsible__content",
+    heading: "collapsible__heading",
+    indicator: "collapsible__indicator",
+    trigger: "collapsible__trigger",
+  },
+  variants: {},
+});
+
+// Render props that should be excluded from CollapsibleVariants (framework-specific)
+type CollapsibleRenderPropsKeys = "isExpanded" | "isDisabled" | "state";
+
+export type CollapsibleVariants = Omit<
+  VariantProps<typeof collapsibleVariants>,
+  CollapsibleRenderPropsKeys
+>;

package/src/components/collapsible/index.ts

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

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

@@ -0,0 +1,13 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const collapsibleGroupVariants = tv({
+  defaultVariants: {},
+  slots: {
+    base: "collapsible-group",
+  },
+  variants: {},
+});
+
+export type CollapsibleGroupVariants = VariantProps<typeof collapsibleGroupVariants>;

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

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

package/src/components/color-area/color-area.styles.ts

@@ -0,0 +1,23 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const colorAreaVariants = tv({
+  defaultVariants: {
+    showDots: false,
+  },
+  slots: {
+    base: "color-area",
+    thumb: "color-area__thumb",
+  },
+  variants: {
+    showDots: {
+      false: {},
+      true: {
+        base: "color-area--show-dots",
+      },
+    },
+  },
+});
+
+export type ColorAreaVariants = VariantProps<typeof colorAreaVariants>;

package/src/components/color-area/index.ts

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

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

@@ -0,0 +1,18 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const colorFieldVariants = tv({
+  base: "color-field",
+  defaultVariants: {
+    fullWidth: false,
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "color-field--full-width",
+    },
+  },
+});
+
+export type ColorFieldVariants = VariantProps<typeof colorFieldVariants>;

package/src/components/color-field/index.ts

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

package/src/components/color-input-group/color-input-group.styles.ts

@@ -0,0 +1,34 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const colorInputGroupVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    variant: "primary",
+  },
+  slots: {
+    base: "color-input-group",
+    input: "color-input-group__input",
+    prefix: "color-input-group__prefix",
+    suffix: "color-input-group__suffix",
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "color-input-group--full-width",
+      },
+    },
+    variant: {
+      primary: {
+        base: "color-input-group--primary",
+      },
+      secondary: {
+        base: "color-input-group--secondary",
+      },
+    },
+  },
+});
+
+export type ColorInputGroupVariants = VariantProps<typeof colorInputGroupVariants>;

package/src/components/color-input-group/index.ts

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

package/src/components/color-picker/color-picker.styles.ts

@@ -0,0 +1,13 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const colorPickerVariants = tv({
+  slots: {
+    base: "color-picker",
+    popover: "color-picker__popover",
+    trigger: "color-picker__trigger",
+  },
+});
+
+export type ColorPickerVariants = VariantProps<typeof colorPickerVariants>;

package/src/components/color-picker/index.ts

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

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

@@ -0,0 +1,14 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const colorSliderVariants = tv({
+  slots: {
+    base: "color-slider",
+    output: "color-slider__output",
+    thumb: "color-slider__thumb",
+    track: "color-slider__track",
+  },
+});
+
+export type ColorSliderVariants = VariantProps<typeof colorSliderVariants>;

package/src/components/color-slider/index.ts

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

package/src/components/color-swatch/color-swatch.styles.ts

@@ -0,0 +1,26 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const colorSwatchVariants = tv({
+  base: "color-swatch",
+  defaultVariants: {
+    shape: "circle",
+    size: "md",
+  },
+  variants: {
+    shape: {
+      circle: "color-swatch--circle",
+      square: "color-swatch--square",
+    },
+    size: {
+      lg: "color-swatch--lg",
+      md: "color-swatch--md",
+      sm: "color-swatch--sm",
+      xl: "color-swatch--xl",
+      xs: "color-swatch--xs",
+    },
+  },
+});
+
+export type ColorSwatchVariants = VariantProps<typeof colorSwatchVariants>;

package/src/components/color-swatch/index.ts

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

package/src/components/color-swatch-picker/color-swatch-picker.styles.ts

@@ -0,0 +1,54 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const colorSwatchPickerVariants = tv({
+  defaultVariants: {
+    layout: "grid",
+    size: "md",
+    variant: "circle",
+  },
+  slots: {
+    base: "color-swatch-picker",
+    indicator: "color-swatch-picker__indicator",
+    item: "color-swatch-picker__item",
+    swatch: "color-swatch-picker__swatch",
+  },
+  variants: {
+    layout: {
+      grid: {
+        base: "color-swatch-picker--grid",
+      },
+      stack: {
+        base: "color-swatch-picker--stack",
+      },
+    },
+    size: {
+      lg: {
+        base: "color-swatch-picker--lg",
+      },
+      md: {
+        base: "color-swatch-picker--md",
+      },
+      sm: {
+        base: "color-swatch-picker--sm",
+      },
+      xl: {
+        base: "color-swatch-picker--xl",
+      },
+      xs: {
+        base: "color-swatch-picker--xs",
+      },
+    },
+    variant: {
+      circle: {
+        base: "color-swatch-picker--circle",
+      },
+      square: {
+        base: "color-swatch-picker--square",
+      },
+    },
+  },
+});
+
+export type ColorSwatchPickerVariants = VariantProps<typeof colorSwatchPickerVariants>;

package/src/components/color-swatch-picker/index.ts

@@ -0,0 +1 @@
+export * from "./color-swatch-picker.styles";

package/src/components/combo-box/combo-box.styles.ts

@@ -0,0 +1,26 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const comboBoxVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+  },
+  slots: {
+    base: "combo-box",
+    inputGroup: "combo-box__input-group",
+    popover: "combo-box__popover",
+    trigger: "combo-box__trigger",
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "combo-box--full-width",
+        inputGroup: "combo-box__input-group--full-width",
+      },
+    },
+  },
+});
+
+export type ComboBoxVariants = VariantProps<typeof comboBoxVariants>;

package/src/components/combo-box/index.ts

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

package/src/components/date-input/date-input.styles.ts

@@ -0,0 +1,86 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const dateInputVariants = tv({
+  slots: {
+    base: "date-input-root",
+    mainWrapper: "date-input__main-wrapper",
+    inputWrapper: "date-input",
+    segmentList: "date-input__segment-list",
+    segment: "date-input__segment",
+    startContent: "date-input__start-content",
+    endContent: "date-input__end-content",
+    label: "date-input__label",
+    helperWrapper: "date-input__helper-wrapper",
+    description: "date-input__description",
+    errorMessage: "date-input__error-message",
+  },
+  defaultVariants: {
+    variant: "flat",
+    size: "md",
+    color: "default",
+    fullWidth: false,
+    isInvalid: false,
+    isDisabled: false,
+    isReadonly: false,
+    hasLabel: false,
+    labelPlacement: "inside",
+  },
+  variants: {
+    variant: {
+      flat:       { inputWrapper: "date-input--flat" },
+      bordered:   { inputWrapper: "date-input--bordered" },
+      faded:      { inputWrapper: "date-input--faded" },
+      underlined: { inputWrapper: "date-input--underlined" },
+      raised:     { inputWrapper: "date-input--raised" },
+    },
+    size: {
+      sm: { inputWrapper: "date-input--sm" },
+      md: {},
+      lg: { inputWrapper: "date-input--lg" },
+    },
+    color: {
+      default:   { inputWrapper: "date-input--default" },
+      primary:   { inputWrapper: "date-input--primary" },
+      secondary: { inputWrapper: "date-input--secondary" },
+      success:   { inputWrapper: "date-input--success" },
+      warning:   { inputWrapper: "date-input--warning" },
+      danger:    { inputWrapper: "date-input--danger" },
+    },
+    fullWidth: {
+      false: {},
+      true:  { base: "date-input-root--full-width", inputWrapper: "date-input--full-width" },
+    },
+    isInvalid: {
+      false: {},
+      true:  { base: "date-input-root--invalid", inputWrapper: "date-input--invalid" },
+    },
+    isDisabled: {
+      false: {},
+      true:  { base: "date-input-root--disabled", inputWrapper: "date-input--disabled" },
+    },
+    isReadonly: {
+      false: {},
+      true:  { inputWrapper: "date-input--readonly" },
+    },
+    hasLabel: {
+      false: {},
+      true:  {},
+    },
+    labelPlacement: {
+      inside:         { base: "date-input-root--label-inside" },
+      outside:        { base: "date-input-root--label-outside" },
+      "outside-left": { base: "date-input-root--label-outside-left" },
+    },
+  },
+  compoundVariants: [
+    {
+      hasLabel: true,
+      labelPlacement: "inside",
+      class: { inputWrapper: "date-input--label-inside" },
+    },
+  ],
+});
+
+export type DateInputVariants = VariantProps<typeof dateInputVariants>;

package/src/components/date-input/index.ts

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

package/src/components/date-picker/date-picker.styles.ts

@@ -0,0 +1,14 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const datePickerVariants = tv({
+  slots: {
+    base: "date-picker",
+    popover: "date-picker__popover",
+    trigger: "date-picker__trigger",
+    triggerIndicator: "date-picker__trigger-indicator",
+  },
+});
+
+export type DatePickerVariants = VariantProps<typeof datePickerVariants>;

package/src/components/date-picker/index.ts

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

package/src/components/date-range-field/date-range-field.styles.ts

@@ -0,0 +1,87 @@
+import type {VariantProps} from "../../utils";
+
+import { tv } from "tailwind-variants";
+
+export const dateRangeFieldVariants = tv({
+  slots: {
+    base: "date-range-field-root",
+    mainWrapper: "date-range-field__main-wrapper",
+    inputWrapper: "date-range-field",
+    segmentList: "date-range-field__segment-list",
+    segment: "date-range-field__segment",
+    separator: "date-range-field__separator",
+    startContent: "date-range-field__start-content",
+    endContent: "date-range-field__end-content",
+    label: "date-range-field__label",
+    helperWrapper: "date-range-field__helper-wrapper",
+    description: "date-range-field__description",
+    errorMessage: "date-range-field__error-message",
+  },
+  defaultVariants: {
+    variant: "flat",
+    size: "md",
+    color: "default",
+    fullWidth: false,
+    isInvalid: false,
+    isDisabled: false,
+    isReadonly: false,
+    hasLabel: false,
+    labelPlacement: "inside",
+  },
+  variants: {
+    variant: {
+      flat:       { inputWrapper: "date-range-field--flat" },
+      bordered:   { inputWrapper: "date-range-field--bordered" },
+      faded:      { inputWrapper: "date-range-field--faded" },
+      underlined: { inputWrapper: "date-range-field--underlined" },
+      raised:     { inputWrapper: "date-range-field--raised" },
+    },
+    size: {
+      sm: { inputWrapper: "date-range-field--sm" },
+      md: {},
+      lg: { inputWrapper: "date-range-field--lg" },
+    },
+    color: {
+      default:   { inputWrapper: "date-range-field--default" },
+      primary:   { inputWrapper: "date-range-field--primary" },
+      secondary: { inputWrapper: "date-range-field--secondary" },
+      success:   { inputWrapper: "date-range-field--success" },
+      warning:   { inputWrapper: "date-range-field--warning" },
+      danger:    { inputWrapper: "date-range-field--danger" },
+    },
+    fullWidth: {
+      false: {},
+      true:  { base: "date-range-field-root--full-width", inputWrapper: "date-range-field--full-width" },
+    },
+    isInvalid: {
+      false: {},
+      true:  { base: "date-range-field-root--invalid", inputWrapper: "date-range-field--invalid" },
+    },
+    isDisabled: {
+      false: {},
+      true:  { base: "date-range-field-root--disabled", inputWrapper: "date-range-field--disabled" },
+    },
+    isReadonly: {
+      false: {},
+      true:  { inputWrapper: "date-range-field--readonly" },
+    },
+    hasLabel: {
+      false: {},
+      true:  {},
+    },
+    labelPlacement: {
+      inside:         { base: "date-range-field-root--label-inside" },
+      outside:        { base: "date-range-field-root--label-outside" },
+      "outside-left": { base: "date-range-field-root--label-outside-left" },
+    },
+  },
+  compoundVariants: [
+    {
+      hasLabel: true,
+      labelPlacement: "inside",
+      class: { inputWrapper: "date-range-field--label-inside" },
+    },
+  ],
+});
+
+export type DateRangeFieldVariants = VariantProps<typeof dateRangeFieldVariants>;

package/src/components/date-range-field/index.ts

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

package/src/components/date-range-picker/date-range-picker.styles.ts

@@ -0,0 +1,14 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const dateRangePickerVariants = tv({
+  slots: {
+    base: "date-range-picker",
+    popover: "date-range-picker__popover",
+    trigger: "date-range-picker__trigger",
+    triggerIndicator: "date-range-picker__trigger-indicator",
+  },
+});
+
+export type DateRangePickerVariants = VariantProps<typeof dateRangePickerVariants>;

package/src/components/date-range-picker/index.ts

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

package/src/components/description/description.styles.ts

@@ -0,0 +1,9 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const descriptionVariants = tv({
+  base: "description",
+});
+
+export type DescriptionVariants = VariantProps<typeof descriptionVariants>;

package/src/components/description/index.ts

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

package/src/components/drawer/drawer.styles.ts

@@ -0,0 +1,55 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const drawerVariants = tv({
+  defaultVariants: {
+    placement: "bottom",
+    variant: "opaque",
+  },
+  slots: {
+    backdrop: "drawer__backdrop",
+    body: "drawer__body",
+    closeTrigger: "drawer__close-trigger",
+    content: "drawer__content",
+    dialog: "drawer__dialog",
+    footer: "drawer__footer",
+    handle: "drawer__handle",
+    header: "drawer__header",
+    heading: "drawer__heading",
+    trigger: "drawer__trigger",
+  },
+  variants: {
+    placement: {
+      bottom: {
+        content: "drawer__content--bottom",
+        dialog: "drawer__dialog--bottom",
+      },
+      left: {
+        content: "drawer__content--left",
+        dialog: "drawer__dialog--left",
+      },
+      right: {
+        content: "drawer__content--right",
+        dialog: "drawer__dialog--right",
+      },
+      top: {
+        content: "drawer__content--top",
+        dialog: "drawer__dialog--top",
+      },
+    },
+    variant: {
+      blur: {
+        backdrop: "drawer__backdrop--blur",
+      },
+      opaque: {
+        backdrop: "drawer__backdrop--opaque",
+      },
+      transparent: {
+        backdrop: "drawer__backdrop--transparent",
+      },
+    },
+  },
+});
+
+export type DrawerVariants = VariantProps<typeof drawerVariants>;

package/src/components/drawer/index.ts

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