@masaraxui/styles 1.0.0

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

@@ -0,0 +1,16 @@
+import { tv } from 'tailwind-variants';
+
+const checkboxGroupVariants = tv({
+    base: "checkbox-group",
+    defaultVariants: {
+        variant: "primary",
+    },
+    variants: {
+        variant: {
+            primary: "checkbox-group--primary",
+            secondary: "checkbox-group--secondary",
+        },
+    },
+});
+
+export { checkboxGroupVariants };

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

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

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

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

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

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

package/dist/components/checkbox-group.css

@@ -0,0 +1,7 @@
+.checkbox-group {
+  @apply flex flex-col;
+
+  [data-slot="checkbox"] {
+    @apply mt-4;
+  }
+}

package/dist/components/checkbox.css

@@ -0,0 +1,268 @@
+/* ==========================================================================
+   Base checkbox styles
+   ========================================================================== */
+
+.checkbox {
+  @apply flex gap-3 outline-none no-highlight;
+
+  cursor: var(--cursor-interactive);
+
+  /* Align center when there's no description */
+  &:not(:has([data-slot="description"])) {
+    @apply items-center;
+  }
+
+  /* Align start when there's a description */
+  &:has([data-slot="description"]) {
+    @apply items-start;
+  }
+
+  [data-slot="label"] {
+    @apply select-none;
+  }
+
+  [data-slot="description"] {
+    @apply text-wrap select-none;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Indicator styles */
+  &[data-selected="true"],
+  &[data-indeterminate="true"] {
+    .checkbox__indicator {
+      border-color: var(--accent-foreground);
+      background: var(--accent-hover);
+    }
+  }
+
+  /* Checkmark SVG indicator */
+  [data-slot="checkbox-default-indicator--checkmark"] {
+    @apply size-2.5 stroke-[2.5px] text-accent-foreground;
+
+    /**
+     * Transitions
+     */
+    @apply transition-all duration-200 motion-reduce:transition-none;
+  }
+
+  &[data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"] {
+    transition: stroke-dashoffset 150ms linear 15ms;
+  }
+
+  /* Invalid + Selected: checkmark icon color */
+  &[data-invalid="true"][data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"],
+  &[data-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"],
+  &[aria-invalid="true"][data-selected="true"] [data-slot="checkbox-default-indicator--checkmark"],
+  &[aria-invalid="true"][aria-checked="true"] [data-slot="checkbox-default-indicator--checkmark"] {
+    @apply text-danger-foreground;
+  }
+
+  /* Indeterminate line indicator */
+  &[data-indeterminate="true"] {
+    [data-slot="checkbox-default-indicator--indeterminate"] {
+      @apply size-3;
+    }
+  }
+
+  /* Invalid + Indeterminate: indeterminate icon color */
+  &[data-indeterminate="true"][data-invalid="true"]
+    [data-slot="checkbox-default-indicator--indeterminate"],
+  &[data-indeterminate="true"][aria-invalid="true"]
+    [data-slot="checkbox-default-indicator--indeterminate"] {
+    @apply text-danger-foreground;
+  }
+}
+
+/* ==========================================================================
+   Checkbox control (the square button)
+   ========================================================================== */
+
+.checkbox__control {
+  @apply relative inline-flex size-4 shrink-0 items-center justify-center overflow-hidden rounded-md bg-field shadow-field outline-none no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    background-color 200ms var(--ease-out),
+    transform 100ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  cursor: var(--cursor-interactive);
+
+  /* Add top margin when there's a description */
+  .checkbox:has([data-slot="description"]) & {
+    @apply mt-0.5;
+  }
+
+  /* Background indicator pseudo-element */
+  &::before {
+    @apply pointer-events-none absolute inset-0 z-0 origin-center scale-70 rounded-md bg-accent opacity-0 content-[''];
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition:
+      scale 100ms var(--ease-linear),
+      opacity 200ms var(--ease-linear),
+      background-color 200ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  /* Interactive states */
+  /* Focus */
+  .checkbox:focus-visible &,
+  .checkbox[data-focus-visible="true"] & {
+    @apply status-focused;
+  }
+
+  /* Hover */
+  .checkbox:hover &,
+  .checkbox[data-hovered="true"] & {
+    @apply border-field-border-hover;
+
+    &::before {
+      @apply bg-accent-hover;
+    }
+  }
+
+  /* Pressed */
+  .checkbox:active &,
+  .checkbox[data-pressed="true"] & {
+  }
+
+  /* Selection states */
+  /* Selected */
+  .checkbox[aria-checked="true"] &,
+  .checkbox[data-selected="true"] & {
+    @apply border-transparent text-accent-foreground;
+
+    &::before {
+      @apply scale-100 opacity-100;
+    }
+  }
+
+  /* Indeterminate */
+  .checkbox[data-indeterminate="true"] & {
+    @apply bg-accent text-accent-foreground;
+  }
+
+  /* Indeterminate + Pressed */
+  .checkbox:active[data-indeterminate="true"] &,
+  .checkbox[data-pressed="true"][data-indeterminate="true"] & {
+    @apply bg-accent-hover;
+  }
+
+  /* Validation states */
+  /* Invalid (only when not selected/indeterminate) */
+  .checkbox[data-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not(
+      [data-indeterminate="true"]
+    )
+    &,
+  .checkbox[aria-invalid="true"]:not([aria-checked="true"]):not([data-selected="true"]):not(
+      [data-indeterminate="true"]
+    )
+    & {
+    @apply status-invalid-field;
+  }
+
+  /* Invalid + Selected */
+  .checkbox[data-invalid="true"][aria-checked="true"] &,
+  .checkbox[data-invalid="true"][data-selected="true"] &,
+  .checkbox[aria-invalid="true"][aria-checked="true"] &,
+  .checkbox[aria-invalid="true"][data-selected="true"] & {
+    @apply border-transparent bg-danger text-danger-foreground;
+
+    &::before {
+      @apply scale-100 bg-danger opacity-100;
+    }
+  }
+
+  /* Invalid + Indeterminate */
+  .checkbox[data-indeterminate="true"][aria-invalid="true"] &,
+  .checkbox[data-indeterminate="true"][data-invalid="true"] & {
+    @apply bg-danger text-danger-foreground;
+  }
+}
+
+/* ==========================================================================
+   Checkbox indicator
+   ========================================================================== */
+
+.checkbox__indicator {
+  @apply relative z-10 flex size-3 items-center justify-center;
+
+  & svg {
+    @apply transform-gpu;
+  }
+}
+
+/* ==========================================================================
+   Checkbox content wrapper
+   ========================================================================== */
+
+.checkbox__content {
+  @apply flex flex-col gap-0;
+}
+
+/* ==========================================================================
+   Disabled modifier
+   ========================================================================== */
+
+.checkbox--disabled {
+  @apply status-disabled;
+}
+
+/* ==========================================================================
+   Variant property definitions
+   ========================================================================== */
+
+.checkbox--primary {
+  /* Default styles */
+}
+
+.checkbox--secondary .checkbox__control {
+  @apply shadow-none;
+  background-color: var(--checkbox-control-bg);
+
+  --checkbox-control-bg: var(--color-default);
+
+  /* Hover state */
+  .checkbox:hover &,
+  .checkbox[data-hovered="true"] & {
+    @apply border-field-border-hover;
+  }
+}
+
+/* Unselected state background for secondary variant */
+.checkbox--secondary:not([aria-checked="true"]):not([data-selected="true"]):not(
+    [data-indeterminate="true"]
+  )
+  .checkbox__control {
+  background-color: var(--checkbox-control-bg);
+}
+
+/* Selected state on secondary variant */
+.checkbox--secondary[aria-checked="true"] .checkbox__control,
+.checkbox--secondary[data-selected="true"] .checkbox__control {
+  &::before {
+    @apply bg-accent;
+  }
+}
+
+/* Indeterminate state on secondary variant */
+.checkbox--secondary[data-indeterminate="true"] .checkbox__control {
+  @apply bg-accent;
+
+  &::before {
+    @apply bg-accent;
+  }
+}

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

@@ -0,0 +1,142 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const chipVariants: import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+}, undefined, {
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+}, import("tailwind-variants").TVReturnType<{
+    color: {
+        accent: {
+            base: string;
+        };
+        danger: {
+            base: string;
+        };
+        default: {
+            base: string;
+        };
+        success: {
+            base: string;
+        };
+        warning: {
+            base: string;
+        };
+    };
+    size: {
+        lg: {
+            base: string;
+        };
+        md: {
+            base: string;
+        };
+        sm: {
+            base: string;
+        };
+    };
+    variant: {
+        primary: {
+            base: string;
+        };
+        secondary: {
+            base: string;
+        };
+        soft: {
+            base: string;
+        };
+        tertiary: {
+            base: string;
+        };
+    };
+}, {
+    base: string;
+    label: string;
+}, undefined, unknown, unknown, undefined>>;
+export type ChipVariants = VariantProps<typeof chipVariants>;
+//# sourceMappingURL=chip.styles.d.ts.map

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

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

package/dist/components/chip/chip.styles.js

@@ -0,0 +1,58 @@
+import { tv } from 'tailwind-variants';
+
+const chipVariants = tv({
+    defaultVariants: {
+        color: "default",
+        variant: "secondary",
+    },
+    slots: {
+        base: "chip",
+        label: "chip__label",
+    },
+    variants: {
+        color: {
+            accent: {
+                base: "chip--accent",
+            },
+            danger: {
+                base: "chip--danger",
+            },
+            default: {
+                base: "chip--default",
+            },
+            success: {
+                base: "chip--success",
+            },
+            warning: {
+                base: "chip--warning",
+            },
+        },
+        size: {
+            lg: {
+                base: "chip--lg",
+            },
+            md: {
+                base: "chip--md",
+            },
+            sm: {
+                base: "chip--sm",
+            },
+        },
+        variant: {
+            primary: {
+                base: "chip--primary",
+            },
+            secondary: {
+                base: "chip--secondary",
+            },
+            soft: {
+                base: "chip--soft",
+            },
+            tertiary: {
+                base: "chip--tertiary",
+            },
+        },
+    },
+});
+
+export { chipVariants };

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

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

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

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

package/dist/components/chip/index.js

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

package/dist/components/chip.css

@@ -0,0 +1,107 @@
+/* Base styles */
+.chip {
+  @apply inline-flex shrink-0 items-center gap-0.5 rounded-2xl px-2 py-0.5 text-xs leading-5 font-medium;
+
+  /* Default tokens */
+  --chip-bg: var(--color-default);
+  --chip-fg: currentColor;
+
+  background-color: var(--chip-bg);
+  color: var(--chip-fg);
+}
+
+.chip__label {
+  @apply px-0.5;
+}
+
+/* Color variants - set foreground color */
+.chip--accent {
+  --chip-fg: var(--color-accent);
+}
+
+.chip--danger {
+  --chip-fg: var(--color-danger);
+}
+
+.chip--default {
+  --chip-fg: var(--color-default-foreground);
+}
+
+.chip--success {
+  --chip-fg: var(--color-success);
+}
+
+.chip--warning {
+  --chip-fg: var(--color-warning);
+}
+
+/* Variant styles */
+.chip--primary {
+}
+
+.chip--secondary {
+  /* No additional styles for secondary variant */
+}
+
+.chip--tertiary {
+  --chip-bg: transparent;
+}
+
+/* Size variants */
+.chip--sm {
+  @apply px-1 py-0 text-xs;
+}
+
+.chip--md {
+  @apply text-xs;
+}
+
+.chip--lg {
+  @apply px-3 py-1 text-sm font-medium;
+}
+
+/* ====================== */
+/* = Compound variants = */
+/* ====================== */
+
+/* Primary variants - solid backgrounds */
+.chip--primary.chip--accent {
+  --chip-bg: var(--color-accent);
+  --chip-fg: var(--color-accent-foreground);
+}
+
+.chip--primary.chip--success {
+  --chip-bg: var(--color-success);
+  --chip-fg: var(--color-success-foreground);
+}
+
+.chip--primary.chip--warning {
+  --chip-bg: var(--color-warning);
+  --chip-fg: var(--color-warning-foreground);
+}
+
+.chip--primary.chip--danger {
+  --chip-bg: var(--color-danger);
+  --chip-fg: var(--color-danger-foreground);
+}
+
+/* Soft variants - muted backgrounds */
+.chip--accent.chip--soft {
+  --chip-bg: var(--color-accent-soft);
+  --chip-fg: var(--color-accent-soft-foreground);
+}
+
+.chip--success.chip--soft {
+  --chip-bg: var(--color-success-soft);
+  --chip-fg: var(--color-success-soft-foreground);
+}
+
+.chip--warning.chip--soft {
+  --chip-bg: var(--color-warning-soft);
+  --chip-fg: var(--color-warning-soft-foreground);
+}
+
+.chip--danger.chip--soft {
+  --chip-bg: var(--color-danger-soft);
+  --chip-fg: var(--color-danger-soft-foreground);
+}

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

@@ -0,0 +1,16 @@
+import type { VariantProps } from "tailwind-variants";
+export declare const closeButtonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, "close-button", {
+    variant: {
+        default: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+    };
+}, undefined, "close-button", unknown, unknown, undefined>>;
+export type CloseButtonVariants = VariantProps<typeof closeButtonVariants>;
+//# sourceMappingURL=close-button.styles.d.ts.map

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

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

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

@@ -0,0 +1,15 @@
+import { tv } from 'tailwind-variants';
+
+const closeButtonVariants = tv({
+    base: "close-button",
+    defaultVariants: {
+        variant: "default",
+    },
+    variants: {
+        variant: {
+            default: "close-button--default",
+        },
+    },
+});
+
+export { closeButtonVariants };

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

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

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

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

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

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