@nattstack/ui 0.0.30 → 0.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nattstack/ui",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "description": "A collection of reusable React components built with Base UI, TypeScript, and CSS Modules",
   "keywords": [
     "base-ui",
@@ -41,9 +41,9 @@
     "access": "public"
   },
   "scripts": {
-    "build": "tsup",
+    "build": "tsdown",
     "check:type": "tsc",
-    "dev": "tsup --watch",
+    "dev": "tsdown --watch",
     "prepublishOnly": "bun run build",
     "release": "bun publish"
   },
@@ -51,13 +51,14 @@
     "@base-ui/react": "1.4.0"
   },
   "devDependencies": {
+    "@tsdown/css": "0.21.8",
     "@types/bun": "1.3.12",
-    "@types/react": "19.2.14",
-    "tsup": "8.5.1",
+    "tsdown": "0.21.8",
     "typescript": "5.9.3"
   },
   "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "@types/react": "^18 || ^19",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19"
   }
 }

package/dist/components/button-spinner.module-T3OGVJS4.module.css

@@ -1,95 +0,0 @@
-.button_spinner {
-  position: relative;
-  width: var(--size);
-  height: var(--size);
-  scale: -1 1;
-  animation: spinner 1000ms steps(12, end) infinite;
-}
-
-@keyframes spinner {
-  to {
-    rotate: 1turn;
-  }
-}
-
-.button_spinner > div {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  width: calc(var(--size) / 2);
-  height: calc(var(--size) / 12);
-  pointer-events: none;
-  transform-origin: center left;
-  translate: 0 -50%;
-  transition: all 150ms;
-}
-
-.button_spinner > div::after {
-  position: absolute;
-  right: 0;
-  width: 50%;
-  height: 100%;
-  content: "";
-  background-color: currentColor;
-  border-radius: 9999px;
-}
-
-.button_spinner > div:nth-child(1) {
-  opacity: 1;
-  rotate: 0deg;
-}
-
-.button_spinner > div:nth-child(2) {
-  opacity: 0.925;
-  rotate: 30deg;
-}
-
-.button_spinner > div:nth-child(3) {
-  opacity: 0.85;
-  rotate: 60deg;
-}
-
-.button_spinner > div:nth-child(4) {
-  opacity: 0.775;
-  rotate: 90deg;
-}
-
-.button_spinner > div:nth-child(5) {
-  opacity: 0.7;
-  rotate: 120deg;
-}
-
-.button_spinner > div:nth-child(6) {
-  opacity: 0.625;
-  rotate: 150deg;
-}
-
-.button_spinner > div:nth-child(7) {
-  opacity: 0.55;
-  rotate: 180deg;
-}
-
-.button_spinner > div:nth-child(8) {
-  opacity: 0.475;
-  rotate: 210deg;
-}
-
-.button_spinner > div:nth-child(9) {
-  opacity: 0.4;
-  rotate: 240deg;
-}
-
-.button_spinner > div:nth-child(10) {
-  opacity: 0.325;
-  rotate: 270deg;
-}
-
-.button_spinner > div:nth-child(11) {
-  opacity: 0.25;
-  rotate: 300deg;
-}
-
-.button_spinner > div:nth-child(12) {
-  opacity: 0.15;
-  rotate: 330deg;
-}

package/dist/components/button.module-4EHK5C4W.module.css

@@ -1,183 +0,0 @@
-/* ===================================================== */
-/* Base */
-/* ===================================================== */
-.button {
-  align-items: safe center;
-  border-style: none;
-  column-gap: 8px;
-  cursor: pointer;
-  display: flex;
-  flex-shrink: 0;
-  font-family: var(--font-body);
-  font-size: 14px;
-  font-weight: 500;
-  height: var(--size-button);
-  justify-content: safe center;
-  line-height: 1.5;
-  outline-color: var(--color-primary-9);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: 0px;
-  overflow: hidden;
-  transition-duration: 150ms;
-  transition-property: background-color, opacity, translate;
-  user-select: none;
-}
-
-/* When pressed, move the button down */
-.button:active:not(:disabled),
-.button[aria-pressed="true"]:not(:disabled) {
-  translate: 0 1px;
-}
-
-/* When disabled, disable cursor and reduce opacity */
-.button:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-/* When keyboard focused, show outline */
-.button:focus-visible {
-  outline-width: 2px;
-}
-
-/* Icon size */
-.button > svg {
-  --size-icon: 20px;
-  height: var(--size-icon);
-  width: var(--size-icon);
-}
-
-/* ===================================================== */
-/* Icon only */
-/* ===================================================== */
-.button__icon_only {
-  width: var(--size-button) !important;
-  padding: 0 !important;
-}
-
-/* ===================================================== */
-/* Rounded */
-/* ===================================================== */
-.button__rounded_base {
-  border-radius: 12px;
-}
-
-.button__rounded_full {
-  border-radius: 9999px !important;
-}
-
-/* ===================================================== */
-/* Size */
-/* ===================================================== */
-.button__size_32 {
-  --size-button: 32px;
-  padding: 0 10px;
-  border-radius: 6px;
-}
-
-.button__size_36 {
-  --size-button: 36px;
-  padding: 0 12px;
-  border-radius: 8px;
-}
-
-.button__size_40 {
-  --size-button: 40px;
-  padding: 0 14px;
-  border-radius: 10px;
-}
-
-.button__size_44 {
-  --size-button: 44px;
-  padding: 0 16px;
-  border-radius: 12px;
-}
-
-.button__size_48 {
-  --size-button: 48px;
-  padding: 0 18px;
-  border-radius: 14px;
-}
-
-/* ===================================================== */
-/* Variant */
-/* ===================================================== */
-/* Ghost */
-.button__variant_ghost {
-  color: black;
-  background-color: transparent;
-}
-
-.button__variant_ghost:active:not(:disabled),
-.button__variant_ghost:hover:not(:disabled),
-.button__variant_ghost[aria-pressed="true"]:not(:disabled) {
-  background-color: var(--color-gray-3);
-}
-
-:global(.dark) .button__variant_ghost {
-  color: white;
-}
-
-/* Primary */
-.button__variant_primary {
-  color: white;
-  background-color: var(--color-primary-9);
-  background-image: linear-gradient(
-    to bottom,
-    color-mix(in oklab, transparent 100%, #ffffff 5%) 50%,
-    color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
-  );
-}
-
-.button__variant_primary:active:not(:disabled),
-.button__variant_primary:hover:not(:disabled),
-.button__variant_primary[aria-pressed="true"]:not(:disabled) {
-  background-color: color-mix(in oklab, var(--color-primary-9) 100%, #ffffff 10%);
-}
-
-:global(.dark) .button__variant_primary {
-  background-image: linear-gradient(
-    to bottom,
-    color-mix(in oklab, transparent 100%, #000000 0%) 50%,
-    color-mix(in oklab, transparent 100%, #000000 5%) 50%
-  );
-}
-
-/* Secondary */
-.button__variant_secondary {
-  color: black;
-  background-color: var(--color-gray-2);
-  background-image: linear-gradient(
-    to bottom,
-    color-mix(in oklab, transparent 100%, #000000 0%) 50%,
-    color-mix(in oklab, transparent 100%, #000000 2%) 50%
-  );
-  box-shadow: 0 0 0 1px var(--color-gray-4) inset;
-}
-
-.button__variant_secondary:active:not(:disabled),
-.button__variant_secondary:hover:not(:disabled),
-.button__variant_secondary[aria-pressed="true"]:not(:disabled) {
-  background-color: var(--color-gray-3);
-}
-
-:global(.dark) .button__variant_secondary {
-  color: white;
-  background-image: linear-gradient(
-    to bottom,
-    color-mix(in oklab, transparent 100%, #ffffff 1%) 50%,
-    color-mix(in oklab, transparent 100%, #ffffff 0%) 50%
-  );
-}
-
-/* ===================================================== */
-/* Width */
-/* ===================================================== */
-.button__width_base {
-  width: max-content; /* Fit the button content */
-}
-
-.button__width_full {
-  width: 100%;
-}

package/dist/components/column.module-A7QCVPFC.module.css

@@ -1,4 +0,0 @@
-.column {
-  display: flex;
-  flex-direction: column;
-}

package/dist/components/dialog-responsive-backdrop.module-O336AARV.module.css

@@ -1,27 +0,0 @@
-.dialog_responsive_backdrop {
-  --backdrop-opacity: 0.25;
-  background-color: black;
-  inset: 0;
-  opacity: calc(var(--backdrop-opacity) * (1 - var(--drawer-swipe-progress)));
-  outline-color: var(--color-primary-9);
-  position: fixed;
-  transition-duration: 150ms;
-  transition-property: opacity;
-}
-
-.dialog_responsive_backdrop[data-ending-style],
-.dialog_responsive_backdrop[data-starting-style] {
-  opacity: 0;
-}
-
-.dialog_responsive_backdrop[data-ending-style] {
-  transition-duration: calc(var(--drawer-swipe-strength) * 400ms);
-}
-
-.dialog_responsive_backdrop[data-swiping] {
-  transition-duration: 0ms;
-}
-
-:global(.dark) .dialog_responsive_backdrop {
-  --backdrop-opacity: 0.75;
-}

package/dist/components/dialog-responsive-bar.module-QCLP4IUN.module.css

@@ -1,14 +0,0 @@
-.dialog_responsive_bar {
-  background-color: var(--color-gray-4);
-  border-radius: 9999px;
-  display: none;
-  height: 4px;
-  margin: 12px auto;
-  width: 48px;
-}
-
-@media (max-width: 640px) {
-  .dialog_responsive_bar {
-    display: block;
-  }
-}

package/dist/components/dialog-responsive-popup.module-BOEQIHJ7.module.css

@@ -1,58 +0,0 @@
-.dialog_responsive_popup {
-  background-color: var(--color-gray-1);
-  border-radius: 16px;
-  cursor: auto;
-  display: flex;
-  flex-direction: column;
-  max-width: 640px;
-  outline-color: var(--color-primary-9);
-  outline-offset: -4px;
-  outline-style: solid;
-  outline-width: 0;
-  padding: 16px;
-  transition-duration: 150ms;
-  transition-property: opacity, transform;
-  width: 100%;
-  will-change: opacity, transform;
-}
-
-.dialog_responsive_popup:focus-visible {
-  outline-width: 2px;
-}
-
-/* Desktop */
-.dialog_responsive_popup[data-ending-style],
-.dialog_responsive_popup[data-starting-style] {
-  opacity: 0;
-  transform: scale(0.975);
-}
-
-.dialog_responsive_popup[data-swiping] {
-  user-select: none;
-}
-
-/* Mobile */
-@media (max-width: 640px) {
-  .dialog_responsive_popup {
-    --radius-mobile: 24px;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    border-top-left-radius: var(--radius-mobile);
-    border-top-right-radius: var(--radius-mobile);
-    padding-top: 0;
-    transform: translateY(var(--drawer-swipe-movement-y));
-    transition-duration: 450ms;
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
-  }
-
-  .dialog_responsive_popup[data-ending-style],
-  .dialog_responsive_popup[data-starting-style] {
-    opacity: 1;
-    transform: scale(1) translateY(100%);
-  }
-
-  .dialog_responsive_popup[data-ending-style] {
-    transition-duration: calc(var(--drawer-swipe-strength) * 300ms);
-  }
-}

package/dist/components/dialog-responsive-portal.module-YFVKMKVT.module.css

@@ -1,5 +0,0 @@
-.dialog_responsive_portal {
-  isolation: isolate;
-  position: relative;
-  z-index: 30;
-}

package/dist/components/dialog-responsive-viewport.module-LT7MZPLD.module.css

@@ -1,16 +0,0 @@
-.dialog_responsive_viewport {
-  align-items: safe center;
-  cursor: pointer;
-  display: flex;
-  inset: 0;
-  justify-content: safe center;
-  padding: 24px;
-  position: fixed;
-}
-
-@media (max-width: 640px) {
-  .dialog_responsive_viewport {
-    align-items: safe flex-end;
-    padding: 48px 0 0;
-  }
-}

package/dist/components/input.module-H5TWAPFX.module.css

@@ -1,97 +0,0 @@
-/* ===================================================== */
-/* Base */
-/* ===================================================== */
-.input {
-  appearance: none;
-  background-color: var(--color-bg-primary);
-  border-style: none;
-  box-shadow: 0 0 0 1px var(--color-border) inset;
-  color: var(--color-text-primary);
-  cursor: text;
-  font-family: var(--font-body);
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 1.5;
-  outline-color: transparent;
-  outline-offset: -2px;
-  outline-style: solid;
-  outline-width: 2px;
-  text-decoration: none;
-  transition-duration: 150ms;
-  transition-property: box-shadow, opacity;
-  width: 100%;
-}
-
-.input::placeholder {
-  color: var(--color-gray-9);
-  user-select: none;
-}
-
-.input:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.input:enabled:active,
-.input:enabled:focus,
-.input:enabled:hover,
-.input:enabled[data-is-active="true"] {
-  box-shadow: 0 0 0 1px var(--color-gray-6) inset;
-}
-
-.input[data-is-valid="true"] {
-  outline-color: #30a46c;
-}
-
-.input[data-is-invalid="true"] {
-  outline-color: #e5484d;
-}
-
-/* Focus overrides valid and invalid */
-.input:focus-visible {
-  outline-color: var(--color-outline);
-}
-
-/* ===================================================== */
-/* Rounded */
-/* ===================================================== */
-.input__rounded_base {
-  border-radius: 12px;
-}
-
-.input__rounded_full {
-  border-radius: 9999px;
-}
-
-/* ===================================================== */
-/* Size */
-/* ===================================================== */
-.input__size_32 {
-  border-radius: 8px;
-  min-height: 32px;
-  padding: 0 8px;
-}
-
-.input__size_36 {
-  border-radius: 10px;
-  min-height: 36px;
-  padding: 0 10px;
-}
-
-.input__size_40 {
-  border-radius: 12px;
-  min-height: 40px;
-  padding: 0 12px;
-}
-
-.input__size_44 {
-  border-radius: 14px;
-  min-height: 44px;
-  padding: 0 14px;
-}
-
-.input__size_48 {
-  border-radius: 16px;
-  min-height: 48px;
-  padding: 0 16px;
-}

package/dist/components/label.module-2UZDXZQ4.module.css

@@ -1,8 +0,0 @@
-/* ===================================================== */
-/* Base */
-/* ===================================================== */
-.label {
-  color: var(--color-text-secondary);
-  font-size: 14px;
-  width: fit-content;
-}

package/dist/components/row.module-GYNANRAY.module.css

@@ -1,4 +0,0 @@
-.row {
-  display: flex;
-  flex-direction: row;
-}

package/dist/components/spacer.module-ZYYYWYEB.module.css

@@ -1,3 +0,0 @@
-.spacer {
-  flex-shrink: 0;
-}

package/dist/components/switch.module-U6Q27QB5.module.css

@@ -1,62 +0,0 @@
-/* ===================================================== */
-/* Base */
-/* ===================================================== */
-.switch {
-  background-color: var(--color-gray-6);
-  border-radius: 9999px;
-  cursor: pointer;
-  display: flex;
-  outline-color: var(--color-primary-9);
-  outline-offset: 2px;
-  outline-style: solid;
-  outline-width: 0;
-  overflow: hidden;
-  padding: 2px;
-  transition-duration: 150ms;
-  transition-property: background-color;
-}
-
-.switch:focus-visible {
-  outline-width: 2px;
-}
-
-.switch[data-checked] {
-  background-color: var(--color-primary-9);
-}
-
-.switch[data-disabled] {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-/* ===================================================== */
-/* Thumb */
-/* ===================================================== */
-
-.switch__thumb {
-  height: 100%;
-  aspect-ratio: 1 / 1;
-  background-color: white;
-  border-radius: 9999px;
-  transition-duration: 150ms;
-  transition-property: transform;
-}
-
-.switch__thumb[data-checked] {
-  transform: translateX(var(--translateX));
-}
-
-/* ===================================================== */
-/* Size */
-/* ===================================================== */
-.switch__size_18 {
-  --translateX: 12px;
-  width: 30px;
-  height: 18px;
-}
-
-.switch__size_24 {
-  --translateX: 16px;
-  width: 40px;
-  height: 24px;
-}

package/dist/components/tabs-panel.module-VGH3G3KV.module.css

@@ -1,12 +0,0 @@
-.tabs_panel {
-  display: flex;
-  flex-direction: column;
-  outline-color: var(--color-primary-9);
-  outline-offset: -2px;
-  outline-style: solid;
-  outline-width: 0px;
-}
-
-.tabs_panel:focus-visible {
-  outline-width: 2px;
-}

package/dist/components/tabs-pill-indicator.module-533HMO7L.module.css

@@ -1,12 +0,0 @@
-.tabs_pill_indicator {
-  background-color: var(--color-gray-12);
-  border-radius: 12px;
-  height: var(--active-tab-height);
-  left: var(--active-tab-left);
-  position: absolute;
-  top: var(--active-tab-top);
-  transition-duration: 150ms;
-  transition-property: left, width;
-  width: var(--active-tab-width);
-  z-index: -1;
-}

package/dist/components/tabs-pill-list.module-KQW67ZSW.module.css

@@ -1,7 +0,0 @@
-.tabs_pill_list {
-  column-gap: 8px;
-  display: flex;
-  isolation: isolate;
-  overflow-x: auto;
-  position: relative;
-}