@auronui/styles 1.0.0

package/src/components/splitter/index.ts

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

package/src/components/splitter/splitter.styles.ts

@@ -0,0 +1,28 @@
+import type {VariantProps} from "../../utils";
+import { tv } from "tailwind-variants";
+
+export const splitterVariants = tv({
+  slots: {
+    group: "splitter-group",
+    panel: "splitter-panel",
+    handle: "splitter-handle",
+    handleBar: "splitter-handle__bar",
+  },
+  variants: {
+    direction: {
+      horizontal: {
+        group: "splitter-group--horizontal",
+        handle: "splitter-handle--horizontal",
+      },
+      vertical: {
+        group: "splitter-group--vertical",
+        handle: "splitter-handle--vertical",
+      },
+    },
+  },
+  defaultVariants: {
+    direction: "horizontal",
+  },
+});
+
+export type SplitterVariants = VariantProps<typeof splitterVariants>;

package/src/components/stepper/index.ts

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

package/src/components/stepper/stepper.styles.ts

@@ -0,0 +1,57 @@
+import type {VariantProps} from "../../utils";
+import { tv } from "tailwind-variants";
+
+export const stepperVariants = tv({
+  slots: {
+    base: "stepper",
+    item: "stepper__item",
+    indicator: "stepper__indicator",
+    indicatorText: "stepper__indicator-text",
+    title: "stepper__title",
+    description: "stepper__description",
+    content: "stepper__content",
+    separator: "stepper__separator",
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        base: "stepper--horizontal",
+        item: "stepper__item--horizontal",
+        separator: "stepper__separator--horizontal",
+      },
+      vertical: {
+        base: "stepper--vertical",
+        item: "stepper__item--vertical",
+        separator: "stepper__separator--vertical",
+      },
+    },
+    size: {
+      sm: {
+        indicator: "stepper__indicator--sm",
+        title: "stepper__title--sm",
+      },
+      md: {
+        indicator: "stepper__indicator--md",
+        title: "stepper__title--md",
+      },
+      lg: {
+        indicator: "stepper__indicator--lg",
+        title: "stepper__title--lg",
+      },
+    },
+    color: {
+      default: { indicator: "stepper__indicator--default" },
+      accent: { indicator: "stepper__indicator--accent" },
+      success: { indicator: "stepper__indicator--success" },
+      warning: { indicator: "stepper__indicator--warning" },
+      danger: { indicator: "stepper__indicator--danger" },
+    },
+  },
+  defaultVariants: {
+    orientation: "horizontal",
+    size: "md",
+    color: "accent",
+  },
+});
+
+export type StepperVariants = VariantProps<typeof stepperVariants>;

package/src/components/surface/index.ts

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

package/src/components/surface/surface.styles.ts

@@ -0,0 +1,20 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const surfaceVariants = tv({
+  base: "surface",
+  defaultVariants: {
+    variant: "default",
+  },
+  variants: {
+    variant: {
+      default: "surface--default",
+      secondary: "surface--secondary",
+      tertiary: "surface--tertiary",
+      transparent: "surface--transparent",
+    },
+  },
+});
+
+export type SurfaceVariants = VariantProps<typeof surfaceVariants>;

package/src/components/switch/index.ts

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

package/src/components/switch/switch.styles.ts

@@ -0,0 +1,31 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const switchVariants = tv({
+  defaultVariants: {
+    size: "md",
+  },
+  slots: {
+    base: "switch",
+    content: "switch__content",
+    control: "switch__control",
+    icon: "switch__icon",
+    thumb: "switch__thumb",
+  },
+  variants: {
+    size: {
+      lg: {
+        base: "switch--lg",
+      },
+      md: {
+        base: "switch--md",
+      },
+      sm: {
+        base: "switch--sm",
+      },
+    },
+  },
+});
+
+export type SwitchVariants = VariantProps<typeof switchVariants>;

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

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

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

@@ -0,0 +1,25 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const switchGroupVariants = tv({
+  defaultVariants: {
+    orientation: "vertical",
+  },
+  slots: {
+    base: "switch-group",
+    items: "switch-group__items",
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        base: "switch-group--horizontal",
+      },
+      vertical: {
+        base: "switch-group--vertical",
+      },
+    },
+  },
+});
+
+export type SwitchGroupVariants = VariantProps<typeof switchGroupVariants>;

package/src/components/table/index.ts

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

package/src/components/table/table.styles.ts

@@ -0,0 +1,47 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const tableVariants = tv({
+  defaultVariants: {
+    variant: "primary",
+  },
+  slots: {
+    base: "table-root",
+    body: "table__body",
+    cell: "table__cell",
+    column: "table__column",
+    columnResizer: "table__column-resizer",
+    content: "table__content",
+    footer: "table__footer",
+    header: "table__header",
+    loadMore: "table__load-more",
+    loadMoreContent: "table__load-more-content",
+    resizableContainer: "table__resizable-container",
+    row: "table__row",
+    scrollContainer: "table__scroll-container",
+  },
+  variants: {
+    variant: {
+      primary: {
+        base: "table-root--primary",
+      },
+      secondary: {
+        base: "table-root--secondary",
+      },
+    },
+  },
+});
+
+// Exclude React Aria render prop keys from the variant types
+type TableRenderPropsKeys =
+  | "isHovered"
+  | "isFocused"
+  | "isFocusVisible"
+  | "isSelected"
+  | "isDisabled"
+  | "isDragging"
+  | "isDropTarget"
+  | "state";
+
+export type TableVariants = Omit<VariantProps<typeof tableVariants>, TableRenderPropsKeys>;

package/src/components/tabs/index.ts

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

package/src/components/tabs/tabs.styles.ts

@@ -0,0 +1,31 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const tabsVariants = tv({
+  defaultVariants: {
+    variant: "primary",
+  },
+  slots: {
+    base: "tabs",
+    separator: "tabs__separator",
+    tab: "tabs__tab",
+    tabIndicator: "tabs__indicator",
+    tabList: "tabs__list",
+    tabListContainer: "tabs__list-container",
+    tabPanel: "tabs__panel",
+  },
+  variants: {
+    variant: {
+      primary: {},
+      secondary: {
+        base: "tabs--secondary",
+      },
+    },
+  },
+});
+
+// Render props that should be excluded from TabsVariants (framework-specific)
+type TabsRenderPropsKeys = "selectedKey";
+
+export type TabsVariants = Omit<VariantProps<typeof tabsVariants>, TabsRenderPropsKeys>;

package/src/components/tag/index.ts

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

package/src/components/tag/tag.styles.ts

@@ -0,0 +1,37 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const tagVariants = tv({
+  defaultVariants: {
+    size: "md",
+    variant: "default",
+  },
+  slots: {
+    base: "tag",
+    removeButton: "tag__remove-button",
+  },
+  variants: {
+    size: {
+      lg: {
+        base: "tag--lg",
+      },
+      md: {
+        base: "tag--md",
+      },
+      sm: {
+        base: "tag--sm",
+      },
+    },
+    variant: {
+      default: {
+        base: "tag--default",
+      },
+      surface: {
+        base: "tag--surface",
+      },
+    },
+  },
+});
+
+export type TagVariants = VariantProps<typeof tagVariants>;

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

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

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

@@ -0,0 +1,12 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const tagGroupVariants = tv({
+  slots: {
+    base: "tag-group",
+    list: "tag-group__list",
+  },
+});
+
+export type TagGroupVariants = VariantProps<typeof tagGroupVariants>;

package/src/components/text/index.ts

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

package/src/components/text/text.styles.ts

@@ -0,0 +1,29 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const textVariants = tv({
+  base: ["transition-colors duration-300"],
+  defaultVariants: {
+    size: "base",
+    variant: "default",
+  },
+  variants: {
+    size: {
+      base: "text-base",
+      lg: "text-lg",
+      sm: "text-sm",
+      xl: "text-xl",
+      xs: "text-xs",
+    },
+    variant: {
+      danger: "text-danger",
+      default: "text-foreground",
+      muted: "text-muted",
+      success: "text-success",
+      warning: "text-warning",
+    },
+  },
+});
+
+export type TextVariants = VariantProps<typeof textVariants>;

package/src/components/textarea/index.ts

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

package/src/components/textarea/textarea.styles.ts

@@ -0,0 +1,86 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const textAreaVariants = tv({
+  slots: {
+    base: "textarea-root",
+    mainWrapper: "textarea__main-wrapper",
+    inputWrapper: "textarea",
+    input: "textarea__input",
+    startContent: "textarea__start-content",
+    endContent: "textarea__end-content",
+    label: "textarea__label",
+    clearButton: "textarea__clear-button",
+    helperWrapper: "textarea__helper-wrapper",
+    description: "textarea__description",
+    errorMessage: "textarea__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: "textarea--flat" },
+      bordered:   { inputWrapper: "textarea--bordered" },
+      faded:      { inputWrapper: "textarea--faded" },
+      underlined: { inputWrapper: "textarea--underlined" },
+      raised:     { inputWrapper: "textarea--raised" },
+    },
+    size: {
+      sm: { inputWrapper: "textarea--sm" },
+      md: {},
+      lg: { inputWrapper: "textarea--lg" },
+    },
+    color: {
+      default:   { inputWrapper: "textarea--default" },
+      primary:   { inputWrapper: "textarea--primary" },
+      secondary: { inputWrapper: "textarea--secondary" },
+      success:   { inputWrapper: "textarea--success" },
+      warning:   { inputWrapper: "textarea--warning" },
+      danger:    { inputWrapper: "textarea--danger" },
+    },
+    fullWidth: {
+      false: {},
+      true:  { base: "textarea-root--full-width", inputWrapper: "textarea--full-width" },
+    },
+    isInvalid: {
+      false: {},
+      true:  { base: "textarea-root--invalid", inputWrapper: "textarea--invalid" },
+    },
+    isDisabled: {
+      false: {},
+      true:  { base: "textarea-root--disabled", inputWrapper: "textarea--disabled" },
+    },
+    isReadonly: {
+      false: {},
+      true:  { inputWrapper: "textarea--readonly" },
+    },
+    hasLabel: {
+      false: {},
+      true:  {},
+    },
+    labelPlacement: {
+      inside:         { base: "textarea-root--label-inside" },
+      outside:        { base: "textarea-root--label-outside" },
+      "outside-left": { base: "textarea-root--label-outside-left" },
+    },
+  },
+  compoundVariants: [
+    {
+      hasLabel: true,
+      labelPlacement: "inside",
+      class: { inputWrapper: "textarea--label-inside" },
+    },
+  ],
+});
+
+export type TextAreaVariants = VariantProps<typeof textAreaVariants>;

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

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

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

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

package/src/components/toast/index.ts

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

package/src/components/toast/toast.styles.ts

@@ -0,0 +1,67 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const toastVariants = tv({
+  defaultVariants: {
+    placement: "bottom",
+    variant: "default",
+  },
+  slots: {
+    action: "toast__action",
+    close: "toast__close-button",
+    content: "toast__content",
+    description: "toast__description",
+    indicator: "toast__indicator",
+    region: "toast-region",
+    title: "toast__title",
+    toast: "toast",
+  },
+  variants: {
+    placement: {
+      bottom: {
+        region: "toast-region--bottom",
+        toast: "toast--bottom",
+      },
+      "bottom end": {
+        region: "toast-region--bottom-end",
+        toast: "toast--bottom-end",
+      },
+      "bottom start": {
+        region: "toast-region--bottom-start",
+        toast: "toast--bottom-start",
+      },
+      top: {
+        region: "toast-region--top",
+        toast: "toast--top",
+      },
+      "top end": {
+        region: "toast-region--top-end",
+        toast: "toast--top-end",
+      },
+      "top start": {
+        region: "toast-region--top-start",
+        toast: "toast--top-start",
+      },
+    },
+    variant: {
+      accent: {
+        toast: "toast--accent",
+      },
+      danger: {
+        toast: "toast--danger",
+      },
+      default: {
+        toast: "toast--default",
+      },
+      success: {
+        toast: "toast--success",
+      },
+      warning: {
+        toast: "toast--warning",
+      },
+    },
+  },
+});
+
+export type ToastVariants = VariantProps<typeof toastVariants>;

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

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

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

@@ -0,0 +1,28 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const toggleButtonVariants = tv({
+  base: "toggle-button",
+  defaultVariants: {
+    isIconOnly: false,
+    size: "md",
+    variant: "default",
+  },
+  variants: {
+    isIconOnly: {
+      true: "toggle-button--icon-only",
+    },
+    size: {
+      lg: "toggle-button--lg",
+      md: "toggle-button--md",
+      sm: "toggle-button--sm",
+    },
+    variant: {
+      default: "toggle-button--default",
+      ghost: "toggle-button--ghost",
+    },
+  },
+});
+
+export type ToggleButtonVariants = VariantProps<typeof toggleButtonVariants>;

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

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

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

@@ -0,0 +1,39 @@
+import type {VariantProps} from "../../utils";
+
+import {tv} from "tailwind-variants";
+
+export const toggleButtonGroupVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    isDetached: false,
+    orientation: "horizontal",
+  },
+  slots: {
+    base: "toggle-button-group",
+    separator: "toggle-button-group__separator",
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "toggle-button-group--full-width",
+      },
+    },
+    isDetached: {
+      false: {},
+      true: {
+        base: "toggle-button-group--detached",
+      },
+    },
+    orientation: {
+      horizontal: {
+        base: "toggle-button-group--horizontal",
+      },
+      vertical: {
+        base: "toggle-button-group--vertical",
+      },
+    },
+  },
+});
+
+export type ToggleButtonGroupVariants = VariantProps<typeof toggleButtonGroupVariants>;