@rysinal/heroui-vue-styles 0.0.1

package/src/components/checkbox.css

@@ -0,0 +1,271 @@
+/* ==========================================================================
+   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;
+    cursor: inherit;
+  }
+
+  [data-slot="description"] {
+    @apply text-wrap select-none;
+    cursor: inherit;
+  }
+
+  /* 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;
+  cursor: var(--cursor-interactive);
+}
+
+/* ==========================================================================
+   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/src/components/chip/chip.styles.ts

@@ -0,0 +1,60 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export 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 type ChipVariants = VariantProps<typeof chipVariants>

package/src/components/chip/index.ts

@@ -0,0 +1 @@
+export * from './chip.styles.js'

package/src/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/src/components/close-button/close-button.styles.ts

@@ -0,0 +1,16 @@
+import type { VariantProps } from 'tailwind-variants'
+import { tv } from 'tailwind-variants'
+
+export const closeButtonVariants = tv({
+  base: 'close-button',
+  defaultVariants: {
+    variant: 'default',
+  },
+  variants: {
+    variant: {
+      default: 'close-button--default',
+    },
+  },
+})
+
+export type CloseButtonVariants = VariantProps<typeof closeButtonVariants>

package/src/components/close-button/index.ts

@@ -0,0 +1 @@
+export * from './close-button.styles.js'

package/src/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/src/components/color-area/color-area.styles.ts

@@ -0,0 +1,23 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const colorAreaVariants = tv({
+  defaultVariants: {
+    showDots: false,
+  },
+  slots: {
+    base: 'color-area',
+    thumb: 'color-area__thumb',
+  },
+  variants: {
+    showDots: {
+      false: {},
+      true: {
+        base: 'color-area--show-dots',
+      },
+    },
+  },
+})
+
+export type ColorAreaVariants = VariantProps<typeof colorAreaVariants>

package/src/components/color-area/index.ts

@@ -0,0 +1 @@
+export * from './color-area.styles.js'

package/src/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/src/components/color-field/color-field.styles.ts

@@ -0,0 +1,18 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const colorFieldVariants = tv({
+  base: 'color-field',
+  defaultVariants: {
+    fullWidth: false,
+  },
+  variants: {
+    fullWidth: {
+      false: '',
+      true: 'color-field--full-width',
+    },
+  },
+})
+
+export type ColorFieldVariants = VariantProps<typeof colorFieldVariants>

package/src/components/color-field/index.ts

@@ -0,0 +1 @@
+export * from './color-field.styles.js'

package/src/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;
+}