@masaraxui/styles 1.0.0

package/dist/components/menu-item/index.js

@@ -0,0 +1 @@
+export { menuItemVariants } from './menu-item.styles.js';

package/dist/components/menu-item/menu-item.styles.d.ts

@@ -0,0 +1,43 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const menuItemVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        danger: {
+            item: string;
+        };
+        default: {
+            item: string;
+        };
+    };
+}, {
+    indicator: string;
+    item: string;
+    submenuIndicator: string;
+}, undefined, {
+    variant: {
+        danger: {
+            item: string;
+        };
+        default: {
+            item: string;
+        };
+    };
+}, {
+    indicator: string;
+    item: string;
+    submenuIndicator: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        danger: {
+            item: string;
+        };
+        default: {
+            item: string;
+        };
+    };
+}, {
+    indicator: string;
+    item: string;
+    submenuIndicator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type MenuItemVariants = VariantProps<typeof menuItemVariants>;
+//# sourceMappingURL=menu-item.styles.d.ts.map

package/dist/components/menu-item/menu-item.styles.d.ts.map

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

package/dist/components/menu-item/menu-item.styles.js

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+
+const menuItemVariants = tv({
+    defaultVariants: {
+        variant: "default",
+    },
+    slots: {
+        indicator: "menu-item__indicator",
+        item: "menu-item",
+        submenuIndicator: "menu-item__indicator menu-item__indicator--submenu",
+    },
+    variants: {
+        variant: {
+            danger: {
+                item: "menu-item--danger",
+            },
+            default: {
+                item: "menu-item--default",
+            },
+        },
+    },
+});
+
+export { menuItemVariants };

package/dist/components/menu-item.css

@@ -0,0 +1,163 @@
+/* ==========================================================================
+   Base menu item styles
+   ========================================================================== */
+
+.menu-item {
+  @apply relative flex min-h-9 w-full items-center justify-start gap-3 rounded-2xl px-2 py-1.5 outline-none no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 250ms var(--ease-out-quart),
+    box-shadow 150ms var(--ease-out);
+
+  @apply motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  [data-slot="label"] {
+    @apply pointer-events-none w-fit select-none;
+  }
+
+  [data-slot="description"] {
+    @apply pointer-events-none text-wrap select-none;
+  }
+
+  [data-slot="submenu-indicator"] svg {
+    @apply size-3.5;
+  }
+
+  /* Add padding-left when indicator is present */
+  &:has(.menu-item__indicator) {
+    @apply pl-7;
+  }
+
+  /* Add padding-right when indicator is present and has submenu */
+  &[data-has-submenu="true"]:has(.menu-item__indicator) {
+    @apply pr-7 pl-2;
+  }
+
+  /* Focus visible state (keyboard focus only) */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Focus state */
+  &:focus,
+  &[data-focus="true"] {
+  }
+
+  /* Pressed state */
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.98);
+  }
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default;
+    }
+  }
+
+  /* Selected state */
+  &[aria-checked="true"],
+  &[aria-selected="true"],
+  &[data-selected="true"] {
+    [data-slot="menu-item-indicator--checkmark"] {
+      /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+      transition: stroke-dashoffset 100ms linear;
+      @apply motion-reduce:transition-none;
+    }
+
+    [data-slot="menu-item-indicator--dot"] {
+      /**
+       * Selected state: visible and scaled up
+       */
+      @apply scale-100 opacity-100;
+    }
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* ==========================================================================
+   Menu item indicator
+   ========================================================================== */
+
+.menu-item__indicator {
+  @apply absolute top-1/2 left-2 flex size-4 shrink-0 -translate-y-1/2 items-center justify-center text-muted;
+
+  /**
+   * Transitions
+   */
+  @apply transition duration-250 motion-reduce:transition-none;
+
+  /* Position on the right when menu item has submenu */
+  .menu-item[data-has-submenu="true"] & {
+    @apply right-2 left-auto;
+  }
+
+  /* Checkmark SVG indicator */
+  [data-slot="menu-item-indicator--checkmark"] {
+    @apply size-2.5;
+
+    .menu-item[data-selection-mode="multiple"] & {
+      /**
+       * Transitions
+       */
+      @apply transition-all duration-300 motion-reduce:transition-none;
+    }
+  }
+
+  /* Dot SVG indicator */
+  [data-slot="menu-item-indicator--dot"] {
+    @apply size-2;
+
+    .menu-item[data-selection-mode="multiple"] & {
+      /**
+     * Transitions
+     */
+      @apply transition-all duration-250 motion-reduce:transition-none;
+    }
+    /**
+     * Default state: hidden and scaled down
+     */
+    @apply scale-70 opacity-0;
+  }
+}
+
+/* Submenu indicator (chevron-right) */
+.menu-item__indicator--submenu {
+  @apply text-muted;
+
+  svg {
+    @apply size-3;
+  }
+}
+
+/* Default variant */
+.menu-item--default {
+}
+
+/* Danger variant */
+.menu-item--danger {
+  .menu-item__indicator {
+    @apply text-danger;
+  }
+
+  [data-slot="label"] {
+    @apply text-danger;
+  }
+}

package/dist/components/menu-section/index.d.ts

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

package/dist/components/menu-section/index.d.ts.map

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

package/dist/components/menu-section/index.js

@@ -0,0 +1 @@
+export { menuSectionVariants } from './menu-section.styles.js';

package/dist/components/menu-section/menu-section.styles.d.ts

@@ -0,0 +1,4 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const menuSectionVariants: import("tailwind-variants").TVReturnType<{} | {} | {}, undefined, "menu-section", {} | {}, undefined, import("tailwind-variants").TVReturnType<unknown, undefined, "menu-section", unknown, unknown, undefined>>;
+export type MenuSectionVariants = VariantProps<typeof menuSectionVariants>;
+//# sourceMappingURL=menu-section.styles.d.ts.map

package/dist/components/menu-section/menu-section.styles.d.ts.map

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

package/dist/components/menu-section/menu-section.styles.js

@@ -0,0 +1,7 @@
+import { tv } from 'tailwind-variants';
+
+const menuSectionVariants = tv({
+    base: "menu-section",
+});
+
+export { menuSectionVariants };

package/dist/components/menu-section.css

@@ -0,0 +1,7 @@
+/* ==========================================================================
+   Base menu section styles
+   ========================================================================== */
+
+.menu-section {
+  @apply flex flex-col items-start gap-0;
+}

package/dist/components/menu.css

@@ -0,0 +1,12 @@
+/* ==========================================================================
+   Base menu styles
+   ========================================================================== */
+
+.menu {
+  @apply relative flex w-full flex-col gap-1 overflow-clip p-1;
+
+  /* This makes the separator take up 94% of the width and be centered */
+  [data-slot="separator"] {
+    @apply ml-[3%] w-[94%];
+  }
+}

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

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

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

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

package/dist/components/meter/index.js

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

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

@@ -0,0 +1,106 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const meterVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fill: string;
+    output: string;
+    track: string;
+}, undefined, {
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fill: string;
+    output: string;
+    track: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    fill: string;
+    output: string;
+    track: string;
+}, undefined, unknown, unknown, undefined>>;
+export type MeterVariants = VariantProps<typeof meterVariants>;
+//# sourceMappingURL=meter.styles.d.ts.map

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

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

package/dist/components/meter/meter.styles.js

@@ -0,0 +1,46 @@
+import { tv } from 'tailwind-variants';
+
+const meterVariants = tv({
+    defaultVariants: {
+        color: "accent",
+        size: "md",
+    },
+    slots: {
+        base: "meter",
+        fill: "meter__fill",
+        output: "meter__output",
+        track: "meter__track",
+    },
+    variants: {
+        color: {
+            accent: {
+                base: "meter--accent",
+            },
+            danger: {
+                base: "meter--danger",
+            },
+            default: {
+                base: "meter--default",
+            },
+            success: {
+                base: "meter--success",
+            },
+            warning: {
+                base: "meter--warning",
+            },
+        },
+        size: {
+            lg: {
+                base: "meter--lg",
+            },
+            md: {
+                base: "meter--md",
+            },
+            sm: {
+                base: "meter--sm",
+            },
+        },
+    },
+});
+
+export { meterVariants };

package/dist/components/meter.css

@@ -0,0 +1,104 @@
+/* ==========================================================================
+   Meter - A quantity indicator within a known range
+   ========================================================================== */
+
+/* Base styles */
+.meter {
+  @apply grid w-full gap-1;
+  grid-template-areas:
+    "label output"
+    "track track";
+  grid-template-columns: 1fr auto;
+
+  /* Default color tokens (accent) */
+  --meter-fill: var(--color-accent);
+
+  [data-slot="label"] {
+    @apply w-fit text-sm font-medium;
+
+    grid-area: label;
+  }
+
+  .meter__output {
+    @apply text-sm font-medium tabular-nums;
+
+    grid-area: output;
+  }
+
+  .meter__track {
+    @apply relative overflow-hidden rounded-full bg-default;
+
+    grid-area: track;
+
+    /* Default height (matches --md) */
+    @apply h-2;
+  }
+
+  .meter__fill {
+    @apply absolute top-0 left-0 h-full rounded-full;
+
+    background-color: var(--meter-fill);
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition: width 300ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+
+    [data-slot="label"] {
+      @apply opacity-100;
+    }
+  }
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.meter--sm {
+  .meter__track {
+    @apply h-1;
+  }
+}
+
+.meter--md {
+  /* No styles as this is the default size */
+}
+
+.meter--lg {
+  .meter__track {
+    @apply h-3;
+  }
+}
+
+/* ==========================================================================
+   Color variants
+   ========================================================================== */
+
+.meter--default {
+  --meter-fill: var(--color-default-foreground);
+}
+
+.meter--accent {
+  --meter-fill: var(--color-accent);
+}
+
+.meter--success {
+  --meter-fill: var(--color-success);
+}
+
+.meter--warning {
+  --meter-fill: var(--color-warning);
+}
+
+.meter--danger {
+  --meter-fill: var(--color-danger);
+}

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

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

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

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

package/dist/components/modal/index.js

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