@masaraxui/styles 1.0.0

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

@@ -0,0 +1,34 @@
+import type {VariantProps} from "tailwind-variants";
+
+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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+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-field/date-field.styles.ts

@@ -0,0 +1,18 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const dateFieldVariants = tv({
+  base: "date-field",
+  defaultVariants: {
+    fullWidth: false,
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "date-field--full-width",
+    },
+  },
+});
+
+export type DateFieldVariants = VariantProps<typeof dateFieldVariants>;

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

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

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

@@ -0,0 +1,36 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const dateInputGroupVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    variant: "primary",
+  },
+  slots: {
+    base: "date-input-group",
+    input: "date-input-group__input",
+    inputContainer: "date-input-group__input-container",
+    prefix: "date-input-group__prefix",
+    segment: "date-input-group__segment",
+    suffix: "date-input-group__suffix",
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "date-input-group--full-width",
+      },
+    },
+    variant: {
+      primary: {
+        base: "date-input-group--primary",
+      },
+      secondary: {
+        base: "date-input-group--secondary",
+      },
+    },
+  },
+});
+
+export type DateInputGroupVariants = VariantProps<typeof dateInputGroupVariants>;

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

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

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

@@ -0,0 +1,14 @@
+import type {VariantProps} from "tailwind-variants";
+
+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-picker/date-range-picker.styles.ts

@@ -0,0 +1,15 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const dateRangePickerVariants = tv({
+  slots: {
+    base: "date-range-picker",
+    popover: "date-range-picker__popover",
+    rangeSeparator: "date-range-picker__range-separator",
+    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 "tailwind-variants";
+
+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/disclosure/disclosure.styles.ts

@@ -0,0 +1,25 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const disclosureVariants = tv({
+  defaultVariants: {},
+  slots: {
+    base: "disclosure",
+    body: "disclosure__body",
+    bodyInner: "disclosure__body-inner",
+    content: "disclosure__content",
+    heading: "disclosure__heading",
+    indicator: "disclosure__indicator",
+    trigger: "disclosure__trigger",
+  },
+  variants: {},
+});
+
+// Render props that should be excluded from DisclosureVariants (framework-specific)
+type DisclosureRenderPropsKeys = "isExpanded" | "isDisabled" | "state";
+
+export type DisclosureVariants = Omit<
+  VariantProps<typeof disclosureVariants>,
+  DisclosureRenderPropsKeys
+>;

package/src/components/disclosure/index.ts

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

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

@@ -0,0 +1,13 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const disclosureGroupVariants = tv({
+  defaultVariants: {},
+  slots: {
+    base: "disclosure-group",
+  },
+  variants: {},
+});
+
+export type DisclosureGroupVariants = VariantProps<typeof disclosureGroupVariants>;

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

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

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

@@ -0,0 +1,55 @@
+import type {VariantProps} from "tailwind-variants";
+
+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";

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

@@ -0,0 +1,14 @@
+import type {VariantProps} from "tailwind-variants";
+
+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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+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/field-error/field-error.styles.ts

@@ -0,0 +1,9 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const fieldErrorVariants = tv({
+  base: "field-error",
+});
+
+export type FieldErrorVariants = VariantProps<typeof fieldErrorVariants>;

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

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

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

@@ -0,0 +1,15 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const fieldsetVariants = tv({
+  slots: {
+    actions: "fieldset__actions",
+    base: "fieldset",
+    description: "fieldset__description",
+    fieldGroup: "fieldset__field_group",
+    legend: "fieldset__legend",
+  },
+});
+
+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-field";
+export * from "./date-picker";
+export * from "./date-range-picker";
+export * from "./date-input-group";
+export * from "./description";
+export * from "./drawer";
+export * from "./disclosure";
+export * from "./disclosure-group";
+export * from "./dropdown";
+export * from "./empty-state";
+export * from "./error-message";
+export * from "./field-error";
+export * from "./fieldset";
+export * from "./header";
+export * from "./input";
+export * from "./input-group";
+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 "./search-field";
+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 "./textfield";
+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";

package/src/components/input/index.ts

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

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

@@ -0,0 +1,23 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const inputVariants = tv({
+  base: "input",
+  defaultVariants: {
+    fullWidth: false,
+    variant: "primary",
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "input--full-width",
+    },
+    variant: {
+      primary: "input--primary",
+      secondary: "input--secondary",
+    },
+  },
+});
+
+export type InputVariants = VariantProps<typeof inputVariants>;

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

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

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

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

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

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