@rysinal/heroui-vue-styles 0.0.1

package/src/components/alert.css

@@ -0,0 +1,72 @@
+/* Alert component styles */
+
+/* Base alert styles */
+.alert {
+  @apply flex w-full flex-row items-start justify-start gap-4 rounded-3xl bg-surface px-4 py-3 shadow-surface;
+}
+
+/* Alert elements */
+.alert__content {
+  @apply flex h-full grow flex-col items-start;
+}
+
+.alert__indicator {
+  @apply flex items-center justify-center p-1 select-none;
+
+  [data-slot="alert-default-icon"] {
+    @apply box-content size-4;
+  }
+}
+
+.alert__title {
+  @apply m-0 text-sm leading-6 font-medium;
+}
+
+.alert .alert__title {
+  @apply m-0;
+}
+
+.alert__description {
+  @apply text-sm text-muted;
+}
+
+/* Variant modifiers */
+.alert--default .alert__indicator {
+  @apply text-foreground;
+}
+
+.alert--default .alert__title {
+  @apply text-foreground;
+}
+
+.alert--accent .alert__indicator {
+  @apply text-accent;
+}
+
+.alert--accent .alert__title {
+  @apply text-accent;
+}
+
+.alert--success .alert__indicator {
+  @apply text-success;
+}
+
+.alert--success .alert__title {
+  @apply text-success;
+}
+
+.alert--warning .alert__indicator {
+  @apply text-warning;
+}
+
+.alert--warning .alert__title {
+  @apply text-warning;
+}
+
+.alert--danger .alert__indicator {
+  @apply text-danger;
+}
+
+.alert--danger .alert__title {
+  @apply text-danger;
+}

package/src/components/autocomplete/autocomplete.styles.ts

@@ -0,0 +1,38 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const autocompleteVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    variant: 'primary',
+  },
+  slots: {
+    base: 'autocomplete',
+    clearButton: 'autocomplete__clear-button',
+    filter: 'autocomplete__filter',
+    indicator: 'autocomplete__indicator',
+    popover: 'autocomplete__popover',
+    trigger: 'autocomplete__trigger',
+    value: 'autocomplete__value',
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: 'autocomplete--full-width',
+        trigger: 'autocomplete__trigger--full-width',
+      },
+    },
+    variant: {
+      primary: {
+        base: 'autocomplete--primary',
+      },
+      secondary: {
+        base: 'autocomplete--secondary',
+      },
+    },
+  },
+})
+
+export type AutocompleteVariants = VariantProps<typeof autocompleteVariants>

package/src/components/autocomplete/index.ts

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

package/src/components/autocomplete.css

@@ -0,0 +1,310 @@
+/* Autocomplete styles */
+.autocomplete {
+  @apply relative flex flex-col gap-1;
+}
+
+.autocomplete__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(.autocomplete__indicator) {
+    @apply pr-7;
+  }
+
+  /* Hover state - exclude when clear button is hovered to prevent double hover effect */
+  @media (hover: hover) {
+    &:hover:not(:has(.autocomplete__clear-button:hover)),
+    &[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) {
+      @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 */
+  .autocomplete[data-invalid="true"] &,
+  .autocomplete[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 */
+.autocomplete--primary {
+  /* Default styles */
+}
+
+.autocomplete--secondary .autocomplete__trigger {
+  @apply shadow-none;
+  background-color: var(--autocomplete-trigger-bg);
+
+  --autocomplete-trigger-bg: var(--color-default);
+  --autocomplete-trigger-bg-hover: var(--color-default-hover);
+  --autocomplete-trigger-bg-focus: var(--color-default);
+
+  /* Exclude when clear button is hovered to prevent double hover effect */
+  @media (hover: hover) {
+    &:hover:not(:has(.autocomplete__clear-button:hover)),
+    &[data-hovered="true"]:not(:has(.autocomplete__clear-button:hover)) {
+      background-color: var(--autocomplete-trigger-bg-hover);
+    }
+  }
+
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    background-color: var(--autocomplete-trigger-bg-focus);
+  }
+
+  &:focus,
+  &[data-focus="true"] {
+  }
+}
+
+.autocomplete__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 autocomplete value*/
+  [data-slot="list-box-item-indicator"] {
+    @apply hidden;
+  }
+}
+
+.autocomplete__tag-list {
+  @apply flex min-w-0 flex-wrap items-center gap-1;
+}
+
+.autocomplete__tag {
+  @apply inline-flex max-w-full items-center gap-1 rounded-lg bg-default px-2 py-0.5 text-xs text-default-foreground;
+}
+
+.autocomplete__tag-remove {
+  @apply inline-flex size-3.5 shrink-0 items-center justify-center rounded-full text-muted outline-none;
+
+  cursor: var(--cursor-interactive);
+
+  @media (hover: hover) {
+    &:hover {
+      @apply bg-default-hover text-default-foreground;
+    }
+  }
+
+  & svg {
+    @apply size-2.5;
+  }
+}
+
+.autocomplete__indicator {
+  @apply absolute inset-y-0 right-2 my-auto flex shrink-0 items-center justify-center text-field-placeholder transition duration-150;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  &[data-open="true"] {
+    @apply rotate-180;
+  }
+
+  &[data-slot="autocomplete-default-indicator"] {
+    @apply size-4;
+  }
+
+  & svg {
+    @apply size-full;
+  }
+}
+
+.autocomplete__validation-proxy {
+  @apply pointer-events-none absolute size-px opacity-0;
+}
+
+/* Similar to popover content styles */
+.autocomplete__popover {
+  @apply min-w-(--trigger-width) origin-(--trigger-anchor-point) scroll-py-1 overflow-y-auto overscroll-contain rounded-3xl bg-overlay p-0 pt-2 text-sm;
+
+  position: fixed;
+  z-index: 1000;
+  max-height: 20rem;
+
+  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-250 ease-out-fluid 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-out-quad 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="separator"][data-orientation="horizontal"] {
+    @apply my-1 h-px bg-border;
+  }
+
+  [data-slot="list-box-item"] {
+    @apply justify-start px-2.5 text-left;
+
+    text-align: left;
+
+    & > * {
+      text-align: left;
+    }
+  }
+
+  /* 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;
+  }
+
+  /* Search Field styles */
+  [data-slot="search-field"] {
+    @apply px-3 py-1 outline-none;
+  }
+
+  /* Empty State */
+  [data-slot="empty-state"] {
+    @apply text-center text-sm text-overlay-foreground/60;
+  }
+}
+
+/* Full width modifier */
+.autocomplete--full-width {
+  @apply w-full;
+}
+
+.autocomplete__trigger--full-width {
+  @apply w-full;
+}
+
+/* Clear Button styles */
+.autocomplete__clear-button {
+  @apply relative isolate inline-flex h-6 w-6 shrink-0 origin-center items-center justify-center rounded-xl p-1 text-muted select-none no-highlight;
+  @apply mr-0 size-5 shrink-0 self-center bg-transparent;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  @apply transform-gpu;
+
+  /* Transition only when visible - disappears immediately when cleared */
+  &:not([data-empty="true"]) {
+    transition: opacity 150ms var(--ease-smooth);
+    @apply motion-reduce:transition-none;
+  }
+
+  &[data-empty="true"] {
+    @apply pointer-events-none opacity-0;
+  }
+
+  [data-slot="autocomplete-clear-button-icon"] {
+    @apply size-3.5;
+  }
+
+  &: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/avatar/avatar.styles.ts

@@ -0,0 +1,53 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const avatarVariants = tv({
+  defaultVariants: {
+    color: 'default',
+    size: 'md',
+  },
+  slots: {
+    base: 'avatar',
+    fallback: 'avatar__fallback',
+    image: 'avatar__image',
+  },
+  variants: {
+    color: {
+      accent: {
+        fallback: 'avatar__fallback--accent',
+      },
+      danger: {
+        fallback: 'avatar__fallback--danger',
+      },
+      default: {
+        fallback: 'avatar__fallback--default',
+      },
+      success: {
+        fallback: 'avatar__fallback--success',
+      },
+      warning: {
+        fallback: 'avatar__fallback--warning',
+      },
+    },
+    size: {
+      lg: {
+        base: 'avatar--lg',
+      },
+      md: {
+        base: 'avatar--md',
+      },
+      sm: {
+        base: 'avatar--sm',
+      },
+    },
+    variant: {
+      default: {},
+      soft: {
+        base: 'avatar--soft',
+      },
+    },
+  },
+})
+
+export type AvatarVariants = VariantProps<typeof avatarVariants>

package/src/components/avatar/index.ts

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

package/src/components/avatar.css

@@ -0,0 +1,78 @@
+/* Base avatar styles */
+.avatar {
+  @apply relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-full bg-default;
+}
+
+/* Avatar fallback element */
+.avatar__fallback {
+  @apply flex size-full items-center justify-center bg-default text-sm font-medium;
+}
+
+/* Avatar image element */
+.avatar__image {
+  @apply absolute inset-0 aspect-square size-full;
+
+  /**
+   * Transitions
+   */
+  @apply transition-opacity duration-250 motion-reduce:transition-none;
+}
+
+/* Size modifiers */
+.avatar--sm {
+  @apply size-8;
+}
+
+.avatar--md {
+  /* No styles as this is the default size */
+}
+
+.avatar--lg {
+  @apply size-12;
+
+  .avatar__fallback {
+    @apply text-base;
+  }
+}
+
+/* Color modifiers for fallback */
+.avatar__fallback--accent {
+  @apply text-accent;
+}
+
+.avatar__fallback--default {
+  @apply text-default-foreground;
+}
+
+.avatar__fallback--success {
+  @apply text-success;
+}
+
+.avatar__fallback--warning {
+  @apply text-warning;
+}
+
+.avatar__fallback--danger {
+  @apply text-danger;
+}
+
+/* Variant modifiers */
+.avatar--soft {
+  @apply bg-transparent;
+}
+
+.avatar--soft .avatar__fallback--accent {
+  @apply bg-accent-soft text-accent-soft-foreground;
+}
+
+.avatar--soft .avatar__fallback--success {
+  @apply bg-success-soft text-success-soft-foreground;
+}
+
+.avatar--soft .avatar__fallback--warning {
+  @apply bg-warning-soft text-warning-soft-foreground;
+}
+
+.avatar--soft .avatar__fallback--danger {
+  @apply bg-danger-soft text-danger-soft-foreground;
+}

package/src/components/badge/badge.styles.ts

@@ -0,0 +1,74 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const badgeVariants = tv({
+  defaultVariants: {
+    color: 'default',
+    placement: 'top-right',
+    size: 'md',
+    variant: 'primary',
+  },
+  slots: {
+    anchor: 'badge-anchor',
+    base: 'badge',
+    label: 'badge__label',
+  },
+  variants: {
+    color: {
+      accent: {
+        base: 'badge--accent',
+      },
+      danger: {
+        base: 'badge--danger',
+      },
+      default: {
+        base: 'badge--default',
+      },
+      success: {
+        base: 'badge--success',
+      },
+      warning: {
+        base: 'badge--warning',
+      },
+    },
+    placement: {
+      'bottom-left': {
+        base: 'badge--bottom-left',
+      },
+      'bottom-right': {
+        base: 'badge--bottom-right',
+      },
+      'top-left': {
+        base: 'badge--top-left',
+      },
+      'top-right': {
+        base: 'badge--top-right',
+      },
+    },
+    size: {
+      lg: {
+        base: 'badge--lg',
+      },
+      md: {
+        base: 'badge--md',
+      },
+      sm: {
+        base: 'badge--sm',
+      },
+    },
+    variant: {
+      primary: {
+        base: 'badge--primary',
+      },
+      secondary: {
+        base: 'badge--secondary',
+      },
+      soft: {
+        base: 'badge--soft',
+      },
+    },
+  },
+})
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>

package/src/components/badge/index.ts

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