@rysinal/heroui-vue-styles 0.0.1

package/src/components/index.css

@@ -0,0 +1,159 @@
+/* ------------------------------------------------------------------------------------------------
+ * Component Styles
+ * ------------------------------------------------------------------------------------------------
+ * CRITICAL: Import order matters for CSS specificity and style overrides.
+ *
+ * General Rule: Shared/primitive components MUST be imported FIRST, before components that use them.
+ * This ensures that parent component styles can properly override shared component defaults.
+ *
+ * Organization: Components are grouped by their Storybook categories (Components/Category/Name)
+ * to maintain consistency between documentation and implementation.
+ * ------------------------------------------------------------------------------------------------ */
+
+/* ------------------------------------------------------------------------------------------------
+ * Shared Components - MUST Import FIRST
+ * ------------------------------------------------------------------------------------------------
+ * These are used by multiple components and must be imported early to allow proper overrides.
+ * ------------------------------------------------------------------------------------------------ */
+@import "./close-button.css";
+@import "./description.css";
+@import "./error-message.css";
+@import "./field-error.css";
+@import "./label.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Navigation
+ * ------------------------------------------------------------------------------------------------ */
+@import "./accordion.css";
+@import "./breadcrumbs.css";
+@import "./disclosure-group.css";
+@import "./disclosure.css";
+@import "./link.css";
+@import "./pagination.css";
+@import "./tabs.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Buttons
+ * ------------------------------------------------------------------------------------------------ */
+@import "./button.css";
+@import "./button-group.css";
+@import "./toggle-button.css";
+@import "./toggle-button-group.css";
+@import "./toolbar.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Collections
+ * ------------------------------------------------------------------------------------------------ */
+@import "./dropdown.css";
+@import "./list-box-item.css";
+@import "./list-box-section.css";
+@import "./list-box.css";
+@import "./menu-item.css";
+@import "./menu-section.css";
+@import "./menu.css";
+@import "./tag-group.css";
+@import "./tag.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Colors
+ * ------------------------------------------------------------------------------------------------ */
+@import "./color-area.css";
+@import "./color-picker.css";
+@import "./color-slider.css";
+@import "./color-swatch.css";
+@import "./color-swatch-picker.css";
+@import "./color-input-group.css";
+@import "./color-field.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Controls
+ * ------------------------------------------------------------------------------------------------ */
+@import "./slider.css";
+@import "./switch.css";
+@import "./switch-group.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * DataDisplay
+ * ------------------------------------------------------------------------------------------------ */
+@import "./badge.css";
+@import "./chip.css";
+@import "./table.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Feedback
+ * ------------------------------------------------------------------------------------------------ */
+@import "./alert.css";
+@import "./empty-state.css";
+@import "./skeleton.css";
+@import "./meter.css";
+@import "./progress-bar.css";
+@import "./progress-circle.css";
+@import "./spinner.css";
+@import "./toast.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Forms
+ * ------------------------------------------------------------------------------------------------ */
+@import "./checkbox-group.css";
+@import "./checkbox.css";
+@import "./fieldset.css";
+@import "./input-otp.css";
+@import "./input.css";
+@import "./input-group.css";
+@import "./number-field.css";
+@import "./radio-group.css";
+@import "./radio.css";
+@import "./textfield.css";
+@import "./search-field.css";
+@import "./textarea.css";
+
+/* ------------------------------------------------------------------------------------------------
+* Date & Time
+* ------------------------------------------------------------------------------------------------ */
+@import "./calendar.css";
+@import "./range-calendar.css";
+@import "./calendar-year-picker.css";
+@import "./date-field.css";
+@import "./time-field.css";
+@import "./date-input-group.css";
+@import "./date-picker.css";
+@import "./date-range-picker.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Layout
+ * ------------------------------------------------------------------------------------------------ */
+@import "./card.css";
+@import "./header.css";
+@import "./separator.css";
+@import "./surface.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Media
+ * ------------------------------------------------------------------------------------------------ */
+@import "./avatar.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Overlays
+ * ------------------------------------------------------------------------------------------------ */
+@import "./alert-dialog.css";
+@import "./drawer.css";
+@import "./modal.css";
+@import "./popover.css";
+@import "./tooltip.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Pickers
+ * ------------------------------------------------------------------------------------------------ */
+@import "./combo-box.css";
+@import "./select.css";
+@import "./autocomplete.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Typography
+ * ------------------------------------------------------------------------------------------------ */
+@import "./kbd.css";
+
+/* ------------------------------------------------------------------------------------------------
+ * Utilities
+ * ------------------------------------------------------------------------------------------------ */
+@import "./scroll-shadow.css";

package/src/components/index.ts

@@ -0,0 +1,83 @@
+export * from './accordion/index.js'
+export * from './alert/index.js'
+export * from './alert-dialog/index.js'
+export * from './autocomplete/index.js'
+export * from './avatar/index.js'
+export * from './badge/index.js'
+export * from './breadcrumbs/index.js'
+export * from './button/index.js'
+export * from './button-group/index.js'
+export * from './calendar/index.js'
+export * from './calendar-year-picker/index.js'
+export * from './card/index.js'
+export * from './checkbox/index.js'
+export * from './checkbox-group/index.js'
+export * from './chip/index.js'
+export * from './close-button/index.js'
+export * from './color-area/index.js'
+export * from './color-field/index.js'
+export * from './color-input-group/index.js'
+export * from './color-picker/index.js'
+export * from './color-slider/index.js'
+export * from './color-swatch/index.js'
+export * from './color-swatch-picker/index.js'
+export * from './combo-box/index.js'
+export * from './date-field/index.js'
+export * from './date-input-group/index.js'
+export * from './date-picker/index.js'
+export * from './date-range-picker/index.js'
+export * from './description/index.js'
+export * from './disclosure/index.js'
+export * from './disclosure-group/index.js'
+export * from './drawer/index.js'
+export * from './dropdown/index.js'
+export * from './empty-state/index.js'
+export * from './error-message/index.js'
+export * from './field-error/index.js'
+export * from './fieldset/index.js'
+export * from './header/index.js'
+export * from './input/index.js'
+export * from './input-group/index.js'
+export * from './input-otp/index.js'
+export * from './kbd/index.js'
+export * from './label/index.js'
+export * from './link/index.js'
+export * from './list-box/index.js'
+export * from './list-box-item/index.js'
+export * from './list-box-section/index.js'
+export * from './menu/index.js'
+export * from './menu-item/index.js'
+export * from './menu-section/index.js'
+export * from './meter/index.js'
+export * from './modal/index.js'
+export * from './number-field/index.js'
+export * from './pagination/index.js'
+export * from './popover/index.js'
+export * from './progress-bar/index.js'
+export * from './progress-circle/index.js'
+export * from './radio/index.js'
+export * from './radio-group/index.js'
+export * from './range-calendar/index.js'
+export * from './scroll-shadow/index.js'
+export * from './search-field/index.js'
+export * from './select/index.js'
+export * from './separator/index.js'
+export * from './skeleton/index.js'
+export * from './slider/index.js'
+export * from './spinner/index.js'
+export * from './surface/index.js'
+export * from './switch/index.js'
+export * from './switch-group/index.js'
+export * from './table/index.js'
+export * from './tabs/index.js'
+export * from './tag/index.js'
+export * from './tag-group/index.js'
+export * from './text/index.js'
+export * from './textarea/index.js'
+export * from './textfield/index.js'
+export * from './time-field/index.js'
+export * from './toast/index.js'
+export * from './toggle-button/index.js'
+export * from './toggle-button-group/index.js'
+export * from './toolbar/index.js'
+export * from './tooltip/index.js'

package/src/components/input/index.ts

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

package/src/components/input/input.styles.ts

@@ -0,0 +1,23 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const inputVariants = tv({
+  base: 'input',
+  defaultVariants: {
+    fullWidth: false,
+    variant: 'primary',
+  },
+  variants: {
+    fullWidth: {
+      false: '',
+      true: 'input--full-width',
+    },
+    variant: {
+      primary: 'input--primary',
+      secondary: 'input--secondary',
+    },
+  },
+})
+
+export type InputVariants = VariantProps<typeof inputVariants>

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

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

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

@@ -0,0 +1,34 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const inputGroupVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    variant: 'primary',
+  },
+  slots: {
+    base: 'input-group',
+    input: 'input-group__input',
+    prefix: 'input-group__prefix',
+    suffix: 'input-group__suffix',
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: 'input-group--full-width',
+      },
+    },
+    variant: {
+      primary: {
+        base: 'input-group--primary',
+      },
+      secondary: {
+        base: 'input-group--secondary',
+      },
+    },
+  },
+})
+
+export type InputGroupVariants = VariantProps<typeof inputGroupVariants>

package/src/components/input-group.css

@@ -0,0 +1,173 @@
+/* Input group styles */
+.input-group {
+  @apply inline-flex min-h-9 items-center 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);
+
+  /* When textarea is present, align items to start and allow height to grow */
+  &:has([data-slot="input-group-textarea"]) {
+    @apply items-start;
+    height: auto;
+  }
+
+  /**
+   * 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 - only when input/textarea is focused */
+  &:has([data-slot="input-group-input"]:focus),
+  &:has([data-slot="input-group-textarea"]:focus) {
+    @apply status-focused-field;
+    border-color: var(--color-field-border-focus);
+    background-color: var(--color-field-focus);
+  }
+
+  /* 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;
+  }
+}
+
+.input-group__input {
+  @apply flex-1 rounded-none border-0 bg-transparent px-3 py-2 text-base shadow-none outline-none placeholder:text-field-placeholder sm:text-sm;
+
+  /* Remove border radius on left side when prefix is present */
+  .input-group:has([data-slot="input-group-prefix"]) & {
+    @apply rounded-l-none pl-0;
+  }
+
+  /* Remove border radius on right side when suffix is present */
+  .input-group:has([data-slot="input-group-suffix"]) & {
+    @apply rounded-r-none pr-0;
+  }
+
+  /* Focus state - handled by group */
+  &:focus,
+  &:focus-visible {
+    @apply outline-none;
+  }
+}
+
+/* TextArea within InputGroup - uses same base class as input but with textarea-specific styles */
+.input-group__input[data-slot="input-group-textarea"] {
+  min-height: 38px;
+  resize: vertical;
+}
+
+.input-group__prefix {
+  @apply flex h-full items-center justify-center rounded-l-field rounded-r-none bg-transparent px-3 text-field-placeholder;
+  border-width: var(--border-width-field);
+  border-color: var(--color-field-border);
+  border-style: solid;
+  border-right-color: var(--color-field-border);
+  border-left: none;
+  border-top: none;
+  border-bottom: none;
+
+  /* Align to top when textarea is present */
+  .input-group:has([data-slot="input-group-textarea"]) & {
+    @apply items-start;
+    padding-top: 0.5rem;
+  }
+
+  /**
+   * 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);
+  @apply motion-reduce:transition-none;
+}
+
+.input-group__suffix {
+  @apply flex h-full items-center justify-center rounded-l-none rounded-r-field bg-transparent px-3 text-field-placeholder;
+  border-width: var(--border-width-field);
+  border-color: var(--color-field-border);
+  border-style: solid;
+  border-left-color: var(--color-field-border);
+  border-right: none;
+  border-top: none;
+  border-bottom: none;
+
+  /* Align to top when textarea is present */
+  .input-group:has([data-slot="input-group-textarea"]) & {
+    @apply items-start;
+    padding-top: 0.5rem;
+  }
+
+  /**
+   * 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);
+  @apply motion-reduce:transition-none;
+}
+
+/* Variant property definitions */
+.input-group--primary {
+  /* Default styles */
+}
+
+.input-group--secondary {
+  @apply shadow-none;
+  background-color: var(--input-group-bg);
+
+  --input-group-bg: var(--color-default);
+  --input-group-bg-hover: var(--color-default-hover);
+  --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(--input-group-bg-hover);
+    }
+  }
+
+  &:has([data-slot="input-group-input"]:focus),
+  &:has([data-slot="input-group-textarea"]:focus) {
+    background-color: var(--input-group-bg-focus);
+  }
+
+  /* Invalid state */
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    border-color: var(--color-field-border-invalid);
+    background-color: var(--input-group-bg-focus);
+  }
+
+  [data-slot="input-group-input"],
+  [data-slot="input-group-textarea"] {
+    @apply bg-transparent;
+  }
+}
+
+/* Full width modifier */
+.input-group--full-width {
+  @apply w-full;
+}

package/src/components/input-otp/index.ts

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

package/src/components/input-otp/input-otp.styles.ts

@@ -0,0 +1,30 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const inputOTPVariants = tv({
+  defaultVariants: {
+    variant: 'primary',
+  },
+  slots: {
+    base: 'input-otp',
+    caret: 'input-otp__caret',
+    group: 'input-otp__group',
+    input: 'input-otp__input',
+    separator: 'input-otp__separator',
+    slot: 'input-otp__slot',
+    slotValue: 'input-otp__slot-value',
+  },
+  variants: {
+    variant: {
+      primary: {
+        base: 'input-otp--primary',
+      },
+      secondary: {
+        base: 'input-otp--secondary',
+      },
+    },
+  },
+})
+
+export type InputOTPVariants = VariantProps<typeof inputOTPVariants>

package/src/components/input-otp.css

@@ -0,0 +1,132 @@
+/* Base container */
+.input-otp {
+  @apply relative flex items-center gap-2;
+
+  cursor: text;
+
+  &[data-disabled="true"] {
+    @apply cursor-not-allowed opacity-50;
+  }
+}
+
+.input-otp__native {
+  @apply pointer-events-none absolute h-px w-px opacity-0;
+}
+
+/* Group - slots separated with gap */
+.input-otp__group {
+  @apply flex items-center gap-2;
+}
+
+/* Individual slot box - fully rounded, standalone */
+.input-otp__slot {
+  @apply relative flex h-10 w-9.5 flex-1 items-center justify-center;
+  @apply border bg-field text-field-foreground shadow-field;
+  @apply rounded-field text-sm font-semibold outline-none;
+  cursor: text;
+
+  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 */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-field-hover;
+      border-color: var(--color-field-border-hover);
+    }
+  }
+
+  /* Active/Focus */
+  &[data-active="true"] {
+    @apply z-10 bg-field-focus status-focused-field;
+  }
+
+  /* Filled */
+  &[data-filled="true"] {
+    @apply bg-field-focus;
+  }
+
+  /* Disabled */
+  &[data-disabled="true"] {
+    @apply status-disabled;
+    cursor: not-allowed;
+  }
+
+  /* Invalid */
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    background-color: var(--color-field-focus);
+  }
+}
+
+/* Slot value */
+.input-otp__slot-value {
+  @apply text-lg leading-6 tracking-[-0.27px];
+
+  /**
+   * Animations
+   * CRITICAL: motion-reduce must be AFTER animation for correct override specificity
+   */
+  animation: slot-value-in 250ms var(--ease-smooth) both;
+  transform-origin: bottom center;
+  @apply motion-reduce:animate-none;
+}
+
+/* Caret */
+.input-otp__caret {
+  @apply absolute h-4 w-[2px] animate-caret-blink rounded-[4px] bg-field-placeholder;
+}
+
+/* Separator */
+.input-otp__separator {
+  @apply h-[2px] w-[6px] shrink-0 rounded-[4px] bg-separator;
+}
+
+/* Variant property definitions */
+.input-otp--primary {
+  /* Default styles */
+}
+
+.input-otp--secondary .input-otp__slot {
+  @apply shadow-none;
+  background-color: var(--input-otp-slot-bg);
+
+  --input-otp-slot-bg: var(--color-default);
+  --input-otp-slot-bg-hover: var(--color-default-hover);
+  --input-otp-slot-bg-focus: var(--color-default);
+
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      background-color: var(--input-otp-slot-bg-hover);
+    }
+  }
+
+  &[data-active="true"],
+  &[data-filled="true"] {
+    background-color: var(--input-otp-slot-bg-focus);
+  }
+}
+
+/* Animations */
+@keyframes slot-value-in {
+  0% {
+    opacity: 0;
+    transform: translateY(8px) scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}