@auronui/styles 1.0.0

package/src/components/dropdown/dropdown.styles.ts

@@ -0,0 +1,14 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const dropdownVariants = tv({
+  slots: {
+    menu: "dropdown__menu",
+    popover: "dropdown__popover",
+    root: "dropdown",
+    trigger: "dropdown__trigger",
+  },
+});
+
+export type DropdownVariants = VariantProps<typeof dropdownVariants>;

package/src/components/dropdown/index.ts

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

package/src/components/empty-state/empty-state.styles.ts

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

package/src/components/empty-state/index.ts

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

package/src/components/error-message/error-message.styles.ts

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

package/src/components/error-message/index.ts

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

package/src/components/fieldset/fieldset.styles.ts

@@ -0,0 +1,29 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const fieldsetVariants = tv({
+  slots: {
+    base: "fieldset",
+    legend: "fieldset__legend",
+    fieldGroup: "fieldset__field-group",
+    description: "fieldset__description",
+    actions: "fieldset__actions",
+  },
+  defaultVariants: {
+    orientation: "vertical",
+    isDisabled: false,
+  },
+  variants: {
+    orientation: {
+      vertical:   { fieldGroup: "fieldset__field-group--vertical" },
+      horizontal: { fieldGroup: "fieldset__field-group--horizontal" },
+    },
+    isDisabled: {
+      false: {},
+      true:  { base: "fieldset--disabled" },
+    },
+  },
+});
+
+export type FieldsetVariants = VariantProps<typeof fieldsetVariants>;

package/src/components/fieldset/index.ts

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

package/src/components/header/header.styles.ts

@@ -0,0 +1,5 @@
+import {tv} from "tailwind-variants";
+
+export const headerVariants = tv({
+  base: "header",
+});

package/src/components/header/index.ts

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

package/src/components/index.ts

@@ -0,0 +1,84 @@
+// Component variant exports
+export * from "./accordion";
+export * from "./alert";
+export * from "./alert-dialog";
+export * from "./autocomplete";
+export * from "./avatar";
+export * from "./badge";
+export * from "./breadcrumbs";
+export * from "./button";
+export * from "./button-group";
+export * from "./calendar";
+export * from "./calendar-year-picker";
+export * from "./range-calendar";
+export * from "./card";
+export * from "./checkbox";
+export * from "./checkbox-group";
+export * from "./chip";
+export * from "./color-area";
+export * from "./color-field";
+export * from "./color-input-group";
+export * from "./color-picker";
+export * from "./color-slider";
+export * from "./color-swatch";
+export * from "./close-button";
+export * from "./color-swatch-picker";
+export * from "./combo-box";
+export * from "./date-input";
+export * from "./date-picker";
+export * from "./date-range-field";
+export * from "./date-range-picker";
+export * from "./description";
+export * from "./drawer";
+export * from "./collapsible";
+export * from "./collapsible-group";
+export * from "./dropdown";
+export * from "./empty-state";
+export * from "./error-message";
+export * from "./fieldset";
+export * from "./header";
+export * from "./input";
+export * from "./input-otp";
+export * from "./kbd";
+export * from "./label";
+export * from "./link";
+export * from "./list-box";
+export * from "./list-box-item";
+export * from "./list-box-section";
+export * from "./menu";
+export * from "./meter";
+export * from "./progress-bar";
+export * from "./progress-circle";
+export * from "./menu-item";
+export * from "./menu-section";
+export * from "./modal";
+export * from "./number-field";
+export * from "./pagination";
+export * from "./popover";
+export * from "./radio";
+export * from "./radio-group";
+export * from "./scroll-shadow";
+export * from "./select";
+export * from "./separator";
+export * from "./skeleton";
+export * from "./slider";
+export * from "./spinner";
+export * from "./surface";
+export * from "./switch";
+export * from "./switch-group";
+export * from "./table";
+export * from "./tabs";
+export * from "./tag";
+export * from "./tag-group";
+export * from "./text";
+export * from "./textarea";
+export * from "./time-field";
+export * from "./toast";
+export * from "./toggle-button";
+export * from "./toggle-button-group";
+export * from "./toolbar";
+export * from "./tooltip";
+export * from "./aspect-ratio";
+export * from "./splitter";
+export * from "./stepper";
+export * from "./tree";

package/src/components/input/index.ts

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

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

@@ -0,0 +1,87 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const inputVariants = tv({
+  slots: {
+    base: "input-root",
+    mainWrapper: "input__main-wrapper",
+    inputWrapper: "input",
+    input: "input__input",
+    startContent: "input__start-content",
+    endContent: "input__end-content",
+    label: "input__label",
+    clearButton: "input__clear-button",
+    passwordToggle: "input__password-toggle",
+    helperWrapper: "input__helper-wrapper",
+    description: "input__description",
+    errorMessage: "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: "input--flat" },
+      bordered:   { inputWrapper: "input--bordered" },
+      faded:      { inputWrapper: "input--faded" },
+      underlined: { inputWrapper: "input--underlined" },
+      raised:     { inputWrapper: "input--raised" },
+    },
+    size: {
+      sm: { inputWrapper: "input--sm" },
+      md: {},
+      lg: { inputWrapper: "input--lg" },
+    },
+    color: {
+      default:   { inputWrapper: "input--default" },
+      primary:   { inputWrapper: "input--primary" },
+      secondary: { inputWrapper: "input--secondary" },
+      success:   { inputWrapper: "input--success" },
+      warning:   { inputWrapper: "input--warning" },
+      danger:    { inputWrapper: "input--danger" },
+    },
+    fullWidth: {
+      false: {},
+      true:  { base: "input-root--full-width", inputWrapper: "input--full-width" },
+    },
+    isInvalid: {
+      false: {},
+      true:  { base: "input-root--invalid", inputWrapper: "input--invalid" },
+    },
+    isDisabled: {
+      false: {},
+      true:  { base: "input-root--disabled", inputWrapper: "input--disabled" },
+    },
+    isReadonly: {
+      false: {},
+      true:  { inputWrapper: "input--readonly" },
+    },
+    hasLabel: {
+      false: {},
+      true:  {},
+    },
+    labelPlacement: {
+      inside:         { base: "input-root--label-inside" },
+      outside:        { base: "input-root--label-outside" },
+      "outside-left": { base: "input-root--label-outside-left" },
+    },
+  },
+  compoundVariants: [
+    {
+      hasLabel: true,
+      labelPlacement: "inside",
+      class: { inputWrapper: "input--label-inside" },
+    },
+  ],
+});
+
+export type InputVariants = VariantProps<typeof inputVariants>;

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

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

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

@@ -0,0 +1,30 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const inputOTPVariants = tv({
+  defaultVariants: {
+    variant: "primary",
+  },
+  slots: {
+    base: "input-otp",
+    caret: "input-otp__caret",
+    group: "input-otp__group",
+    input: "input-otp__input",
+    separator: "input-otp__separator",
+    slot: "input-otp__slot",
+    slotValue: "input-otp__slot-value",
+  },
+  variants: {
+    variant: {
+      primary: {
+        base: "input-otp--primary",
+      },
+      secondary: {
+        base: "input-otp--secondary",
+      },
+    },
+  },
+});
+
+export type InputOTPVariants = VariantProps<typeof inputOTPVariants>;

package/src/components/kbd/index.ts

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

package/src/components/kbd/kbd.styles.ts

@@ -0,0 +1,20 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const kbdVariants = tv({
+  defaultVariants: {},
+  slots: {
+    abbr: "kbd__abbr",
+    base: "kbd",
+    content: "kbd__content",
+  },
+  variants: {
+    variant: {
+      default: "kbd--default",
+      light: "kbd--light",
+    },
+  },
+});
+
+export type KbdVariants = VariantProps<typeof kbdVariants>;

package/src/components/label/index.ts

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

package/src/components/label/label.styles.ts

@@ -0,0 +1,25 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const labelVariants = tv({
+  base: "label",
+  defaultVariants: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+  },
+  variants: {
+    isDisabled: {
+      true: "label--disabled",
+    },
+    isInvalid: {
+      true: "label--invalid",
+    },
+    isRequired: {
+      true: "label--required",
+    },
+  },
+});
+
+export type LabelVariants = VariantProps<typeof labelVariants>;

package/src/components/link/index.ts

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

package/src/components/link/link.styles.ts

@@ -0,0 +1,38 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const linkVariants = tv({
+  slots: {
+    base: "link",
+    icon: "link__icon",
+  },
+  variants: {
+    color: {
+      default: {base: "link--color-default"},
+      primary: {base: "link--color-primary"},
+      success: {base: "link--color-success"},
+      warning: {base: "link--color-warning"},
+      danger: {base: "link--color-danger"},
+      foreground: {base: "link--color-foreground"},
+    },
+    underline: {
+      none: {base: "link--underline-none"},
+      hover: {base: "link--underline-hover"},
+      always: {base: "link--underline-always"},
+      active: {base: "link--underline-active"},
+      focus: {base: "link--underline-focus"},
+    },
+  },
+});
+
+// Render props that should be excluded from LinkVariants (framework-specific)
+type LinkRenderPropsKeys =
+  | "isCurrent"
+  | "isHovered"
+  | "isPressed"
+  | "isFocused"
+  | "isFocusVisible"
+  | "isDisabled";
+
+export type LinkVariants = Omit<VariantProps<typeof linkVariants>, LinkRenderPropsKeys>;

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

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

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

@@ -0,0 +1,18 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const listboxVariants = tv({
+  base: "list-box",
+  defaultVariants: {
+    variant: "default",
+  },
+  variants: {
+    variant: {
+      danger: "list-box--danger",
+      default: "list-box--default",
+    },
+  },
+});
+
+export type ListBoxVariants = VariantProps<typeof listboxVariants>;

package/src/components/list-box-item/index.ts

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

package/src/components/list-box-item/list-box-item.styles.ts

@@ -0,0 +1,25 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const listboxItemVariants = tv({
+  defaultVariants: {
+    variant: "default",
+  },
+  slots: {
+    indicator: "list-box-item__indicator",
+    item: "list-box-item",
+  },
+  variants: {
+    variant: {
+      danger: {
+        item: "list-box-item--danger",
+      },
+      default: {
+        item: "list-box-item--default",
+      },
+    },
+  },
+});
+
+export type ListBoxItemVariants = VariantProps<typeof listboxItemVariants>;

package/src/components/list-box-section/index.ts

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

package/src/components/list-box-section/list-box-section.styles.ts

@@ -0,0 +1,13 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const listboxSectionVariants = tv({
+  base: "list-box-section",
+  slots: {
+    label: "list-box-section__label",
+    separator: "list-box-section__separator"
+  }
+});
+
+export type ListBoxSectionVariants = VariantProps<typeof listboxSectionVariants>;

package/src/components/menu/index.ts

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

package/src/components/menu/menu.styles.ts

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

package/src/components/menu-item/index.ts

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

package/src/components/menu-item/menu-item.styles.ts

@@ -0,0 +1,26 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const menuItemVariants = tv({
+  defaultVariants: {
+    variant: "default",
+  },
+  slots: {
+    indicator: "menu-item__indicator",
+    item: "menu-item",
+    submenuIndicator: "menu-item__indicator menu-item__indicator--submenu",
+  },
+  variants: {
+    variant: {
+      danger: {
+        item: "menu-item--danger",
+      },
+      default: {
+        item: "menu-item--default",
+      },
+    },
+  },
+});
+
+export type MenuItemVariants = VariantProps<typeof menuItemVariants>;

package/src/components/menu-section/index.ts

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

package/src/components/menu-section/menu-section.styles.ts

@@ -0,0 +1,14 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const menuSectionVariants = tv({
+  slots: {
+    base: "menu-section",
+    label: "menu-section__label",
+    separator: "menu-section__separator",
+  },
+  
+});
+
+export type MenuSectionVariants = VariantProps<typeof menuSectionVariants>;

package/src/components/meter/index.ts

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

package/src/components/meter/meter.styles.ts

@@ -0,0 +1,48 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const meterVariants = tv({
+  defaultVariants: {
+    color: "accent",
+    size: "md",
+  },
+  slots: {
+    base: "meter",
+    fill: "meter__fill",
+    output: "meter__output",
+    track: "meter__track",
+  },
+  variants: {
+    color: {
+      accent: {
+        base: "meter--accent",
+      },
+      danger: {
+        base: "meter--danger",
+      },
+      default: {
+        base: "meter--default",
+      },
+      success: {
+        base: "meter--success",
+      },
+      warning: {
+        base: "meter--warning",
+      },
+    },
+    size: {
+      lg: {
+        base: "meter--lg",
+      },
+      md: {
+        base: "meter--md",
+      },
+      sm: {
+        base: "meter--sm",
+      },
+    },
+  },
+});
+
+export type MeterVariants = VariantProps<typeof meterVariants>;

package/src/components/modal/index.ts

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

package/src/components/modal/modal.styles.ts

@@ -0,0 +1,70 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const modalVariants = tv({
+  defaultVariants: {
+    scroll: "inside",
+    size: "md",
+    variant: "opaque",
+  },
+  slots: {
+    backdrop: "modal__backdrop",
+    body: "modal__body",
+    closeTrigger: "modal__close-trigger",
+    container: "modal__container",
+    dialog: "modal__dialog",
+    footer: "modal__footer",
+    header: "modal__header",
+    heading: "modal__heading",
+    icon: "modal__icon",
+    trigger: "modal__trigger",
+  },
+  variants: {
+    scroll: {
+      inside: {
+        body: "modal__body--scroll-inside",
+        dialog: "modal__dialog--scroll-inside",
+      },
+      outside: {
+        body: "modal__body--scroll-outside",
+        container: "modal__container--scroll-outside",
+        dialog: "modal__dialog--scroll-outside",
+      },
+    },
+    size: {
+      cover: {
+        dialog: "modal__dialog--cover",
+      },
+      full: {
+        container: "modal__container--full",
+        dialog: "modal__dialog--full",
+      },
+      lg: {
+        dialog: "modal__dialog--lg",
+      },
+      md: {
+        dialog: "modal__dialog--md",
+      },
+      sm: {
+        dialog: "modal__dialog--sm",
+      },
+      xs: {
+        dialog: "modal__dialog--xs",
+      },
+    },
+    variant: {
+      blur: {
+        backdrop: "modal__backdrop--blur",
+      },
+      opaque: {
+        backdrop: "modal__backdrop--opaque",
+      },
+      transparent: {
+        backdrop: "modal__backdrop--transparent",
+      },
+    },
+  },
+});
+
+export type ModalVariants = VariantProps<typeof modalVariants>;

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

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