@masaraxui/styles 1.0.0

package/dist/components/color-swatch-picker/index.js

@@ -0,0 +1 @@
+export { colorSwatchPickerVariants } from './color-swatch-picker.styles.js';

package/dist/components/color-swatch-picker.css

@@ -0,0 +1,239 @@
+/* ==========================================================================
+   ColorSwatchPicker - A list of color swatches for selection
+   ========================================================================== */
+
+/* Base styles */
+.color-swatch-picker {
+  @apply flex flex-wrap items-center gap-2;
+}
+
+/* ==========================================================================
+   Item - Individual swatch picker item
+   ========================================================================== */
+
+.color-swatch-picker__item {
+  @apply relative flex size-8 items-center justify-center rounded-full border-2 border-transparent outline-none no-highlight;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    border-color 100ms var(--ease-out),
+    box-shadow 100ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  /* Focus state */
+  &:focus-visible,
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Selected state */
+  &[data-selected="true"] {
+    border-color: var(--color-swatch-current);
+    box-shadow: var(--field-shadow);
+    /* Shrink the swatch to reveal the white gap */
+    .color-swatch-picker__swatch {
+      transform: scale(0.77);
+    }
+  }
+}
+
+/* ==========================================================================
+   Swatch - The color swatch visual
+   ========================================================================== */
+
+.color-swatch-picker__swatch {
+  @apply block size-full;
+
+  /* Inherit border-radius from item */
+  border-radius: inherit;
+  /**
+  * Transitions
+  * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+  */
+  transition: transform 100ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  @media (hover: hover) {
+    &:hover {
+      transform: scale(1.1);
+    }
+  }
+}
+
+/* ==========================================================================
+   Indicator - Checkmark indicator for selected state
+   ========================================================================== */
+
+.color-swatch-picker__indicator {
+  @apply pointer-events-none absolute inset-0 z-10 flex items-center justify-center;
+
+  /* Checkmark SVG styles - default to white for dark backgrounds */
+  & > * {
+    @apply size-1/3 text-white;
+
+    /* Start scaled down - use translateZ(0) for GPU acceleration */
+    transform: scale(0) translateZ(0);
+
+    /**
+     * Transitions
+     */
+    transition: transform 150ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  /* Use black checkmark on light backgrounds */
+  &[data-light-color="true"] & > * {
+    @apply text-black;
+  }
+
+  /* Scale up when parent item is selected */
+  .color-swatch-picker__item[data-selected="true"] & > * {
+    transform: scale(1) translateZ(0);
+  }
+}
+
+/* ==========================================================================
+   Layout variants
+   ========================================================================== */
+
+.color-swatch-picker--grid {
+  /* Default is already grid (flex-wrap) - no additional styles needed */
+}
+
+.color-swatch-picker--stack {
+  @apply flex-col;
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.color-swatch-picker--xs {
+  .color-swatch-picker__item {
+    @apply size-4 border;
+  }
+}
+
+.color-swatch-picker--sm {
+  .color-swatch-picker__item {
+    @apply size-6 border-2;
+  }
+}
+
+.color-swatch-picker--md {
+  .color-swatch-picker__item {
+    /* No styles as this is the default size */
+  }
+}
+
+.color-swatch-picker--lg {
+  .color-swatch-picker__item {
+    @apply size-9 border-3;
+  }
+}
+
+.color-swatch-picker--xl {
+  .color-swatch-picker__item {
+    @apply size-10 border-3;
+  }
+}
+
+/* ==========================================================================
+   Shape variants
+   ========================================================================== */
+
+/* Circle variant (default) - no additional styles needed */
+.color-swatch-picker--circle .color-swatch-picker__item {
+  /* Default is already circle (border-radius: 9999px) */
+}
+
+/* Square variant */
+.color-swatch-picker--square {
+  .color-swatch-picker__item {
+    @apply rounded-xl;
+    .color-swatch-picker__swatch {
+      @apply rounded-lg;
+    }
+    &[data-selected="true"] {
+      .color-swatch-picker__swatch {
+        @apply rounded-lg;
+      }
+    }
+  }
+}
+
+/* Square variant - item radius for xs */
+.color-swatch-picker--square.color-swatch-picker--xs {
+  .color-swatch-picker__item {
+    @apply rounded-md;
+    .color-swatch-picker__swatch {
+      @apply rounded-md;
+    }
+    &[data-selected="true"] {
+      .color-swatch-picker__swatch {
+        @apply rounded-md;
+      }
+    }
+  }
+}
+
+/* Square variant - item radius for sm */
+.color-swatch-picker--square.color-swatch-picker--sm {
+  .color-swatch-picker__item {
+    @apply rounded-lg;
+    .color-swatch-picker__swatch {
+      @apply rounded-lg;
+    }
+    &[data-selected="true"] {
+      .color-swatch-picker__swatch {
+        @apply rounded-md;
+      }
+    }
+  }
+}
+
+/* Square variant - item radius for md (default) */
+.color-swatch-picker--square.color-swatch-picker--md {
+  /* No styles as this is the default size */
+}
+
+/* Square variant - item radius for lg */
+.color-swatch-picker--square.color-swatch-picker--lg {
+  .color-swatch-picker__item {
+    @apply rounded-xl;
+    .color-swatch-picker__swatch {
+      @apply rounded-lg;
+    }
+    &[data-selected="true"] {
+      .color-swatch-picker__swatch {
+        @apply rounded-lg;
+      }
+    }
+  }
+}
+
+/* Square variant - item radius for xl */
+.color-swatch-picker--square.color-swatch-picker--xl {
+  .color-swatch-picker__item {
+    @apply rounded-xl;
+    .color-swatch-picker__swatch {
+      @apply rounded-lg;
+    }
+    &[data-selected="true"] {
+      .color-swatch-picker__swatch {
+        @apply rounded-lg;
+      }
+    }
+  }
+}

package/dist/components/color-swatch.css

@@ -0,0 +1,42 @@
+/* Base color-swatch styles */
+.color-swatch {
+  @apply relative box-border size-8 shrink-0;
+
+  /* Checkered background pattern for transparency */
+  background:
+    linear-gradient(var(--color-swatch-current), var(--color-swatch-current)),
+    repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
+
+  /* Default border for visibility against similar backgrounds */
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+
+/* Shape variants */
+.color-swatch--circle {
+  @apply rounded-full;
+}
+
+.color-swatch--square {
+  @apply rounded-md;
+}
+
+/* Size variants */
+.color-swatch--xs {
+  @apply size-4;
+}
+
+.color-swatch--sm {
+  @apply size-6;
+}
+
+.color-swatch--md {
+  /* No styles as this is the default size */
+}
+
+.color-swatch--lg {
+  @apply size-9;
+}
+
+.color-swatch--xl {
+  @apply size-10;
+}

package/dist/components/combo-box/combo-box.styles.d.ts

@@ -0,0 +1,43 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const comboBoxVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            inputGroup: string;
+        };
+    };
+}, {
+    base: string;
+    inputGroup: string;
+    popover: string;
+    trigger: string;
+}, undefined, {
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            inputGroup: string;
+        };
+    };
+}, {
+    base: string;
+    inputGroup: string;
+    popover: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+            inputGroup: string;
+        };
+    };
+}, {
+    base: string;
+    inputGroup: string;
+    popover: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ComboBoxVariants = VariantProps<typeof comboBoxVariants>;
+//# sourceMappingURL=combo-box.styles.d.ts.map

package/dist/components/combo-box/combo-box.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combo-box.styles.d.ts","sourceRoot":"","sources":["../../../src/components/combo-box/combo-box.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/combo-box/combo-box.styles.js

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+
+const comboBoxVariants = tv({
+    defaultVariants: {
+        fullWidth: false,
+    },
+    slots: {
+        base: "combo-box",
+        inputGroup: "combo-box__input-group",
+        popover: "combo-box__popover",
+        trigger: "combo-box__trigger",
+    },
+    variants: {
+        fullWidth: {
+            false: {},
+            true: {
+                base: "combo-box--full-width",
+                inputGroup: "combo-box__input-group--full-width",
+            },
+        },
+    },
+});
+
+export { comboBoxVariants };

package/dist/components/combo-box/index.d.ts

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

package/dist/components/combo-box/index.d.ts.map

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

package/dist/components/combo-box/index.js

@@ -0,0 +1 @@
+export { comboBoxVariants } from './combo-box.styles.js';

package/dist/components/combo-box.css

@@ -0,0 +1,174 @@
+/* ComboBox styles */
+.combo-box {
+  @apply flex flex-col gap-1;
+
+  &[data-invalid="true"],
+  &[aria-invalid="true"] {
+    [data-slot="description"] {
+      @apply hidden;
+    }
+  }
+
+  [data-slot="label"] {
+    @apply w-fit;
+  }
+
+  [data-slot="description"] {
+    @apply px-1;
+  }
+
+  [data-slot="input"] {
+    @apply min-w-0 flex-1;
+
+    /* Add padding-right when trigger is present */
+    &:has(+ .combo-box__trigger) {
+      @apply pr-7;
+    }
+
+    /* Focus state (input.css only has focus-visible, but combo-box also needs focus) */
+    &:focus,
+    &[data-focus] {
+      @apply status-focused-field;
+      border-color: var(--color-field-border-focus);
+      background-color: var(--color-field-focus);
+    }
+
+    /* Disabled state */
+    &:disabled,
+    &[data-disabled],
+    &[aria-disabled="true"] {
+      @apply status-disabled;
+    }
+  }
+}
+
+.combo-box__input-group {
+  @apply relative isolate inline-flex items-center;
+}
+
+.combo-box__trigger {
+  @apply absolute top-1/2 right-0 flex h-full shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center pr-2 text-field-placeholder transition duration-150 no-highlight;
+
+  /* Remove default button styles */
+  @apply border-none bg-transparent outline-none;
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply text-field-foreground;
+    }
+  }
+
+  /* Focus visible state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply rounded ring-2 ring-focus ring-offset-2 ring-offset-background outline-none;
+  }
+
+  /* Pressed state */
+  &[data-pressed="true"] {
+    @apply opacity-70;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled],
+  &[aria-disabled="true"] {
+    @apply cursor-not-allowed opacity-50;
+  }
+
+  [data-slot="combo-box-trigger-default-icon"] {
+    @apply size-4 transition-transform duration-150 motion-reduce:transition-none;
+  }
+
+  /* Rotate icon when trigger is open */
+  &[data-open="true"] [data-slot="combo-box-trigger-default-icon"] {
+    @apply rotate-180;
+  }
+}
+
+/* Similar to popover content styles */
+.combo-box__popover {
+  @apply min-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 overflow-y-auto overscroll-contain rounded-3xl bg-overlay p-0 text-sm;
+  box-shadow: var(--shadow-overlay);
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply outline-none;
+  }
+
+  /* Entering animations */
+  &[data-entering="true"] {
+    @apply animate-in duration-150 ease-smooth fade-in-0 zoom-in-95;
+
+    /* Placement-specific translations */
+    &[data-placement="top"] {
+      @apply slide-in-from-bottom-1;
+    }
+
+    &[data-placement="bottom"] {
+      @apply slide-in-from-top-1;
+    }
+
+    &[data-placement="left"] {
+      @apply slide-in-from-right-1;
+    }
+
+    &[data-placement="right"] {
+      @apply slide-in-from-left-1;
+    }
+  }
+
+  /* Exiting animations */
+  &[data-exiting="true"] {
+    @apply animate-out duration-100 ease-smooth zoom-out-95 fade-out;
+  }
+
+  &[data-exiting="true"],
+  &[data-entering="true"] {
+    @apply will-change-[opacity,transform];
+  }
+
+  /* Arrow styling */
+  & [data-slot="popover-overlay-arrow"] {
+    fill: var(--overlay);
+  }
+
+  /* Arrow rotation based on placement */
+  &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] {
+    rotate: 180deg;
+  }
+
+  &[data-placement="left"] [data-slot="popover-overlay-arrow"] {
+    rotate: -90deg;
+  }
+
+  &[data-placement="right"] [data-slot="popover-overlay-arrow"] {
+    rotate: 90deg;
+  }
+
+  /* Listbox styles */
+  [data-slot="list-box"] {
+    @apply p-1.5 outline-none;
+  }
+
+  [data-slot="list-box-item"] {
+    @apply px-2.5;
+
+    /* As the combo-box is single-select, we don't need to animate the checkmark */
+    [data-slot="list-box-item-indicator--checkmark"] {
+      @apply transition-none;
+    }
+  }
+}
+
+/* Full width modifier */
+.combo-box--full-width {
+  @apply w-full;
+}
+
+.combo-box__input-group--full-width {
+  @apply w-full;
+}

package/dist/components/date-field/date-field.styles.d.ts

@@ -0,0 +1,19 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const dateFieldVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+}, undefined, "date-field", {
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: string;
+        true: string;
+    };
+}, undefined, "date-field", unknown, unknown, undefined>>;
+export type DateFieldVariants = VariantProps<typeof dateFieldVariants>;
+//# sourceMappingURL=date-field.styles.d.ts.map

package/dist/components/date-field/date-field.styles.d.ts.map

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

package/dist/components/date-field/date-field.styles.js

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+const dateFieldVariants = tv({
+    base: "date-field",
+    defaultVariants: {
+        fullWidth: false,
+    },
+    variants: {
+        fullWidth: {
+            false: "",
+            true: "date-field--full-width",
+        },
+    },
+});
+
+export { dateFieldVariants };

package/dist/components/date-field/index.d.ts

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

package/dist/components/date-field/index.d.ts.map

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

package/dist/components/date-field/index.js

@@ -0,0 +1 @@
+export { dateFieldVariants } from './date-field.styles.js';

package/dist/components/date-field.css

@@ -0,0 +1,24 @@
+/* Date field styles */
+.date-field {
+  @apply flex flex-col gap-1;
+
+  &[data-invalid="true"],
+  &[aria-invalid="true"] {
+    [data-slot="description"] {
+      @apply hidden;
+    }
+  }
+
+  [data-slot="label"] {
+    @apply w-fit;
+  }
+
+  [data-slot="description"] {
+    @apply px-1;
+  }
+}
+
+/* Full width modifier */
+.date-field--full-width {
+  @apply w-full;
+}

package/dist/components/date-input-group/date-input-group.styles.d.ts

@@ -0,0 +1,70 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const dateInputGroupVariants: import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    inputContainer: string;
+    prefix: string;
+    segment: string;
+    suffix: string;
+}, undefined, {
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    inputContainer: string;
+    prefix: string;
+    segment: string;
+    suffix: string;
+}, import("tailwind-variants").TVReturnType<{
+    fullWidth: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    input: string;
+    inputContainer: string;
+    prefix: string;
+    segment: string;
+    suffix: string;
+}, undefined, unknown, unknown, undefined>>;
+export type DateInputGroupVariants = VariantProps<typeof dateInputGroupVariants>;
+//# sourceMappingURL=date-input-group.styles.d.ts.map

package/dist/components/date-input-group/date-input-group.styles.d.ts.map

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