@rysinal/heroui-vue-styles 0.0.1

package/src/components/select.css

@@ -0,0 +1,223 @@
+/* Select styles */
+.select {
+  @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;
+  }
+}
+
+.select__trigger {
+  @apply relative isolate inline-flex min-h-9 rounded-field border bg-field px-3 py-2 text-sm text-field-foreground shadow-field outline-none select-none no-highlight;
+
+  /**
+   * 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;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  border-width: var(--border-width-field);
+  border-color: var(--color-field-border);
+
+  /* Add padding-right when indicator is present */
+  &:has(.select__indicator) {
+    @apply pr-7;
+  }
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-field-hover;
+      border-color: var(--color-field-border-hover);
+    }
+  }
+
+  /* Focus visible state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+    border-color: var(--color-field-border-focus);
+    background-color: var(--color-field-focus);
+  }
+
+  /* Focus state */
+  &:focus,
+  &[data-focus="true"] {
+  }
+
+  /* Invalid state */
+  .select[data-invalid="true"] &,
+  .select[aria-invalid="true"] & {
+    @apply status-invalid-field;
+    background-color: var(--color-field-focus);
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* Variant property definitions */
+.select--primary {
+  /* Default styles */
+}
+
+.select--secondary .select__trigger {
+  @apply shadow-none;
+  background-color: var(--select-trigger-bg);
+
+  --select-trigger-bg: var(--color-default);
+  --select-trigger-bg-hover: var(--color-default-hover);
+  --select-trigger-bg-focus: var(--color-default);
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      background-color: var(--select-trigger-bg-hover);
+    }
+  }
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    background-color: var(--select-trigger-bg-focus);
+  }
+
+  &:focus,
+  &[data-focus="true"] {
+  }
+}
+
+.select__value {
+  @apply flex-1 text-left text-base wrap-break-word text-current sm:text-sm;
+
+  &[data-placeholder="true"] {
+    @apply text-field-placeholder;
+  }
+
+  /* Removes the list-box-item indicator element from the select value*/
+  [data-slot="list-box-item-indicator"] {
+    @apply hidden;
+  }
+}
+
+.select__indicator {
+  @apply absolute inset-y-0 right-2 my-auto flex shrink-0 items-center justify-center text-field-placeholder transition duration-150;
+
+  &[data-open="true"] {
+    @apply rotate-180;
+  }
+
+  &[data-slot="select-default-indicator"] {
+    @apply size-4;
+  }
+}
+
+/* Similar to popover content styles */
+.select__popover {
+  @apply min-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 overflow-y-auto overscroll-contain rounded-3xl bg-overlay p-0 text-sm;
+  box-shadow: var(--shadow-overlay);
+
+  /* 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];
+  }
+
+  /* Arrow styling */
+  & [data-slot="popover-overlay-arrow"] {
+    fill: var(--overlay);
+  }
+
+  /* Arrow rotation based on placement */
+  &[data-placement="bottom"] [data-slot="popover-overlay-arrow"] {
+    rotate: 180deg;
+  }
+
+  &[data-placement="left"] [data-slot="popover-overlay-arrow"] {
+    rotate: -90deg;
+  }
+
+  &[data-placement="right"] [data-slot="popover-overlay-arrow"] {
+    rotate: 90deg;
+  }
+
+  /* Listbox styles */
+  [data-slot="list-box"] {
+    @apply p-1.5 outline-none;
+  }
+
+  [data-slot="list-box-item"] {
+    @apply px-2.5;
+  }
+
+  /* As the popover closes fast in single-select mode, the default item indicator transition is not even visible - so we disable it only for single-select */
+  [data-slot="list-box"]:not([aria-multiselectable="true"]) [data-slot="list-box-item-indicator"],
+  [data-slot="list-box"]:not([aria-multiselectable="true"])
+    [data-slot="list-box-item-indicator"]
+    [data-slot="list-box-item-indicator--checkmark"] {
+    @apply transition-none;
+  }
+}
+
+/* Full width modifier */
+.select--full-width {
+  @apply w-full;
+}
+
+.select__trigger--full-width {
+  @apply w-full;
+}

package/src/components/separator/index.ts

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

package/src/components/separator/separator.styles.ts

@@ -0,0 +1,23 @@
+import type { VariantProps } from 'tailwind-variants'
+import { tv } from 'tailwind-variants'
+
+export const separatorVariants = tv({
+  base: 'separator',
+  defaultVariants: {
+    orientation: 'horizontal',
+    variant: 'default',
+  },
+  variants: {
+    orientation: {
+      horizontal: 'separator--horizontal',
+      vertical: 'separator--vertical',
+    },
+    variant: {
+      default: 'separator--default',
+      secondary: 'separator--secondary',
+      tertiary: 'separator--tertiary',
+    },
+  },
+})
+
+export type SeparatorVariants = VariantProps<typeof separatorVariants>

package/src/components/separator.css

@@ -0,0 +1,59 @@
+/* Separator Component Styles */
+
+/* Base separator with default horizontal orientation */
+.separator {
+  @apply shrink-0 rounded-[4px] border-t-0 border-b-0 bg-separator;
+
+  /* Default size - horizontal orientation */
+  @apply h-px w-full;
+}
+
+/* Orientation variants */
+.separator--horizontal {
+  @apply h-px w-full;
+}
+
+.separator--vertical {
+  @apply h-auto min-h-2 w-px self-stretch;
+}
+
+/* Color variants */
+.separator--default {
+  @apply bg-separator;
+}
+
+.separator--secondary {
+  @apply bg-separator-secondary;
+}
+
+.separator--tertiary {
+  @apply bg-separator-tertiary;
+}
+
+.separator__container {
+  @apply flex items-center gap-3;
+}
+
+.separator__container--horizontal {
+  @apply w-full flex-row;
+}
+
+.separator__container--vertical {
+  @apply h-full flex-col justify-center;
+}
+
+.separator__line {
+  @apply shrink-0 grow;
+}
+
+.separator__content {
+  @apply inline-flex items-center justify-center text-center whitespace-nowrap text-muted;
+}
+
+.separator__content--horizontal {
+  @apply text-center;
+}
+
+.separator__content--vertical {
+  @apply text-center;
+}

package/src/components/skeleton/index.ts

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

package/src/components/skeleton/skeleton.styles.ts

@@ -0,0 +1,21 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const skeletonVariants = tv({
+  defaultVariants: {
+    animationType: 'shimmer',
+  },
+  slots: {
+    base: 'skeleton',
+  },
+  variants: {
+    animationType: {
+      none: 'skeleton--none',
+      pulse: 'skeleton--pulse',
+      shimmer: 'skeleton--shimmer',
+    },
+  },
+})
+
+export type SkeletonVariants = VariantProps<typeof skeletonVariants>

package/src/components/skeleton.css

@@ -0,0 +1,48 @@
+.skeleton {
+  @apply pointer-events-none relative overflow-hidden rounded-sm bg-surface-tertiary/70;
+}
+
+/* TODO: Skeleton with parent are not visible */
+
+/* Animation types */
+.skeleton--shimmer {
+  &::after {
+    @apply absolute inset-0 -translate-x-full animate-skeleton bg-linear-to-r from-transparent via-surface-tertiary to-transparent content-[''];
+  }
+
+  /* When applied to a parent container with multiple skeletons */
+  &:has(.skeleton) {
+    &::after {
+      content: none;
+    }
+
+    /* Single synchronized shimmer that passes over all children */
+    &::before {
+      @apply absolute inset-0 -translate-x-full animate-skeleton content-[''];
+      background: linear-gradient(
+        90deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.5) 50%,
+        transparent 100%
+      );
+      z-index: 10;
+      pointer-events: none;
+      /* Use mix-blend-mode to only show over skeleton elements */
+      mix-blend-mode: overlay;
+    }
+
+    /* Ensure children don't have their own shimmer */
+    & .skeleton {
+      &::after {
+        content: none;
+      }
+    }
+  }
+}
+
+.skeleton--pulse {
+  @apply animate-pulse;
+}
+
+.skeleton--none {
+}

package/src/components/slider/index.ts

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

package/src/components/slider/slider.styles.ts

@@ -0,0 +1,16 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const sliderVariants = tv({
+  slots: {
+    base: 'slider',
+    fill: 'slider__fill',
+    marks: 'slider__marks',
+    output: 'slider__output',
+    thumb: 'slider__thumb',
+    track: 'slider__track',
+  },
+})
+
+export type SliderVariants = VariantProps<typeof sliderVariants>

package/src/components/slider.css

@@ -0,0 +1,179 @@
+/* Slider styles */
+
+.slider {
+  @apply grid w-full gap-1;
+
+  grid-template-areas:
+    "label output"
+    "track track";
+  grid-template-columns: 1fr auto;
+
+  [data-slot="label"] {
+    @apply w-fit text-sm font-medium;
+
+    grid-area: label;
+  }
+
+  .slider__output {
+    @apply text-sm font-medium tabular-nums;
+
+    grid-area: output;
+  }
+
+  .slider__track {
+    @apply relative rounded-full bg-default;
+
+    grid-area: track;
+  }
+
+  .slider__fill {
+    @apply pointer-events-none absolute bg-accent;
+  }
+
+  .slider__thumb {
+    /* Flex container for centering pseudo-elements */
+    @apply absolute flex cursor-grab items-center justify-center rounded-full bg-accent no-highlight;
+
+    /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+    transition:
+      background-color 250ms var(--ease-smooth),
+      transform 250ms var(--ease-out),
+      box-shadow 150ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+
+    /* after: Visible thumb element */
+    &::after {
+      @apply relative z-10 rounded-full bg-accent-foreground text-black shadow-field;
+      content: "";
+
+      /**
+       * Transitions
+       */
+      @apply origin-center transition-all motion-reduce:transition-none;
+    }
+
+    /* Dragging state - cursor changes and thumb scales down */
+    &[data-dragging="true"] {
+      @apply cursor-grabbing;
+
+      &::after {
+        @apply scale-[0.9] motion-reduce:scale-100;
+      }
+    }
+
+    /* Focus state - increase z-index */
+    &[data-focus-visible="true"] {
+      @apply z-10 status-focused;
+    }
+
+    /* Disabled state */
+    &[data-disabled="true"] {
+      @apply cursor-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;
+
+    .slider__track {
+      @apply h-5 w-full;
+      /* Add transparent borders to provide space for thumb at edges */
+      /* Thumb width is 1.5rem (24px), so half is 0.75rem (12px) */
+      @apply border-x-[0.75rem] border-x-transparent;
+
+      &[data-fill-start="true"] {
+        @apply border-s-accent;
+      }
+
+      &[data-fill-end="true"] {
+        @apply border-e-accent;
+      }
+    }
+
+    .slider__fill,
+    .slider__thumb {
+      @apply h-full;
+    }
+
+    .slider__thumb {
+      @apply top-1/2;
+
+      /* Thumb width + border width */
+      width: calc(1.5rem + 0.25rem);
+
+      &::after {
+        width: 1.5rem;
+        height: 1rem;
+      }
+    }
+  }
+
+  /* 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;
+
+    .slider__output {
+      text-align: center;
+    }
+
+    [data-slot="label"] {
+      text-align: center;
+    }
+
+    .slider__track {
+      @apply h-full w-5;
+      /* Add transparent borders to provide space for thumb at edges */
+      /* Thumb height is 1.5rem (24px), so half is 0.75rem (12px) */
+      @apply border-y-[0.75rem] border-y-transparent;
+      justify-self: center;
+
+      &[data-fill-start="true"] {
+        @apply border-b-accent;
+      }
+
+      &[data-fill-end="true"] {
+        @apply border-t-accent;
+      }
+    }
+
+    .slider__fill,
+    .slider__thumb {
+      @apply w-full;
+    }
+
+    .slider__thumb {
+      @apply left-1/2;
+
+      /* Thumb height + border height */
+      height: calc(1.5rem + 0.25rem);
+
+      &::after {
+        width: 1rem;
+        height: 1.5rem;
+      }
+    }
+  }
+}

package/src/components/spinner/index.ts

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

package/src/components/spinner/spinner.styles.ts

@@ -0,0 +1,27 @@
+import type { VariantProps } from 'tailwind-variants'
+import { tv } from 'tailwind-variants'
+
+export const spinnerVariants = tv({
+  base: 'spinner',
+  defaultVariants: {
+    color: 'accent',
+    size: 'md',
+  },
+  variants: {
+    color: {
+      accent: 'spinner--accent',
+      current: 'spinner--current',
+      danger: 'spinner--danger',
+      success: 'spinner--success',
+      warning: 'spinner--warning',
+    },
+    size: {
+      lg: 'spinner--lg',
+      md: 'spinner--md',
+      sm: 'spinner--sm',
+      xl: 'spinner--xl',
+    },
+  },
+})
+
+export type SpinnerVariants = VariantProps<typeof spinnerVariants>

package/src/components/spinner.css

@@ -0,0 +1,42 @@
+/* Base spinner styles */
+.spinner {
+  @apply pointer-events-none relative size-6 origin-center animate-spin-fast;
+}
+
+/* Size variants */
+.spinner--sm {
+  @apply size-4;
+}
+
+.spinner--md {
+  /* No styles as this is the default size */
+}
+
+.spinner--lg {
+  @apply size-8;
+}
+
+.spinner--xl {
+  @apply size-10;
+}
+
+/* Color variants */
+.spinner--current {
+  color: inherit;
+}
+
+.spinner--accent {
+  color: var(--accent);
+}
+
+.spinner--danger {
+  color: var(--danger);
+}
+
+.spinner--success {
+  color: var(--success);
+}
+
+.spinner--warning {
+  color: var(--warning);
+}

package/src/components/surface/index.ts

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

package/src/components/surface/surface.styles.ts

@@ -0,0 +1,20 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const surfaceVariants = tv({
+  base: 'surface',
+  defaultVariants: {
+    variant: 'default',
+  },
+  variants: {
+    variant: {
+      default: 'surface--default',
+      secondary: 'surface--secondary',
+      tertiary: 'surface--tertiary',
+      transparent: 'surface--transparent',
+    },
+  },
+})
+
+export type SurfaceVariants = VariantProps<typeof surfaceVariants>

package/src/components/surface.css

@@ -0,0 +1,23 @@
+/* Surface component styles */
+
+/* Block */
+.surface {
+  @apply relative text-foreground;
+}
+
+/* Modifier - variant */
+.surface--transparent {
+  @apply bg-transparent;
+}
+
+.surface--default {
+  @apply bg-surface text-surface-foreground;
+}
+
+.surface--secondary {
+  @apply bg-surface-secondary text-surface-secondary-foreground;
+}
+
+.surface--tertiary {
+  @apply bg-surface-tertiary text-surface-tertiary-foreground;
+}

package/src/components/switch/index.ts

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