@masaraxui/styles 1.0.0

package/dist/components/calendar-year-picker.css

@@ -0,0 +1,193 @@
+/* =============================================================================
+ * Calendar Year Picker Component Styles
+ *
+ * Internal component used inside Calendar / RangeCalendar to provide a
+ * toggleable year selector. Uses CSS :has() on the parent .calendar to
+ * drive crossfade transitions.
+ *
+ * The year grid is absolutely positioned and sized via JS to match the
+ * day grid's exact area. This keeps the calendar's original block layout
+ * completely untouched.
+ *
+ * BEM naming: calendar-year-picker__element, calendar-year-picker--modifier
+ * ============================================================================= */
+
+/* -----------------------------------------------------------------------------
+ * Positioning Context
+ * -------------------------------------------------------------------------- */
+.calendar:has(.calendar-year-picker__year-grid),
+.range-calendar:has(.calendar-year-picker__year-grid) {
+  position: relative;
+}
+
+/* -----------------------------------------------------------------------------
+ * Crossfade + Blur Transitions
+ *
+ * The crossfade is staggered to avoid both grids being semi-transparent at
+ * the same time (ghosting). When opening, the day grid fades out first,
+ * then the year grid fades in. When closing, the year grid fades out first,
+ * then the day grid fades in (via transition-delay).
+ *
+ * -------------------------------------------------------------------------- */
+
+/* Day grid – default visible */
+.calendar:has(.calendar-year-picker__year-grid) > [data-slot="calendar-grid"],
+.range-calendar:has(.calendar-year-picker__year-grid) > [data-slot="range-calendar-grid"] {
+  will-change: opacity;
+  transition:
+    opacity 150ms var(--ease-out),
+    visibility 0ms linear;
+  @apply motion-reduce:transition-none;
+}
+
+/* Day grid – hidden when year picker is open (fade + blur out) */
+.calendar:has(.calendar-year-picker__year-grid[data-open="true"]) > [data-slot="calendar-grid"],
+.range-calendar:has(.calendar-year-picker__year-grid[data-open="true"])
+  > [data-slot="range-calendar-grid"] {
+  @apply pointer-events-none opacity-0;
+  visibility: hidden;
+  transition:
+    opacity 150ms var(--ease-out),
+    visibility 0ms linear 150ms;
+  @apply motion-reduce:transition-none;
+}
+
+/* -----------------------------------------------------------------------------
+ * Trigger Button
+ * -------------------------------------------------------------------------- */
+.calendar-year-picker__trigger {
+  @apply flex flex-1 items-center justify-start gap-1 rounded-lg outline-none;
+
+  cursor: var(--cursor-interactive);
+  touch-action: manipulation;
+
+  /* Focus state */
+  &:focus-visible {
+    @apply status-focused;
+  }
+}
+
+.calendar-year-picker__trigger-heading {
+  @apply text-sm font-medium;
+
+  transition: color 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+}
+
+.calendar-year-picker__trigger-indicator {
+  @apply text-xs text-accent;
+
+  transition: transform 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+}
+
+/* Rotate chevron when open */
+.calendar-year-picker__trigger[data-open="true"] .calendar-year-picker__trigger-indicator {
+  transform: rotate(90deg);
+}
+
+.calendar-year-picker__trigger[data-open="true"] .calendar-year-picker__trigger-heading {
+  @apply text-accent;
+}
+
+/* -----------------------------------------------------------------------------
+ * Year Grid Container
+ *
+ * Absolutely positioned over the day grid area. The exact `top` and `height`
+ * are set via JS to match the sibling day grid element.
+ * -------------------------------------------------------------------------- */
+.calendar-year-picker__year-grid {
+  @apply pointer-events-none absolute right-0 left-0 grid content-start gap-1 overflow-y-auto p-1 opacity-0;
+  grid-template-columns: repeat(3, 1fr);
+
+  /* When closing: instant (no transition) */
+  will-change: opacity;
+
+  /* Custom scrollbar – small contained element, per Emil's guidelines */
+  scrollbar-width: thin;
+  scrollbar-color: oklch(0% 0 0 / 0.15) transparent;
+
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: oklch(0% 0 0 / 0.15);
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: oklch(0% 0 0 / 0.25);
+  }
+
+  /* Dark mode scrollbar */
+  :is([data-theme="dark"], .dark) & {
+    scrollbar-color: oklch(100% 0 0 / 0.15) transparent;
+
+    &::-webkit-scrollbar-thumb {
+      background: oklch(100% 0 0 / 0.15);
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: oklch(100% 0 0 / 0.25);
+    }
+  }
+}
+
+.calendar-year-picker__year-grid[data-open="true"] {
+  @apply pointer-events-auto opacity-100;
+
+  /* When opening: slight delay so the day grid starts fading out first */
+  transition: opacity 200ms var(--ease-out) 50ms;
+  @apply motion-reduce:transition-none;
+}
+
+/* -----------------------------------------------------------------------------
+ * Year Cell
+ * -------------------------------------------------------------------------- */
+.calendar-year-picker__year-cell {
+  @apply relative inline-flex items-center justify-center rounded-full px-2.5 py-1.5 text-sm font-medium outline-none select-none no-highlight;
+  touch-action: manipulation;
+
+  /**
+   * Transitions – same as .tag
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 100ms var(--ease-smooth),
+    scale 100ms var(--ease-smooth),
+    opacity 100ms var(--ease-smooth),
+    background-color 100ms var(--ease-smooth),
+    box-shadow 100ms var(--ease-out);
+  @apply origin-center transform-gpu motion-reduce:transition-none;
+
+  cursor: var(--cursor-interactive);
+
+  /* Hover state (when not selected) – only on devices that support hover */
+  @media (hover: hover) and (pointer: fine) {
+    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]) {
+      @apply bg-default text-default-foreground;
+    }
+  }
+
+  /* Selected state (current year) – same as .tag[data-selected] */
+  &[data-selected="true"],
+  &[aria-selected="true"] {
+    @apply bg-accent text-accent-foreground;
+
+    @media (hover: hover) and (pointer: fine) {
+      &:is(:hover, [data-hovered="true"]) {
+        @apply bg-accent-hover;
+      }
+    }
+  }
+
+  /* Focus state */
+  &:focus-visible {
+    @apply status-focused;
+  }
+}

package/dist/components/calendar.css

@@ -0,0 +1,218 @@
+/* =============================================================================
+ * Calendar Component Styles
+ *
+ * A compound component for date selection.
+ * Uses BEM naming convention: calendar, calendar__element, calendar--modifier
+ * ============================================================================= */
+
+/* -----------------------------------------------------------------------------
+ * Base Calendar Styles
+ * -------------------------------------------------------------------------- */
+.calendar {
+  @apply w-63 max-w-full;
+
+  container-type: inline-size;
+}
+
+/* -----------------------------------------------------------------------------
+ * Calendar Header
+ * -------------------------------------------------------------------------- */
+.calendar__header {
+  @apply flex items-center justify-between px-0.5 pb-4;
+
+  &:has(.calendar-year-picker__trigger[data-open="true"]) {
+    .calendar__nav-button {
+      @apply pointer-events-none opacity-0;
+    }
+  }
+}
+
+.calendar__heading {
+  @apply flex-1 text-sm font-medium;
+}
+
+.calendar__nav-button {
+  @apply flex size-6 items-center justify-center rounded-full text-accent;
+
+  will-change: scale;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 250ms var(--ease-out),
+    background-color 100ms var(--ease-out),
+    box-shadow 100ms var(--ease-out),
+    opacity 150ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  cursor: var(--cursor-interactive);
+
+  /* Hover state – only on devices that support hover (avoids false triggers on touch) */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default text-accent;
+    }
+  }
+
+  /* Pressed state */
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.95);
+  }
+
+  /* Focus state */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+.calendar__nav-button-icon {
+  @apply size-4;
+}
+
+/* -----------------------------------------------------------------------------
+ * Calendar Grid
+ * -------------------------------------------------------------------------- */
+.calendar__grid {
+  /* Override table display with CSS Grid for easier customization */
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  @apply w-full;
+
+  &[aria-readonly="true"] {
+    .calendar__cell {
+      @apply pointer-events-none;
+    }
+  }
+}
+
+.calendar__grid-header {
+  /* Grid header (thead) styles */
+  display: contents;
+
+  & > tr {
+    display: contents;
+  }
+}
+
+.calendar__grid-body {
+  /* Grid body (tbody) styles */
+  display: contents;
+
+  & > tr {
+    display: contents;
+  }
+
+  /* Add top spacing between header and first body row */
+  & > tr:first-child > td {
+    @apply mt-1;
+  }
+}
+
+.calendar__grid-row {
+  /* Use 'contents' so cells participate directly in grid */
+  /* Note: This class can be used for custom row styling if needed */
+  display: contents;
+}
+
+.calendar__header-cell {
+  /* Header cell (th - weekday names) styles */
+  @apply flex items-center justify-center pb-2 text-xs font-medium text-muted;
+}
+
+/* -----------------------------------------------------------------------------
+ * Calendar Cells
+ * -------------------------------------------------------------------------- */
+.calendar__cell {
+  /* Cell (td) wrapper styles - margins now work with grid layout */
+  @apply relative flex aspect-square size-full items-center justify-center rounded-3xl text-center text-sm font-medium outline-none no-highlight;
+
+  will-change: scale;
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 250ms var(--ease-out),
+    box-shadow 100ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  cursor: var(--cursor-interactive);
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Today indicator */
+  &[data-today="true"] {
+    @apply text-accent;
+  }
+
+  /* Selected state */
+  &[data-selected="true"] {
+    @apply bg-accent text-accent-foreground;
+  }
+
+  /* Pressed state */
+  &:active,
+  &[data-pressed="true"] {
+    @apply bg-default;
+    transform: scale(0.95);
+
+    &[data-selected="true"] {
+      @apply bg-accent-hover;
+    }
+  }
+
+  /* Hover state – only on devices that support hover (avoids false triggers on touch) */
+  @media (hover: hover) {
+    &:hover:not([data-selected="true"]),
+    &[data-hovered="true"]:not([data-selected="true"]) {
+      @apply bg-default;
+    }
+  }
+
+  /* Outside month (previous/next month days) */
+  &[data-outside-month="true"] {
+    @apply text-muted opacity-50;
+  }
+
+  &[data-selected="true"][data-outside-month="true"] {
+    @apply bg-default;
+  }
+
+  /* Unavailable dates */
+  &[data-unavailable="true"] {
+    @apply status-disabled;
+  }
+
+  /* Disabled state */
+  &:disabled:not([data-outside-month="true"]),
+  &[data-disabled="true"]:not([data-outside-month="true"]) {
+    @apply status-disabled;
+
+    text-decoration: line-through;
+  }
+}
+
+/* Cell indicator - small dot at bottom center of cell */
+.calendar__cell-indicator {
+  @apply absolute bottom-1 left-1/2 size-[3px] -translate-x-1/2 rounded-full bg-muted;
+
+  /* Indicator color changes when cell is selected */
+  [data-selected="true"] > & {
+    @apply bg-accent-foreground;
+  }
+}

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

@@ -0,0 +1,71 @@
+import type { VariantProps } from "tailwind-variants";
+declare const cardVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+        transparent: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    description: string;
+    footer: string;
+    header: string;
+    title: string;
+}, undefined, {
+    variant: {
+        default: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+        transparent: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    description: string;
+    footer: string;
+    header: string;
+    title: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+        transparent: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    description: string;
+    footer: string;
+    header: string;
+    title: string;
+}, undefined, unknown, unknown, undefined>>;
+export { cardVariants };
+export type CardVariants = VariantProps<typeof cardVariants>;
+//# sourceMappingURL=card.styles.d.ts.map

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

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

package/dist/components/card/card.styles.js

@@ -0,0 +1,33 @@
+import { tv } from 'tailwind-variants';
+
+const cardVariants = tv({
+    defaultVariants: {
+        variant: "default",
+    },
+    slots: {
+        base: "card",
+        content: "card__content",
+        description: "card__description",
+        footer: "card__footer",
+        header: "card__header",
+        title: "card__title",
+    },
+    variants: {
+        variant: {
+            default: {
+                base: "card--default",
+            },
+            secondary: {
+                base: "card--secondary",
+            },
+            tertiary: {
+                base: "card--tertiary",
+            },
+            transparent: {
+                base: "card--transparent",
+            },
+        },
+    },
+});
+
+export { cardVariants };

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

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

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

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

package/dist/components/card/index.js

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

package/dist/components/card.css

@@ -0,0 +1,50 @@
+/* Card component styles */
+
+/* Block */
+.card {
+  @apply relative flex flex-col gap-3 overflow-hidden p-4;
+  @apply rounded-3xl shadow-surface;
+}
+
+/* Element - header */
+.card__header {
+  @apply flex flex-col;
+}
+
+/* Element - title */
+.card__title {
+  @apply text-sm leading-6 font-medium text-foreground;
+}
+
+/* Element - description */
+.card__description {
+  @apply text-sm leading-5 text-muted;
+}
+
+/* Element - content */
+.card__content {
+  @apply flex flex-1 flex-col gap-1;
+}
+
+/* Element - footer */
+.card__footer {
+  @apply flex flex-row items-center;
+}
+
+/* Modifier - variant */
+
+.card--transparent {
+  @apply border-none bg-transparent shadow-none;
+}
+
+.card--default {
+  @apply bg-surface;
+}
+
+.card--secondary {
+  @apply bg-surface-secondary;
+}
+
+.card--tertiary {
+  @apply bg-surface-tertiary;
+}

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

@@ -0,0 +1,46 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const checkboxVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    control: string;
+    indicator: string;
+}, undefined, {
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    control: string;
+    indicator: string;
+}, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    content: string;
+    control: string;
+    indicator: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CheckboxVariants = VariantProps<typeof checkboxVariants>;
+//# sourceMappingURL=checkbox.styles.d.ts.map

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

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

package/dist/components/checkbox/checkbox.styles.js

@@ -0,0 +1,25 @@
+import { tv } from 'tailwind-variants';
+
+const checkboxVariants = tv({
+    defaultVariants: {
+        variant: "primary",
+    },
+    slots: {
+        base: "checkbox",
+        content: "checkbox__content",
+        control: "checkbox__control",
+        indicator: "checkbox__indicator",
+    },
+    variants: {
+        variant: {
+            primary: {
+                base: "checkbox--primary",
+            },
+            secondary: {
+                base: "checkbox--secondary",
+            },
+        },
+    },
+});
+
+export { checkboxVariants };

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

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

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

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

package/dist/components/checkbox/index.js

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

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

@@ -0,0 +1,19 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const checkboxGroupVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+}, undefined, "checkbox-group", {
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        primary: string;
+        secondary: string;
+    };
+}, undefined, "checkbox-group", unknown, unknown, undefined>>;
+export type CheckboxGroupVariants = VariantProps<typeof checkboxGroupVariants>;
+//# sourceMappingURL=checkbox-group.styles.d.ts.map

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

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