@masaraxui/styles 1.0.0

package/dist/components/tabs/tabs.styles.d.ts

@@ -0,0 +1,51 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const tabsVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {};
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    separator: string;
+    tab: string;
+    tabIndicator: string;
+    tabList: string;
+    tabListContainer: string;
+    tabPanel: string;
+}, undefined, {
+    variant: {
+        primary: {};
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    separator: string;
+    tab: string;
+    tabIndicator: string;
+    tabList: string;
+    tabListContainer: string;
+    tabPanel: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {};
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    separator: string;
+    tab: string;
+    tabIndicator: string;
+    tabList: string;
+    tabListContainer: string;
+    tabPanel: string;
+}, undefined, unknown, unknown, undefined>>;
+type TabsRenderPropsKeys = "selectedKey";
+export type TabsVariants = Omit<VariantProps<typeof tabsVariants>, TabsRenderPropsKeys>;
+export {};
+//# sourceMappingURL=tabs.styles.d.ts.map

package/dist/components/tabs/tabs.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAIpD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAqBvB,CAAC;AAGH,KAAK,mBAAmB,GAAG,aAAa,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,YAAY,CAAC,EAAE,mBAAmB,CAAC,CAAC"}

package/dist/components/tabs/tabs.styles.js

@@ -0,0 +1,26 @@
+import { tv } from 'tailwind-variants';
+
+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",
+            },
+        },
+    },
+});
+
+export { tabsVariants };

package/dist/components/tabs.css

@@ -0,0 +1,243 @@
+/* Base tabs component */
+.tabs {
+  @apply flex gap-2;
+
+  /* Orientation styles */
+  &[data-orientation="horizontal"] {
+    @apply flex-col;
+  }
+
+  &[data-orientation="vertical"] {
+    @apply flex-row;
+  }
+}
+
+/* Tab list container */
+.tabs__list-container {
+  @apply relative;
+}
+
+/* Tab list */
+.tabs__list {
+  @apply inline-flex bg-default p-1;
+
+  border-radius: calc(var(--radius-2xl) + 0.25rem);
+
+  /* Horizontal orientation */
+  &[data-orientation="horizontal"] {
+    @apply w-full flex-row;
+  }
+
+  /* Vertical orientation */
+  &[data-orientation="vertical"] {
+    @apply flex-col gap-1;
+
+    .tabs__tab {
+      @apply min-w-20;
+    }
+  }
+}
+
+/* Individual tab */
+.tabs__tab {
+  position: relative;
+  z-index: 1;
+  cursor: var(--cursor-interactive);
+
+  @apply flex h-8 w-full items-center justify-center rounded-3xl px-4 text-center text-sm font-medium text-muted outline-none no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 150ms var(--ease-smooth),
+    background-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out),
+    opacity 150ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  /* Selected state */
+  &[data-selected="true"] {
+    @apply text-segment-foreground;
+  }
+
+  /* Hide separator when this tab is selected */
+  &[data-selected="true"] .tabs__separator {
+    opacity: 0;
+  }
+
+  /* Hide separator when previous sibling is selected */
+  &[data-selected="true"] + .tabs__tab .tabs__separator {
+    opacity: 0;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Hover states - both approaches for compatibility */
+  @media (hover: hover) {
+    &:not([data-selected="true"]):not([data-disabled="true"]):hover,
+    &[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) {
+      @apply opacity-70;
+    }
+  }
+
+  /* Focus states - comprehensive fallback */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+}
+
+/* Tab separator */
+.tabs__separator {
+  @apply bg-muted/25;
+
+  border-radius: 4px;
+  position: absolute;
+  pointer-events: none;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition: opacity 150ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  /* Horizontal tabs - vertical separator */
+  .tabs__list[data-orientation="horizontal"] & {
+    left: 0;
+    top: 25%;
+    width: 1px;
+    height: 50%;
+  }
+
+  /* Vertical tabs - horizontal separator */
+  .tabs__list[data-orientation="vertical"] & {
+    top: 0;
+    left: 5%;
+    width: 90%;
+    height: 1px;
+  }
+}
+
+/* Tab panel */
+.tabs__panel {
+  @apply w-full p-2 outline-none;
+
+  /* Entering animations */
+  &[data-entering="true"] {
+  }
+
+  /* Exiting animations */
+  &[data-exiting="true"] {
+    @apply absolute top-0 left-0 w-full;
+  }
+
+  /* Orientation spacing */
+  &[data-orientation="horizontal"] {
+    @apply mt-4;
+  }
+
+  &[data-orientation="vertical"] {
+    @apply ml-4;
+  }
+}
+
+/* Tab indicator - React Aria's SelectionIndicator */
+.tabs__indicator {
+  box-shadow: var(--shadow-surface);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  border-radius: var(--radius-3xl);
+  width: 100%;
+  height: 100%;
+
+  @apply bg-segment;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition-duration: 250ms;
+  transition-property: translate, width, height;
+  transition-timing-function: var(--ease-out-fluid);
+  @apply motion-reduce:transition-none;
+}
+
+/* ==========================================================================
+   Secondary Variant
+   ========================================================================== */
+
+.tabs--secondary {
+  /* Tab list - remove background, add bottom/left border */
+  .tabs__list {
+    @apply bg-transparent p-0;
+
+    border-radius: 0;
+
+    /* Horizontal orientation - bottom border, scrollable */
+    &[data-orientation="horizontal"] {
+      @apply border-b border-border;
+
+      max-width: 100%;
+      overflow-x: auto;
+      overflow-y: clip;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    /* Vertical orientation - left border */
+    &[data-orientation="vertical"] {
+      @apply border-l border-border;
+    }
+  }
+
+  /* Tab - adjust for secondary variant */
+  .tabs__tab {
+    @apply rounded-none;
+
+    /* Selected state - use text-foreground */
+    &[data-selected="true"] {
+      @apply text-foreground;
+    }
+  }
+
+  /* Hide separators in secondary variant */
+  .tabs__separator {
+    display: none;
+  }
+
+  /* Tab indicator - line style */
+  .tabs__indicator {
+    @apply bg-accent;
+
+    box-shadow: none;
+    border-radius: 0;
+  }
+
+  /* Horizontal orientation - bottom line indicator */
+  &[data-orientation="horizontal"] .tabs__indicator {
+    top: auto;
+    bottom: 0;
+    height: 2px;
+  }
+
+  /* Vertical orientation - left line indicator */
+  &[data-orientation="vertical"] .tabs__indicator {
+    left: 0;
+    top: 0;
+    width: 2px;
+    height: 100%;
+  }
+}

package/dist/components/tag/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./tag.styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tag/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/tag/index.js

@@ -0,0 +1 @@
+export { tagVariants } from './tag.styles.js';

package/dist/components/tag/tag.styles.d.ts

@@ -0,0 +1,73 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const tagVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {
+            base: string;
+        };
+        surface: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    removeButton: string;
+}, undefined, {
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {
+            base: string;
+        };
+        surface: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    removeButton: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        default: {
+            base: string;
+        };
+        surface: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    removeButton: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TagVariants = VariantProps<typeof tagVariants>;
+//# sourceMappingURL=tag.styles.d.ts.map

package/dist/components/tag/tag.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tag/tag.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAIpD,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CA8BtB,CAAC;AAEH,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC"}

package/dist/components/tag/tag.styles.js

@@ -0,0 +1,35 @@
+import { tv } from 'tailwind-variants';
+
+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 { tagVariants };

package/dist/components/tag-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./tag-group.styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/tag-group/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/tag-group/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAC"}

package/dist/components/tag-group/index.js

@@ -0,0 +1 @@
+export { tagGroupVariants } from './tag-group.styles.js';

package/dist/components/tag-group/tag-group.styles.d.ts

@@ -0,0 +1,34 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const tagGroupVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    list: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            list?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    list: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    list: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TagGroupVariants = VariantProps<typeof tagGroupVariants>;
+//# sourceMappingURL=tag-group.styles.d.ts.map

package/dist/components/tag-group/tag-group.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tag-group.styles.d.ts","sourceRoot":"","sources":["../../../src/components/tag-group/tag-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAIpD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAK3B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/tag-group/tag-group.styles.js

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+
+const tagGroupVariants = tv({
+    slots: {
+        base: "tag-group",
+        list: "tag-group__list",
+    },
+});
+
+export { tagGroupVariants };

package/dist/components/tag-group.css

@@ -0,0 +1,15 @@
+/* Base styles */
+.tag-group {
+  @apply relative flex flex-col gap-1;
+}
+
+.tag-group__list {
+  @apply relative flex flex-wrap gap-1.5;
+}
+
+.tag-group [slot="description"],
+.tag-group [data-slot="description"],
+.tag-group [slot="errorMessage"],
+.tag-group [data-slot="error-message"] {
+  @apply p-1;
+}

package/dist/components/tag.css

@@ -0,0 +1,98 @@
+/* Tag component styles */
+.tag {
+  --optical-offset: 0.031em;
+
+  @apply relative inline-flex items-center gap-1 rounded-full font-medium select-none no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 100ms var(--ease-smooth),
+    scale 100ms var(--ease-smooth),
+    opacity 100ms var(--ease-smooth),
+    background-color 100ms var(--ease-smooth),
+    box-shadow 100ms var(--ease-out);
+  @apply origin-center transform-gpu motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /* SVG icon styling */
+  & svg {
+    @apply pointer-events-none size-3 shrink-0 self-center text-current;
+  }
+}
+
+/* Disabled state */
+.tag:is([data-disabled="true"], [aria-disabled="true"]) {
+  @apply status-disabled;
+}
+
+/* Focus visible state (keyboard focus only) */
+.tag:is(:focus-visible, [data-focus-visible]) {
+  @apply status-focused;
+}
+
+/* Pressed/Active state */
+.tag:is(:active, [data-pressed="true"]) {
+}
+
+/* Selected state */
+.tag:is([data-selected="true"], [aria-selected="true"]) {
+  @apply bg-accent-soft text-accent-soft-foreground;
+
+  /* Selected + Hover state */
+  @media (hover: hover) {
+    &:is(:hover, [data-hovered="true"]) {
+      @apply bg-accent-soft-hover;
+    }
+  }
+}
+
+/* Size */
+.tag--sm {
+  @apply px-1 py-0.5 text-xs;
+}
+
+.tag--md {
+  @apply px-1.5 py-1 text-xs;
+}
+
+.tag--lg {
+  @apply px-2.5 py-1.5 text-sm;
+}
+
+/* Variant */
+.tag--default {
+  @apply bg-default text-default-foreground;
+
+  /* Hover state (when not selected or disabled) */
+  @media (hover: hover) {
+    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
+      @apply bg-default-hover;
+    }
+  }
+}
+
+.tag--surface {
+  @apply bg-surface text-surface-foreground;
+
+  /* Hover state (when not selected or disabled) */
+  @media (hover: hover) {
+    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
+      @apply bg-surface-hover;
+    }
+  }
+}
+
+/* Remove Button  */
+.tag__remove-button {
+  @apply size-3 text-inherit;
+
+  /* SVG icon styling */
+  & svg {
+    @apply size-[inherit] shrink-0 self-center text-current;
+  }
+}

package/dist/components/text/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./text.styles";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/text/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/text/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/components/text/index.js

@@ -0,0 +1 @@
+export { textVariants } from './text.styles.js';

package/dist/components/text/text.styles.d.ts

@@ -0,0 +1,49 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const textVariants: import("tailwind-variants").TVReturnType<{
+    size: {
+        base: string;
+        lg: string;
+        sm: string;
+        xl: string;
+        xs: string;
+    };
+    variant: {
+        danger: string;
+        default: string;
+        muted: string;
+        success: string;
+        warning: string;
+    };
+}, undefined, string[], {
+    size: {
+        base: string;
+        lg: string;
+        sm: string;
+        xl: string;
+        xs: string;
+    };
+    variant: {
+        danger: string;
+        default: string;
+        muted: string;
+        success: string;
+        warning: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        base: string;
+        lg: string;
+        sm: string;
+        xl: string;
+        xs: string;
+    };
+    variant: {
+        danger: string;
+        default: string;
+        muted: string;
+        success: string;
+        warning: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export type TextVariants = VariantProps<typeof textVariants>;
+//# sourceMappingURL=text.styles.d.ts.map

package/dist/components/text/text.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.styles.d.ts","sourceRoot":"","sources":["../../../src/components/text/text.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAIpD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAsBvB,CAAC;AAEH,MAAM,MAAM,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC"}