@rysinal/heroui-vue-styles 0.0.1

package/src/components/progress-circle/progress-circle.styles.ts

@@ -0,0 +1,48 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const progressCircleVariants = tv({
+  defaultVariants: {
+    color: 'accent',
+    size: 'md',
+  },
+  slots: {
+    base: 'progress-circle',
+    fillCircle: 'progress-circle__fill-circle',
+    track: 'progress-circle__track',
+    trackCircle: 'progress-circle__track-circle',
+  },
+  variants: {
+    color: {
+      accent: {
+        base: 'progress-circle--accent',
+      },
+      danger: {
+        base: 'progress-circle--danger',
+      },
+      default: {
+        base: 'progress-circle--default',
+      },
+      success: {
+        base: 'progress-circle--success',
+      },
+      warning: {
+        base: 'progress-circle--warning',
+      },
+    },
+    size: {
+      lg: {
+        base: 'progress-circle--lg',
+      },
+      md: {
+        base: 'progress-circle--md',
+      },
+      sm: {
+        base: 'progress-circle--sm',
+      },
+    },
+  },
+})
+
+export type ProgressCircleVariants = VariantProps<typeof progressCircleVariants>

package/src/components/progress-circle.css

@@ -0,0 +1,105 @@
+/* ==========================================================================
+   ProgressCircle - Circular progress indicator
+   ========================================================================== */
+
+/* Base styles */
+.progress-circle {
+  @apply inline-flex items-center justify-center;
+
+  /* Default color token (accent) */
+  --progress-circle-stroke: var(--color-accent);
+  --progress-circle-track-stroke: var(--color-default);
+
+  .progress-circle__track {
+    /* Default size (matches --md) */
+    @apply size-7;
+  }
+
+  .progress-circle__track-circle {
+    stroke: var(--progress-circle-track-stroke);
+  }
+
+  .progress-circle__fill-circle {
+    stroke: var(--progress-circle-stroke);
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition: stroke-dashoffset 300ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  /* Indeterminate state - when no aria-valuenow is set */
+  &:not([aria-valuenow]) {
+    .progress-circle__track {
+      animation: progress-circle-spin 1s linear infinite;
+
+      @apply motion-reduce:animate-none;
+    }
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* ==========================================================================
+   Indeterminate animation
+   ========================================================================== */
+
+@keyframes progress-circle-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.progress-circle--sm {
+  .progress-circle__track {
+    @apply size-5;
+  }
+}
+
+.progress-circle--md {
+  /* No styles as this is the default size */
+}
+
+.progress-circle--lg {
+  .progress-circle__track {
+    @apply size-9;
+  }
+}
+
+/* ==========================================================================
+   Color variants
+   ========================================================================== */
+
+.progress-circle--default {
+  --progress-circle-stroke: var(--color-default-foreground);
+}
+
+.progress-circle--accent {
+  --progress-circle-stroke: var(--color-accent);
+}
+
+.progress-circle--success {
+  --progress-circle-stroke: var(--color-success);
+}
+
+.progress-circle--warning {
+  --progress-circle-stroke: var(--color-warning);
+}
+
+.progress-circle--danger {
+  --progress-circle-stroke: var(--color-danger);
+}

package/src/components/radio/index.ts

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

package/src/components/radio/radio.styles.ts

@@ -0,0 +1,14 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const radioVariants = tv({
+  slots: {
+    base: 'radio',
+    content: 'radio__content',
+    control: 'radio__control',
+    indicator: 'radio__indicator',
+  },
+})
+
+export type RadioVariants = VariantProps<typeof radioVariants>

package/src/components/radio-group/index.ts

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

package/src/components/radio-group/radio-group.styles.ts

@@ -0,0 +1,18 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const radioGroupVariants = tv({
+  base: 'radio-group',
+  defaultVariants: {
+    variant: 'primary',
+  },
+  variants: {
+    variant: {
+      primary: 'radio-group--primary',
+      secondary: 'radio-group--secondary',
+    },
+  },
+})
+
+export type RadioGroupVariants = VariantProps<typeof radioGroupVariants>

package/src/components/radio-group.css

@@ -0,0 +1,47 @@
+/* Radio Group base styles */
+.radio-group {
+  @apply flex flex-col;
+
+  /* Default orientation */
+  &[data-orientation="vertical"] {
+    [data-slot="radio"] {
+      @apply mt-4;
+    }
+  }
+
+  &[data-orientation="horizontal"] {
+    @apply flex-row flex-wrap gap-4;
+  }
+}
+
+/* Variant property definitions */
+.radio-group--primary {
+  /* Default styles */
+}
+
+.radio-group--secondary .radio__control {
+  @apply shadow-none;
+  background-color: var(--radio-control-bg);
+
+  --radio-control-bg: var(--color-default);
+  --radio-control-bg-hover: var(--color-default-hover);
+
+  /* Hover state */
+  .radio:hover &,
+  .radio[data-hovered="true"] & {
+    @apply border-field-border-hover;
+  }
+
+  /* Default indicator color (unselected) */
+  .radio:not([aria-checked="true"]):not([data-selected="true"]) & .radio__indicator:empty::before {
+    background-color: var(--radio-control-bg);
+  }
+
+  /* Hover indicator color (unselected) */
+  .radio:hover:not([aria-checked="true"]):not([data-selected="true"]) &,
+  .radio[data-hovered="true"]:not([aria-checked="true"]):not([data-selected="true"]) & {
+    .radio__indicator:empty::before {
+      background-color: var(--radio-control-bg-hover);
+    }
+  }
+}

package/src/components/radio.css

@@ -0,0 +1,164 @@
+/* ==========================================================================
+   Base radio styles
+   ========================================================================== */
+
+.radio {
+  @apply relative flex items-start gap-3 outline-none no-highlight;
+
+  cursor: var(--cursor-interactive);
+
+  [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;
+  }
+}
+
+/* ==========================================================================
+   Radio control (the circular button)
+   ========================================================================== */
+
+.radio__control {
+  @apply relative mt-[3px] inline-flex size-4 shrink-0 items-center justify-center rounded-full border [border-width:var(--border-width-field)] 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),
+    border-color 200ms var(--ease-out),
+    transform 100ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  cursor: var(--cursor-interactive);
+
+  /* Interactive states */
+  /* Focus */
+  .radio:focus-visible &,
+  .radio[data-focus-visible="true"] & {
+    @apply status-focused;
+  }
+
+  /* Hover */
+  .radio:hover &,
+  .radio[data-hovered="true"] & {
+    @apply border-field-border-hover;
+  }
+
+  /* Hover - only when not selected */
+  .radio:hover:not([aria-checked="true"]):not([data-selected="true"]) &,
+  .radio[data-hovered="true"]:not([aria-checked="true"]):not([data-selected="true"]) & {
+    .radio__indicator:empty::before {
+      @apply bg-field-hover;
+    }
+  }
+
+  /* Pressed */
+  .radio:active &,
+  .radio[data-pressed="true"] & {
+    @apply scale-95;
+  }
+
+  /* Selection states */
+  /* Selected */
+  .radio[aria-checked="true"] &,
+  .radio[data-selected="true"] & {
+    @apply border-transparent bg-accent;
+  }
+
+  /* Selected + Pressed */
+  .radio:active[data-selected="true"] &,
+  .radio[data-pressed="true"][data-selected="true"] & {
+    @apply bg-accent-hover;
+  }
+
+  /* Validation states */
+  /* Invalid */
+  .radio[data-invalid="true"] &,
+  .radio[aria-invalid="true"] & {
+    @apply status-invalid-field;
+  }
+
+  /* Invalid + Selected */
+  .radio[data-invalid="true"][aria-checked="true"] &,
+  .radio[data-invalid="true"][data-selected="true"] &,
+  .radio[aria-invalid="true"][aria-checked="true"] &,
+  .radio[aria-invalid="true"][data-selected="true"] & {
+    @apply status-invalid-field;
+  }
+}
+
+/* ==========================================================================
+   Radio indicator (the inner dot)
+   ========================================================================== */
+
+.radio__indicator {
+  @apply absolute inset-0 flex items-center justify-center;
+
+  pointer-events: none;
+}
+
+/* :empty pseudo-class ensures these styles only apply when the indicator has no custom children
+   (e.g., custom icon). When custom content is present, these default dot styles are not applied. */
+.radio__indicator:empty::before {
+  content: "";
+  @apply rounded-full bg-field;
+
+  width: 100%;
+  height: 100%;
+  scale: 1;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    scale 200ms var(--ease-out),
+    background-color 200ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+}
+
+/* Selected state */
+.radio[aria-checked="true"] .radio__indicator:empty::before,
+.radio[data-selected="true"] .radio__indicator:empty::before {
+  @apply bg-accent-foreground;
+  scale: 0.4286; /* 6px */
+}
+
+/* Selected + Pressed state */
+.radio[data-selected="true"][data-pressed="true"] .radio__indicator:empty::before {
+  scale: 0.5714; /* 8px */
+}
+
+/* ==========================================================================
+   Radio content wrapper
+   ========================================================================== */
+
+.radio__content {
+  @apply flex flex-col gap-0;
+
+  cursor: inherit;
+}
+
+.radio__content [data-slot="label"],
+.radio__content [data-slot="description"] {
+  cursor: inherit;
+}
+
+/* ==========================================================================
+   Disabled modifier
+   ========================================================================== */
+
+.radio--disabled {
+  @apply status-disabled;
+}

package/src/components/range-calendar/index.ts

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

package/src/components/range-calendar/range-calendar.styles.ts

@@ -0,0 +1,36 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const rangeCalendarVariants = tv({
+  defaultVariants: {},
+  slots: {
+    /** Root range calendar container */
+    base: 'range-calendar',
+    /** Calendar cell (td) */
+    cell: 'range-calendar__cell',
+    /** Cell indicator (small dot at bottom of cell) */
+    cellIndicator: 'range-calendar__cell-indicator',
+    /** Calendar grid (table) */
+    grid: 'range-calendar__grid',
+    /** Grid body (tbody) */
+    gridBody: 'range-calendar__grid-body',
+    /** Grid header (thead) */
+    gridHeader: 'range-calendar__grid-header',
+    /** Grid row (tr) */
+    gridRow: 'range-calendar__grid-row',
+    /** Calendar header containing heading and navigation */
+    header: 'range-calendar__header',
+    /** Header cell (th - day names) */
+    headerCell: 'range-calendar__header-cell',
+    /** Month/year heading text */
+    heading: 'range-calendar__heading',
+    /** Previous/Next navigation button */
+    navButton: 'range-calendar__nav-button',
+    /** Navigation button icon */
+    navButtonIcon: 'range-calendar__nav-button-icon',
+  },
+  variants: {},
+})
+
+export type RangeCalendarVariants = VariantProps<typeof rangeCalendarVariants>