@masaraxui/styles 1.0.0

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

@@ -0,0 +1,10 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const disclosureGroupVariants: import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+}, undefined, {}, {
+    base: string;
+}, import("tailwind-variants").TVReturnType<{}, {
+    base: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DisclosureGroupVariants = VariantProps<typeof disclosureGroupVariants>;
+//# sourceMappingURL=disclosure-group.styles.d.ts.map

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

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

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

@@ -0,0 +1,11 @@
+import { tv } from 'tailwind-variants';
+
+const disclosureGroupVariants = tv({
+    defaultVariants: {},
+    slots: {
+        base: "disclosure-group",
+    },
+    variants: {},
+});
+
+export { disclosureGroupVariants };

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

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

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

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

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

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

package/dist/components/disclosure-group.css

@@ -0,0 +1,7 @@
+/* Base disclosure-group styles */
+.disclosure-group {
+  @apply w-full;
+
+  /* Performance optimization - contain layout changes */
+  contain: layout style;
+}

package/dist/components/disclosure.css

@@ -0,0 +1,63 @@
+/* Base disclosure styles */
+.disclosure {
+  @apply relative;
+}
+
+.accordion__heading {
+  @apply flex;
+}
+
+.disclosure__trigger {
+  cursor: var(--cursor-interactive);
+  @apply no-highlight;
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+.disclosure__indicator {
+  @apply ml-auto size-4 shrink-0 text-inherit;
+
+  /**
+   * Transitions
+   */
+  @apply transition duration-250 motion-reduce:transition-none;
+
+  /* Expanded state for indicator rotation */
+  &[data-expanded="true"] {
+    @apply -rotate-180;
+  }
+}
+
+.disclosure__content {
+  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;
+  }
+}
+
+.disclosure__body {
+  @apply p-2;
+}

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

@@ -0,0 +1,127 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const drawerVariants: import("tailwind-variants").TVReturnType<{
+    placement: {
+        bottom: {
+            content: string;
+            dialog: string;
+        };
+        left: {
+            content: string;
+            dialog: string;
+        };
+        right: {
+            content: string;
+            dialog: string;
+        };
+        top: {
+            content: string;
+            dialog: string;
+        };
+    };
+    variant: {
+        blur: {
+            backdrop: string;
+        };
+        opaque: {
+            backdrop: string;
+        };
+        transparent: {
+            backdrop: string;
+        };
+    };
+}, {
+    backdrop: string;
+    body: string;
+    closeTrigger: string;
+    content: string;
+    dialog: string;
+    footer: string;
+    handle: string;
+    header: string;
+    heading: string;
+    trigger: string;
+}, undefined, {
+    placement: {
+        bottom: {
+            content: string;
+            dialog: string;
+        };
+        left: {
+            content: string;
+            dialog: string;
+        };
+        right: {
+            content: string;
+            dialog: string;
+        };
+        top: {
+            content: string;
+            dialog: string;
+        };
+    };
+    variant: {
+        blur: {
+            backdrop: string;
+        };
+        opaque: {
+            backdrop: string;
+        };
+        transparent: {
+            backdrop: string;
+        };
+    };
+}, {
+    backdrop: string;
+    body: string;
+    closeTrigger: string;
+    content: string;
+    dialog: string;
+    footer: string;
+    handle: string;
+    header: string;
+    heading: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<{
+    placement: {
+        bottom: {
+            content: string;
+            dialog: string;
+        };
+        left: {
+            content: string;
+            dialog: string;
+        };
+        right: {
+            content: string;
+            dialog: string;
+        };
+        top: {
+            content: string;
+            dialog: string;
+        };
+    };
+    variant: {
+        blur: {
+            backdrop: string;
+        };
+        opaque: {
+            backdrop: string;
+        };
+        transparent: {
+            backdrop: string;
+        };
+    };
+}, {
+    backdrop: string;
+    body: string;
+    closeTrigger: string;
+    content: string;
+    dialog: string;
+    footer: string;
+    handle: string;
+    header: string;
+    heading: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DrawerVariants = VariantProps<typeof drawerVariants>;
+//# sourceMappingURL=drawer.styles.d.ts.map

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

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

package/dist/components/drawer/drawer.styles.js

@@ -0,0 +1,53 @@
+import { tv } from 'tailwind-variants';
+
+const drawerVariants = tv({
+    defaultVariants: {
+        placement: "bottom",
+        variant: "opaque",
+    },
+    slots: {
+        backdrop: "drawer__backdrop",
+        body: "drawer__body",
+        closeTrigger: "drawer__close-trigger",
+        content: "drawer__content",
+        dialog: "drawer__dialog",
+        footer: "drawer__footer",
+        handle: "drawer__handle",
+        header: "drawer__header",
+        heading: "drawer__heading",
+        trigger: "drawer__trigger",
+    },
+    variants: {
+        placement: {
+            bottom: {
+                content: "drawer__content--bottom",
+                dialog: "drawer__dialog--bottom",
+            },
+            left: {
+                content: "drawer__content--left",
+                dialog: "drawer__dialog--left",
+            },
+            right: {
+                content: "drawer__content--right",
+                dialog: "drawer__dialog--right",
+            },
+            top: {
+                content: "drawer__content--top",
+                dialog: "drawer__dialog--top",
+            },
+        },
+        variant: {
+            blur: {
+                backdrop: "drawer__backdrop--blur",
+            },
+            opaque: {
+                backdrop: "drawer__backdrop--opaque",
+            },
+            transparent: {
+                backdrop: "drawer__backdrop--transparent",
+            },
+        },
+    },
+});
+
+export { drawerVariants };

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

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

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

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

package/dist/components/drawer/index.js

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

package/dist/components/drawer.css

@@ -0,0 +1,307 @@
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Component Styles
+ * Block: drawer
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * Element: trigger - the element that opens the drawer
+ */
+.drawer__trigger {
+  @apply cursor-(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 250ms var(--ease-out-quart),
+    background-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Active/pressed state */
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.97);
+  }
+}
+
+/**
+ * Element: backdrop - the overlay behind the drawer
+ */
+.drawer__backdrop {
+  @apply fixed inset-0 z-50;
+  @apply flex flex-row items-center justify-center;
+  @apply h-(--visual-viewport-height) w-full;
+
+  /* Entering animation */
+  &[data-entering="true"] {
+    @apply animate-in duration-200 ease-out fade-in-0;
+  }
+
+  /* Exiting animation - duration must match content exit (200ms) to avoid flicker */
+  &[data-exiting="true"] {
+    @apply animate-out duration-200 ease-out fade-out-0;
+  }
+
+  /**
+   * Reduce Animation
+   * CRITICAL: motion-reduce must be AFTER animate for correct override specificity
+   */
+  &[data-exiting="true"],
+  &[data-entering="true"] {
+    @apply will-change-[opacity];
+    @apply motion-reduce:animate-none;
+  }
+}
+
+/**
+ * Modifier: backdrop--transparent
+ */
+.drawer__backdrop--transparent {
+  @apply bg-transparent;
+}
+
+/**
+ * Modifier: backdrop--opaque
+ */
+.drawer__backdrop--opaque {
+  @apply bg-black/50 dark:bg-black/60;
+}
+
+/**
+ * Modifier: backdrop--blur
+ */
+.drawer__backdrop--blur {
+  @apply bg-black/50 backdrop-blur-md dark:bg-black/60;
+}
+
+/**
+ * Element: content - the positioning wrapper for the drawer panel
+ */
+.drawer__content {
+  @apply pointer-events-none;
+  @apply h-(--visual-viewport-height) w-full min-w-0;
+}
+
+/**
+ * Modifier: content--bottom (default)
+ * Slides up from the bottom edge
+ */
+.drawer__content--bottom {
+  @apply fixed inset-x-0 bottom-0;
+  @apply flex flex-col justify-end;
+
+  /* Entering animation */
+  &[data-entering="true"] {
+    @apply animate-in duration-300 ease-out slide-in-from-bottom-full;
+  }
+
+  /* Exiting animation */
+  &[data-exiting="true"] {
+    @apply animate-out duration-200 ease-in slide-out-to-bottom-full;
+  }
+}
+
+/**
+ * Modifier: content--top
+ * Slides down from the top edge
+ */
+.drawer__content--top {
+  @apply fixed inset-x-0 top-0;
+  @apply flex flex-col justify-start;
+
+  /* Entering animation */
+  &[data-entering="true"] {
+    @apply animate-in duration-300 ease-out slide-in-from-top-full;
+  }
+
+  /* Exiting animation */
+  &[data-exiting="true"] {
+    @apply animate-out duration-200 ease-in slide-out-to-top-full;
+  }
+}
+
+/**
+ * Modifier: content--left
+ * Slides in from the left edge
+ */
+.drawer__content--left {
+  @apply fixed inset-y-0 left-0;
+  @apply flex flex-row justify-start;
+
+  /* Entering animation */
+  &[data-entering="true"] {
+    @apply animate-in duration-300 ease-out slide-in-from-left-full;
+  }
+
+  /* Exiting animation */
+  &[data-exiting="true"] {
+    @apply animate-out duration-200 ease-in slide-out-to-left-full;
+  }
+}
+
+/**
+ * Modifier: content--right
+ * Slides in from the right edge
+ */
+.drawer__content--right {
+  @apply fixed inset-y-0 right-0;
+  @apply flex flex-row justify-end;
+
+  /* Entering animation */
+  &[data-entering="true"] {
+    @apply animate-in duration-300 ease-out slide-in-from-right-full;
+  }
+
+  /* Exiting animation */
+  &[data-exiting="true"] {
+    @apply animate-out duration-200 ease-in slide-out-to-right-full;
+  }
+}
+
+/**
+ * Reduce animation for all content placements
+ */
+.drawer__content--bottom,
+.drawer__content--top,
+.drawer__content--left,
+.drawer__content--right {
+  &[data-exiting="true"],
+  &[data-entering="true"] {
+    @apply will-change-transform;
+    @apply motion-reduce:animate-none;
+  }
+}
+
+/**
+ * Element: dialog - the drawer panel itself
+ */
+.drawer__dialog {
+  @apply relative;
+  @apply flex flex-col;
+  @apply bg-overlay shadow-overlay outline-none;
+  @apply p-6;
+  @apply pointer-events-auto;
+
+  /* Bottom/top placement: full width, auto height */
+  &[data-placement="bottom"] {
+    @apply w-full rounded-t-2xl;
+    @apply max-h-[85vh];
+  }
+
+  &[data-placement="top"] {
+    @apply w-full rounded-b-2xl;
+    @apply max-h-[85vh];
+  }
+
+  /* Left/right placement: auto width, full height */
+  &[data-placement="left"] {
+    @apply h-full rounded-r-2xl;
+    @apply w-80 max-w-[85vw] sm:w-96;
+  }
+
+  &[data-placement="right"] {
+    @apply h-full rounded-l-2xl;
+    @apply w-80 max-w-[85vw] sm:w-96;
+  }
+}
+
+.drawer__dialog--top {
+  @apply pb-2;
+  .drawer__handle {
+    @apply pb-0;
+  }
+}
+
+/**
+ * Element: header - the top section with the title
+ */
+.drawer__header {
+  @apply flex flex-col gap-3;
+  @apply mb-0;
+}
+
+/**
+ * Element: heading - the main title text
+ */
+.drawer__heading {
+  @apply align-middle;
+  @apply text-base font-medium text-foreground;
+}
+
+/**
+ * Element: body - the main content area
+ * touch-action: pan-y allows vertical scrolling while the dialog captures drag gestures
+ */
+.drawer__body {
+  @apply min-h-0 flex-1;
+  @apply text-sm leading-[1.43] text-muted;
+  @apply -m-[3px] my-0 p-[3px];
+  @apply overflow-y-auto overscroll-contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+/**
+ * Element: footer - the bottom action section
+ */
+.drawer__footer {
+  @apply flex flex-row items-center justify-end gap-2;
+  @apply mt-0;
+}
+
+/**
+ * Element: handle - visual drag handle indicator
+ */
+.drawer__handle {
+  @apply flex items-center justify-center;
+  @apply pb-2;
+
+  /* The handle bar */
+  & > [data-slot="drawer-handle-bar"] {
+    @apply h-1 w-9 rounded-full;
+    @apply bg-separator;
+  }
+}
+
+/**
+ * Element: close-trigger - the close button
+ */
+.drawer__close-trigger {
+  @apply absolute top-4 right-4;
+}
+
+/**
+ * Elements Spacing
+ */
+.drawer__header + .drawer__body {
+  @apply mt-2;
+}
+
+.drawer__header + .drawer__footer {
+  @apply mt-5;
+}
+
+.drawer__body + .drawer__footer {
+  @apply mt-5;
+}
+
+.drawer__handle + .drawer__header {
+  @apply mt-0;
+}
+
+.drawer__handle + .drawer__body {
+  @apply mt-0;
+}

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

@@ -0,0 +1,46 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const dropdownVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            trigger?: import("tailwind-variants").ClassValue;
+            popover?: import("tailwind-variants").ClassValue;
+            menu?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            trigger?: import("tailwind-variants").ClassValue;
+            popover?: import("tailwind-variants").ClassValue;
+            menu?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    menu: string;
+    popover: string;
+    root: string;
+    trigger: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            trigger?: import("tailwind-variants").ClassValue;
+            popover?: import("tailwind-variants").ClassValue;
+            menu?: import("tailwind-variants").ClassValue;
+            root?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    menu: string;
+    popover: string;
+    root: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    menu: string;
+    popover: string;
+    root: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DropdownVariants = VariantProps<typeof dropdownVariants>;
+//# sourceMappingURL=dropdown.styles.d.ts.map

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

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

package/dist/components/dropdown/dropdown.styles.js

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+const dropdownVariants = tv({
+    slots: {
+        menu: "dropdown__menu",
+        popover: "dropdown__popover",
+        root: "dropdown",
+        trigger: "dropdown__trigger",
+    },
+});
+
+export { dropdownVariants };

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

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

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

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

package/dist/components/dropdown/index.js

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