@masaraxui/styles 1.0.0

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

@@ -0,0 +1,30 @@
+import type {VariantProps} from "tailwind-variants";
+
+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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+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,21 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const linkVariants = tv({
+  slots: {
+    base: "link",
+    icon: "link__icon",
+  },
+});
+
+// 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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+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,9 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const listboxSectionVariants = tv({
+  base: "list-box-section",
+});
+
+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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+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,9 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const menuSectionVariants = tv({
+  base: "menu-section",
+});
+
+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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+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";

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

@@ -0,0 +1,36 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const numberFieldVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    variant: "primary",
+  },
+  slots: {
+    base: "number-field",
+    decrementButton: "number-field__decrement-button",
+    group: "number-field__group",
+    incrementButton: "number-field__increment-button",
+    input: "number-field__input",
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "number-field--full-width",
+        group: "number-field__group--full-width",
+      },
+    },
+    variant: {
+      primary: {
+        base: "number-field--primary",
+      },
+      secondary: {
+        base: "number-field--secondary",
+      },
+    },
+  },
+});
+
+export type NumberFieldVariants = VariantProps<typeof numberFieldVariants>;

package/src/components/pagination/index.ts

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

package/src/components/pagination/pagination.styles.ts

@@ -0,0 +1,32 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const paginationVariants = tv({
+  defaultVariants: {
+    size: "md",
+  },
+  slots: {
+    base: "pagination",
+    content: "pagination__content",
+    ellipsis: "pagination__ellipsis",
+    item: "pagination__item",
+    link: "pagination__link",
+    summary: "pagination__summary",
+  },
+  variants: {
+    size: {
+      lg: {
+        base: "pagination--lg",
+      },
+      md: {
+        base: "pagination--md",
+      },
+      sm: {
+        base: "pagination--sm",
+      },
+    },
+  },
+});
+
+export type PaginationVariants = VariantProps<typeof paginationVariants>;

package/src/components/popover/index.ts

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

package/src/components/popover/popover.styles.ts

@@ -0,0 +1,14 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const popoverVariants = tv({
+  slots: {
+    base: "popover",
+    dialog: "popover__dialog",
+    heading: "popover__heading",
+    trigger: "popover__trigger",
+  },
+});
+
+export type PopoverVariants = VariantProps<typeof popoverVariants>;

package/src/components/progress-bar/index.ts

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

package/src/components/progress-bar/progress-bar.styles.ts

@@ -0,0 +1,48 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const progressBarVariants = tv({
+  defaultVariants: {
+    color: "accent",
+    size: "md",
+  },
+  slots: {
+    base: "progress-bar",
+    fill: "progress-bar__fill",
+    output: "progress-bar__output",
+    track: "progress-bar__track",
+  },
+  variants: {
+    color: {
+      accent: {
+        base: "progress-bar--accent",
+      },
+      danger: {
+        base: "progress-bar--danger",
+      },
+      default: {
+        base: "progress-bar--default",
+      },
+      success: {
+        base: "progress-bar--success",
+      },
+      warning: {
+        base: "progress-bar--warning",
+      },
+    },
+    size: {
+      lg: {
+        base: "progress-bar--lg",
+      },
+      md: {
+        base: "progress-bar--md",
+      },
+      sm: {
+        base: "progress-bar--sm",
+      },
+    },
+  },
+});
+
+export type ProgressBarVariants = VariantProps<typeof progressBarVariants>;

package/src/components/progress-circle/index.ts

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

package/src/components/progress-circle/progress-circle.styles.ts

@@ -0,0 +1,48 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const progressCircleVariants = tv({
+  defaultVariants: {
+    color: "accent",
+    size: "md",
+  },
+  slots: {
+    base: "progress-circle",
+    fillCircle: "progress-circle__fill-circle",
+    track: "progress-circle__track",
+    trackCircle: "progress-circle__track-circle",
+  },
+  variants: {
+    color: {
+      accent: {
+        base: "progress-circle--accent",
+      },
+      danger: {
+        base: "progress-circle--danger",
+      },
+      default: {
+        base: "progress-circle--default",
+      },
+      success: {
+        base: "progress-circle--success",
+      },
+      warning: {
+        base: "progress-circle--warning",
+      },
+    },
+    size: {
+      lg: {
+        base: "progress-circle--lg",
+      },
+      md: {
+        base: "progress-circle--md",
+      },
+      sm: {
+        base: "progress-circle--sm",
+      },
+    },
+  },
+});
+
+export type ProgressCircleVariants = VariantProps<typeof progressCircleVariants>;

package/src/components/radio/index.ts

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

package/src/components/radio/radio.styles.ts

@@ -0,0 +1,14 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const radioVariants = tv({
+  slots: {
+    base: "radio",
+    content: "radio__content",
+    control: "radio__control",
+    indicator: "radio__indicator",
+  },
+});
+
+export type RadioVariants = VariantProps<typeof radioVariants>;

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

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

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

@@ -0,0 +1,18 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const radioGroupVariants = tv({
+  base: "radio-group",
+  defaultVariants: {
+    variant: "primary",
+  },
+  variants: {
+    variant: {
+      primary: "radio-group--primary",
+      secondary: "radio-group--secondary",
+    },
+  },
+});
+
+export type RadioGroupVariants = VariantProps<typeof radioGroupVariants>;

package/src/components/range-calendar/index.ts

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

package/src/components/range-calendar/range-calendar.styles.ts

@@ -0,0 +1,36 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const rangeCalendarVariants = tv({
+  defaultVariants: {},
+  slots: {
+    /** Root range calendar container */
+    base: "range-calendar",
+    /** Calendar cell (td) */
+    cell: "range-calendar__cell",
+    /** Cell indicator (small dot at bottom of cell) */
+    cellIndicator: "range-calendar__cell-indicator",
+    /** Calendar grid (table) */
+    grid: "range-calendar__grid",
+    /** Grid body (tbody) */
+    gridBody: "range-calendar__grid-body",
+    /** Grid header (thead) */
+    gridHeader: "range-calendar__grid-header",
+    /** Grid row (tr) */
+    gridRow: "range-calendar__grid-row",
+    /** Calendar header containing heading and navigation */
+    header: "range-calendar__header",
+    /** Header cell (th - day names) */
+    headerCell: "range-calendar__header-cell",
+    /** Month/year heading text */
+    heading: "range-calendar__heading",
+    /** Previous/Next navigation button */
+    navButton: "range-calendar__nav-button",
+    /** Navigation button icon */
+    navButtonIcon: "range-calendar__nav-button-icon",
+  },
+  variants: {},
+});
+
+export type RangeCalendarVariants = VariantProps<typeof rangeCalendarVariants>;

package/src/components/scroll-shadow/index.ts

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