@rysinal/heroui-vue-styles 0.0.1

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

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

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

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

package/src/components/menu-section.css

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

package/src/components/menu.css

@@ -0,0 +1,12 @@
+/* ==========================================================================
+   Base menu styles
+   ========================================================================== */
+
+.menu {
+  @apply relative flex w-full flex-col gap-1 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/meter/index.ts

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

package/src/components/meter/meter.styles.ts

@@ -0,0 +1,48 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const meterVariants = tv({
+  defaultVariants: {
+    color: 'accent',
+    size: 'md',
+  },
+  slots: {
+    base: 'meter',
+    fill: 'meter__fill',
+    output: 'meter__output',
+    track: 'meter__track',
+  },
+  variants: {
+    color: {
+      accent: {
+        base: 'meter--accent',
+      },
+      danger: {
+        base: 'meter--danger',
+      },
+      default: {
+        base: 'meter--default',
+      },
+      success: {
+        base: 'meter--success',
+      },
+      warning: {
+        base: 'meter--warning',
+      },
+    },
+    size: {
+      lg: {
+        base: 'meter--lg',
+      },
+      md: {
+        base: 'meter--md',
+      },
+      sm: {
+        base: 'meter--sm',
+      },
+    },
+  },
+})
+
+export type MeterVariants = VariantProps<typeof meterVariants>

package/src/components/meter.css

@@ -0,0 +1,104 @@
+/* ==========================================================================
+   Meter - A quantity indicator within a known range
+   ========================================================================== */
+
+/* Base styles */
+.meter {
+  @apply grid w-full gap-1;
+  grid-template-areas:
+    "label output"
+    "track track";
+  grid-template-columns: 1fr auto;
+
+  /* Default color tokens (accent) */
+  --meter-fill: var(--color-accent);
+
+  [data-slot="label"] {
+    @apply w-fit text-sm font-medium;
+
+    grid-area: label;
+  }
+
+  .meter__output {
+    @apply text-sm font-medium tabular-nums;
+
+    grid-area: output;
+  }
+
+  .meter__track {
+    @apply relative overflow-hidden rounded-full bg-default;
+
+    grid-area: track;
+
+    /* Default height (matches --md) */
+    @apply h-2;
+  }
+
+  .meter__fill {
+    @apply absolute top-0 left-0 h-full rounded-full;
+
+    background-color: var(--meter-fill);
+
+    /**
+     * Transitions
+     * CRITICAL: motion-reduce must be AFTER transition for correct override specificity
+     */
+    transition: width 300ms var(--ease-out);
+    @apply motion-reduce:transition-none;
+  }
+
+  /* Disabled state */
+  &:disabled,
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply status-disabled;
+
+    [data-slot="label"] {
+      @apply opacity-100;
+    }
+  }
+}
+
+/* ==========================================================================
+   Size variants
+   ========================================================================== */
+
+.meter--sm {
+  .meter__track {
+    @apply h-1;
+  }
+}
+
+.meter--md {
+  /* No styles as this is the default size */
+}
+
+.meter--lg {
+  .meter__track {
+    @apply h-3;
+  }
+}
+
+/* ==========================================================================
+   Color variants
+   ========================================================================== */
+
+.meter--default {
+  --meter-fill: var(--color-default-foreground);
+}
+
+.meter--accent {
+  --meter-fill: var(--color-accent);
+}
+
+.meter--success {
+  --meter-fill: var(--color-success);
+}
+
+.meter--warning {
+  --meter-fill: var(--color-warning);
+}
+
+.meter--danger {
+  --meter-fill: var(--color-danger);
+}

package/src/components/modal/index.ts

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

package/src/components/modal/modal.styles.ts

@@ -0,0 +1,70 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const modalVariants = tv({
+  defaultVariants: {
+    scroll: 'inside',
+    size: 'md',
+    variant: 'opaque',
+  },
+  slots: {
+    backdrop: 'modal__backdrop',
+    body: 'modal__body',
+    closeTrigger: 'modal__close-trigger',
+    container: 'modal__container',
+    dialog: 'modal__dialog',
+    footer: 'modal__footer',
+    header: 'modal__header',
+    heading: 'modal__heading',
+    icon: 'modal__icon',
+    trigger: 'modal__trigger',
+  },
+  variants: {
+    scroll: {
+      inside: {
+        body: 'modal__body--scroll-inside',
+        dialog: 'modal__dialog--scroll-inside',
+      },
+      outside: {
+        body: 'modal__body--scroll-outside',
+        container: 'modal__container--scroll-outside',
+        dialog: 'modal__dialog--scroll-outside',
+      },
+    },
+    size: {
+      cover: {
+        dialog: 'modal__dialog--cover',
+      },
+      full: {
+        container: 'modal__container--full',
+        dialog: 'modal__dialog--full',
+      },
+      lg: {
+        dialog: 'modal__dialog--lg',
+      },
+      md: {
+        dialog: 'modal__dialog--md',
+      },
+      sm: {
+        dialog: 'modal__dialog--sm',
+      },
+      xs: {
+        dialog: 'modal__dialog--xs',
+      },
+    },
+    variant: {
+      blur: {
+        backdrop: 'modal__backdrop--blur',
+      },
+      opaque: {
+        backdrop: 'modal__backdrop--opaque',
+      },
+      transparent: {
+        backdrop: 'modal__backdrop--transparent',
+      },
+    },
+  },
+})
+
+export type ModalVariants = VariantProps<typeof modalVariants>

package/src/components/modal.css

@@ -0,0 +1,334 @@
+/* -------------------------------------------------------------------------------------------------
+ * Modal Component Styles
+ * Block: modal
+ * -----------------------------------------------------------------------------------------------*/
+
+/**
+ * Element: trigger - the element that opens the modal
+ */
+.modal__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 dialog
+ */
+.modal__backdrop {
+  @apply fixed inset-0 z-50;
+  @apply flex flex-row items-center justify-center;
+  @apply h-(--visual-viewport-height) w-full;
+
+  /* Entering animation */
+  &[data-entering="true"] {
+    @apply animate-in duration-150 ease-out fade-in-0;
+  }
+
+  /* Exiting animation */
+  &[data-exiting="true"] {
+    @apply animate-out duration-100 ease-out fade-out-0;
+  }
+
+  /**
+   * Reduce Animation
+   * CRITICAL: motion-reduce must be AFTER animate for correct override specificity
+   */
+  &[data-exiting="true"],
+  &[data-entering="true"] {
+    @apply will-change-[opacity];
+    @apply motion-reduce:animate-none;
+  }
+}
+
+/**
+ * Modifier: backdrop--transparent
+ */
+.modal__backdrop--transparent {
+  @apply bg-transparent;
+}
+
+/**
+ * Modifier: backdrop--opaque
+ */
+.modal__backdrop--opaque {
+  @apply bg-backdrop;
+}
+
+/**
+ * Modifier: backdrop--blur
+ */
+.modal__backdrop--blur {
+  @apply bg-backdrop backdrop-blur-md;
+}
+
+/**
+ * Element: container - the positioning wrapper for the modal
+ */
+.modal__container {
+  @apply flex flex-col items-center;
+  @apply h-(--visual-viewport-height) w-full min-w-0 flex-1;
+  @apply p-4;
+  @apply sm:w-fit sm:p-10;
+  @apply pointer-events-none;
+
+  /* Entering animation */
+  &[data-entering="true"] {
+    @apply animate-in duration-250 ease-out-quad fade-in-0 zoom-in-105;
+
+    &[data-placement="auto"] {
+      @apply slide-in-from-bottom-1;
+      @apply sm:slide-in-from-bottom-0;
+    }
+
+    &[data-placement="top"] {
+      @apply slide-in-from-top-1;
+    }
+
+    &[data-placement="center"] {
+      @apply slide-in-from-top-0;
+    }
+
+    &[data-placement="bottom"] {
+      @apply slide-in-from-bottom-1;
+    }
+  }
+
+  /* Exiting animation */
+  &[data-exiting="true"] {
+    @apply animate-out duration-100 ease-out-quad fade-out-0 zoom-out-95;
+  }
+
+  /**
+   * Reduce Animation
+   * CRITICAL: motion-reduce must be AFTER animate for correct override specificity
+   */
+  &[data-exiting="true"],
+  &[data-entering="true"] {
+    @apply will-change-[opacity,transform];
+    @apply motion-reduce:animate-none;
+  }
+}
+
+/**
+ * Modifier: container--scroll-outside
+ */
+.modal__container--scroll-outside {
+  @apply overflow-y-auto;
+  @apply pointer-events-auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/**
+ * Modifier: container--full
+ */
+.modal__container--full {
+  @apply p-0 sm:p-0;
+
+  /* Entering animation */
+  &[data-entering="true"] {
+    @apply slide-in-from-bottom-0 zoom-in-100;
+    @apply sm:slide-in-from-bottom-0;
+  }
+
+  /* Exiting animation */
+  &[data-exiting="true"] {
+    @apply zoom-out-100;
+  }
+}
+
+/**
+ * Element: dialog - the content container for the modal
+ */
+.modal__dialog {
+  @apply relative;
+  @apply flex w-full flex-col;
+  @apply rounded-3xl bg-overlay shadow-overlay outline-none;
+  @apply p-6;
+  @apply pointer-events-auto;
+
+  &[data-placement="auto"] {
+    @apply mt-auto;
+    @apply sm:my-auto;
+  }
+
+  &[data-placement="center"] {
+    @apply my-auto;
+  }
+
+  &[data-placement="bottom"] {
+    @apply mt-auto;
+  }
+
+  &[data-placement="top"] {
+    @apply mt-0;
+  }
+}
+
+/**
+ * Modifier: dialog--scroll-inside
+ */
+.modal__dialog--scroll-inside {
+  @apply overflow-hidden;
+}
+
+/**
+ * Modifier: dialog--scroll-outside
+ */
+.modal__dialog--scroll-outside {
+  @apply h-auto;
+  @apply min-h-0 shrink-0;
+}
+
+/**
+ * Modifier: dialog--xs
+ */
+.modal__dialog--xs {
+  @apply max-w-xs;
+}
+
+/**
+ * Modifier: dialog--sm
+ */
+.modal__dialog--sm {
+  @apply max-w-sm;
+}
+
+/**
+ * Modifier: dialog--md
+ */
+.modal__dialog--md {
+  @apply max-w-md;
+}
+
+/**
+ * Modifier: dialog--lg
+ */
+.modal__dialog--lg {
+  @apply max-w-lg;
+}
+
+/**
+ * Modifier: dialog--cover
+ */
+.modal__dialog--cover {
+  @apply h-full min-h-full w-full;
+}
+
+/**
+ * Modifier: dialog--full
+ */
+.modal__dialog--full {
+  @apply h-full min-h-full w-full;
+  @apply rounded-none shadow-none;
+}
+
+/**
+ * Element: header - the top section with the title
+ */
+.modal__header {
+  @apply flex flex-col gap-3;
+  @apply mb-0;
+
+  /* When header contains icon, use flex-col layout with gap */
+  & > .modal__icon {
+    @apply mb-0;
+  }
+}
+
+/**
+ * Element: heading - the main title text
+ */
+.modal__heading {
+  @apply align-middle;
+  @apply text-base font-medium text-foreground;
+}
+
+/**
+ * Element: icon - the optional icon indicator
+ */
+.modal__icon {
+  @apply flex items-center justify-center;
+  @apply size-10 shrink-0;
+  @apply rounded-full select-none;
+}
+
+/**
+ * Element: body - the main content area
+ */
+.modal__body {
+  @apply min-h-0 flex-1;
+  @apply text-sm leading-[1.43] text-muted;
+  @apply my-0;
+}
+
+/**
+ * Modifier: body--scroll-inside
+ */
+.modal__body--scroll-inside {
+  @apply overflow-y-auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+/**
+ * Modifier: body--scroll-outside
+ */
+.modal__body--scroll-outside {
+  @apply overflow-y-visible;
+}
+
+/**
+ * Element: footer - the bottom action section
+ */
+.modal__footer {
+  @apply flex flex-row items-center justify-end gap-2;
+  @apply mt-0;
+}
+
+/**
+ * Element: close-trigger - the optional x icon button to close the modal
+ */
+.modal__close-trigger {
+  @apply absolute top-4 right-4;
+}
+
+/**
+ * Elements Spacing
+ */
+.modal__header + .modal__body {
+  @apply mt-2;
+}
+
+.modal__header + .modal__footer {
+  @apply mt-5;
+}
+
+.modal__body + .modal__footer {
+  @apply mt-5;
+}

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

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

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

@@ -0,0 +1,36 @@
+import type { VariantProps } from 'tailwind-variants'
+
+import { tv } from 'tailwind-variants'
+
+export const numberFieldVariants = tv({
+  defaultVariants: {
+    fullWidth: false,
+    variant: 'primary',
+  },
+  slots: {
+    base: 'number-field',
+    decrementButton: 'number-field__decrement-button',
+    group: 'number-field__group',
+    incrementButton: 'number-field__increment-button',
+    input: 'number-field__input',
+  },
+  variants: {
+    fullWidth: {
+      false: {},
+      true: {
+        base: 'number-field--full-width',
+        group: 'number-field__group--full-width',
+      },
+    },
+    variant: {
+      primary: {
+        base: 'number-field--primary',
+      },
+      secondary: {
+        base: 'number-field--secondary',
+      },
+    },
+  },
+})
+
+export type NumberFieldVariants = VariantProps<typeof numberFieldVariants>