@masaraxui/styles 1.0.0

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

@@ -0,0 +1,37 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const scrollShadowVariants = tv({
+  defaultVariants: {
+    hideScrollBar: false,
+    orientation: "vertical",
+    variant: "fade",
+  },
+  slots: {
+    base: "scroll-shadow",
+  },
+  variants: {
+    hideScrollBar: {
+      false: {},
+      true: {
+        base: "scroll-shadow--hide-scrollbar",
+      },
+    },
+    orientation: {
+      horizontal: {
+        base: "scroll-shadow--horizontal",
+      },
+      vertical: {
+        base: "scroll-shadow--vertical",
+      },
+    },
+    variant: {
+      fade: {
+        base: "scroll-shadow--fade",
+      },
+    },
+  },
+});
+
+export type ScrollShadowVariants = VariantProps<typeof scrollShadowVariants>;

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

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

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

@@ -0,0 +1,36 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const searchFieldVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    variant: "primary",
+  },
+  slots: {
+    base: "search-field",
+    clearButton: "search-field__clear-button",
+    group: "search-field__group",
+    input: "search-field__input",
+    searchIcon: "search-field__search-icon",
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "search-field--full-width",
+        group: "search-field__group--full-width",
+      },
+    },
+    variant: {
+      primary: {
+        base: "search-field--primary",
+      },
+      secondary: {
+        base: "search-field--secondary",
+      },
+    },
+  },
+});
+
+export type SearchFieldVariants = VariantProps<typeof searchFieldVariants>;

package/src/components/select/index.ts

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

package/src/components/select/select.styles.ts

@@ -0,0 +1,36 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const selectVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    variant: "primary",
+  },
+  slots: {
+    base: "select",
+    indicator: "select__indicator",
+    popover: "select__popover",
+    trigger: "select__trigger",
+    value: "select__value",
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: "select--full-width",
+        trigger: "select__trigger--full-width",
+      },
+    },
+    variant: {
+      primary: {
+        base: "select--primary",
+      },
+      secondary: {
+        base: "select--secondary",
+      },
+    },
+  },
+});
+
+export type SelectVariants = VariantProps<typeof selectVariants>;

package/src/components/separator/index.ts

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

package/src/components/separator/separator.styles.ts

@@ -0,0 +1,25 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+const separatorVariants = tv({
+  base: "separator",
+  defaultVariants: {
+    orientation: "horizontal",
+    variant: "default",
+  },
+  variants: {
+    orientation: {
+      horizontal: "separator--horizontal",
+      vertical: "separator--vertical",
+    },
+    variant: {
+      default: "separator--default",
+      secondary: "separator--secondary",
+      tertiary: "separator--tertiary",
+    },
+  },
+});
+
+export {separatorVariants};
+export type SeparatorVariants = VariantProps<typeof separatorVariants>;

package/src/components/skeleton/index.ts

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

package/src/components/skeleton/skeleton.styles.ts

@@ -0,0 +1,21 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const skeletonVariants = tv({
+  defaultVariants: {
+    animationType: "shimmer",
+  },
+  slots: {
+    base: "skeleton",
+  },
+  variants: {
+    animationType: {
+      none: "skeleton--none",
+      pulse: "skeleton--pulse",
+      shimmer: "skeleton--shimmer",
+    },
+  },
+});
+
+export type SkeletonVariants = VariantProps<typeof skeletonVariants>;

package/src/components/slider/index.ts

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

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

@@ -0,0 +1,16 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const sliderVariants = tv({
+  slots: {
+    base: "slider",
+    fill: "slider__fill",
+    marks: "slider__marks",
+    output: "slider__output",
+    thumb: "slider__thumb",
+    track: "slider__track",
+  },
+});
+
+export type SliderVariants = VariantProps<typeof sliderVariants>;

package/src/components/spinner/index.ts

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

package/src/components/spinner/spinner.styles.ts

@@ -0,0 +1,28 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const spinnerVariants = tv({
+  base: "spinner",
+  defaultVariants: {
+    color: "accent",
+    size: "md",
+  },
+  variants: {
+    color: {
+      accent: "spinner--accent",
+      current: "spinner--current",
+      danger: "spinner--danger",
+      success: "spinner--success",
+      warning: "spinner--warning",
+    },
+    size: {
+      lg: "spinner--lg",
+      md: "spinner--md",
+      sm: "spinner--sm",
+      xl: "spinner--xl",
+    },
+  },
+});
+
+export type SpinnerVariants = VariantProps<typeof spinnerVariants>;

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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const textVariants = tv({
+  base: ["transition-colors duration-200"],
+  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,23 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const textAreaVariants = tv({
+  base: "textarea",
+  defaultVariants: {
+    fullWidth: false,
+    variant: "primary",
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "textarea--full-width",
+    },
+    variant: {
+      primary: "textarea--primary",
+      secondary: "textarea--secondary",
+    },
+  },
+});
+
+export type TextAreaVariants = VariantProps<typeof textAreaVariants>;

package/src/components/textfield/index.ts

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

package/src/components/textfield/textfield.styles.ts

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

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,18 @@
+import type {VariantProps} from "tailwind-variants";
+
+import {tv} from "tailwind-variants";
+
+export const timeFieldVariants = tv({
+  base: "time-field",
+  defaultVariants: {
+    fullWidth: false,
+  },
+  variants: {
+    fullWidth: {
+      false: "",
+      true: "time-field--full-width",
+    },
+  },
+});
+
+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 "tailwind-variants";
+
+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 "tailwind-variants";
+
+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";