@rysinal/heroui-vue-styles 0.0.1

package/src/components/drawer.css

@@ -0,0 +1,294 @@
+/* -------------------------------------------------------------------------------------------------
+ * Drawer Component Styles
+ * Block: drawer
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * Element: trigger - the element that opens the drawer
+ */
+.drawer__trigger {
+  @apply inline-block cursor-(--cursor-interactive);
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 250ms var(--ease-out-quart),
+    background-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out);
+  @apply motion-reduce:transition-none;
+
+  /* Focus state */
+  &:focus-visible:not(:focus),
+  &[data-focus-visible="true"] {
+    @apply status-focused;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+  }
+
+  /* Active/pressed state */
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.97);
+  }
+}
+
+/**
+ * Element: backdrop - the overlay behind the drawer
+ */
+.drawer__backdrop {
+  @apply fixed inset-0 z-50;
+  @apply h-(--visual-viewport-height) w-full;
+  opacity: 1;
+  transition: opacity 250ms cubic-bezier(0.32, 0.72, 0, 1);
+
+  &[data-entering="true"] {
+    opacity: 0;
+  }
+
+  &[data-exiting="true"] {
+    opacity: 0;
+    transition-duration: 200ms;
+    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+  }
+
+  &[data-exiting="true"],
+  &[data-entering="true"] {
+    will-change: opacity;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+/**
+ * Modifier: backdrop--transparent
+ */
+.drawer__backdrop--transparent {
+  @apply bg-transparent;
+}
+
+/**
+ * Modifier: backdrop--opaque
+ */
+.drawer__backdrop--opaque {
+  @apply bg-backdrop;
+}
+
+/**
+ * Modifier: backdrop--blur
+ */
+.drawer__backdrop--blur {
+  @apply bg-backdrop backdrop-blur-md;
+}
+
+/**
+ * Element: content - the positioning wrapper for the drawer panel
+ */
+.drawer__content {
+  @apply pointer-events-none;
+  @apply fixed inset-0 z-50 flex;
+  @apply h-(--visual-viewport-height) w-full min-w-0;
+}
+
+/**
+ * Modifier: content--bottom (default)
+ * Slides up from the bottom edge
+ */
+.drawer__content--bottom {
+  @apply items-end;
+}
+
+/**
+ * Modifier: content--top
+ * Slides down from the top edge
+ */
+.drawer__content--top {
+  @apply items-start;
+}
+
+/**
+ * Modifier: content--left
+ * Slides in from the left edge
+ */
+.drawer__content--left {
+  @apply justify-start;
+}
+
+/**
+ * Modifier: content--right
+ * Slides in from the right edge
+ */
+.drawer__content--right {
+  @apply justify-end;
+}
+
+/**
+ * Element: dialog - the drawer panel itself
+ */
+.drawer__dialog {
+  @apply relative;
+  @apply flex flex-col;
+  @apply bg-overlay shadow-overlay outline-none;
+  @apply p-6;
+  @apply pointer-events-auto;
+
+  --drawer-enter-duration: 250ms;
+  --drawer-exit-duration: 200ms;
+  --drawer-enter-ease: cubic-bezier(0.32, 0.72, 0, 1);
+  --drawer-exit-ease: cubic-bezier(0.32, 0.72, 0, 1);
+
+  will-change: translate;
+  transition: translate var(--drawer-enter-duration) var(--drawer-enter-ease);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  /* Bottom/top placement: full width, auto height */
+  &[data-placement="bottom"] {
+    @apply w-full rounded-t-2xl;
+    @apply max-h-[85vh];
+  }
+
+  &[data-placement="top"] {
+    @apply w-full rounded-b-2xl;
+    @apply max-h-[85vh];
+  }
+
+  /* Left/right placement: auto width, full height */
+  &[data-placement="left"] {
+    @apply h-full rounded-none;
+    @apply w-80 max-w-[85vw] sm:w-96;
+  }
+
+  &[data-placement="right"] {
+    @apply h-full rounded-none;
+    @apply w-80 max-w-[85vw] sm:w-96;
+  }
+}
+
+[data-exiting="true"] .drawer__dialog {
+  transition-duration: var(--drawer-exit-duration);
+  transition-timing-function: var(--drawer-exit-ease);
+}
+
+.drawer__content--left .drawer__dialog,
+.drawer__content--right .drawer__dialog,
+.drawer__content--top .drawer__dialog,
+.drawer__content--bottom .drawer__dialog {
+  translate: 0 0;
+}
+
+.drawer__content--left[data-entering="true"] .drawer__dialog,
+.drawer__content--left[data-exiting="true"] .drawer__dialog {
+  translate: -100% 0;
+}
+
+.drawer__content--right[data-entering="true"] .drawer__dialog,
+.drawer__content--right[data-exiting="true"] .drawer__dialog {
+  translate: 100% 0;
+}
+
+.drawer__content--top[data-entering="true"] .drawer__dialog,
+.drawer__content--top[data-exiting="true"] .drawer__dialog {
+  translate: 0 -100%;
+}
+
+.drawer__content--bottom[data-entering="true"] .drawer__dialog,
+.drawer__content--bottom[data-exiting="true"] .drawer__dialog {
+  translate: 0 100%;
+}
+
+.drawer__dialog--top {
+  @apply pb-2;
+  .drawer__handle {
+    @apply pb-0;
+  }
+}
+
+/**
+ * Element: header - the top section with the title
+ */
+.drawer__header {
+  @apply flex flex-col gap-3;
+  @apply mb-0;
+}
+
+/**
+ * Element: heading - the main title text
+ */
+.drawer__heading {
+  @apply align-middle;
+  @apply text-base font-medium text-foreground;
+}
+
+/**
+ * Element: body - the main content area
+ * touch-action: pan-y allows vertical scrolling while the dialog captures drag gestures
+ */
+.drawer__body {
+  @apply min-h-0 flex-1;
+  @apply text-sm leading-[1.43] text-muted;
+  @apply -m-[3px] my-0 p-[3px];
+  @apply overflow-y-auto overscroll-contain;
+  -webkit-overflow-scrolling: touch;
+}
+
+/**
+ * Element: footer - the bottom action section
+ */
+.drawer__footer {
+  @apply flex flex-row items-center justify-end gap-2;
+  @apply mt-0;
+}
+
+/**
+ * Element: handle - visual drag handle indicator
+ */
+.drawer__handle {
+  @apply flex items-center justify-center;
+  @apply pb-2;
+
+  /* The handle bar */
+  & > [data-slot="drawer-handle-bar"] {
+    @apply h-1 w-9 rounded-full;
+    @apply bg-separator;
+  }
+}
+
+/**
+ * Element: close-trigger - the close button
+ */
+.drawer__close-trigger {
+  @apply absolute top-4 right-4;
+}
+
+/**
+ * Elements Spacing
+ */
+.drawer__header + .drawer__body {
+  @apply mt-2;
+}
+
+.drawer__header + .drawer__footer {
+  @apply mt-5;
+}
+
+.drawer__body + .drawer__footer {
+  @apply mt-5;
+}
+
+.drawer__handle + .drawer__header {
+  @apply mt-0;
+}
+
+.drawer__handle + .drawer__body {
+  @apply mt-0;
+}

package/src/components/dropdown/dropdown.styles.ts

@@ -0,0 +1,14 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const dropdownVariants = tv({
+  slots: {
+    menu: 'dropdown__menu',
+    popover: 'dropdown__popover',
+    root: 'dropdown',
+    trigger: 'dropdown__trigger',
+  },
+})
+
+export type DropdownVariants = VariantProps<typeof dropdownVariants>

package/src/components/dropdown/index.ts

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

package/src/components/dropdown.css

@@ -0,0 +1,128 @@
+/* ==========================================================================
+   Base dropdown styles
+   ========================================================================== */
+
+.dropdown {
+  @apply flex flex-col gap-1;
+}
+
+.dropdown__trigger {
+  @apply inline-block;
+  /* Only visible when using a custom trigger  - not passing "Button" as a child - hence we use some button styles (custom trigger) */
+  @apply outline-none;
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    transform 250ms var(--ease-out-quart),
+    background-color 150ms var(--ease-smooth),
+    box-shadow 150ms var(--ease-out);
+  @apply transform-gpu motion-reduce:transition-none;
+
+  /* Cursor */
+  cursor: var(--cursor-interactive);
+
+  /* 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;
+  }
+
+  /* Default active/pressed state - scale transform */
+  &:active,
+  &[data-pressed="true"] {
+    transform: scale(0.97);
+  }
+}
+
+/* Similar to select popover styles */
+.dropdown__popover {
+  @apply max-w-[48svw] origin-(--trigger-anchor-point) scroll-py-1 overflow-y-auto overscroll-contain rounded-3xl bg-overlay p-0 text-sm md:min-w-55;
+  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-150 ease-smooth fade-in-0 zoom-in-90;
+
+    /* 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-smooth 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;
+  }
+
+  /* Menu styles */
+  [data-slot="dropdown-menu"] {
+    @apply p-1.5 outline-none;
+  }
+
+  [data-slot="menu-item"] {
+    @apply px-2.5;
+  }
+}
+
+.dropdown__menu {
+  @apply relative flex w-full flex-col gap-0.5 overflow-clip p-1;
+
+  /* This makes the separator take up 94% of the width and be centered */
+  [data-slot="separator"] {
+    @apply ml-[3%] w-[94%];
+  }
+}

package/src/components/empty-state/empty-state.styles.ts

@@ -0,0 +1,9 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const emptyStateVariants = tv({
+  base: 'empty-state',
+})
+
+export type EmptyStateVariants = VariantProps<typeof emptyStateVariants>

package/src/components/empty-state/index.ts

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

package/src/components/empty-state.css

@@ -0,0 +1,4 @@
+/* Base empty-state styles */
+.empty-state {
+  @apply p-2 text-sm text-muted;
+}

package/src/components/error-message/error-message.styles.ts

@@ -0,0 +1,9 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const errorMessageVariants = tv({
+  base: 'error-message',
+})
+
+export type ErrorMessageVariants = VariantProps<typeof errorMessageVariants>

package/src/components/error-message/index.ts

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

package/src/components/error-message.css

@@ -0,0 +1,13 @@
+/* Base error message styles */
+.error-message {
+  @apply h-auto text-xs wrap-break-word text-danger;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    opacity 150ms var(--ease-out),
+    height 350ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+}

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

@@ -0,0 +1,8 @@
+import type { VariantProps } from 'tailwind-variants'
+import { tv } from 'tailwind-variants'
+
+export const fieldErrorVariants = tv({
+  base: 'field-error',
+})
+
+export type FieldErrorVariants = VariantProps<typeof fieldErrorVariants>

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

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

package/src/components/field-error.css

@@ -0,0 +1,13 @@
+/* Field error styles */
+.field-error {
+  @apply h-0 px-1 text-xs wrap-break-word text-danger opacity-0 data-[visible=true]:h-auto data-[visible=true]:opacity-100;
+
+  /**
+   * Transitions
+   * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+   */
+  transition:
+    opacity 150ms var(--ease-out),
+    height 350ms var(--ease-smooth);
+  @apply motion-reduce:transition-none;
+}

package/src/components/fieldset/fieldset.styles.ts

@@ -0,0 +1,15 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const fieldsetVariants = tv({
+  slots: {
+    actions: 'fieldset__actions',
+    base: 'fieldset',
+    description: 'fieldset__description',
+    fieldGroup: 'fieldset__field_group',
+    legend: 'fieldset__legend',
+  },
+})
+
+export type FieldsetVariants = VariantProps<typeof fieldsetVariants>

package/src/components/fieldset/index.ts

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

package/src/components/fieldset.css

@@ -0,0 +1,18 @@
+/* Base component styles */
+.fieldset {
+  @apply flex flex-col gap-6;
+  /* fix flexbox issue in Safari when fieldset with legend is inside a flexbox */
+  @apply shrink grow basis-0;
+}
+
+.fieldset__legend {
+  @apply text-base font-medium text-foreground;
+}
+
+.fieldset__field_group {
+  @apply w-full space-y-4;
+}
+
+.fieldset__actions {
+  @apply flex items-center gap-2 pt-1;
+}

package/src/components/header/header.styles.ts

@@ -0,0 +1,5 @@
+import { tv } from 'tailwind-variants'
+
+export const headerVariants = tv({
+  base: 'header',
+})

package/src/components/header/index.ts

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

package/src/components/header.css

@@ -0,0 +1,7 @@
+/* ==========================================================================
+   Base header styles
+   ========================================================================== */
+
+.header {
+  @apply w-full px-2 pt-1.5 pb-1 text-left text-xs font-medium text-muted;
+}