@demodev-ui/react 1.0.2

package/README.md

@@ -0,0 +1,28 @@
+# @demodev-ui/react
+
+A design system style package built on HeroUI. Provides custom themes, utilities, and component styles.
+
+## Installation
+
+```bash
+npm install @demodev-ui/react @heroui/react @heroui/styles
+```
+
+### Peer Dependencies
+
+- `@heroui/react` ^3.0.1
+- `@heroui/styles` ^3.0.1
+- `tailwindcss` ^4
+
+## Usage
+
+Import in your project's CSS entry file:
+
+```css
+@import "tailwindcss";
+@import "@demodev-ui/react/styles";
+```
+
+## License
+
+MIT

package/dist/styles/index.css

@@ -0,0 +1,982 @@
+@import "@heroui/styles";
+@theme {
+  /* Gray Colors */
+  --color-gray-50: oklch(97.3% 0.001 287.31deg);
+  --color-gray-100: oklch(94% 0.001 287.27deg);
+  --color-gray-200: oklch(85.2% 0.004 286.57deg);
+  --color-gray-300: oklch(75.8% 0.006 286.43deg);
+  --color-gray-400: oklch(67.2% 0.009 286.26deg);
+  --color-gray-500: oklch(58.5% 0.011 286.14deg);
+  --color-gray-600: oklch(49.2% 0.013 285.97deg);
+  --color-gray-700: oklch(40.5% 0.013 285.83deg);
+  --color-gray-800: oklch(31.9% 0.011 285.82deg);
+  --color-gray-900: oklch(22.4% 0.008 285.8deg);
+  --color-gray-950: oklch(17.9% 0.004 286.04deg);
+
+  /* Semantic Colors */
+  --danger: #ef1026;
+  --success: #27c961;
+  --warning: #ffdc18;
+}
+@theme {
+  --radius-lg-plus: 0.625rem; /* 10px */
+  --radius-2xl-plus: 1.25rem; /* 20px */
+
+  /* button */
+  --radius-button-xs: var(--radius-md);
+  --radius-button-sm: var(--radius-lg);
+  --radius-button-md: var(--radius-lg-plus);
+  --radius-button-lg: var(--radius-xl);
+
+  /* chip */
+  --radius-chip-sm: var(--radius-md);
+  --radius-chip-md: var(--radius-lg);
+  --radius-chip-lg: var(--radius-button-sm);
+
+  /* input */
+  --radius-input-lg: var(--radius-button-lg);
+
+  /* list box */
+  --radius-list-box: var(--radius-xl);
+  --radius-list-box-item: var(--radius-lg);
+
+  /* toast */
+  --radius-toast: var(--radius-2xl);
+}
+@theme {
+  --spacing-field: calc(var(--spacing) * 2);
+
+  /* button */
+  --spacing-button-sm: calc(var(--spacing) * 9);
+  --spacing-button-md: calc(var(--spacing) * 10);
+  --spacing-button-lg: calc(var(--spacing) * 12);
+
+  /* chip */
+  --spacing-chip-sm: calc(var(--spacing) * 6);
+  --spacing-chip-md: calc(var(--spacing) * 8);
+  --spacing-chip-lg: var(--spacing-button-sm);
+
+  /* icon */
+  --spacing-button-icon-sm: calc(var(--spacing) * 4);
+  --spacing-chip-icon-sm: calc(var(--spacing) * 3);
+  --spacing-chip-icon-md: calc(var(--spacing) * 3.5);
+  --spacing-chip-icon-lg: var(--spacing-button-icon-sm);
+
+  /* input */
+  --spacing-input-lg: var(--spacing-button-lg);
+}
+@custom-variant light {
+  &:is(.light, .light *, [data-theme="light"], [data-theme="light"] *) {
+    @slot;
+
+    &::before,
+    &::after {
+      @slot;
+    }
+  }
+
+  @media (prefers-color-scheme: light) {
+    &:not(:is(.light, .light *, [data-theme="light"], [data-theme="light"] *)) & {
+      @slot;
+
+      &::before,
+      &::after {
+        @slot;
+      }
+    }
+  }
+}
+@utility button-size-sm {
+  @apply rounded-button-sm h-button-sm;
+  @apply px-3 text-sm;
+}
+@utility button-size-md {
+  @apply rounded-button-md h-button-md;
+}
+@utility button-size-lg {
+  @apply rounded-button-lg h-button-lg;
+  @apply gap-3 px-6;
+}
+@utility chip-size-sm {
+  @apply rounded-chip-sm h-chip-sm gap-1 px-2 text-xs;
+
+  svg {
+    @apply size-chip-icon-sm;
+  }
+}
+@utility chip-size-md {
+  @apply rounded-chip-md h-chip-md gap-1.5 px-2.5 text-sm;
+
+  svg {
+    @apply size-chip-icon-md;
+  }
+}
+@utility chip-size-lg {
+  @apply button-size-sm gap-1.5;
+
+  svg {
+    @apply size-chip-icon-lg;
+  }
+}
+@utility input-text-lg {
+  @apply px-4 text-base;
+}
+@utility input-size-lg {
+  @apply input-text-lg rounded-input-lg min-h-input-lg;
+}
+@utility input-style-primary {
+  @apply outline-border shadow-none outline-1 outline-solid;
+
+  /* Disabled state */
+  &[data-disabled="true"],
+  &[aria-disabled="true"] {
+    @apply light:bg-gray-50/50;
+  }
+}
+@utility input-group-style-primary {
+  &:not([data-invalid="true"]) {
+    @apply input-style-primary;
+  }
+
+  /* Focus within state */
+  &[data-focus-within="true"],
+  &:focus-within {
+    @apply outline-none;
+  }
+}
+@utility popover-list-box {
+  @apply gap-0.5 p-1;
+}
+@utility popover-list-box-item {
+  @apply rounded-list-box-item px-3 py-2;
+}
+@utility popover-list-box-item-indicator {
+  @apply right-2.5 size-4 transition-none;
+
+  [data-slot="list-box-item-indicator--checkmark"] {
+    @apply size-2 stroke-3;
+  }
+
+  &[data-visible="true"] {
+    @apply bg-accent text-accent-foreground rounded-full;
+  }
+}
+:root:not([data-theme="dark"]) {
+  --background: #fff;
+}
+@layer components {
+  .alert {
+    @apply rounded-toast;
+
+    &:has(button) {
+      @apply py-4;
+    }
+  }
+}
+@layer components {
+  .button {
+    /* SVG icon styling - exclude spinner and link-icon svgs */
+    & svg:not([data-slot="spinner"] svg, [data-slot="link-icon"] svg) {
+      @apply size-button-icon-sm;
+    }
+  }
+
+  .button--sm {
+    @apply button-size-sm;
+
+    &.button--icon-only {
+      @apply w-button-sm;
+    }
+  }
+
+  .button--md {
+    @apply button-size-md;
+
+    &.button--icon-only {
+      @apply w-button-md;
+    }
+  }
+
+  .button--lg {
+    @apply button-size-lg;
+
+    &.button--icon-only {
+      @apply w-button-lg;
+    }
+  }
+
+  .button--secondary {
+    --button-bg: var(--color-accent-soft);
+    --button-bg-hover: var(--color-accent-soft-hover);
+    --button-bg-pressed: var(--color-accent-soft-hover);
+    --button-fg: var(--color-accent-soft-foreground);
+  }
+
+  .button--outline {
+    &[data-color="accent"] {
+      @apply border-accent;
+
+      --button-bg: var(--color-accent-soft);
+      --button-bg-hover: var(--color-accent-soft-hover);
+      --button-bg-pressed: var(--color-accent-soft-hover);
+      --button-fg: var(--color-accent-soft-foreground);
+    }
+
+    &[data-color="danger"] {
+      @apply border-danger;
+
+      --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);
+    }
+
+    &[data-color="success"] {
+      @apply border-success;
+
+      --button-bg: var(--color-success-soft);
+      --button-bg-hover: var(--color-success-soft-hover);
+      --button-bg-pressed: var(--color-success-soft-hover);
+      --button-fg: var(--color-success-soft-foreground);
+    }
+
+    &[data-color="warning"] {
+      @apply border-warning;
+
+      --button-bg: var(--color-warning-soft);
+      --button-bg-hover: var(--color-warning-soft-hover);
+      --button-bg-pressed: var(--color-warning-soft-hover);
+      --button-fg: var(--color-warning-soft-foreground);
+    }
+  }
+
+  .button--ghost {
+    &[data-color="accent"] {
+      --button-bg-hover: var(--color-accent-soft);
+      --button-fg: var(--color-accent);
+    }
+
+    &[data-color="danger"] {
+      --button-bg-hover: var(--color-danger-soft);
+      --button-fg: var(--color-danger);
+    }
+
+    &[data-color="success"] {
+      --button-bg-hover: var(--color-success-soft);
+      --button-fg: var(--color-success);
+    }
+
+    &[data-color="warning"] {
+      --button-bg-hover: var(--color-warning-soft);
+      --button-fg: var(--color-warning);
+    }
+  }
+}
+@layer components {
+  /* Apply border radius to first button (start edge) */
+  .button-group--horizontal .button:first-child {
+    @apply rounded-s-lg;
+
+    &.button--sm {
+      @apply rounded-s-md;
+    }
+
+    &.button--lg {
+      @apply rounded-s-lg-plus;
+    }
+  }
+
+  /* Apply border radius to last button (end edge) */
+  .button-group--horizontal .button:last-child {
+    @apply rounded-e-lg;
+
+    &.button--sm {
+      @apply rounded-e-md;
+    }
+
+    &.button--lg {
+      @apply rounded-e-lg-plus;
+    }
+  }
+
+  /* If only one button, apply both rounded edges */
+  .button-group--horizontal .button:first-child:last-child {
+    @apply rounded-lg;
+
+    &.button--sm {
+      @apply rounded-md;
+    }
+
+    &.button--lg {
+      @apply rounded-lg-plus;
+    }
+  }
+
+  /* Apply border radius to first button (top edge) in vertical */
+  .button-group--vertical .button:first-child {
+    @apply rounded-t-lg;
+
+    &.button--sm {
+      @apply rounded-t-md;
+    }
+
+    &.button--lg {
+      @apply rounded-t-lg-plus;
+    }
+  }
+
+  /* Apply border radius to last button (bottom edge) in vertical */
+  .button-group--vertical .button:last-child {
+    @apply rounded-b-lg;
+
+    &.button--sm {
+      @apply rounded-b-md;
+    }
+
+    &.button--lg {
+      @apply rounded-b-lg-plus;
+    }
+  }
+
+  /* If only one button in vertical, apply all rounded edges */
+  .button-group--vertical .button:first-child:last-child {
+    @apply rounded-lg;
+
+    &.button--sm {
+      @apply rounded-md;
+    }
+
+    &.button--lg {
+      @apply rounded-lg-plus;
+    }
+  }
+}
+@layer components {
+  .checkbox--primary {
+    .checkbox__control {
+      @apply outline-border bg-transparent shadow-none outline-2 -outline-offset-1 outline-solid;
+    }
+
+    &:is([data-selected="true"], [data-indeterminate="true"]) .checkbox__control {
+      @apply outline-accent;
+
+      transition: outline-color 500ms;
+    }
+
+    &[data-invalid="true"] .checkbox__control {
+      @apply outline-danger outline-2!;
+    }
+  }
+
+  .checkbox__control {
+    @apply rounded-sm;
+
+    &::before {
+      @apply rounded-sm;
+    }
+
+    /* Size */
+    &[data-size="md"] {
+      @apply size-5;
+
+      &::before {
+        @apply size-5;
+      }
+
+      [data-slot="checkbox-default-indicator--checkmark"] {
+        @apply size-3;
+      }
+
+      [data-slot="checkbox-default-indicator--indeterminate"] {
+        @apply size-3;
+      }
+    }
+
+    /* Rounded */
+    &[data-rounded="true"] {
+      @apply rounded-full;
+
+      &::before {
+        @apply rounded-full;
+      }
+
+      [data-slot="checkbox-default-indicator--checkmark"] {
+        @apply size-2;
+      }
+
+      [data-slot="checkbox-default-indicator--indeterminate"] {
+        @apply size-2 stroke-[4px];
+      }
+    }
+
+    &[data-rounded="true"][data-size="md"] {
+      [data-slot="checkbox-default-indicator--checkmark"] {
+        @apply size-2.5;
+      }
+
+      [data-slot="checkbox-default-indicator--indeterminate"] {
+        @apply size-2.5;
+      }
+    }
+  }
+}
+@layer components {
+  .chip {
+    @apply chip-size-md;
+  }
+
+  /* Size variants */
+  .chip--sm {
+    @apply chip-size-sm;
+  }
+
+  .chip--lg {
+    @apply chip-size-lg;
+  }
+
+  /* Variant styles */
+  .chip--tertiary {
+    @apply border-border border;
+  }
+}
+@layer components {
+  /* Variants */
+  .close-button--default {
+    @apply light:bg-transparent;
+
+    @media (hover: hover) {
+      &:hover,
+      &[data-hovered="true"] {
+        @apply light:bg-default;
+      }
+    }
+  }
+}
+@layer components {
+  .combo-box {
+    @apply gap-field;
+
+    [data-slot="input"] {
+      &:has(+ .combo-box__trigger) {
+        @apply pr-8;
+      }
+    }
+  }
+
+  .combo-box__trigger {
+    @apply pr-3;
+  }
+
+  .combo-box__popover {
+    @apply rounded-list-box;
+
+    .list-box {
+      @apply popover-list-box;
+    }
+
+    [data-slot="list-box-item"] {
+      @apply popover-list-box-item;
+    }
+
+    .list-box-item__indicator {
+      @apply popover-list-box-item-indicator;
+    }
+  }
+}
+@layer components {
+  .alert-dialog__dialog--sm,
+  .modal__dialog--sm {
+    @apply max-w-md;
+  }
+
+  .alert-dialog__dialog--md,
+  .modal__dialog--md {
+    @apply max-w-2xl;
+  }
+
+  .alert-dialog__dialog--lg,
+  .modal__dialog--lg {
+    @apply max-w-3xl;
+  }
+}
+@layer components {
+  .dropdown__popover {
+    @apply rounded-list-box;
+
+    [data-slot="dropdown-menu"] {
+      @apply popover-list-box;
+    }
+
+    [data-slot="menu-item"] {
+      @apply popover-list-box-item;
+    }
+  }
+}
+@layer components {
+  .input {
+    @apply input-size-lg;
+  }
+
+  .input--primary {
+    @apply input-style-primary;
+  }
+}
+@layer components {
+  .input-group {
+    @apply min-h-12;
+  }
+
+  .input-group__input {
+    @apply px-4 text-base;
+  }
+
+  .input-group--primary {
+    @apply input-style-primary;
+  }
+
+  .input-group__prefix {
+    @apply px-4;
+  }
+
+  .input-group__suffix {
+    @apply px-4;
+
+    &:has(button) {
+      @apply pr-1.5;
+    }
+  }
+}
+@layer components {
+  .number-field {
+    @apply gap-field;
+  }
+
+  .number-field__group {
+    @apply input-size-lg px-0;
+
+    grid-template-columns: auto 1fr auto;
+  }
+
+  .number-field__input {
+    @apply input-text-lg;
+  }
+
+  .number-field__increment-button,
+  .number-field__decrement-button {
+    @apply w-12;
+  }
+
+  .number-field--primary .number-field__group {
+    @apply input-group-style-primary;
+  }
+}
+@layer components {
+  .pagination__link {
+    @apply rounded-button-sm;
+
+    &[data-active="true"] {
+      @apply bg-accent text-accent-foreground;
+    }
+  }
+
+  .pagination--sm {
+    .pagination__link {
+      @apply rounded-button-xs;
+    }
+  }
+
+  .pagination--lg {
+    .pagination__link {
+      @apply rounded-button-md;
+    }
+  }
+}
+@layer components {
+  .radio__control {
+    &[data-size="md"] {
+      @apply size-5;
+    }
+  }
+
+  .radio-group--primary .radio__control {
+    @apply shadow-none;
+
+    /* Default indicator color (unselected) */
+    .radio:not([aria-checked="true"], [data-selected="true"]) & .radio__indicator:empty::before {
+      @apply border-border border-2;
+    }
+  }
+}
+@layer components {
+  .search-field {
+    @apply gap-field;
+  }
+
+  .search-field__group {
+    @apply input-size-lg px-0;
+  }
+
+  .search-field--primary .search-field__group {
+    @apply input-group-style-primary;
+  }
+
+  .search-field__search-icon {
+    @apply ml-4;
+  }
+
+  .search-field__clear-button {
+    @apply bg-default mr-3;
+  }
+
+  .search-field__input {
+    @apply input-text-lg;
+
+    .search-field__group:has([data-slot="search-field-search-icon"]) & {
+      @apply pl-3;
+    }
+
+    .search-field__group:has([slot="clear"]) & {
+      @apply pr-3;
+    }
+  }
+}
+@layer components {
+  .select {
+    @apply gap-field;
+  }
+
+  .select--primary .select__trigger {
+    @apply input-style-primary;
+  }
+
+  .select__trigger {
+    @apply input-size-lg;
+
+    &:has(.select__indicator) {
+      @apply pr-8;
+    }
+
+    &[data-pressed="true"] {
+      @apply status-focused;
+
+      border-color: var(--color-field-border-focus);
+      background-color: var(--color-field-focus);
+
+      --tw-ring-offset-width: 0px;
+    }
+  }
+
+  .select--secondary .select__trigger {
+    &[data-pressed="true"] {
+      background-color: var(--color-default);
+    }
+  }
+
+  .select__value {
+    @apply input-text-lg flex items-center px-0;
+  }
+
+  .select__indicator {
+    @apply right-3;
+  }
+
+  .select__popover {
+    @apply rounded-list-box;
+
+    [data-slot="list-box"] {
+      @apply popover-list-box;
+    }
+
+    [data-slot="list-box-item"] {
+      @apply popover-list-box-item;
+    }
+  }
+
+  .list-box-item__indicator {
+    @apply popover-list-box-item-indicator;
+  }
+}
+@layer components {
+  .slider {
+    &[data-orientation="horizontal"] {
+      @apply gap-y-2;
+
+      .slider__track {
+        /* Add transparent borders to provide space for thumb at edges */
+        /* Thumb width is 1.5rem (24px), so half is 0.75rem (12px) */
+        @apply h-2 border-x-6;
+      }
+
+      .slider__thumb {
+        @apply slider-thumb;
+      }
+    }
+
+    &[data-orientation="vertical"] {
+      .label {
+        @apply justify-self-center;
+      }
+
+      .slider__track {
+        /* Add transparent borders to provide space for thumb at edges */
+        /* Thumb width is 1.5rem (24px), so half is 0.75rem (12px) */
+        @apply w-2 border-y-6;
+      }
+
+      .slider__thumb {
+        @apply slider-thumb;
+      }
+    }
+  }
+}
+@utility slider-thumb {
+  /* Thumb width + border width */
+  @apply size-3;
+
+  &::after {
+    @apply outline-accent size-3 outline-2;
+  }
+}
+@layer components {
+  .tabs__list {
+    @apply rounded-button-lg;
+  }
+
+  .tabs__tab {
+    @apply button-size-md;
+  }
+
+  .tabs__indicator {
+    @apply rounded-button-md;
+  }
+}
+@layer components {
+  .tag:is([data-selected="true"], [aria-selected="true"]) {
+    &.tag--default {
+      @apply bg-accent text-accent-foreground;
+
+      /* Selected + Hover state */
+      @media (hover: hover) {
+        &:is(:hover, [data-hovered="true"]) {
+          @apply bg-accent-hover;
+        }
+      }
+    }
+
+    &.tag--surface {
+      @apply border-accent;
+    }
+
+    .tag__remove-button {
+      @apply bg-transparent;
+    }
+  }
+
+  .tag--surface {
+    @apply border-border border;
+  }
+
+  .tag__remove-button {
+    @apply -mr-0.5;
+  }
+
+  .tag--sm {
+    @apply chip-size-sm;
+
+    .tag__remove-button {
+      @apply size-chip-icon-sm;
+    }
+  }
+
+  .tag--md {
+    @apply chip-size-md;
+
+    .tag__remove-button {
+      @apply size-chip-icon-md;
+    }
+  }
+
+  .tag--lg {
+    @apply chip-size-lg;
+
+    .tag__remove-button {
+      @apply size-chip-icon-lg;
+    }
+  }
+}
+@layer components {
+  .textarea {
+    @apply input-size-lg py-3;
+  }
+
+  .textarea--primary {
+    @apply input-style-primary;
+  }
+}
+@layer components {
+  .textfield {
+    @apply gap-field;
+  }
+}
+@layer components {
+  .toast {
+    @apply rounded-toast;
+
+    .close-button {
+      @apply light:sm:bg-background;
+    }
+  }
+
+  .toast__action {
+    @apply my-1 self-end sm:self-center;
+  }
+}
+@layer components {
+  .toggle-button {
+    & svg {
+      @apply mx-0;
+    }
+  }
+
+  .toggle-button--default {
+    --toggle-button-bg-selected: var(--color-accent);
+    --toggle-button-fg-selected: var(--color-accent-foreground);
+    --toggle-button-bg-selected-hover: var(--color-accent-hover);
+    --toggle-button-bg-selected-pressed: var(--color-accent-hover);
+  }
+
+  .toggle-button--ghost {
+    @apply border-border border;
+
+    &[data-selected="true"] {
+      @apply border-accent;
+    }
+  }
+
+  /* Size variants */
+  .toggle-button--sm {
+    @apply chip-size-sm;
+  }
+
+  .toggle-button--md {
+    @apply chip-size-md;
+  }
+
+  .toggle-button--lg {
+    @apply chip-size-lg;
+  }
+
+  /* Icon-only modifier */
+  .toggle-button--icon-only.toggle-button--sm {
+    @apply w-chip-sm;
+  }
+
+  .toggle-button--icon-only.toggle-button--md {
+    @apply w-chip-md;
+  }
+
+  .toggle-button--icon-only.toggle-button--lg {
+    @apply w-chip-lg;
+  }
+}
+@layer components {
+  /* Apply border radius to first button (start edge) */
+  .toggle-button-group--horizontal .toggle-button:first-child {
+    @apply rounded-s-chip-md;
+
+    &.toggle-button--sm {
+      @apply rounded-s-chip-sm;
+    }
+
+    &.toggle-button--lg {
+      @apply rounded-s-chip-lg;
+    }
+  }
+
+  /* Apply border radius to last button (end edge) */
+  .toggle-button-group--horizontal .toggle-button:last-child {
+    @apply rounded-e-chip-md;
+
+    &.toggle-button--sm {
+      @apply rounded-e-chip-sm;
+    }
+
+    &.toggle-button--lg {
+      @apply rounded-e-chip-lg;
+    }
+  }
+
+  /* If only one button, apply both rounded edges */
+  .toggle-button-group--horizontal .toggle-button:first-child:last-child {
+    @apply rounded-chip-md;
+
+    &.toggle-button--sm {
+      @apply rounded-chip-sm;
+    }
+
+    &.toggle-button--lg {
+      @apply rounded-chip-lg;
+    }
+  }
+
+  /* Apply border radius to first button (top edge) in vertical */
+  .toggle-button-group--vertical .toggle-button:first-child {
+    @apply rounded-t-chip-md;
+
+    &.toggle-button--sm {
+      @apply rounded-t-chip-sm;
+    }
+
+    &.toggle-button--lg {
+      @apply rounded-t-chip-lg;
+    }
+  }
+
+  /* Apply border radius to last button (bottom edge) in vertical */
+  .toggle-button-group--vertical .toggle-button:last-child {
+    @apply rounded-b-chip-md;
+
+    &.toggle-button--sm {
+      @apply rounded-b-chip-sm;
+    }
+
+    &.toggle-button--lg {
+      @apply rounded-b-chip-lg;
+    }
+  }
+
+  /* If only one button in vertical, apply all rounded edges */
+  .toggle-button-group--vertical .toggle-button:first-child:last-child {
+    @apply rounded-chip-md;
+
+    &.toggle-button--sm {
+      @apply rounded-chip-sm;
+    }
+
+    &.toggle-button--lg {
+      @apply rounded-chip-lg;
+    }
+  }
+
+  /* Restore border radius in detached mode */
+  .toggle-button-group--detached .toggle-button {
+    @apply rounded-chip-md;
+
+    &.toggle-button--sm {
+      @apply rounded-chip-sm;
+    }
+
+    &.toggle-button--lg {
+      @apply rounded-chip-lg;
+    }
+  }
+}
+@layer components {
+  .tooltip {
+    @apply rounded-lg px-2.5 py-1.5;
+  }
+
+  .tooltip [data-slot="overlay-arrow"] path {
+    d: path("M0 0 L6 6 L12 0");
+  }
+}

package/dist/styles/index.d.ts

@@ -0,0 +1 @@
+declare module "@demodev-ui/react/styles";

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@demodev-ui/react",
+  "version": "1.0.2",
+  "type": "module",
+  "lint-staged": {
+    "*.{js,mjs,cjs,ts,mts,cts,jsx,tsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "*.css": [
+      "prettier --write",
+      "stylelint --fix"
+    ]
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "exports": {
+    "./styles": {
+      "types": "./dist/styles/index.d.ts",
+      "default": "./dist/styles/index.css"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@heroui/react": "3.0.1",
+    "@heroui/styles": "3.0.1",
+    "tailwindcss": "^4"
+  },
+  "devDependencies": {
+    "@heroui/react": "3.0.1",
+    "@heroui/styles": "3.0.1",
+    "@tsconfig/create-react-app": "^2.0.10",
+    "@types/react": "^19.2.5",
+    "@types/react-dom": "^19.2.3",
+    "tailwindcss": "^4.1.18",
+    "@demodev-ui/core": "^0.0.0"
+  },
+  "scripts": {
+    "build": "postcss src/styles/index.css -o dist/styles/index.css && cp src/styles/index.d.ts dist/styles/index.d.ts",
+    "lint-staged": "lint-staged"
+  }
+}