@masaraxui/styles 1.0.0

package/dist/components/close-button.css

@@ -0,0 +1,65 @@
+/* Close Button component styles */
+
+/* Base close button styles */
+.close-button {
+  @apply relative isolate inline-flex h-6 w-6 shrink-0 origin-center items-center justify-center rounded-xl p-1 select-none no-highlight;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 250ms var(--ease-out-quart),
+    color 150ms var(--ease-out),
+    background-color 100ms var(--ease-out),
+    box-shadow 150ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  /* Focus visible 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;
+  }
+
+  /* SVG icon styling*/
+  & svg {
+    @apply pointer-events-none;
+    @apply size-4 shrink-0 self-center;
+    @apply -mx-0.5 my-0.5;
+  }
+}
+
+/* Variants */
+.close-button--default {
+  @apply bg-default text-muted;
+
+  &:active,
+  &[data-pressed="true"] {
+  }
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default-hover;
+    }
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.93);
+  }
+}

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

@@ -0,0 +1,34 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const colorAreaVariants: import("tailwind-variants").TVReturnType<{
+    showDots: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    thumb: string;
+}, undefined, {
+    showDots: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    thumb: string;
+}, import("tailwind-variants").TVReturnType<{
+    showDots: {
+        false: {};
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    thumb: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ColorAreaVariants = VariantProps<typeof colorAreaVariants>;
+//# sourceMappingURL=color-area.styles.d.ts.map

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

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

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

@@ -0,0 +1,21 @@
+import { tv } from 'tailwind-variants';
+
+const colorAreaVariants = tv({
+    defaultVariants: {
+        showDots: false,
+    },
+    slots: {
+        base: "color-area",
+        thumb: "color-area__thumb",
+    },
+    variants: {
+        showDots: {
+            false: {},
+            true: {
+                base: "color-area--show-dots",
+            },
+        },
+    },
+});
+
+export { colorAreaVariants };

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

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

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

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

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

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

package/dist/components/color-area.css

@@ -0,0 +1,80 @@
+/* ==========================================================================
+   ColorArea - 2D color picker for selecting colors from a gradient area
+   ========================================================================== */
+
+/* Base styles */
+.color-area {
+  @apply relative w-full max-w-56 shrink-0 rounded-2xl no-highlight;
+
+  /* Square aspect ratio */
+  aspect-ratio: 1 / 1;
+
+  /* Color gradient background from React Aria */
+  background: var(--color-area-background);
+
+  /* Inner shadow for depth */
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+
+  /* Disabled state */
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* ==========================================================================
+   Dots overlay variant
+   ========================================================================== */
+
+.color-area--show-dots {
+  /* Dot pattern overlay using radial gradient */
+  &::after {
+    content: "";
+    @apply pointer-events-none absolute inset-0 rounded-[inherit];
+
+    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.2) 1px, transparent 1px);
+    background-size: 8px 8px;
+  }
+}
+
+/* ==========================================================================
+   Thumb element
+   ========================================================================== */
+
+.color-area__thumb {
+  @apply size-4 rounded-full will-change-[width,height];
+
+  /* Current color from React Aria */
+  background-color: var(--color-area-thumb-color);
+
+  /* White border for visibility */
+  border: 3px solid white;
+
+  /* Inner shadow for depth */
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    width 150ms var(--ease-out),
+    height 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Focus state */
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Dragging state */
+  &[data-dragging="true"] {
+    @apply size-5;
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+}

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

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

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

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

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

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

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

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

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

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

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

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

package/dist/components/color-field.css

@@ -0,0 +1,28 @@
+/* ==========================================================================
+   ColorField - Form field for editing hex colors or individual color channels
+   ========================================================================== */
+
+/* Base styles */
+.color-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 */
+.color-field--full-width {
+  @apply w-full;
+}

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

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

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

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

package/dist/components/color-input-group/color-input-group.styles.js

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+
+const colorInputGroupVariants = tv({
+    defaultVariants: {
+        fullWidth: false,
+        variant: "primary",
+    },
+    slots: {
+        base: "color-input-group",
+        input: "color-input-group__input",
+        prefix: "color-input-group__prefix",
+        suffix: "color-input-group__suffix",
+    },
+    variants: {
+        fullWidth: {
+            false: {},
+            true: {
+                base: "color-input-group--full-width",
+            },
+        },
+        variant: {
+            primary: {
+                base: "color-input-group--primary",
+            },
+            secondary: {
+                base: "color-input-group--secondary",
+            },
+        },
+    },
+});
+
+export { colorInputGroupVariants };

package/dist/components/color-input-group/index.d.ts

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

package/dist/components/color-input-group/index.d.ts.map

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

package/dist/components/color-input-group/index.js

@@ -0,0 +1 @@
+export { colorInputGroupVariants } from './color-input-group.styles.js';

package/dist/components/color-input-group.css

@@ -0,0 +1,135 @@
+/* ==========================================================================
+   ColorInputGroup - Input group for color field with prefix/suffix support
+   ========================================================================== */
+
+/* Base styles */
+.color-input-group {
+  @apply inline-flex h-9 items-center overflow-hidden rounded-field border bg-field text-sm text-field-foreground shadow-field outline-none;
+  border-width: var(--border-width-field);
+  border-color: var(--color-field-border);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 150ms var(--ease-smooth),
+    border-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover:not(:focus-within),
+    &[data-hovered="true"]:not([data-focus-within="true"]) {
+      @apply bg-field-hover;
+      border-color: var(--color-field-border-hover);
+    }
+  }
+
+  /* Focus within state */
+  &[data-focus-within="true"],
+  &:focus-within {
+    @apply status-focused-field;
+  }
+
+  /* Invalid state */
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    background-color: var(--color-field-focus);
+    border-color: var(--color-field-border-invalid);
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* ==========================================================================
+   Elements
+   ========================================================================== */
+
+.color-input-group__input {
+  @apply flex h-full flex-1 cursor-text items-center rounded-none border-0 bg-transparent px-3 py-2 text-base shadow-none outline-none sm:text-sm;
+
+  /* Placeholder styling */
+  &::placeholder {
+    @apply text-field-placeholder;
+  }
+
+  /* Remove border radius on left side when prefix is present */
+  .color-input-group:has([data-slot="color-input-group-prefix"]) & {
+    @apply rounded-l-none pl-2;
+  }
+
+  /* Remove border radius on right side when suffix is present */
+  .color-input-group:has([data-slot="color-input-group-suffix"]) & {
+    @apply rounded-r-none pr-2;
+  }
+
+  /* Focus state - handled by group */
+  &:focus,
+  &:focus-visible {
+    @apply outline-none;
+  }
+}
+
+.color-input-group__prefix {
+  @apply shrink-0 text-field-placeholder;
+  @apply mr-0 ml-3 flex items-center;
+}
+
+.color-input-group__suffix {
+  @apply shrink-0 text-field-placeholder;
+  @apply mr-3 flex items-center;
+}
+
+/* ==========================================================================
+   Variant modifiers
+   ========================================================================== */
+
+.color-input-group--primary {
+  /* Default styles - primary variant uses the base field styling */
+}
+
+.color-input-group--secondary {
+  @apply shadow-none;
+  background-color: var(--color-input-group-bg);
+
+  --color-input-group-bg: var(--color-default);
+  --color-input-group-bg-hover: var(--color-default-hover);
+  --color-input-group-bg-focus: var(--color-default);
+
+  @media (hover: hover) {
+    &:hover:not(:focus-within),
+    &[data-hovered="true"]:not([data-focus-within="true"]) {
+      background-color: var(--color-input-group-bg-hover);
+    }
+  }
+
+  &:focus-within,
+  &[data-focus-within="true"] {
+    background-color: var(--color-input-group-bg-focus);
+  }
+
+  /* Invalid state */
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    border-color: var(--color-field-border-invalid);
+    background-color: var(--color-input-group-bg-focus);
+  }
+
+  [data-slot="color-input-group-input"] {
+    @apply bg-transparent;
+  }
+}
+
+/* ==========================================================================
+   Full width modifier
+   ========================================================================== */
+
+.color-input-group--full-width {
+  @apply w-full;
+}

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

@@ -0,0 +1,40 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const colorPickerVariants: import("tailwind-variants").TVReturnType<{
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            popover?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            popover?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    popover: string;
+    trigger: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import("tailwind-variants").ClassValue | {
+            base?: import("tailwind-variants").ClassValue;
+            trigger?: import("tailwind-variants").ClassValue;
+            popover?: import("tailwind-variants").ClassValue;
+        };
+    };
+} | {}, {
+    base: string;
+    popover: string;
+    trigger: string;
+}, import("tailwind-variants").TVReturnType<unknown, {
+    base: string;
+    popover: string;
+    trigger: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ColorPickerVariants = VariantProps<typeof colorPickerVariants>;
+//# sourceMappingURL=color-picker.styles.d.ts.map

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

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

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

@@ -0,0 +1,11 @@
+import { tv } from 'tailwind-variants';
+
+const colorPickerVariants = tv({
+    slots: {
+        base: "color-picker",
+        popover: "color-picker__popover",
+        trigger: "color-picker__trigger",
+    },
+});
+
+export { colorPickerVariants };

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

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

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

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

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

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