@masaraxui/styles 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 MasaraxUI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,265 @@
+# @masaraxui/styles
+
+The core MasaraxUI styles package containing CSS files for components, themes, and utilities. This package provides the foundation for MasaraxUI's design system using Tailwind CSS v4 and is framework-agnostic.
+
+## Documentation
+
+It's the [masarax.com](https://masarax.com) website for the latest version of MasaraxUI.
+
+- **Latest (v3)**: [https://masarax.com](https://masarax.com)
+- **v2**: [https://v2.masarax.com](https://v2.masarax.com)
+
+## Installation
+
+```bash
+npm install @masaraxui/styles
+# or
+pnpm add @masaraxui/styles
+# or
+yarn add @masaraxui/styles
+```
+
+## Usage
+
+### Basic Setup
+
+Import the MasaraxUI styles in your main CSS file:
+
+```css
+@import "@masaraxui/styles";
+```
+
+This will import:
+
+- Tailwind CSS base styles
+- MasaraxUI component styles
+- MasaraxUI utilities
+- Default theme variables
+- Animation utilities from tw-animate-css
+
+### Package Structure
+
+The package exports CSS files organized into:
+
+```
+@masaraxui/styles/
+├── index.css          # Main entry point
+├── base/              # Base styles and CSS variables
+│   └── base.css       # Layout tokens, typography, scrollbar
+├── components/        # Component-specific styles
+│   ├── accordion.css
+│   ├── avatar.css
+│   ├── button.css
+│   ├── chip.css
+│   ├── link.css
+│   ├── popover.css
+│   └── tooltip.css
+├── themes/            # Theme definitions
+│   ├── default/       # Default theme
+│   │   ├── index.css  # Theme entry point
+│   │   └── variables.css  # Theme variables (light/dark)
+│   └── shared/        # Shared theme utilities
+│       └── theme.css  # Calculated variables and utilities
+└── utilities/         # Utility classes
+    ├── backdrop.css
+    └── index.css
+```
+
+### Importing Specific Components
+
+Instead of importing everything, you can import only what you need:
+
+```css
+/* Import Tailwind CSS base */
+@import "tailwindcss";
+
+/* Import only specific components */
+@import "@masaraxui/styles/components/button.css" layer(components);
+@import "@masaraxui/styles/components/chip.css" layer(components);
+
+/* Import theme */
+@import "@masaraxui/styles/themes/default" layer(base);
+```
+
+### Component Classes
+
+Components use a BEM-like naming convention:
+
+- Base: `.button`
+- Variants: `.button--primary`, `.button--danger`
+- Sizes: `.button--sm`, `.button--lg`
+- Modifiers: `.button--icon-only`
+
+#### Button Example
+
+```html
+<!-- Basic button -->
+<button class="button">Click me</button>
+
+<!-- Primary variant -->
+<button class="button button--primary">Save</button>
+
+<!-- Small size -->
+<button class="button button--sm">Small</button>
+
+<!-- Icon-only button -->
+<button class="button button--icon-only">
+  <svg>...</svg>
+</button>
+
+<!-- Combining classes -->
+<button class="button button--primary button--sm">Small Primary</button>
+```
+
+### Themes
+
+The default theme provides automatic light/dark mode support:
+
+- **Light mode**: Applied by default to `:root`
+- **Dark mode**: Applied with `.dark` class or `[data-theme="dark"]` attribute
+
+```html
+<!-- Dark mode with class -->
+<html class="dark">
+  <!-- Dark mode with data attribute -->
+  <html data-theme="dark"></html>
+</html>
+```
+
+### CSS Variables
+
+The package provides a comprehensive set of CSS variables for customization:
+
+#### Layout Tokens
+
+```css
+:root {
+  /* Spacing */
+  --spacing: 0.25rem;
+
+  /* Border */
+  --border-width: 0px; /* no border by default */
+  --field-border-width: var(--border-width);
+  --disabled-opacity: 0.5;
+
+  /* Radius */
+  --radius: 0.5rem;
+  --field-radius: calc(var(--radius) * 1.5);
+
+  /* Ring offset - Used for focus ring */
+  --ring-offset-width: 2px;
+
+  /* Cursor */
+  --cursor-interactive: pointer;
+  --cursor-disabled: not-allowed;
+}
+```
+
+#### Theme Colors
+
+```css
+:root {
+  /* Primitive Colors (Do not change between light and dark) */
+  --white: oklch(100% 0 0);
+  --black: oklch(0% 0 0);
+  --snow: oklch(0.9911 0 0);
+  --eclipse: oklch(0.2103 0.0059 285.89);
+
+  /* Base Colors */
+  --background: oklch(0.9702 0 0);
+  --foreground: var(--eclipse);
+
+  /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */
+  --surface: var(--white);
+  --surface-foreground: var(--foreground);
+
+  /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) */
+  --overlay: var(--white);
+  --overlay-foreground: var(--foreground);
+
+  --muted: oklch(0.5517 0.0138 285.94);
+  --scrollbar: oklch(87.1% 0.006 286.286);
+
+  --default: oklch(94% 0.001 286.375);
+  --default-foreground: var(--eclipse);
+
+  /* Interactive Colors */
+  --accent: oklch(0.6204 0.195 253.83);
+  --accent-foreground: var(--snow);
+
+  /* Status Colors */
+  --success: oklch(0.7329 0.1935 150.81);
+  --success-foreground: var(--eclipse);
+
+  --warning: oklch(0.7819 0.1585 72.33);
+  --warning-foreground: var(--eclipse);
+
+  --danger: oklch(0.6532 0.2328 25.74);
+  --danger-foreground: var(--snow);
+
+  /* Component Colors */
+  --segment: var(--white);
+  --segment-foreground: var(--eclipse);
+
+  /* UI Colors */
+  --border: oklch(0 0 0 / 0%);
+  --separator: oklch(92% 0.004 286.32);
+  --focus: var(--accent);
+  --link: var(--foreground);
+
+  /* Shadows */
+  --surface-shadow:
+    0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.06);
+  --overlay-shadow: 0 4px 16px 0 rgba(24, 24, 27, 0.08), 0 8px 24px 0 rgba(24, 24, 27, 0.09);
+  --field-shadow:
+    0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.06);
+}
+```
+
+**Note**: Dark mode overrides specific variables (like `--background`, `--surface`, `--overlay`, `--muted`, `--scrollbar`, `--default`, `--warning`, `--danger`, `--segment`, `--separator`, and shadow values) when `.dark` class or `[data-theme="dark"]` attribute is applied.
+
+#### Field Tokens
+
+```css
+:root {
+  /* Form field defaults */
+  --field-background: var(--white);
+  --field-foreground: oklch(0.2103 0.0059 285.89);
+  --field-placeholder: var(--muted);
+  --field-border: transparent; /* no border by default on form fields */
+  --field-border-width: var(--border-width);
+  --field-radius: calc(var(--radius) * 1.5);
+}
+```
+
+Providing any of these knobs automatically updates the generated utilities (`bg-field`, `placeholder:text-field-placeholder`, `rounded-field`, etc.) along with the calculated hover/focus variants.
+
+#### Calculated Variables
+
+The theme also provides calculated variables for hover states, soft colors, and surface levels (defined in `themes/shared/theme.css`):
+
+- **Hover states**: `--color-accent-hover`, `--color-success-hover`, `--color-warning-hover`, `--color-danger-hover`, `--color-default-hover`
+- **Soft colors**: `--color-accent-soft`, `--color-danger-soft`, `--color-warning-soft`, `--color-success-soft` (with their foreground and hover variants)
+- **Surface levels**: `--color-surface-secondary`, `--color-surface-tertiary`
+- **Radius scale**: `--radius-xs` through `--radius-4xl` (calculated from `--radius`)
+- **Transition timing functions**: Various easing curves like `--ease-smooth`, `--ease-out-fuild`, etc.
+
+## Dependencies
+
+- **Tailwind CSS v4+**: Required peer dependency
+- **tw-animate-css**: Provides animation utilities
+
+## Build Output
+
+The package provides:
+
+- `index.css`: Main unminified CSS file
+- `masaraxui.min.css`: Minified production-ready CSS (generated during build)
+
+## Framework Integration
+
+This package is designed to work with any framework. For React-specific components, use `@masaraxui/react` which builds on top of these core styles.
+
+## License
+
+MIT

package/dist/base/base.css

@@ -0,0 +1,31 @@
+/*
+ * Scrollbar styles
+ *
+ * TODO: This is a temporary workaround by removing the scrollbar styles.
+ * Global scrollbar styling causes modal/overlay interaction/closure issues
+ * (e.g. backdrop clicks not closing the overlay) and should be removed.
+ */
+/*
+*:not(.alert-dialog__backdrop):not(.modal__backdrop) {
+  scrollbar-color: var(--scrollbar) transparent;
+  scrollbar-width: thin;
+}
+*/
+
+/* Border color inheritance */
+*,
+::after,
+::before,
+::backdrop,
+::file-selector-button {
+  border-color: var(--border, currentColor);
+}
+
+/* Keeps main page content interactive during view transitions */
+:root {
+  view-transition-name: none;
+}
+
+::view-transition {
+  pointer-events: none;
+}

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

@@ -0,0 +1,54 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const accordionVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+        surface: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    body: string;
+    bodyInner: string;
+    heading: string;
+    indicator: string;
+    item: string;
+    panel: string;
+    trigger: string;
+}, undefined, {
+    variant: {
+        default: {};
+        surface: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    body: string;
+    bodyInner: string;
+    heading: string;
+    indicator: string;
+    item: string;
+    panel: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {};
+        surface: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    body: string;
+    bodyInner: string;
+    heading: string;
+    indicator: string;
+    item: string;
+    panel: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;
+type DisclosureRenderPropsKeys = "isExpanded" | "isDisabled" | "state";
+export type AccordionVariants = Omit<VariantProps<typeof accordionVariants>, DisclosureRenderPropsKeys>;
+export {};
+//# sourceMappingURL=accordion.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.styles.d.ts","sourceRoot":"","sources":["../../../src/components/accordion/accordion.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAIpD,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAmB5B,CAAC;AAGH,KAAK,yBAAyB,GAAG,YAAY,GAAG,YAAY,GAAG,OAAO,CAAC;AAEvE,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAClC,YAAY,CAAC,OAAO,iBAAiB,CAAC,EACtC,yBAAyB,CAC1B,CAAC"}

package/dist/components/accordion/accordion.styles.js

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+
+const accordionVariants = tv({
+    slots: {
+        base: "accordion",
+        body: "accordion__body",
+        bodyInner: "accordion__body-inner",
+        heading: "accordion__heading",
+        indicator: "accordion__indicator",
+        item: "accordion__item",
+        panel: "accordion__panel",
+        trigger: "accordion__trigger",
+    },
+    variants: {
+        variant: {
+            default: {},
+            surface: {
+                base: "accordion--surface",
+            },
+        },
+    },
+});
+
+export { accordionVariants };

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

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

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

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

package/dist/components/accordion/index.js

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

package/dist/components/accordion.css

@@ -0,0 +1,149 @@
+/* Base accordion styles */
+.accordion {
+  @apply w-full;
+
+  /* Performance optimization - contain layout changes */
+  contain: layout style;
+}
+
+/* Accordion elements */
+.accordion__body {
+  @apply text-sm;
+}
+
+.accordion__body-inner {
+  @apply px-4 pt-0 pb-4 text-muted;
+}
+
+.accordion__heading {
+  @apply flex;
+}
+
+.accordion__indicator {
+  @apply ml-auto size-4 shrink-0 text-muted;
+
+  /**
+   * Transitions
+   */
+  @apply transition duration-250 motion-reduce:transition-none;
+
+  /* Expanded state for indicator rotation */
+  &[data-expanded="true"] {
+    @apply -rotate-180;
+  }
+}
+
+/* Accordion Item - Separator styles */
+.accordion__item {
+  @apply relative border-none;
+}
+
+.accordion__item::after {
+  content: "";
+  @apply absolute bottom-0 left-0 h-px w-full rounded-full bg-separator;
+}
+
+.accordion__item:last-child::after {
+  content: none;
+}
+
+/* Hide separator when hideSeparator prop is set */
+.accordion__item[data-hide-separator="true"]::after {
+  display: none;
+}
+/* ------------------------------------ */
+
+.accordion__trigger {
+  cursor: var(--cursor-interactive);
+
+  /* Base Styles */
+  @apply flex flex-1 items-center justify-between px-4 py-4 text-left text-sm font-medium no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    opacity 150ms var(--ease-out),
+    box-shadow 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover:not([aria-expanded="true"]),
+    &[data-hovered="true"]:not([aria-expanded="true"]) {
+      background-color: color-mix(in oklab, var(--color-foreground) 3%, transparent 90%);
+    }
+  }
+
+  /* Pressed state */
+  &[data-pressed="true"]:not([aria-expanded="true"]) {
+  }
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled State */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+.accordion__panel {
+  opacity: 0;
+  height: var(--disclosure-panel-height);
+  overflow: clip;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    height 200ms var(--ease-out-quad),
+    opacity 200ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  &[data-expanded="true"] {
+    will-change: height, opacity;
+    opacity: 1;
+  }
+}
+
+/* Surface variant */
+.accordion--surface {
+  @apply rounded-3xl bg-surface;
+
+  .accordion__trigger {
+    @media (hover: hover) {
+      &:hover:not([aria-expanded="true"]),
+      &[data-hovered="true"]:not([aria-expanded="true"]) {
+        @apply bg-default;
+      }
+    }
+  }
+
+  .accordion__item::after {
+    @apply bg-surface-foreground/6;
+  }
+}
+
+.accordion--surface .accordion__item {
+  /* Surface variant separator styling */
+  &::after {
+    @apply left-[3%] w-[94%];
+  }
+
+  /* Special rounding for first and last items in surface variant */
+  &:first-child [data-slot="accordion-trigger"] {
+    @apply rounded-t-3xl;
+  }
+
+  &:last-child:not(:has([data-slot="accordion-trigger"][aria-expanded="true"]))
+    [data-slot="accordion-trigger"] {
+    @apply rounded-b-3xl;
+  }
+}

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

@@ -0,0 +1,76 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const alertVariants: import("tailwind-variants").TVReturnType<{
+    status: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    description: string;
+    indicator: string;
+    title: string;
+}, undefined, {
+    status: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    description: string;
+    indicator: string;
+    title: string;
+}, import("tailwind-variants").TVReturnType<{
+    status: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    description: string;
+    indicator: string;
+    title: string;
+}, undefined, unknown, unknown, undefined>>;
+export type AlertVariants = VariantProps<typeof alertVariants>;
+//# sourceMappingURL=alert.styles.d.ts.map

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

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

package/dist/components/alert/alert.styles.js

@@ -0,0 +1,35 @@
+import { tv } from 'tailwind-variants';
+
+const alertVariants = tv({
+    defaultVariants: {
+        status: "default",
+    },
+    slots: {
+        base: "alert",
+        content: "alert__content",
+        description: "alert__description",
+        indicator: "alert__indicator",
+        title: "alert__title",
+    },
+    variants: {
+        status: {
+            accent: {
+                base: "alert--accent",
+            },
+            danger: {
+                base: "alert--danger",
+            },
+            default: {
+                base: "alert--default",
+            },
+            success: {
+                base: "alert--success",
+            },
+            warning: {
+                base: "alert--warning",
+            },
+        },
+    },
+});
+
+export { alertVariants };

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

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

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

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

package/dist/components/alert/index.js

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