@rysinal/heroui-vue-styles 0.0.1

package/src/components/tabs.css

@@ -0,0 +1,243 @@
+/* Base tabs component */
+.tabs {
+  @apply flex gap-2;
+
+  /* Orientation styles */
+  &[data-orientation="horizontal"] {
+    @apply flex-col;
+  }
+
+  &[data-orientation="vertical"] {
+    @apply flex-row;
+  }
+}
+
+/* Tab list container */
+.tabs__list-container {
+  @apply relative;
+}
+
+/* Tab list */
+.tabs__list {
+  @apply inline-flex bg-default p-1;
+
+  border-radius: calc(var(--radius-2xl) + 0.25rem);
+
+  /* Horizontal orientation */
+  &[data-orientation="horizontal"] {
+    @apply w-full flex-row;
+  }
+
+  /* Vertical orientation */
+  &[data-orientation="vertical"] {
+    @apply flex-col gap-1;
+
+    .tabs__tab {
+      @apply min-w-20;
+    }
+  }
+}
+
+/* Individual tab */
+.tabs__tab {
+  position: relative;
+  z-index: 1;
+  cursor: var(--cursor-interactive);
+
+  @apply flex h-8 w-full items-center justify-center rounded-3xl px-4 text-center text-sm font-medium text-muted outline-none no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 150ms var(--ease-smooth),
+    background-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out),
+    opacity 150ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  /* Selected state */
+  &[data-selected="true"] {
+    @apply text-segment-foreground;
+  }
+
+  /* Hide separator when this tab is selected */
+  &[data-selected="true"] .tabs__separator {
+    opacity: 0;
+  }
+
+  /* Hide separator when previous sibling is selected */
+  &[data-selected="true"] + .tabs__tab .tabs__separator {
+    opacity: 0;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Hover states - both approaches for compatibility */
+  @media (hover: hover) {
+    &:not([data-selected="true"]):not([data-disabled="true"]):hover,
+    &[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]) {
+      @apply opacity-70;
+    }
+  }
+
+  /* Focus states - comprehensive fallback */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+}
+
+/* Tab separator */
+.tabs__separator {
+  @apply bg-muted/25;
+
+  border-radius: 4px;
+  position: absolute;
+  pointer-events: none;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition: opacity 150ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+
+  /* Horizontal tabs - vertical separator */
+  .tabs__list[data-orientation="horizontal"] & {
+    left: 0;
+    top: 25%;
+    width: 1px;
+    height: 50%;
+  }
+
+  /* Vertical tabs - horizontal separator */
+  .tabs__list[data-orientation="vertical"] & {
+    top: 0;
+    left: 5%;
+    width: 90%;
+    height: 1px;
+  }
+}
+
+/* Tab panel */
+.tabs__panel {
+  @apply w-full p-2 outline-none;
+
+  /* Entering animations */
+  &[data-entering="true"] {
+  }
+
+  /* Exiting animations */
+  &[data-exiting="true"] {
+    @apply absolute top-0 left-0 w-full;
+  }
+
+  /* Orientation spacing */
+  &[data-orientation="horizontal"] {
+    @apply mt-4;
+  }
+
+  &[data-orientation="vertical"] {
+    @apply ml-4;
+  }
+}
+
+/* Tab indicator - React Aria's SelectionIndicator */
+.tabs__indicator {
+  box-shadow: var(--shadow-surface);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  border-radius: var(--radius-3xl);
+  width: 100%;
+  height: 100%;
+
+  @apply bg-segment;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition-duration: 250ms;
+  transition-property: translate, width, height;
+  transition-timing-function: var(--ease-out-fluid);
+  @apply motion-reduce:transition-none;
+}
+
+/* ==========================================================================
+   Secondary Variant
+   ========================================================================== */
+
+.tabs--secondary {
+  /* Tab list - remove background, add bottom/left border */
+  > .tabs__list-container > .tabs__list {
+    @apply bg-transparent p-0;
+
+    border-radius: 0;
+
+    /* Horizontal orientation - bottom border, scrollable */
+    &[data-orientation="horizontal"] {
+      @apply border-b border-border;
+
+      max-width: 100%;
+      overflow-x: auto;
+      overflow-y: clip;
+      scrollbar-width: none;
+
+      &::-webkit-scrollbar {
+        display: none;
+      }
+    }
+
+    /* Vertical orientation - left border */
+    &[data-orientation="vertical"] {
+      @apply border-l border-border;
+    }
+  }
+
+  /* Tab - adjust for secondary variant */
+  > .tabs__list-container .tabs__tab {
+    @apply rounded-none;
+
+    /* Selected state - use text-foreground */
+    &[data-selected="true"] {
+      @apply text-foreground;
+    }
+  }
+
+  /* Hide separators in secondary variant */
+  > .tabs__list-container .tabs__separator {
+    display: none;
+  }
+
+  /* Tab indicator - line style */
+  > .tabs__list-container .tabs__indicator {
+    @apply bg-accent;
+
+    box-shadow: none;
+    border-radius: 0;
+  }
+
+  /* Horizontal orientation - bottom line indicator */
+  &[data-orientation="horizontal"] > .tabs__list-container .tabs__indicator {
+    top: auto;
+    bottom: 0;
+    height: 2px;
+  }
+
+  /* Vertical orientation - left line indicator */
+  &[data-orientation="vertical"] > .tabs__list-container .tabs__indicator {
+    left: 0;
+    top: 0;
+    width: 2px;
+    height: 100%;
+  }
+}

package/src/components/tag/index.ts

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

package/src/components/tag/tag.styles.ts

@@ -0,0 +1,37 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const tagVariants = tv({
+  defaultVariants: {
+    size: 'md',
+    variant: 'default',
+  },
+  slots: {
+    base: 'tag',
+    removeButton: 'tag__remove-button',
+  },
+  variants: {
+    size: {
+      lg: {
+        base: 'tag--lg',
+      },
+      md: {
+        base: 'tag--md',
+      },
+      sm: {
+        base: 'tag--sm',
+      },
+    },
+    variant: {
+      default: {
+        base: 'tag--default',
+      },
+      surface: {
+        base: 'tag--surface',
+      },
+    },
+  },
+})
+
+export type TagVariants = VariantProps<typeof tagVariants>

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

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

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

@@ -0,0 +1,12 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const tagGroupVariants = tv({
+  slots: {
+    base: 'tag-group',
+    list: 'tag-group__list',
+  },
+})
+
+export type TagGroupVariants = VariantProps<typeof tagGroupVariants>

package/src/components/tag-group.css

@@ -0,0 +1,15 @@
+/* Base styles */
+.tag-group {
+  @apply relative flex flex-col gap-1;
+}
+
+.tag-group__list {
+  @apply relative flex flex-wrap gap-1.5;
+}
+
+.tag-group [slot="description"],
+.tag-group [data-slot="description"],
+.tag-group [slot="errorMessage"],
+.tag-group [data-slot="error-message"] {
+  @apply p-1;
+}

package/src/components/tag.css

@@ -0,0 +1,98 @@
+/* Tag component styles */
+.tag {
+  --optical-offset: 0.031em;
+
+  @apply relative inline-flex items-center gap-1 rounded-full font-medium select-none no-highlight;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    color 100ms var(--ease-smooth),
+    scale 100ms var(--ease-smooth),
+    opacity 100ms var(--ease-smooth),
+    background-color 100ms var(--ease-smooth),
+    box-shadow 100ms var(--ease-out);
+  @apply origin-center transform-gpu motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /* SVG icon styling */
+  & svg {
+    @apply pointer-events-none size-3 shrink-0 self-center text-current;
+  }
+}
+
+/* Disabled state */
+.tag:is([data-disabled="true"], [aria-disabled="true"]) {
+  @apply status-disabled;
+}
+
+/* Focus visible state (keyboard focus only) */
+.tag:is(:focus-visible, [data-focus-visible]) {
+  @apply status-focused;
+}
+
+/* Pressed/Active state */
+.tag:is(:active, [data-pressed="true"]) {
+}
+
+/* Selected state */
+.tag:is([data-selected="true"], [aria-selected="true"]) {
+  @apply bg-accent-soft text-accent-soft-foreground;
+
+  /* Selected + Hover state */
+  @media (hover: hover) {
+    &:is(:hover, [data-hovered="true"]) {
+      @apply bg-accent-soft-hover;
+    }
+  }
+}
+
+/* Size */
+.tag--sm {
+  @apply px-2 py-0.5 text-xs;
+}
+
+.tag--md {
+  @apply px-2 py-1 text-xs;
+}
+
+.tag--lg {
+  @apply px-2.5 py-1.5 text-sm;
+}
+
+/* Variant */
+.tag--default {
+  @apply bg-default text-default-foreground;
+
+  /* Hover state (when not selected or disabled) */
+  @media (hover: hover) {
+    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
+      @apply bg-default-hover;
+    }
+  }
+}
+
+.tag--surface {
+  @apply bg-surface text-surface-foreground;
+
+  /* Hover state (when not selected or disabled) */
+  @media (hover: hover) {
+    &:is(:hover, [data-hovered="true"]):not([data-selected="true"]):not([data-disabled="true"]) {
+      @apply bg-surface-hover;
+    }
+  }
+}
+
+/* Remove Button  */
+.tag__remove-button {
+  @apply size-3 text-inherit;
+
+  /* SVG icon styling */
+  & svg {
+    @apply size-[inherit] shrink-0 self-center text-current;
+  }
+}

package/src/components/text/index.ts

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

package/src/components/text/text.styles.ts

@@ -0,0 +1,28 @@
+import type { VariantProps } from 'tailwind-variants'
+import { tv } from 'tailwind-variants'
+
+export const textVariants = tv({
+  base: ['transition-colors duration-200'],
+  defaultVariants: {
+    size: 'base',
+    variant: 'default',
+  },
+  variants: {
+    size: {
+      base: 'text-base',
+      lg: 'text-lg',
+      sm: 'text-sm',
+      xl: 'text-xl',
+      xs: 'text-xs',
+    },
+    variant: {
+      danger: 'text-danger',
+      default: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+    },
+  },
+})
+
+export type TextVariants = VariantProps<typeof textVariants>

package/src/components/textarea/index.ts

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

package/src/components/textarea/textarea.styles.ts

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

package/src/components/textarea.css

@@ -0,0 +1,93 @@
+/* use textarea instead of text-area to avoid conflict with Tailwind `text-` prefix */
+.textarea {
+  @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;
+
+  min-height: 38px;
+
+  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"] {
+  }
+
+  &[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 */
+.textarea--primary {
+  /* Default styles */
+}
+
+.textarea--secondary {
+  @apply shadow-none;
+  background-color: var(--textarea-bg);
+
+  --textarea-bg: var(--color-default);
+  --textarea-bg-hover: var(--color-default-hover);
+  --textarea-bg-focus: var(--color-default);
+
+  @media (hover: hover) {
+    &:hover:not(:focus):not(:focus-visible),
+    &[data-hovered="true"]:not([data-focused="true"]):not([data-focus-visible="true"]) {
+      background-color: var(--textarea-bg-hover);
+    }
+  }
+
+  &:focus,
+  &[data-focused="true"] {
+    background-color: var(--textarea-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(--textarea-bg-focus);
+  }
+}
+
+/* Full width modifier */
+.textarea--full-width {
+  @apply w-full;
+}

package/src/components/textfield/index.ts

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

package/src/components/textfield/textfield.styles.ts

@@ -0,0 +1,18 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const textFieldVariants = tv({
+  base: 'textfield',
+  defaultVariants: {
+    fullWidth: false,
+  },
+  variants: {
+    fullWidth: {
+      false: '',
+      true: 'textfield--full-width',
+    },
+  },
+})
+
+export type TextFieldVariants = VariantProps<typeof textFieldVariants>

package/src/components/textfield.css

@@ -0,0 +1,27 @@
+/* Text field styles */
+/* use textfield instead of text-field to avoid conflict with Tailwind `text-` prefix */
+.textfield {
+  @apply flex flex-col gap-1;
+
+  &[data-invalid="true"],
+  &[aria-invalid="true"] {
+    [data-slot="description"] {
+      @apply hidden;
+    }
+  }
+
+  [data-slot="description"] {
+    @apply px-1;
+  }
+}
+
+/* Full width modifier */
+.textfield--full-width {
+  @apply w-full;
+
+  /* Automatically make Input full width when TextField is full width */
+  [data-slot="input"],
+  [data-slot="textarea"] {
+    @apply w-full;
+  }
+}

package/src/components/time-field/index.ts

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

package/src/components/time-field/time-field.styles.ts

@@ -0,0 +1,18 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const timeFieldVariants = tv({
+  base: 'time-field',
+  defaultVariants: {
+    fullWidth: false,
+  },
+  variants: {
+    fullWidth: {
+      false: '',
+      true: 'time-field--full-width',
+    },
+  },
+})
+
+export type TimeFieldVariants = VariantProps<typeof timeFieldVariants>

package/src/components/time-field.css

@@ -0,0 +1,24 @@
+/* Time field styles */
+.time-field {
+  @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;
+  }
+}
+
+/* Full width modifier */
+.time-field--full-width {
+  @apply w-full;
+}

package/src/components/toast/index.ts

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