@rysinal/heroui-vue-styles 0.0.1

package/src/components/input.css

@@ -0,0 +1,91 @@
+.input {
+  @apply rounded-field border bg-field px-3 py-2 text-base text-field-foreground shadow-field outline-none placeholder:text-field-placeholder sm:text-sm;
+
+  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;
+
+  @media (hover: hover) {
+    &:hover:not(:focus):not(:focus-visible),
+    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
+      @apply bg-field-hover;
+      border-color: var(--color-field-border-hover);
+    }
+  }
+
+  /* Focus state */
+  &:focus,
+  &[data-focused="true"] {
+    @apply status-focused-field;
+    border-color: var(--color-field-border-focus);
+    background-color: var(--color-field-focus);
+  }
+
+  /* Focus visible state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+  }
+
+  /* Invalid state */
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    background-color: var(--color-field-focus);
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* Variant property definitions */
+.input--primary {
+  /* Default styles */
+}
+
+.input--secondary {
+  @apply shadow-none;
+  background-color: var(--input-bg);
+
+  --input-bg: var(--color-default);
+  --input-bg-hover: var(--color-default-hover);
+  --input-bg-focus: var(--color-default);
+
+  @media (hover: hover) {
+    &:hover:not(:focus):not(:focus-visible),
+    &[data-hovered="true"]:not([data-focus-visible="true"]):not([data-focused="true"]) {
+      background-color: var(--input-bg-hover);
+    }
+  }
+
+  &:focus,
+  &[data-focused="true"] {
+    background-color: var(--input-bg-focus);
+  }
+
+  /* Focus visible state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+  }
+
+  /* Invalid state */
+  &[data-invalid="true"] {
+    @apply status-invalid-field;
+    background-color: var(--input-bg-focus);
+  }
+}
+
+/* Full width modifier */
+.input--full-width {
+  @apply w-full;
+}

package/src/components/kbd/index.ts

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

package/src/components/kbd/kbd.styles.ts

@@ -0,0 +1,19 @@
+import type { VariantProps } from 'tailwind-variants'
+import { tv } from 'tailwind-variants'
+
+export const kbdVariants = tv({
+  defaultVariants: {},
+  slots: {
+    abbr: 'kbd__abbr',
+    base: 'kbd',
+    content: 'kbd__content',
+  },
+  variants: {
+    variant: {
+      default: 'kbd--default',
+      light: 'kbd--light',
+    },
+  },
+})
+
+export type KbdVariants = VariantProps<typeof kbdVariants>

package/src/components/kbd.css

@@ -0,0 +1,27 @@
+/* Base styles */
+.kbd {
+  @apply inline-flex h-6 items-center space-x-0.5 rounded-lg bg-default px-2 text-center font-sans text-sm font-medium whitespace-nowrap text-muted rtl:space-x-reverse;
+  word-spacing: -0.25rem;
+}
+
+/* Key abbreviation styles */
+.kbd__abbr {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  text-decoration: none;
+}
+
+/* Content wrapper */
+.kbd__content {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* Variant styles */
+.kbd--light {
+  @apply bg-transparent;
+}

package/src/components/label/index.ts

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

package/src/components/label/label.styles.ts

@@ -0,0 +1,24 @@
+import type { VariantProps } from 'tailwind-variants'
+import { tv } from 'tailwind-variants'
+
+export const labelVariants = tv({
+  base: 'label',
+  defaultVariants: {
+    isDisabled: false,
+    isInvalid: false,
+    isRequired: false,
+  },
+  variants: {
+    isDisabled: {
+      true: 'label--disabled',
+    },
+    isInvalid: {
+      true: 'label--invalid',
+    },
+    isRequired: {
+      true: 'label--required',
+    },
+  },
+})
+
+export type LabelVariants = VariantProps<typeof labelVariants>

package/src/components/label.css

@@ -0,0 +1,26 @@
+/* Base label styles */
+.label {
+  /* Base styling */
+  @apply text-sm font-medium text-foreground;
+}
+
+.label--required,
+[data-required="true"][role="group"] > .label,
+[data-required="true"][role="radiogroup"] > .label,
+[data-required="true"]:not([role="group"]):not([role="radiogroup"]):not([data-slot="radio"]):not(
+    [data-slot="checkbox"]
+  )
+  > .label {
+  @apply after:ml-0.5 after:text-danger after:content-['*'];
+}
+
+.label--disabled,
+[data-disabled="true"] .label {
+  @apply status-disabled;
+}
+
+.label--invalid,
+[data-invalid="true"] .label,
+[aria-invalid="true"] .label {
+  @apply text-danger;
+}

package/src/components/link/index.ts

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

package/src/components/link/link.styles.ts

@@ -0,0 +1,20 @@
+import type { VariantProps } from 'tailwind-variants'
+import { tv } from 'tailwind-variants'
+
+export const linkVariants = tv({
+  slots: {
+    base: 'link',
+    icon: 'link__icon',
+  },
+})
+
+// Render props that should be excluded from LinkVariants (framework-specific)
+type LinkRenderPropsKeys =
+  | 'isCurrent'
+  | 'isHovered'
+  | 'isPressed'
+  | 'isFocused'
+  | 'isFocusVisible'
+  | 'isDisabled'
+
+export type LinkVariants = Omit<VariantProps<typeof linkVariants>, LinkRenderPropsKeys>

package/src/components/link.css

@@ -0,0 +1,72 @@
+/* Base link styles */
+.link {
+  @apply relative inline-flex h-fit w-fit items-center rounded-xl text-sm font-medium text-link underline decoration-separator-tertiary decoration-[1.5px] underline-offset-4 no-highlight;
+
+  color: var(--color-link);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 100ms var(--ease-smooth),
+    text-decoration-color 100ms var(--ease-out),
+    background-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out),
+    opacity 100ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply decoration-muted;
+
+      .link__icon {
+        @apply opacity-100;
+      }
+    }
+  }
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+
+    .link__icon {
+      @apply opacity-100;
+    }
+  }
+
+  /* Disabled state */
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  .link__icon {
+    @apply pointer-events-none inline-flex size-2 shrink-0 items-center justify-center text-current opacity-60;
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition: opacity 150ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+
+    & svg {
+      @apply transform-gpu;
+    }
+  }
+
+  .link__icon[data-default-icon="true"] {
+    @apply ml-1 pb-1.5;
+  }
+
+  /* Handle Link with Button Variants */
+  &.button {
+    @apply gap-0 no-underline;
+  }
+}

package/src/components/list-box/index.ts

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

package/src/components/list-box/list-box.styles.ts

@@ -0,0 +1,18 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const listboxVariants = tv({
+  base: 'list-box',
+  defaultVariants: {
+    variant: 'default',
+  },
+  variants: {
+    variant: {
+      danger: 'list-box--danger',
+      default: 'list-box--default',
+    },
+  },
+})
+
+export type ListBoxVariants = VariantProps<typeof listboxVariants>

package/src/components/list-box-item/index.ts

@@ -0,0 +1 @@
+export * from './list-box-item.styles.js'

package/src/components/list-box-item/list-box-item.styles.ts

@@ -0,0 +1,25 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const listboxItemVariants = tv({
+  defaultVariants: {
+    variant: 'default',
+  },
+  slots: {
+    indicator: 'list-box-item__indicator',
+    item: 'list-box-item',
+  },
+  variants: {
+    variant: {
+      danger: {
+        item: 'list-box-item--danger',
+      },
+      default: {
+        item: 'list-box-item--default',
+      },
+    },
+  },
+})
+
+export type ListBoxItemVariants = VariantProps<typeof listboxItemVariants>

package/src/components/list-box-item.css

@@ -0,0 +1,106 @@
+/* ==========================================================================
+   Base list-box item styles
+   ========================================================================== */
+
+.list-box-item {
+  @apply relative flex min-h-9 w-full items-center justify-start gap-3 rounded-2xl px-2 py-1.5 outline-none no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 250ms var(--ease-out-quart),
+    box-shadow 150ms var(--ease-out);
+
+  @apply motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  [data-slot="label"] {
+    @apply pointer-events-none w-fit select-none;
+  }
+
+  [data-slot="description"] {
+    @apply pointer-events-none text-wrap select-none;
+  }
+
+  /* Add padding-right when indicator is present */
+  &:has(.list-box-item__indicator) {
+    @apply pr-7;
+  }
+
+  /* Focus visible state (keyboard focus only) */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Focus state */
+  &:focus,
+  &[data-focus="true"] {
+  }
+
+  /* Pressed state */
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.98);
+  }
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default;
+    }
+  }
+
+  /* Selected state */
+  &[aria-selected="true"],
+  &[data-selected="true"] {
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* ==========================================================================
+   List-box item indicator
+   ========================================================================== */
+
+.list-box-item__indicator {
+  @apply absolute top-1/2 right-2 flex size-4 shrink-0 -translate-y-1/2 items-center justify-center text-default-foreground;
+
+  /**
+   * Transitions
+   */
+  @apply transition duration-250 motion-reduce:transition-none;
+
+  /* Checkmark SVG indicator */
+  [data-slot="list-box-item-indicator--checkmark"] {
+    @apply size-4;
+
+    path {
+      transition: stroke-dashoffset 180ms linear;
+      @apply motion-reduce:transition-none;
+    }
+  }
+}
+
+/* Default variant */
+.list-box-item--default {
+}
+
+/* Danger variant */
+.list-box-item--danger {
+  .list-box-item__indicator {
+    @apply text-danger;
+  }
+
+  [data-slot="label"] {
+    @apply text-danger;
+  }
+}

package/src/components/list-box-section/index.ts

@@ -0,0 +1 @@
+export * from './list-box-section.styles.js'

package/src/components/list-box-section/list-box-section.styles.ts

@@ -0,0 +1,9 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const listboxSectionVariants = tv({
+  base: 'list-box-section',
+})
+
+export type ListBoxSectionVariants = VariantProps<typeof listboxSectionVariants>

package/src/components/list-box-section.css

@@ -0,0 +1,7 @@
+/* ==========================================================================
+   Base list-box section styles
+   ========================================================================== */
+
+.list-box-section {
+  @apply flex flex-col items-start gap-0;
+}

package/src/components/list-box.css

@@ -0,0 +1,12 @@
+/* ==========================================================================
+   Base list-box styles
+   ========================================================================== */
+
+.list-box {
+  @apply relative flex w-full flex-col gap-1 overflow-clip p-1;
+
+  /* This makes the horizontal separator take up 94% of the width and be centered */
+  [data-slot="separator"][data-orientation="horizontal"] {
+    @apply ml-[3%] w-[94%];
+  }
+}

package/src/components/menu/index.ts

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

package/src/components/menu/menu.styles.ts

@@ -0,0 +1,9 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const menuVariants = tv({
+  base: 'menu',
+})
+
+export type MenuVariants = VariantProps<typeof menuVariants>

package/src/components/menu-item/index.ts

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

package/src/components/menu-item/menu-item.styles.ts

@@ -0,0 +1,26 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const menuItemVariants = tv({
+  defaultVariants: {
+    variant: 'default',
+  },
+  slots: {
+    indicator: 'menu-item__indicator',
+    item: 'menu-item',
+    submenuIndicator: 'menu-item__indicator menu-item__indicator--submenu',
+  },
+  variants: {
+    variant: {
+      danger: {
+        item: 'menu-item--danger',
+      },
+      default: {
+        item: 'menu-item--default',
+      },
+    },
+  },
+})
+
+export type MenuItemVariants = VariantProps<typeof menuItemVariants>

package/src/components/menu-item.css

@@ -0,0 +1,163 @@
+/* ==========================================================================
+   Base menu item styles
+   ========================================================================== */
+
+.menu-item {
+  @apply relative flex min-h-9 w-full items-center justify-start gap-3 rounded-2xl px-2 py-1.5 outline-none no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 250ms var(--ease-out-quart),
+    box-shadow 150ms var(--ease-out);
+
+  @apply motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  [data-slot="label"] {
+    @apply pointer-events-none w-fit select-none;
+  }
+
+  [data-slot="description"] {
+    @apply pointer-events-none text-wrap select-none;
+  }
+
+  [data-slot="submenu-indicator"] svg {
+    @apply size-3.5;
+  }
+
+  /* Add padding-left when indicator is present */
+  &:has(.menu-item__indicator) {
+    @apply pl-7;
+  }
+
+  /* Add padding-right when indicator is present and has submenu */
+  &[data-has-submenu="true"]:has(.menu-item__indicator) {
+    @apply pr-7 pl-2;
+  }
+
+  /* Focus visible state (keyboard focus only) */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Focus state */
+  &:focus,
+  &[data-focus="true"] {
+  }
+
+  /* Pressed state */
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.98);
+  }
+
+  /* Hover state */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      @apply bg-default;
+    }
+  }
+
+  /* Selected state */
+  &[aria-checked="true"],
+  &[aria-selected="true"],
+  &[data-selected="true"] {
+    [data-slot="menu-item-indicator--checkmark"] {
+      /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+      transition: stroke-dashoffset 100ms linear;
+      @apply motion-reduce:transition-none;
+    }
+
+    [data-slot="menu-item-indicator--dot"] {
+      /**
+       * Selected state: visible and scaled up
+       */
+      @apply scale-100 opacity-100;
+    }
+  }
+
+  /* Disabled state */
+  &[data-disabled="true"] {
+    @apply status-disabled;
+  }
+}
+
+/* ==========================================================================
+   Menu item indicator
+   ========================================================================== */
+
+.menu-item__indicator {
+  @apply absolute top-1/2 left-2 flex size-4 shrink-0 -translate-y-1/2 items-center justify-center text-muted;
+
+  /**
+   * Transitions
+   */
+  @apply transition duration-250 motion-reduce:transition-none;
+
+  /* Position on the right when menu item has submenu */
+  .menu-item[data-has-submenu="true"] & {
+    @apply right-2 left-auto;
+  }
+
+  /* Checkmark SVG indicator */
+  [data-slot="menu-item-indicator--checkmark"] {
+    @apply size-2.5;
+
+    .menu-item[data-selection-mode="multiple"] & {
+      /**
+       * Transitions
+       */
+      @apply transition-all duration-300 motion-reduce:transition-none;
+    }
+  }
+
+  /* Dot SVG indicator */
+  [data-slot="menu-item-indicator--dot"] {
+    @apply size-2;
+
+    .menu-item[data-selection-mode="multiple"] & {
+      /**
+     * Transitions
+     */
+      @apply transition-all duration-250 motion-reduce:transition-none;
+    }
+    /**
+     * Default state: hidden and scaled down
+     */
+    @apply scale-70 opacity-0;
+  }
+}
+
+/* Submenu indicator (chevron-right) */
+.menu-item__indicator--submenu {
+  @apply text-muted;
+
+  svg {
+    @apply size-3;
+  }
+}
+
+/* Default variant */
+.menu-item--default {
+}
+
+/* Danger variant */
+.menu-item--danger {
+  .menu-item__indicator {
+    @apply text-danger;
+  }
+
+  [data-slot="label"] {
+    @apply text-danger;
+  }
+}