@masaraxui/styles 1.0.0

package/dist/components/toast.css

@@ -0,0 +1,247 @@
+/* Toast component styles */
+
+/* Toast Region - Container for all toasts */
+.toast-region {
+  @apply pointer-events-none fixed z-50 outline-none;
+  @apply w-[calc(100vw-2rem)] sm:w-auto sm:min-w-(--toast-width);
+
+  display: block;
+}
+
+/* Placement variants - Bottom */
+.toast-region--bottom {
+  @apply bottom-4 left-1/2 -translate-x-1/2;
+}
+
+.toast-region--bottom-start {
+  @apply bottom-4 left-4;
+}
+
+.toast-region--bottom-end {
+  @apply right-4 bottom-4;
+}
+
+/* Placement variants - Top */
+.toast-region--top {
+  @apply top-4 left-1/2 -translate-x-1/2;
+}
+
+.toast-region--top-start {
+  @apply top-4 left-4;
+}
+
+.toast-region--top-end {
+  @apply top-4 right-4;
+}
+
+.toast-region:focus-visible {
+  @apply outline-2 outline-offset-2 outline-focus;
+}
+
+/* Base toast styles */
+.toast {
+  position: absolute;
+  left: 0;
+  right: 0;
+
+  @apply pointer-events-auto flex flex-row items-start justify-start gap-1.5 rounded-3xl bg-surface px-4 py-3 shadow-overlay;
+}
+
+.toast--bottom,
+.toast--bottom-start,
+.toast--bottom-end {
+  bottom: 0;
+}
+
+.toast--top,
+.toast--top-start,
+.toast--top-end {
+  top: 0;
+}
+
+.toast:not([data-frontmost="true"]) {
+  @apply pointer-events-none;
+
+  height: var(--front-height);
+  overflow: hidden;
+
+  .toast__close-button {
+    @apply pointer-events-none opacity-0;
+    outline: none;
+  }
+}
+
+.toast[data-hidden="true"] {
+  @apply pointer-events-none flex opacity-0;
+}
+
+.toast:focus-visible {
+  @apply outline-2 outline-offset-2 outline-focus;
+}
+
+/* Toast placements + view transitions */
+.toast--bottom,
+.toast--bottom-start,
+.toast--bottom-end {
+  view-transition-class: toast-bottom;
+}
+
+.toast--top,
+.toast--top-start,
+.toast--top-end {
+  view-transition-class: toast-top;
+}
+
+/* Toast content */
+.toast__content {
+  @apply flex h-full grow flex-col items-start self-center;
+}
+
+/* Toast indicator */
+.toast__indicator {
+  @apply flex shrink-0 items-center justify-center p-1 text-overlay-foreground select-none;
+
+  [data-slot="toast-default-icon"] {
+    @apply box-content size-4;
+  }
+
+  /* Spinner styles override for toast */
+  [data-slot="spinner"] {
+    @apply size-4;
+  }
+
+  [data-slot="spinner-icon"] {
+    @apply size-4;
+  }
+}
+
+/* Toast title */
+.toast__title {
+  @apply text-sm leading-5 font-medium text-overlay-foreground;
+}
+
+/* Toast description */
+.toast__description {
+  @apply text-sm text-muted;
+}
+
+/* Toast close button */
+.toast__close-button {
+  @apply absolute top-2.5 right-2.5 size-5 border-border bg-default opacity-100 sm:pointer-events-none sm:-top-1 sm:-right-1 sm:border sm:bg-overlay sm:opacity-0;
+
+  transition: opacity 150ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+  /* Overrides close button default icon size from 16px to 12px */
+  [data-slot="close-button-icon"] {
+    @apply size-3.5 sm:size-3;
+  }
+
+  /* Overrides close button hover state */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default;
+    }
+  }
+}
+
+/* Only show close button on hover for frontmost toast */
+.toast[data-frontmost="true"]:hover .toast__close-button {
+  @apply pointer-events-auto opacity-100;
+}
+
+/* Toast action button */
+.toast__action {
+  @apply mt-2 sm:mt-0;
+}
+
+/* Variant modifiers */
+.toast--accent .toast__title {
+  @apply text-accent;
+}
+
+.toast--success .toast__title {
+  @apply text-success;
+}
+
+.toast--success .toast__indicator {
+  @apply text-success;
+}
+
+.toast--warning .toast__title {
+  @apply text-warning;
+}
+
+.toast--warning .toast__indicator {
+  @apply text-warning;
+}
+
+.toast--danger .toast__title {
+  @apply text-danger;
+}
+
+.toast--danger .toast__indicator {
+  @apply text-danger;
+}
+
+/* View transition animations */
+::view-transition-group(.toast-bottom),
+::view-transition-group(.toast-top) {
+}
+
+::view-transition-old(*),
+::view-transition-new(*) {
+  will-change: translate, opacity;
+}
+
+/* Bottom */
+::view-transition-new(.toast-bottom):only-child {
+  animation: toast-slide-bottom-in 350ms;
+}
+
+::view-transition-old(.toast-bottom):only-child {
+  animation: toast-slide-bottom-out 350ms;
+  animation-fill-mode: forwards;
+}
+
+/* Top */
+::view-transition-new(.toast-top):only-child {
+  animation: toast-slide-top-in 350ms;
+}
+
+::view-transition-old(.toast-top):only-child {
+  animation: toast-slide-top-out 350ms;
+  animation-fill-mode: forwards;
+}
+
+/* Keyframes */
+
+/* Bottom */
+@keyframes toast-slide-bottom-in {
+  from {
+    translate: 0 100%;
+    opacity: 0;
+  }
+}
+
+@keyframes toast-slide-bottom-out {
+  to {
+    translate: 0 100%;
+    opacity: 0;
+  }
+}
+
+/* Top */
+@keyframes toast-slide-top-in {
+  from {
+    translate: 0 -100%;
+    opacity: 0;
+  }
+}
+
+@keyframes toast-slide-top-out {
+  to {
+    translate: 0 -100%;
+    opacity: 0;
+  }
+}

package/dist/components/toggle-button/index.d.ts

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

package/dist/components/toggle-button/index.d.ts.map

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

package/dist/components/toggle-button/index.js

@@ -0,0 +1 @@
+export { toggleButtonVariants } from './toggle-button.styles.js';

package/dist/components/toggle-button/toggle-button.styles.d.ts

@@ -0,0 +1,43 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const toggleButtonVariants: import("tailwind-variants").TVReturnType<{
+    isIconOnly: {
+        true: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    variant: {
+        default: string;
+        ghost: string;
+    };
+}, undefined, "toggle-button", {
+    isIconOnly: {
+        true: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    variant: {
+        default: string;
+        ghost: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    isIconOnly: {
+        true: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+    };
+    variant: {
+        default: string;
+        ghost: string;
+    };
+}, undefined, "toggle-button", unknown, unknown, undefined>>;
+export type ToggleButtonVariants = VariantProps<typeof toggleButtonVariants>;
+//# sourceMappingURL=toggle-button.styles.d.ts.map

package/dist/components/toggle-button/toggle-button.styles.d.ts.map

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

package/dist/components/toggle-button/toggle-button.styles.js

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

package/dist/components/toggle-button-group/index.d.ts

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

package/dist/components/toggle-button-group/index.d.ts.map

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

package/dist/components/toggle-button-group/index.js

@@ -0,0 +1 @@
+export { toggleButtonGroupVariants } from './toggle-button-group.styles.js';

package/dist/components/toggle-button-group/toggle-button-group.styles.d.ts

@@ -0,0 +1,76 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const toggleButtonGroupVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    isDetached: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    separator: string;
+}, undefined, {
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    isDetached: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    separator: string;
+}, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    isDetached: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    orientation: {
+        horizontal: {
+            base: string;
+        };
+        vertical: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    separator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ToggleButtonGroupVariants = VariantProps<typeof toggleButtonGroupVariants>;
+//# sourceMappingURL=toggle-button-group.styles.d.ts.map

package/dist/components/toggle-button-group/toggle-button-group.styles.d.ts.map

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

package/dist/components/toggle-button-group/toggle-button-group.styles.js

@@ -0,0 +1,37 @@
+import { tv } from 'tailwind-variants';
+
+const toggleButtonGroupVariants = tv({
+    defaultVariants: {
+        fullWidth: false,
+        isDetached: false,
+        orientation: "horizontal",
+    },
+    slots: {
+        base: "toggle-button-group",
+        separator: "toggle-button-group__separator",
+    },
+    variants: {
+        fullWidth: {
+            false: {},
+            true: {
+                base: "toggle-button-group--full-width",
+            },
+        },
+        isDetached: {
+            false: {},
+            true: {
+                base: "toggle-button-group--detached",
+            },
+        },
+        orientation: {
+            horizontal: {
+                base: "toggle-button-group--horizontal",
+            },
+            vertical: {
+                base: "toggle-button-group--vertical",
+            },
+        },
+    },
+});
+
+export { toggleButtonGroupVariants };

package/dist/components/toggle-button-group.css

@@ -0,0 +1,138 @@
+/* ==========================================================================
+   ToggleButtonGroup - Groups multiple ToggleButtons into a unified control
+   ========================================================================== */
+
+/* Base styles */
+.toggle-button-group {
+  @apply inline-flex h-auto w-fit items-center justify-center gap-0;
+}
+
+/* ==========================================================================
+   Orientation variants
+   ========================================================================== */
+
+.toggle-button-group--horizontal {
+  @apply flex-row;
+}
+
+.toggle-button-group--vertical {
+  @apply flex-col;
+}
+
+/* ==========================================================================
+   Full width modifier
+   ========================================================================== */
+
+.toggle-button-group--full-width {
+  @apply w-full;
+}
+
+/* ==========================================================================
+   Attached mode (default) - buttons connected with dividers
+   ========================================================================== */
+
+/* Remove border radius from all toggle buttons in attached group */
+.toggle-button-group .toggle-button {
+  @apply rounded-none;
+}
+
+/* Apply border radius to first button (start edge) */
+.toggle-button-group--horizontal .toggle-button:first-child {
+  @apply rounded-s-3xl;
+}
+
+/* Apply border radius to last button (end edge) */
+.toggle-button-group--horizontal .toggle-button:last-child {
+  @apply rounded-e-3xl;
+}
+
+/* If only one button, apply both rounded edges */
+.toggle-button-group--horizontal .toggle-button:first-child:last-child {
+  @apply rounded-3xl;
+}
+
+/* Apply border radius to first button (top edge) in vertical */
+.toggle-button-group--vertical .toggle-button:first-child {
+  @apply rounded-t-3xl;
+}
+
+/* Apply border radius to last button (bottom edge) in vertical */
+.toggle-button-group--vertical .toggle-button:last-child {
+  @apply rounded-b-3xl;
+}
+
+/* If only one button in vertical, apply all rounded edges */
+.toggle-button-group--vertical .toggle-button:first-child:last-child {
+  @apply rounded-3xl;
+}
+
+/* Remove scale transform on active/pressed state for buttons in group */
+.toggle-button-group .toggle-button:active,
+.toggle-button-group .toggle-button[data-pressed="true"] {
+  transform: none;
+}
+
+/* Override focus ring to use inset style so it stays within button bounds */
+.toggle-button-group .toggle-button:focus-visible:not(:focus),
+.toggle-button-group .toggle-button[data-focus-visible="true"] {
+  --tw-ring-offset-width: 0px;
+  @apply ring-inset;
+}
+
+/* Full width: stretch each toggle button */
+.toggle-button-group--full-width .toggle-button {
+  @apply flex-1;
+}
+
+/* ==========================================================================
+   Separator (compound component)
+   ========================================================================== */
+
+.toggle-button-group__separator {
+  @apply bg-current opacity-15;
+
+  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 orientation - vertical divider */
+  .toggle-button-group--horizontal & {
+    left: -1px;
+    top: 25%;
+    width: 1px;
+    height: 50%;
+  }
+
+  /* Vertical orientation - horizontal divider */
+  .toggle-button-group--vertical & {
+    left: 25%;
+    top: -1px;
+    width: 50%;
+    height: 1px;
+  }
+}
+
+/* ==========================================================================
+   Detached mode - buttons separated with gaps
+   ========================================================================== */
+
+.toggle-button-group--detached {
+  @apply gap-1;
+}
+
+/* Restore border radius in detached mode */
+.toggle-button-group--detached .toggle-button {
+  @apply rounded-3xl;
+}
+
+/* Hide separators in detached mode */
+.toggle-button-group--detached .toggle-button-group__separator {
+  display: none;
+}