@masaraxui/styles 1.0.0

package/dist/components/toggle-button.css

@@ -0,0 +1,149 @@
+/* ==========================================================================
+   ToggleButton - Interactive toggle control for on/off states
+   ========================================================================== */
+
+/* Base styles */
+.toggle-button {
+  @apply relative isolate inline-flex h-10 w-fit origin-center items-center justify-center gap-2 rounded-3xl px-4 text-sm font-medium whitespace-nowrap outline-none select-none no-highlight md:h-9;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 250ms var(--ease-smooth),
+    background-color 100ms var(--ease-out),
+    box-shadow 100ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /* Default tokens (unselected state) */
+  --toggle-button-bg: var(--color-default);
+  --toggle-button-bg-hover: var(--color-default-hover);
+  --toggle-button-bg-pressed: var(--color-default-hover);
+  --toggle-button-fg: currentColor;
+
+  /* Selected state tokens */
+  --toggle-button-bg-selected: var(--color-accent-soft);
+  --toggle-button-bg-selected-hover: var(--color-accent-soft-hover);
+  --toggle-button-bg-selected-pressed: var(--color-accent-soft-hover);
+  --toggle-button-fg-selected: var(--color-accent-soft-foreground);
+
+  background-color: var(--toggle-button-bg);
+  color: var(--toggle-button-fg);
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Hover */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      background-color: var(--toggle-button-bg-hover);
+    }
+  }
+
+  /* Active / pressed */
+  &:active,
+  &[data-pressed="true"] {
+    background-color: var(--toggle-button-bg-pressed);
+    transform: scale(0.97);
+  }
+
+  /* Selected state */
+  &[data-selected="true"] {
+    background-color: var(--toggle-button-bg-selected);
+    color: var(--toggle-button-fg-selected);
+
+    @media (hover: hover) {
+      &:hover,
+      &[data-hovered="true"] {
+        background-color: var(--toggle-button-bg-selected-hover);
+      }
+    }
+
+    &:active,
+    &[data-pressed="true"] {
+      background-color: var(--toggle-button-bg-selected-pressed);
+    }
+  }
+
+  /* SVG icon styling */
+  & svg {
+    @apply pointer-events-none -mx-0.5 my-0.5 size-5 shrink-0 self-center sm:my-1 sm:size-4;
+  }
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.toggle-button--sm {
+  @apply h-9 px-3 md:h-8;
+
+  & svg {
+    @apply size-4;
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.98);
+  }
+}
+
+.toggle-button--md {
+  /* No styles as this is the default size */
+}
+
+.toggle-button--lg {
+  @apply h-11 text-base md:h-10;
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.96);
+  }
+}
+
+/* ==========================================================================
+   Variant styles
+   ========================================================================== */
+
+.toggle-button--default {
+  --toggle-button-bg: var(--color-default);
+  --toggle-button-bg-hover: var(--color-default-hover);
+  --toggle-button-bg-pressed: var(--color-default-hover);
+}
+
+.toggle-button--ghost {
+  --toggle-button-bg: transparent;
+  --toggle-button-bg-hover: var(--color-default);
+  --toggle-button-bg-pressed: var(--color-default);
+  --toggle-button-fg: var(--color-default-foreground);
+}
+
+/* ==========================================================================
+   Icon-only modifier
+   ========================================================================== */
+
+.toggle-button--icon-only {
+  @apply w-10 p-0 md:w-9;
+}
+
+.toggle-button--icon-only.toggle-button--sm {
+  @apply w-9 md:w-8;
+}
+
+.toggle-button--icon-only.toggle-button--lg {
+  @apply w-11 md:w-10;
+}

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

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

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

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

package/dist/components/toolbar/index.js

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

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

@@ -0,0 +1,29 @@
+import type { VariantProps } from "tailwind-variants";
+declare const toolbarVariants: import("tailwind-variants").TVReturnType<{
+    isAttached: {
+        true: string;
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, "toolbar", {
+    isAttached: {
+        true: string;
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    isAttached: {
+        true: string;
+    };
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, "toolbar", unknown, unknown, undefined>>;
+export { toolbarVariants };
+export type ToolbarVariants = VariantProps<typeof toolbarVariants>;
+//# sourceMappingURL=toolbar.styles.d.ts.map

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

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

package/dist/components/toolbar/toolbar.styles.js

@@ -0,0 +1,20 @@
+import { tv } from 'tailwind-variants';
+
+const toolbarVariants = tv({
+    base: "toolbar",
+    defaultVariants: {
+        isAttached: false,
+        orientation: "horizontal",
+    },
+    variants: {
+        isAttached: {
+            true: "toolbar--attached",
+        },
+        orientation: {
+            horizontal: "toolbar--horizontal",
+            vertical: "toolbar--vertical",
+        },
+    },
+});
+
+export { toolbarVariants };

package/dist/components/toolbar.css

@@ -0,0 +1,32 @@
+/* ==========================================================================
+   Toolbar - Container for interactive controls with arrow key navigation
+   ========================================================================== */
+
+/* Base styles */
+.toolbar {
+  @apply grid w-fit grid-flow-col items-center gap-2;
+
+  .separator--vertical {
+    @apply h-1/2 self-center;
+  }
+
+  .separator--horizontal {
+    @apply w-1/2 justify-center justify-self-center;
+  }
+}
+
+/* Orientation variants */
+.toolbar--horizontal {
+}
+
+.toolbar--vertical {
+  @apply grid-flow-row items-start justify-start;
+  .button-group {
+    @apply justify-start;
+  }
+}
+
+/* Attached variant */
+.toolbar--attached {
+  @apply rounded-full bg-surface p-1 shadow-overlay;
+}

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

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

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

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

package/dist/components/tooltip/index.js

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

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

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

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

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

package/dist/components/tooltip/tooltip.styles.js

@@ -0,0 +1,10 @@
+import { tv } from 'tailwind-variants';
+
+const tooltipVariants = tv({
+    slots: {
+        base: "tooltip",
+        trigger: "tooltip__trigger",
+    },
+});
+
+export { tooltipVariants };

package/dist/components/tooltip.css

@@ -0,0 +1,76 @@
+/* Tooltip component styles */
+
+/* Base tooltip styles */
+.tooltip {
+  @apply max-w-xs origin-(--trigger-anchor-point) rounded-xl bg-overlay px-2 py-1 text-xs break-all;
+  box-shadow: var(--shadow-overlay);
+
+  /* Entering animations */
+  &[data-entering="true"] {
+    @apply animate-in duration-150 ease-smooth fade-in-0 zoom-in-90;
+
+    /* Placement-specific translations */
+    &[data-placement="top"] {
+      @apply slide-in-from-bottom-1;
+    }
+
+    &[data-placement="bottom"] {
+      @apply slide-in-from-top-1;
+    }
+
+    &[data-placement="left"] {
+      @apply slide-in-from-right-1;
+    }
+
+    &[data-placement="right"] {
+      @apply slide-in-from-left-1;
+    }
+  }
+
+  /* Exiting animations */
+  &[data-exiting="true"] {
+    @apply animate-out duration-100 ease-smooth zoom-out-95 fade-out;
+  }
+
+  &[data-exiting="true"],
+  &[data-entering="true"] {
+    @apply will-change-[opacity,transform];
+  }
+
+  /* Arrow styling */
+  & [data-slot="overlay-arrow"] {
+    @apply stroke-border/40;
+    fill: var(--overlay);
+  }
+
+  /* Arrow rotation based on placement */
+  &[data-placement="bottom"] [data-slot="overlay-arrow"] {
+    rotate: 180deg;
+  }
+
+  &[data-placement="left"] [data-slot="overlay-arrow"] {
+    rotate: -90deg;
+  }
+
+  &[data-placement="right"] [data-slot="overlay-arrow"] {
+    rotate: 90deg;
+  }
+}
+
+/* Tooltip trigger */
+.tooltip__trigger {
+  /**
+   * 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);
+  @apply motion-reduce:transition-none;
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+}

package/dist/index.css

@@ -0,0 +1,22 @@
+@layer theme, base, components, utilities;
+
+/* MasaraxUI v3 Styles - Layered Theme Architecture */
+
+/* Base layer - Tailwind CSS v4 */
+@import "tailwindcss";
+@import "tw-animate-css";
+
+/* Base styles */
+@import "./base/base.css" layer(base);
+
+/* Base component structures (unstyled) */
+@import "./components/index.css" layer(components);
+
+/* Default theme (variables + component customizations) */
+@import "./themes/default/index.css" layer(theme);
+
+/* Utilities */
+@import "./utilities/index.css";
+
+/* Variants */
+@import "./variants/index.css";

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { tv, cn, type VariantProps } from "tailwind-variants";
+export * from "./utils";
+export * from "./components";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,EAAE,EAAE,EAAE,EAAE,KAAK,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAG5D,cAAc,SAAS,CAAC;AAGxB,cAAc,cAAc,CAAC"}

package/dist/index.js

@@ -0,0 +1,85 @@
+export { cn, tv } from 'tailwind-variants';
+export { ariaDisabledClasses, disabledClasses, focusRingClasses } from './utils/index.js';
+export { accordionVariants } from './components/accordion/accordion.styles.js';
+export { alertVariants } from './components/alert/alert.styles.js';
+export { alertDialogVariants } from './components/alert-dialog/alert-dialog.styles.js';
+export { autocompleteVariants } from './components/autocomplete/autocomplete.styles.js';
+export { avatarVariants } from './components/avatar/avatar.styles.js';
+export { badgeVariants } from './components/badge/badge.styles.js';
+export { breadcrumbsVariants } from './components/breadcrumbs/breadcrumbs.styles.js';
+export { buttonVariants } from './components/button/button.styles.js';
+export { buttonGroupVariants } from './components/button-group/button-group.styles.js';
+export { calendarVariants } from './components/calendar/calendar.styles.js';
+export { calendarYearPickerVariants } from './components/calendar-year-picker/calendar-year-picker.styles.js';
+export { rangeCalendarVariants } from './components/range-calendar/range-calendar.styles.js';
+export { cardVariants } from './components/card/card.styles.js';
+export { checkboxVariants } from './components/checkbox/checkbox.styles.js';
+export { checkboxGroupVariants } from './components/checkbox-group/checkbox-group.styles.js';
+export { chipVariants } from './components/chip/chip.styles.js';
+export { colorAreaVariants } from './components/color-area/color-area.styles.js';
+export { colorFieldVariants } from './components/color-field/color-field.styles.js';
+export { colorInputGroupVariants } from './components/color-input-group/color-input-group.styles.js';
+export { colorPickerVariants } from './components/color-picker/color-picker.styles.js';
+export { colorSliderVariants } from './components/color-slider/color-slider.styles.js';
+export { colorSwatchVariants } from './components/color-swatch/color-swatch.styles.js';
+export { closeButtonVariants } from './components/close-button/close-button.styles.js';
+export { colorSwatchPickerVariants } from './components/color-swatch-picker/color-swatch-picker.styles.js';
+export { comboBoxVariants } from './components/combo-box/combo-box.styles.js';
+export { dateFieldVariants } from './components/date-field/date-field.styles.js';
+export { datePickerVariants } from './components/date-picker/date-picker.styles.js';
+export { dateRangePickerVariants } from './components/date-range-picker/date-range-picker.styles.js';
+export { dateInputGroupVariants } from './components/date-input-group/date-input-group.styles.js';
+export { descriptionVariants } from './components/description/description.styles.js';
+export { drawerVariants } from './components/drawer/drawer.styles.js';
+export { disclosureVariants } from './components/disclosure/disclosure.styles.js';
+export { disclosureGroupVariants } from './components/disclosure-group/disclosure-group.styles.js';
+export { dropdownVariants } from './components/dropdown/dropdown.styles.js';
+export { emptyStateVariants } from './components/empty-state/empty-state.styles.js';
+export { errorMessageVariants } from './components/error-message/error-message.styles.js';
+export { fieldErrorVariants } from './components/field-error/field-error.styles.js';
+export { fieldsetVariants } from './components/fieldset/fieldset.styles.js';
+export { headerVariants } from './components/header/header.styles.js';
+export { inputVariants } from './components/input/input.styles.js';
+export { inputGroupVariants } from './components/input-group/input-group.styles.js';
+export { inputOTPVariants } from './components/input-otp/input-otp.styles.js';
+export { kbdVariants } from './components/kbd/kbd.styles.js';
+export { labelVariants } from './components/label/label.styles.js';
+export { linkVariants } from './components/link/link.styles.js';
+export { listboxVariants } from './components/list-box/list-box.styles.js';
+export { listboxItemVariants } from './components/list-box-item/list-box-item.styles.js';
+export { listboxSectionVariants } from './components/list-box-section/list-box-section.styles.js';
+export { menuVariants } from './components/menu/menu.styles.js';
+export { meterVariants } from './components/meter/meter.styles.js';
+export { progressBarVariants } from './components/progress-bar/progress-bar.styles.js';
+export { progressCircleVariants } from './components/progress-circle/progress-circle.styles.js';
+export { menuItemVariants } from './components/menu-item/menu-item.styles.js';
+export { menuSectionVariants } from './components/menu-section/menu-section.styles.js';
+export { modalVariants } from './components/modal/modal.styles.js';
+export { numberFieldVariants } from './components/number-field/number-field.styles.js';
+export { paginationVariants } from './components/pagination/pagination.styles.js';
+export { popoverVariants } from './components/popover/popover.styles.js';
+export { radioVariants } from './components/radio/radio.styles.js';
+export { radioGroupVariants } from './components/radio-group/radio-group.styles.js';
+export { scrollShadowVariants } from './components/scroll-shadow/scroll-shadow.styles.js';
+export { searchFieldVariants } from './components/search-field/search-field.styles.js';
+export { selectVariants } from './components/select/select.styles.js';
+export { separatorVariants } from './components/separator/separator.styles.js';
+export { skeletonVariants } from './components/skeleton/skeleton.styles.js';
+export { sliderVariants } from './components/slider/slider.styles.js';
+export { spinnerVariants } from './components/spinner/spinner.styles.js';
+export { surfaceVariants } from './components/surface/surface.styles.js';
+export { switchVariants } from './components/switch/switch.styles.js';
+export { switchGroupVariants } from './components/switch-group/switch-group.styles.js';
+export { tableVariants } from './components/table/table.styles.js';
+export { tabsVariants } from './components/tabs/tabs.styles.js';
+export { tagVariants } from './components/tag/tag.styles.js';
+export { tagGroupVariants } from './components/tag-group/tag-group.styles.js';
+export { textVariants } from './components/text/text.styles.js';
+export { textFieldVariants } from './components/textfield/textfield.styles.js';
+export { textAreaVariants } from './components/textarea/textarea.styles.js';
+export { timeFieldVariants } from './components/time-field/time-field.styles.js';
+export { toastVariants } from './components/toast/toast.styles.js';
+export { toggleButtonVariants } from './components/toggle-button/toggle-button.styles.js';
+export { toggleButtonGroupVariants } from './components/toggle-button-group/toggle-button-group.styles.js';
+export { toolbarVariants } from './components/toolbar/toolbar.styles.js';
+export { tooltipVariants } from './components/tooltip/tooltip.styles.js';