@rysinal/heroui-vue-styles 0.0.1

package/src/components/badge.css

@@ -0,0 +1,166 @@
+/* ==========================================================================
+   Badge - Small informational badges for displaying labels, statuses, and categories.
+   ========================================================================== */
+
+/* Base styles */
+.badge {
+  @apply inline-flex shrink-0 items-center justify-center gap-0.5 font-medium;
+
+  /* Default size (matches --md) */
+  @apply min-h-7 min-w-7 rounded-3xl text-xs leading-[1.34];
+
+  /* Default tokens */
+  --badge-bg: var(--color-default);
+  --badge-fg: var(--color-default-foreground);
+  --badge-border: var(--color-background);
+
+  background-color: var(--badge-bg);
+  color: var(--badge-fg);
+  border: 1px solid var(--badge-border);
+}
+
+.badge__label {
+  @apply px-0.5;
+}
+
+.badge-anchor {
+  @apply relative inline-flex shrink-0;
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.badge--lg {
+  @apply min-h-8 min-w-8 rounded-2xl text-sm leading-[1.43];
+}
+
+.badge--md {
+  /* No styles as this is the default size */
+}
+
+.badge--sm {
+  @apply min-h-4 min-w-4 rounded-xl text-[10px] leading-[1.34];
+}
+
+/* ==========================================================================
+   Color variants - set foreground color
+   ========================================================================== */
+
+.badge--accent {
+  --badge-fg: var(--color-accent);
+}
+
+.badge--default {
+  --badge-fg: var(--color-default-foreground);
+}
+
+.badge--success {
+  --badge-fg: var(--color-success);
+}
+
+.badge--warning {
+  --badge-fg: var(--color-warning);
+}
+
+.badge--danger {
+  --badge-fg: var(--color-danger);
+}
+
+/* ==========================================================================
+   Variant styles
+   ========================================================================== */
+
+.badge--primary {
+  /* Solid background - compound variants below handle bg/fg per color */
+}
+
+.badge--secondary {
+  /* Default background with colored text - base behavior */
+}
+
+.badge--soft {
+  /* Soft/muted background - compound variants below handle bg/fg per color */
+}
+
+/* ==========================================================================
+   Placement variants
+   ========================================================================== */
+
+.badge--top-right {
+  @apply absolute top-0 right-0;
+  transform: translate(25%, -25%);
+}
+
+.badge--top-left {
+  @apply absolute top-0 left-0;
+  transform: translate(-25%, -25%);
+}
+
+.badge--bottom-right {
+  @apply absolute right-0 bottom-0;
+  transform: translate(25%, 25%);
+}
+
+.badge--bottom-left {
+  @apply absolute bottom-0 left-0;
+  transform: translate(-25%, 25%);
+}
+
+/* ==========================================================================
+   Compound variants - Primary (solid background)
+   ========================================================================== */
+
+.badge--primary.badge--accent {
+  --badge-bg: var(--color-accent);
+  --badge-fg: var(--color-accent-foreground);
+}
+
+.badge--primary.badge--default {
+  --badge-bg: var(--color-default);
+  --badge-fg: var(--color-default-foreground);
+}
+
+.badge--primary.badge--success {
+  --badge-bg: var(--color-success);
+  --badge-fg: var(--color-success-foreground);
+}
+
+.badge--primary.badge--warning {
+  --badge-bg: var(--color-warning);
+  --badge-fg: var(--color-warning-foreground);
+}
+
+.badge--primary.badge--danger {
+  --badge-bg: var(--color-danger);
+  --badge-fg: var(--color-danger-foreground);
+}
+
+/* ==========================================================================
+   Compound variants - Soft (muted background)
+   ========================================================================== */
+
+.badge--soft.badge--accent {
+  --badge-bg: var(--color-accent-soft);
+  --badge-fg: var(--color-accent-soft-foreground);
+}
+
+.badge--soft.badge--default {
+  --badge-bg: var(--color-default);
+  --badge-fg: var(--color-default-foreground);
+}
+
+.badge--soft.badge--success {
+  --badge-bg: var(--color-success-soft);
+  --badge-fg: var(--color-success-soft-foreground);
+}
+
+.badge--soft.badge--warning {
+  --badge-bg: var(--color-warning-soft);
+  --badge-fg: var(--color-warning-soft-foreground);
+}
+
+.badge--soft.badge--danger {
+  --badge-bg: var(--color-danger-soft);
+  --badge-fg: var(--color-danger-soft-foreground);
+}

package/src/components/breadcrumbs/breadcrumbs.styles.ts

@@ -0,0 +1,14 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const breadcrumbsVariants = tv({
+  slots: {
+    base: 'breadcrumbs',
+    item: 'breadcrumbs__item',
+    link: 'breadcrumbs__link',
+    separator: 'breadcrumbs__separator',
+  },
+})
+
+export type BreadcrumbsVariants = VariantProps<typeof breadcrumbsVariants>

package/src/components/breadcrumbs/index.ts

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

package/src/components/breadcrumbs.css

@@ -0,0 +1,42 @@
+/* Base breadcrumbs container */
+.breadcrumbs {
+  @apply m-0 flex list-none items-center p-0;
+
+  /* Breadcrumb link */
+  .breadcrumbs__link {
+    @apply relative inline-flex h-5 items-center px-0.5 text-sm leading-5 font-medium text-muted no-underline opacity-100;
+
+    cursor: var(--cursor-interactive);
+
+    &:hover:not([data-disabled="true"]),
+    &[data-hovered="true"]:not([data-disabled="true"]) {
+      @apply underline;
+    }
+
+    &[data-current="true"] {
+      @apply text-link opacity-100;
+    }
+
+    &[data-disabled="true"],
+    &[aria-disabled="true"] {
+      @apply status-disabled no-underline;
+      pointer-events: auto;
+      cursor: var(--cursor-disabled);
+    }
+  }
+
+  /* Breadcrumb item wrapper */
+  .breadcrumbs__item {
+    @apply m-0 inline-flex shrink-0 list-none items-center justify-center gap-0.5 px-0.5 p-0;
+  }
+
+  /* Separator icon */
+  .breadcrumbs__separator {
+    @apply inline-flex size-3 shrink-0 items-center justify-center text-muted leading-none rtl:rotate-180;
+
+    & > svg,
+    & > span {
+      @apply block size-3 shrink-0;
+    }
+  }
+}

package/src/components/button/button.styles.ts

@@ -0,0 +1,37 @@
+import type { VariantProps } from 'tailwind-variants'
+import { tv } from 'tailwind-variants'
+
+export const buttonVariants = tv({
+  base: 'button',
+  defaultVariants: {
+    fullWidth: false,
+    isIconOnly: false,
+    size: 'md',
+    variant: 'primary',
+  },
+  variants: {
+    fullWidth: {
+      false: '',
+      true: 'button--full-width',
+    },
+    isIconOnly: {
+      true: 'button--icon-only',
+    },
+    size: {
+      lg: 'button--lg',
+      md: 'button--md',
+      sm: 'button--sm',
+    },
+    variant: {
+      danger: 'button--danger',
+      'danger-soft': 'button--danger-soft',
+      ghost: 'button--ghost',
+      outline: 'button--outline',
+      primary: 'button--primary',
+      secondary: 'button--secondary',
+      tertiary: 'button--tertiary',
+    },
+  },
+})
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>

package/src/components/button/index.ts

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

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

@@ -0,0 +1,32 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const buttonGroupVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    orientation: 'horizontal',
+  },
+  slots: {
+    base: 'button-group',
+    separator: 'button-group__separator',
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: 'button-group--full-width',
+      },
+    },
+    orientation: {
+      horizontal: {
+        base: 'button-group--horizontal',
+      },
+      vertical: {
+        base: 'button-group--vertical',
+      },
+    },
+  },
+})
+
+export type ButtonGroupVariants = VariantProps<typeof buttonGroupVariants>

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

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

package/src/components/button-group.css

@@ -0,0 +1,151 @@
+/* ==========================================================================
+   ButtonGroup - Groups related buttons together
+   ========================================================================== */
+
+/* Base button group styles */
+.button-group {
+  @apply inline-flex h-auto items-center justify-center gap-0;
+}
+
+/* ==========================================================================
+   Orientation variants
+   ========================================================================== */
+
+.button-group--horizontal {
+  @apply flex-row;
+}
+
+.button-group--vertical {
+  @apply flex-col;
+}
+
+/* Remove border radius from all buttons in group */
+.button-group .button {
+  @apply rounded-none;
+}
+
+/* Apply border radius to first button (start edge) */
+.button-group--horizontal .button:first-child {
+  @apply rounded-s-3xl;
+}
+
+/* Apply border radius to last button (end edge) */
+.button-group--horizontal .button:last-child {
+  @apply rounded-e-3xl;
+}
+
+/* If only one button, apply both rounded edges */
+.button-group--horizontal .button:first-child:last-child {
+  @apply rounded-3xl;
+}
+
+/* Apply border radius to first button (top edge) in vertical */
+.button-group--vertical .button:first-child {
+  @apply rounded-t-3xl;
+}
+
+/* Apply border radius to last button (bottom edge) in vertical */
+.button-group--vertical .button:last-child {
+  @apply rounded-b-3xl;
+}
+
+/* If only one button in vertical, apply all rounded edges */
+.button-group--vertical .button:first-child:last-child {
+  @apply rounded-3xl;
+}
+
+/* Remove scale transform on active/pressed state for buttons in group */
+.button-group .button:active,
+.button-group .button[data-pressed="true"] {
+  transform: none;
+}
+
+/* Override focus ring to use inset style so it stays within button bounds */
+.button-group .button:focus-visible:not(:focus),
+.button-group .button[data-focus-visible="true"] {
+  --tw-ring-offset-width: 0px;
+  @apply ring-inset;
+}
+
+/* ==========================================================================
+   Separator (compound component)
+   ========================================================================== */
+
+.button-group__separator {
+  @apply bg-current opacity-15;
+
+  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 orientation - vertical divider */
+  .button-group--horizontal & {
+    left: -1px;
+    top: 25%;
+    width: 1px;
+    height: 50%;
+  }
+
+  /* Vertical orientation - horizontal divider */
+  .button-group--vertical & {
+    left: 25%;
+    top: -1px;
+    width: 50%;
+    height: 1px;
+  }
+}
+
+/* ==========================================================================
+   Outline button border handling
+   ========================================================================== */
+
+/* Remove adjacent borders from outline buttons in horizontal group */
+/* First button: remove end border (right in LTR, left in RTL) */
+.button-group--horizontal .button--outline:first-child {
+  @apply border-e-0;
+}
+
+/* Last button: remove start border (left in LTR, right in RTL) */
+.button-group--horizontal .button--outline:last-child {
+  @apply border-s-0;
+}
+
+/* Middle buttons: remove both inline borders */
+.button-group--horizontal .button--outline:not(:first-child):not(:last-child) {
+  @apply border-x-0;
+}
+
+/* Remove adjacent borders from outline buttons in vertical group */
+/* First button: remove bottom border */
+.button-group--vertical .button--outline:first-child {
+  @apply border-b-0;
+}
+
+/* Last button: remove top border */
+.button-group--vertical .button--outline:last-child {
+  @apply border-t-0;
+}
+
+/* Middle buttons: remove both block borders */
+.button-group--vertical .button--outline:not(:first-child):not(:last-child) {
+  @apply border-y-0;
+}
+
+/* ==========================================================================
+   Full width modifier
+   ========================================================================== */
+
+.button-group--full-width {
+  @apply w-full;
+}
+
+.button-group--full-width .button {
+  @apply flex-1;
+}

package/src/components/button.css

@@ -0,0 +1,158 @@
+/* Button component styles */
+
+/* Base button styles */
+.button {
+  @apply relative isolate inline-flex h-10 w-fit origin-center items-center justify-center gap-2 rounded-3xl px-4 text-sm font-medium whitespace-nowrap outline-none select-none no-highlight md:h-9;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 250ms var(--ease-smooth),
+    background-color 100ms var(--ease-out),
+    box-shadow 100ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /* Default tokens (fallback behavior) */
+  --button-bg: transparent;
+  --button-bg-hover: var(--button-bg);
+  --button-bg-pressed: var(--button-bg-hover);
+  --button-fg: currentColor;
+
+  background-color: var(--button-bg);
+  color: var(--button-fg);
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Pending state */
+  &[data-pending="true"] {
+    @apply status-pending;
+  }
+
+  /* Active / pressed */
+  &:active,
+  &[data-pressed="true"] {
+    background-color: var(--button-bg-pressed);
+    transform: scale(0.97);
+  }
+
+  /* Hover */
+  @media (hover: hover) {
+    &:hover,
+    &[data-hovered="true"] {
+      background-color: var(--button-bg-hover);
+    }
+  }
+
+  /* SVG icon styling - exclude spinner and link-icon svgs */
+  & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
+    @apply pointer-events-none -mx-0.5 my-0.5 size-5 shrink-0 self-center sm:my-1 sm:size-4;
+  }
+}
+
+/* Size variants */
+.button--sm {
+  @apply h-9 px-3 md:h-8;
+
+  & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
+    @apply size-4;
+  }
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.98);
+  }
+}
+
+.button--md {
+  /* No styles as this is the default size */
+}
+
+.button--lg {
+  @apply h-11 text-base md:h-10;
+
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.96);
+  }
+}
+
+/* Color variants - only set custom property values */
+.button--primary {
+  --button-bg: var(--color-accent);
+  --button-bg-hover: var(--color-accent-hover);
+  --button-bg-pressed: var(--color-accent-hover);
+  --button-fg: var(--color-accent-foreground);
+}
+
+.button--secondary {
+  --button-bg: var(--color-default);
+  --button-bg-hover: var(--color-default-hover);
+  --button-bg-pressed: var(--color-default-hover);
+  --button-fg: var(--color-accent-soft-foreground);
+}
+
+.button--tertiary {
+  --button-bg: var(--color-default);
+  --button-bg-hover: var(--color-default-hover);
+  --button-bg-pressed: var(--color-default-hover);
+}
+
+.button--ghost,
+.button--outline {
+  --button-bg: transparent;
+  --button-bg-hover: var(--color-default);
+  --button-bg-pressed: var(--color-default);
+  --button-fg: var(--color-default-foreground);
+}
+
+.button--outline {
+  @apply border border-border;
+  --button-bg-hover: color-mix(in srgb, var(--color-default) 60%, transparent);
+}
+
+.button--danger {
+  --button-bg: var(--color-danger);
+  --button-bg-hover: var(--color-danger-hover);
+  --button-bg-pressed: var(--color-danger-hover);
+  --button-fg: var(--color-danger-foreground);
+}
+
+.button--danger-soft {
+  --button-bg: var(--color-danger-soft);
+  --button-bg-hover: var(--color-danger-soft-hover);
+  --button-bg-pressed: var(--color-danger-soft-hover);
+  --button-fg: var(--color-danger-soft-foreground);
+}
+
+/* Icon-only modifier */
+.button--icon-only {
+  @apply w-10 p-0 md:w-9;
+}
+
+.button--icon-only.button--sm {
+  @apply w-9 md:w-8;
+}
+
+.button--icon-only.button--lg {
+  @apply w-11 md:w-10;
+}
+
+/* Full width modifier */
+.button--full-width {
+  @apply w-full;
+}

package/src/components/calendar/calendar.styles.ts

@@ -0,0 +1,36 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const calendarVariants = tv({
+  defaultVariants: {},
+  slots: {
+    /** Root calendar container */
+    base: 'calendar',
+    /** Calendar cell (td) */
+    cell: 'calendar__cell',
+    /** Cell indicator (small dot at bottom of cell) */
+    cellIndicator: 'calendar__cell-indicator',
+    /** Calendar grid (table) */
+    grid: 'calendar__grid',
+    /** Grid body (tbody) */
+    gridBody: 'calendar__grid-body',
+    /** Grid header (thead) */
+    gridHeader: 'calendar__grid-header',
+    /** Grid row (tr) */
+    gridRow: 'calendar__grid-row',
+    /** Calendar header containing heading and navigation */
+    header: 'calendar__header',
+    /** Header cell (th - day names) */
+    headerCell: 'calendar__header-cell',
+    /** Month/year heading text */
+    heading: 'calendar__heading',
+    /** Previous/Next navigation button */
+    navButton: 'calendar__nav-button',
+    /** Navigation button icon */
+    navButtonIcon: 'calendar__nav-button-icon',
+  },
+  variants: {},
+})
+
+export type CalendarVariants = VariantProps<typeof calendarVariants>

package/src/components/calendar/index.ts

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

package/src/components/calendar-year-picker/calendar-year-picker.styles.ts

@@ -0,0 +1,15 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const calendarYearPickerVariants = tv({
+  slots: {
+    trigger: 'calendar-year-picker__trigger',
+    triggerHeading: 'calendar-year-picker__trigger-heading',
+    triggerIndicator: 'calendar-year-picker__trigger-indicator',
+    yearCell: 'calendar-year-picker__year-cell',
+    yearGrid: 'calendar-year-picker__year-grid',
+  },
+})
+
+export type CalendarYearPickerVariants = VariantProps<typeof calendarYearPickerVariants>

package/src/components/calendar-year-picker/index.ts

@@ -0,0 +1 @@
+export * from './calendar-year-picker.styles.js'