@masaraxui/styles 1.0.0

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/button-group.css

@@ -0,0 +1,147 @@
+/* ==========================================================================
+   ButtonGroup - Groups related buttons together
+   ========================================================================== */
+
+/* Base button group styles */
+.button-group {
+  @apply inline-flex h-auto items-center justify-center gap-0;
+}
+
+/* ==========================================================================
+   Orientation variants
+   ========================================================================== */
+
+.button-group--horizontal {
+  @apply flex-row;
+}
+
+.button-group--vertical {
+  @apply flex-col;
+}
+
+/* Remove border radius from all buttons in group */
+.button-group .button {
+  @apply rounded-none;
+}
+
+/* Apply border radius to first button (start edge) */
+.button-group--horizontal .button:first-child {
+  @apply rounded-s-3xl;
+}
+
+/* Apply border radius to last button (end edge) */
+.button-group--horizontal .button:last-child {
+  @apply rounded-e-3xl;
+}
+
+/* If only one button, apply both rounded edges */
+.button-group--horizontal .button:first-child:last-child {
+  @apply rounded-3xl;
+}
+
+/* Apply border radius to first button (top edge) in vertical */
+.button-group--vertical .button:first-child {
+  @apply rounded-t-3xl;
+}
+
+/* Apply border radius to last button (bottom edge) in vertical */
+.button-group--vertical .button:last-child {
+  @apply rounded-b-3xl;
+}
+
+/* If only one button in vertical, apply all rounded edges */
+.button-group--vertical .button:first-child:last-child {
+  @apply rounded-3xl;
+}
+
+/* Remove scale transform on active/pressed state for buttons in group */
+.button-group .button:active,
+.button-group .button[data-pressed="true"] {
+  transform: none;
+}
+
+/* Override focus ring to use inset style so it stays within button bounds */
+.button-group .button:focus-visible:not(:focus),
+.button-group .button[data-focus-visible="true"] {
+  --tw-ring-offset-width: 0px;
+  @apply ring-inset;
+}
+
+/* ==========================================================================
+   Separator (compound component)
+   ========================================================================== */
+
+.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 */
+  .button-group--horizontal & {
+    left: -1px;
+    top: 25%;
+    width: 1px;
+    height: 50%;
+  }
+
+  /* Vertical orientation - horizontal divider */
+  .button-group--vertical & {
+    left: 25%;
+    top: -1px;
+    width: 50%;
+    height: 1px;
+  }
+}
+
+/* ==========================================================================
+   Outline button border handling
+   ========================================================================== */
+
+/* Remove adjacent borders from outline buttons in horizontal group */
+/* First button: remove end border (right in LTR, left in RTL) */
+.button-group--horizontal .button--outline:first-child {
+  @apply border-e-0;
+}
+
+/* Last button: remove start border (left in LTR, right in RTL) */
+.button-group--horizontal .button--outline:last-child {
+  @apply border-s-0;
+}
+
+/* Middle buttons: remove both inline borders */
+.button-group--horizontal .button--outline:not(:first-child):not(:last-child) {
+  @apply border-x-0;
+}
+
+/* Remove adjacent borders from outline buttons in vertical group */
+/* First button: remove bottom border */
+.button-group--vertical .button--outline:first-child {
+  @apply border-b-0;
+}
+
+/* Last button: remove top border */
+.button-group--vertical .button--outline:last-child {
+  @apply border-t-0;
+}
+
+/* Middle buttons: remove both block borders */
+.button-group--vertical .button--outline:not(:first-child):not(:last-child) {
+  @apply border-y-0;
+}
+
+/* ==========================================================================
+   Full width modifier
+   ========================================================================== */
+
+.button-group--full-width {
+  @apply w-full;
+}

package/dist/components/button.css

@@ -0,0 +1,158 @@
+/* Button component styles */
+
+/* Base button styles */
+.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 (fallback behavior) */
+  --button-bg: transparent;
+  --button-bg-hover: var(--button-bg);
+  --button-bg-pressed: var(--button-bg-hover);
+  --button-fg: currentColor;
+
+  background-color: var(--button-bg);
+  color: var(--button-fg);
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Pending state */
+  &[data-pending="true"] {
+    @apply status-pending;
+  }
+
+  /* Active / pressed */
+  &:active,
+  &[data-pressed="true"] {
+    background-color: var(--button-bg-pressed);
+    transform: scale(0.97);
+  }
+
+  /* Hover */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      background-color: var(--button-bg-hover);
+    }
+  }
+
+  /* SVG icon styling - exclude spinner and link-icon svgs */
+  & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] 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 */
+.button--sm {
+  @apply h-9 px-3 md:h-8;
+
+  & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
+    @apply size-4;
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.98);
+  }
+}
+
+.button--md {
+  /* No styles as this is the default size */
+}
+
+.button--lg {
+  @apply h-11 text-base md:h-10;
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.96);
+  }
+}
+
+/* Color variants - only set custom property values */
+.button--primary {
+  --button-bg: var(--color-accent);
+  --button-bg-hover: var(--color-accent-hover);
+  --button-bg-pressed: var(--color-accent-hover);
+  --button-fg: var(--color-accent-foreground);
+}
+
+.button--secondary {
+  --button-bg: var(--color-default);
+  --button-bg-hover: var(--color-default-hover);
+  --button-bg-pressed: var(--color-default-hover);
+  --button-fg: var(--color-accent-soft-foreground);
+}
+
+.button--tertiary {
+  --button-bg: var(--color-default);
+  --button-bg-hover: var(--color-default-hover);
+  --button-bg-pressed: var(--color-default-hover);
+}
+
+.button--ghost,
+.button--outline {
+  --button-bg: transparent;
+  --button-bg-hover: var(--color-default);
+  --button-bg-pressed: var(--color-default);
+  --button-fg: var(--color-default-foreground);
+}
+
+.button--outline {
+  @apply border border-border;
+  --button-bg-hover: color-mix(in srgb, var(--color-default) 60%, transparent);
+}
+
+.button--danger {
+  --button-bg: var(--color-danger);
+  --button-bg-hover: var(--color-danger-hover);
+  --button-bg-pressed: var(--color-danger-hover);
+  --button-fg: var(--color-danger-foreground);
+}
+
+.button--danger-soft {
+  --button-bg: var(--color-danger-soft);
+  --button-bg-hover: var(--color-danger-soft-hover);
+  --button-bg-pressed: var(--color-danger-soft-hover);
+  --button-fg: var(--color-danger-soft-foreground);
+}
+
+/* Icon-only modifier */
+.button--icon-only {
+  @apply w-10 p-0 md:w-9;
+}
+
+.button--icon-only.button--sm {
+  @apply w-9 md:w-8;
+}
+
+.button--icon-only.button--lg {
+  @apply w-11 md:w-10;
+}
+
+/* Full width modifier */
+.button--full-width {
+  @apply w-full;
+}

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

@@ -0,0 +1,79 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const calendarVariants: import("tailwind-variants").TVReturnType<{}, {
+    /** Root calendar container */
+    base: string;
+    /** Calendar cell (td) */
+    cell: string;
+    /** Cell indicator (small dot at bottom of cell) */
+    cellIndicator: string;
+    /** Calendar grid (table) */
+    grid: string;
+    /** Grid body (tbody) */
+    gridBody: string;
+    /** Grid header (thead) */
+    gridHeader: string;
+    /** Grid row (tr) */
+    gridRow: string;
+    /** Calendar header containing heading and navigation */
+    header: string;
+    /** Header cell (th - day names) */
+    headerCell: string;
+    /** Month/year heading text */
+    heading: string;
+    /** Previous/Next navigation button */
+    navButton: string;
+    /** Navigation button icon */
+    navButtonIcon: string;
+}, undefined, {}, {
+    /** Root calendar container */
+    base: string;
+    /** Calendar cell (td) */
+    cell: string;
+    /** Cell indicator (small dot at bottom of cell) */
+    cellIndicator: string;
+    /** Calendar grid (table) */
+    grid: string;
+    /** Grid body (tbody) */
+    gridBody: string;
+    /** Grid header (thead) */
+    gridHeader: string;
+    /** Grid row (tr) */
+    gridRow: string;
+    /** Calendar header containing heading and navigation */
+    header: string;
+    /** Header cell (th - day names) */
+    headerCell: string;
+    /** Month/year heading text */
+    heading: string;
+    /** Previous/Next navigation button */
+    navButton: string;
+    /** Navigation button icon */
+    navButtonIcon: string;
+}, import("tailwind-variants").TVReturnType<{}, {
+    /** Root calendar container */
+    base: string;
+    /** Calendar cell (td) */
+    cell: string;
+    /** Cell indicator (small dot at bottom of cell) */
+    cellIndicator: string;
+    /** Calendar grid (table) */
+    grid: string;
+    /** Grid body (tbody) */
+    gridBody: string;
+    /** Grid header (thead) */
+    gridHeader: string;
+    /** Grid row (tr) */
+    gridRow: string;
+    /** Calendar header containing heading and navigation */
+    header: string;
+    /** Header cell (th - day names) */
+    headerCell: string;
+    /** Month/year heading text */
+    heading: string;
+    /** Previous/Next navigation button */
+    navButton: string;
+    /** Navigation button icon */
+    navButtonIcon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CalendarVariants = VariantProps<typeof calendarVariants>;
+//# sourceMappingURL=calendar.styles.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"calendar.styles.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/calendar.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,mBAAmB,CAAC;AAIpD,eAAO,MAAM,gBAAgB;IAGzB,8BAA8B;;IAE9B,yBAAyB;;IAEzB,mDAAmD;;IAEnD,4BAA4B;;IAE5B,wBAAwB;;IAExB,0BAA0B;;IAE1B,oBAAoB;;IAEpB,wDAAwD;;IAExD,mCAAmC;;IAEnC,8BAA8B;;IAE9B,sCAAsC;;IAEtC,6BAA6B;;;IAtB7B,8BAA8B;;IAE9B,yBAAyB;;IAEzB,mDAAmD;;IAEnD,4BAA4B;;IAE5B,wBAAwB;;IAExB,0BAA0B;;IAE1B,oBAAoB;;IAEpB,wDAAwD;;IAExD,mCAAmC;;IAEnC,8BAA8B;;IAE9B,sCAAsC;;IAEtC,6BAA6B;;;IAtB7B,8BAA8B;;IAE9B,yBAAyB;;IAEzB,mDAAmD;;IAEnD,4BAA4B;;IAE5B,wBAAwB;;IAExB,0BAA0B;;IAE1B,oBAAoB;;IAEpB,wDAAwD;;IAExD,mCAAmC;;IAEnC,8BAA8B;;IAE9B,sCAAsC;;IAEtC,6BAA6B;;2CAI/B,CAAC;AAEH,MAAM,MAAM,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC"}

package/dist/components/calendar/calendar.styles.js

@@ -0,0 +1,34 @@
+import { tv } from 'tailwind-variants';
+
+const calendarVariants = tv({
+    defaultVariants: {},
+    slots: {
+        /** Root calendar container */
+        base: "calendar",
+        /** Calendar cell (td) */
+        cell: "calendar__cell",
+        /** Cell indicator (small dot at bottom of cell) */
+        cellIndicator: "calendar__cell-indicator",
+        /** Calendar grid (table) */
+        grid: "calendar__grid",
+        /** Grid body (tbody) */
+        gridBody: "calendar__grid-body",
+        /** Grid header (thead) */
+        gridHeader: "calendar__grid-header",
+        /** Grid row (tr) */
+        gridRow: "calendar__grid-row",
+        /** Calendar header containing heading and navigation */
+        header: "calendar__header",
+        /** Header cell (th - day names) */
+        headerCell: "calendar__header-cell",
+        /** Month/year heading text */
+        heading: "calendar__heading",
+        /** Previous/Next navigation button */
+        navButton: "calendar__nav-button",
+        /** Navigation button icon */
+        navButtonIcon: "calendar__nav-button-icon",
+    },
+    variants: {},
+});
+
+export { calendarVariants };

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

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

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

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

package/dist/components/calendar/index.js

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

package/dist/components/calendar-year-picker/calendar-year-picker.styles.d.ts

@@ -0,0 +1,52 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const calendarYearPickerVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            trigger?: import("tailwind-variants").ClassValue;
+            triggerHeading?: import("tailwind-variants").ClassValue;
+            triggerIndicator?: import("tailwind-variants").ClassValue;
+            yearCell?: import("tailwind-variants").ClassValue;
+            yearGrid?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            trigger?: import("tailwind-variants").ClassValue;
+            triggerHeading?: import("tailwind-variants").ClassValue;
+            triggerIndicator?: import("tailwind-variants").ClassValue;
+            yearCell?: import("tailwind-variants").ClassValue;
+            yearGrid?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    trigger: string;
+    triggerHeading: string;
+    triggerIndicator: string;
+    yearCell: string;
+    yearGrid: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            trigger?: import("tailwind-variants").ClassValue;
+            triggerHeading?: import("tailwind-variants").ClassValue;
+            triggerIndicator?: import("tailwind-variants").ClassValue;
+            yearCell?: import("tailwind-variants").ClassValue;
+            yearGrid?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    trigger: string;
+    triggerHeading: string;
+    triggerIndicator: string;
+    yearCell: string;
+    yearGrid: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    trigger: string;
+    triggerHeading: string;
+    triggerIndicator: string;
+    yearCell: string;
+    yearGrid: string;
+}, undefined, unknown, unknown, undefined>>;
+export type CalendarYearPickerVariants = VariantProps<typeof calendarYearPickerVariants>;
+//# sourceMappingURL=calendar-year-picker.styles.d.ts.map

package/dist/components/calendar-year-picker/calendar-year-picker.styles.d.ts.map

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

package/dist/components/calendar-year-picker/calendar-year-picker.styles.js

@@ -0,0 +1,13 @@
+import { tv } from 'tailwind-variants';
+
+const calendarYearPickerVariants = tv({
+    slots: {
+        trigger: "calendar-year-picker__trigger",
+        triggerHeading: "calendar-year-picker__trigger-heading",
+        triggerIndicator: "calendar-year-picker__trigger-indicator",
+        yearCell: "calendar-year-picker__year-cell",
+        yearGrid: "calendar-year-picker__year-grid",
+    },
+});
+
+export { calendarYearPickerVariants };

package/dist/components/calendar-year-picker/index.d.ts

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

package/dist/components/calendar-year-picker/index.d.ts.map

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

package/dist/components/calendar-year-picker/index.js

@@ -0,0 +1 @@
+export { calendarYearPickerVariants } from './calendar-year-picker.styles.js';