@masaraxui/styles 1.0.0

package/dist/components/color-picker.css

@@ -0,0 +1,104 @@
+/* ==========================================================================
+   ColorPicker - Color selection component with popover
+   ========================================================================== */
+
+/* Base color-picker styles */
+.color-picker {
+  @apply inline-flex;
+}
+
+/* ==========================================================================
+   Trigger
+   ========================================================================== */
+
+.color-picker__trigger {
+  @apply inline-flex items-center gap-3 rounded-sm text-sm no-highlight;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  [data-slot="label"] {
+    cursor: var(--cursor-interactive);
+  }
+
+  /* Focus visible state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* ==========================================================================
+   Popover
+   ========================================================================== */
+
+.color-picker__popover {
+  @apply min-w-62 origin-(--trigger-anchor-point) overflow-x-hidden overflow-y-auto overscroll-contain bg-overlay px-2 pt-2 pb-3;
+  box-shadow: var(--shadow-overlay);
+  border-radius: calc(var(--radius) * 2.5);
+  /* Content layout */
+  @apply flex flex-col gap-3;
+
+  /* Hide scrollbar */
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  /* For IE and Edge */
+  -ms-overflow-style: none;
+  /* For Firefox */
+  scrollbar-width: none;
+
+  /* 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];
+  }
+}

package/dist/components/color-slider/color-slider.styles.d.ts

@@ -0,0 +1,46 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const colorSliderVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+            output?: import("tailwind-variants").ClassValue;
+            track?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+            output?: import("tailwind-variants").ClassValue;
+            track?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    output: string;
+    thumb: string;
+    track: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            thumb?: import("tailwind-variants").ClassValue;
+            output?: import("tailwind-variants").ClassValue;
+            track?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    output: string;
+    thumb: string;
+    track: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    output: string;
+    thumb: string;
+    track: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ColorSliderVariants = VariantProps<typeof colorSliderVariants>;
+//# sourceMappingURL=color-slider.styles.d.ts.map

package/dist/components/color-slider/color-slider.styles.d.ts.map

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

package/dist/components/color-slider/color-slider.styles.js

@@ -0,0 +1,12 @@
+import { tv } from 'tailwind-variants';
+
+const colorSliderVariants = tv({
+    slots: {
+        base: "color-slider",
+        output: "color-slider__output",
+        thumb: "color-slider__thumb",
+        track: "color-slider__track",
+    },
+});
+
+export { colorSliderVariants };

package/dist/components/color-slider/index.d.ts

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

package/dist/components/color-slider/index.d.ts.map

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

package/dist/components/color-slider/index.js

@@ -0,0 +1 @@
+export { colorSliderVariants } from './color-slider.styles.js';

package/dist/components/color-slider.css

@@ -0,0 +1,257 @@
+/* ==========================================================================
+   ColorSlider - A slider for adjusting individual color channel values
+   ========================================================================== */
+
+/* Base styles */
+.color-slider {
+  @apply grid w-full gap-1;
+
+  grid-template-areas:
+    "label output"
+    "track track";
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+
+  /* When neither label nor output exist, collapse to single row */
+  &:not(:has([data-slot="label"])):not(:has(.color-slider__output)) {
+    grid-template-areas: "track";
+    grid-template-columns: 1fr;
+    grid-template-rows: auto;
+    gap: 0;
+  }
+
+  /* When only label exists (no output) */
+  &:has([data-slot="label"]):not(:has(.color-slider__output)) {
+    grid-template-areas:
+      "label"
+      "track";
+    grid-template-columns: 1fr;
+  }
+
+  /* When only output exists (no label) */
+  &:not(:has([data-slot="label"])):has(.color-slider__output) {
+    grid-template-areas:
+      "output"
+      "track";
+    grid-template-columns: 1fr;
+
+    .color-slider__output {
+      justify-self: end;
+    }
+  }
+
+  [data-slot="label"] {
+    @apply w-fit text-sm font-medium;
+
+    grid-area: label;
+  }
+
+  .color-slider__output {
+    @apply text-sm font-medium tabular-nums;
+
+    grid-area: output;
+  }
+
+  .color-slider__track {
+    @apply relative rounded-full;
+
+    grid-area: track;
+    /* Edge cap pseudo-elements */
+    &::before,
+    &::after {
+      content: "";
+      position: absolute;
+      z-index: 0;
+      pointer-events: none;
+    }
+  }
+
+  .color-slider__thumb {
+    /* Flex container for centering */
+    @apply absolute flex cursor-grab items-center justify-center rounded-full no-highlight;
+
+    /* Border to create white ring around the thumb */
+    @apply border-3 border-white shadow-overlay;
+
+    /* Ensure thumb is above edge caps */
+    z-index: 1;
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition:
+      transform 250ms var(--ease-out),
+      box-shadow 150ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+
+    /* Dragging state - cursor changes and thumb scales down */
+    &[data-dragging="true"] {
+      @apply cursor-grabbing;
+    }
+
+    /* Focus state - show focus ring */
+    &[data-focus-visible="true"] {
+      @apply z-10 status-focused;
+    }
+
+    /* Disabled state */
+    &[data-disabled="true"] {
+      @apply cursor-default bg-default;
+    }
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+
+    [data-slot="label"] {
+      @apply opacity-100;
+    }
+  }
+
+  /* Horizontal orientation */
+  &[data-orientation="horizontal"] {
+    flex-direction: column;
+
+    .color-slider__track {
+      @apply h-5 justify-self-center rounded-none;
+      width: calc(100% - 1.25rem);
+
+      /* Default border for visibility against similar backgrounds */
+      box-shadow:
+        inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
+        inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+
+      /* Edge caps for horizontal orientation */
+      &::before,
+      &::after {
+        @apply top-0 h-full;
+        width: 0.625rem; /* Half thumb width + 2px gap */
+      }
+
+      &::before {
+        left: -0.625rem;
+        border-top-left-radius: 999px;
+        border-bottom-left-radius: 999px;
+        box-shadow:
+          inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
+          inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
+          inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+        background:
+          linear-gradient(var(--track-start-color, transparent)),
+          repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
+      }
+
+      &::after {
+        right: -0.625rem;
+        border-top-right-radius: 999px;
+        border-bottom-right-radius: 999px;
+        box-shadow:
+          inset -1px 0 0 0 rgba(0, 0, 0, 0.1),
+          inset 0 1px 0 0 rgba(0, 0, 0, 0.1),
+          inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+        background-color: var(--track-end-color, transparent);
+      }
+    }
+
+    .color-slider__thumb {
+      @apply top-1/2 size-4;
+    }
+  }
+
+  /* Vertical orientation */
+  &[data-orientation="vertical"] {
+    @apply h-full gap-2;
+
+    flex-direction: row;
+    grid-template-areas:
+      "output"
+      "track"
+      "label";
+    grid-template-rows: auto 1fr auto;
+    grid-template-columns: 1fr;
+    align-items: center;
+    justify-items: center;
+
+    /* When neither label nor output exist in vertical, just show track */
+    &:not(:has([data-slot="label"])):not(:has(.color-slider__output)) {
+      grid-template-areas: "track";
+      grid-template-rows: 1fr;
+      gap: 0;
+    }
+
+    /* When only label exists in vertical (no output) */
+    &:has([data-slot="label"]):not(:has(.color-slider__output)) {
+      grid-template-areas:
+        "track"
+        "label";
+      grid-template-rows: 1fr auto;
+    }
+
+    /* When only output exists in vertical (no label) */
+    &:not(:has([data-slot="label"])):has(.color-slider__output) {
+      grid-template-areas:
+        "output"
+        "track";
+      grid-template-rows: auto 1fr;
+    }
+
+    .color-slider__output {
+      text-align: center;
+    }
+
+    [data-slot="label"] {
+      text-align: center;
+    }
+
+    .color-slider__track {
+      @apply w-5 justify-self-center rounded-none;
+      height: calc(100% - 1.25rem);
+
+      /* Left and right borders for vertical track */
+      box-shadow:
+        inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
+        inset -1px 0 0 0 rgba(0, 0, 0, 0.1);
+
+      /* Edge caps for vertical orientation */
+      &::before,
+      &::after {
+        @apply left-0 w-full;
+        height: 0.625rem; /* Half thumb height + 2px gap */
+      }
+
+      &::before {
+        bottom: -0.625rem;
+        border-bottom-left-radius: 999px;
+        border-bottom-right-radius: 999px;
+        /* Left, right, and bottom borders for bottom cap */
+        box-shadow:
+          inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
+          inset -1px 0 0 0 rgba(0, 0, 0, 0.1),
+          inset 0 -1px 0 0 rgba(0, 0, 0, 0.1);
+        background:
+          linear-gradient(var(--track-start-color, transparent)),
+          repeating-conic-gradient(#efefef 0% 25%, #f7f7f7 0% 50%) 50% / 16px 16px;
+      }
+
+      &::after {
+        top: -0.625rem;
+        border-top-left-radius: 999px;
+        border-top-right-radius: 999px;
+        /* Left, right, and top borders for top cap */
+        box-shadow:
+          inset 1px 0 0 0 rgba(0, 0, 0, 0.1),
+          inset -1px 0 0 0 rgba(0, 0, 0, 0.1),
+          inset 0 1px 0 0 rgba(0, 0, 0, 0.1);
+        background-color: var(--track-end-color, transparent);
+      }
+    }
+
+    .color-slider__thumb {
+      @apply left-1/2 size-4;
+    }
+  }
+}

package/dist/components/color-swatch/color-swatch.styles.d.ts

@@ -0,0 +1,40 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const colorSwatchVariants: import("tailwind-variants").TVReturnType<{
+    shape: {
+        circle: string;
+        square: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+        xl: string;
+        xs: string;
+    };
+}, undefined, "color-swatch", {
+    shape: {
+        circle: string;
+        square: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+        xl: string;
+        xs: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    shape: {
+        circle: string;
+        square: string;
+    };
+    size: {
+        lg: string;
+        md: string;
+        sm: string;
+        xl: string;
+        xs: string;
+    };
+}, undefined, "color-swatch", unknown, unknown, undefined>>;
+export type ColorSwatchVariants = VariantProps<typeof colorSwatchVariants>;
+//# sourceMappingURL=color-swatch.styles.d.ts.map

package/dist/components/color-swatch/color-swatch.styles.d.ts.map

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

package/dist/components/color-swatch/color-swatch.styles.js

@@ -0,0 +1,24 @@
+import { tv } from 'tailwind-variants';
+
+const colorSwatchVariants = tv({
+    base: "color-swatch",
+    defaultVariants: {
+        shape: "circle",
+        size: "md",
+    },
+    variants: {
+        shape: {
+            circle: "color-swatch--circle",
+            square: "color-swatch--square",
+        },
+        size: {
+            lg: "color-swatch--lg",
+            md: "color-swatch--md",
+            sm: "color-swatch--sm",
+            xl: "color-swatch--xl",
+            xs: "color-swatch--xs",
+        },
+    },
+});
+
+export { colorSwatchVariants };

package/dist/components/color-swatch/index.d.ts

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

package/dist/components/color-swatch/index.d.ts.map

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

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

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

package/dist/components/color-swatch-picker/color-swatch-picker.styles.d.ts

@@ -0,0 +1,121 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const colorSwatchPickerVariants: import("tailwind-variants").TVReturnType<{
+    layout: {
+        grid: {
+            base: string;
+        };
+        stack: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        xs: {
+            base: string;
+        };
+    };
+    variant: {
+        circle: {
+            base: string;
+        };
+        square: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    indicator: string;
+    item: string;
+    swatch: string;
+}, undefined, {
+    layout: {
+        grid: {
+            base: string;
+        };
+        stack: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        xs: {
+            base: string;
+        };
+    };
+    variant: {
+        circle: {
+            base: string;
+        };
+        square: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    indicator: string;
+    item: string;
+    swatch: string;
+}, import("tailwind-variants").TVReturnType<{
+    layout: {
+        grid: {
+            base: string;
+        };
+        stack: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+        xl: {
+            base: string;
+        };
+        xs: {
+            base: string;
+        };
+    };
+    variant: {
+        circle: {
+            base: string;
+        };
+        square: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    indicator: string;
+    item: string;
+    swatch: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ColorSwatchPickerVariants = VariantProps<typeof colorSwatchPickerVariants>;
+//# sourceMappingURL=color-swatch-picker.styles.d.ts.map

package/dist/components/color-swatch-picker/color-swatch-picker.styles.d.ts.map

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

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

@@ -0,0 +1,52 @@
+import { tv } from 'tailwind-variants';
+
+const colorSwatchPickerVariants = tv({
+    defaultVariants: {
+        layout: "grid",
+        size: "md",
+        variant: "circle",
+    },
+    slots: {
+        base: "color-swatch-picker",
+        indicator: "color-swatch-picker__indicator",
+        item: "color-swatch-picker__item",
+        swatch: "color-swatch-picker__swatch",
+    },
+    variants: {
+        layout: {
+            grid: {
+                base: "color-swatch-picker--grid",
+            },
+            stack: {
+                base: "color-swatch-picker--stack",
+            },
+        },
+        size: {
+            lg: {
+                base: "color-swatch-picker--lg",
+            },
+            md: {
+                base: "color-swatch-picker--md",
+            },
+            sm: {
+                base: "color-swatch-picker--sm",
+            },
+            xl: {
+                base: "color-swatch-picker--xl",
+            },
+            xs: {
+                base: "color-swatch-picker--xs",
+            },
+        },
+        variant: {
+            circle: {
+                base: "color-swatch-picker--circle",
+            },
+            square: {
+                base: "color-swatch-picker--square",
+            },
+        },
+    },
+});
+
+export { colorSwatchPickerVariants };

package/dist/components/color-swatch-picker/index.d.ts

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

package/dist/components/color-swatch-picker/index.d.ts.map

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