@tomny-dev/uzi 0.3.0 → 0.4.0

package/dist/style.css

@@ -2673,4 +2673,536 @@ button.uzi-sidebar-nav-module__item__uMHkJ {
 .uzi-auth-pages-module__backLink__ezB3X:hover {
   text-decoration: underline;
 }
+.uzi-data-table-module__wrapper__7521u {
+  width: 100%;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.uzi-data-table-module__tableContainer__BJcbK {
+  width: 100%;
+  overflow-x: auto;
+}
+
+.uzi-data-table-module__table__Mv5vN {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+  text-align: left;
+  color: var(--foreground);
+}
+
+.uzi-data-table-module__thead__dWIBv {
+  border-bottom: 2px solid var(--border);
+}
+
+.uzi-data-table-module__headerCell__kwwWs {
+  padding: 0.75rem 1rem;
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--muted-foreground);
+  white-space: nowrap;
+  vertical-align: bottom;
+  border-bottom: 2px solid var(--border);
+}
+
+.uzi-data-table-module__headerCellFixed__8WRi5 {
+  white-space: nowrap;
+}
+
+.uzi-data-table-module__alignLeft__Kwz-k {
+  text-align: left;
+}
+
+.uzi-data-table-module__alignCenter__BxT33 {
+  text-align: center;
+}
+
+.uzi-data-table-module__alignRight__B3fd1 {
+  text-align: right;
+}
+
+.uzi-data-table-module__sortableHeader__aAEjv {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  background: none;
+  border: none;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.uzi-data-table-module__clickableHeader__8F9R3 {
+  cursor: pointer;
+}
+
+.uzi-data-table-module__clickableHeader__8F9R3:hover {
+  color: var(--foreground);
+}
+
+.uzi-data-table-module__clickableHeader__8F9R3:focus-visible {
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
+}
+
+.uzi-data-table-module__headerLabel__bsfii {
+  font: inherit;
+}
+
+.uzi-data-table-module__sortIcon__nAsRD {
+  font-size: 0.7rem;
+  opacity: 0.4;
+  user-select: none;
+}
+
+.uzi-data-table-module__tbody__yWSPd {
+  border-top: 1px solid var(--border);
+}
+
+.uzi-data-table-module__row__im568 {
+  border-bottom: 1px solid var(--border);
+  transition: background-color 0.12s ease;
+}
+
+.uzi-data-table-module__row__im568:hover {
+  background-color: var(--muted);
+}
+
+.uzi-data-table-module__rowSelected__U91El {
+  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
+}
+
+.uzi-data-table-module__cell__I2qYk {
+  padding: 0.75rem 1rem;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.uzi-data-table-module__checkbox__XHo0c {
+  width: 1rem;
+  height: 1rem;
+  accent-color: var(--primary);
+  cursor: pointer;
+  border-radius: 4px;
+}
+
+.uzi-data-table-module__loadingCell__YOsVj {
+  padding: 2rem 1rem;
+  text-align: center;
+}
+
+.uzi-data-table-module__loadingRow__TONNo {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  opacity: 0.6;
+}
+
+.uzi-data-table-module__skeletonBar__JTU6c {
+  height: 0.75rem;
+  border-radius: 4px;
+  background: linear-gradient(90deg, var(--muted) 25%, var(--secondary) 50%, var(--muted) 75%);
+  background-size: 200% 100%;
+  animation: uzi-data-table-module__shimmer__30BeV 1.5s infinite;
+}
+
+@keyframes uzi-data-table-module__shimmer__30BeV {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+
+.uzi-data-table-module__emptyCell__CNH4t {
+  padding: 2rem 1rem;
+  text-align: center;
+  color: var(--muted-foreground);
+  font-style: italic;
+}
+
+.uzi-data-table-module__rowActions__NV6Ag {
+  display: inline-flex;
+  gap: 0.5rem;
+}
+
+.uzi-data-table-module__actionBtn__78gdR {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  background: none;
+  border: none;
+  color: var(--muted-foreground);
+  cursor: pointer;
+  font-size: 0.8rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  transition: color 0.12s, background-color 0.12s;
+}
+
+.uzi-data-table-module__actionBtn__78gdR:hover {
+  color: var(--foreground);
+  background-color: var(--muted);
+}
+
+.uzi-data-table-module__actionBtn__78gdR:focus-visible {
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
+}
+
+.uzi-data-table-module__pagination__qOgpw {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--border);
+  font-size: 0.8rem;
+  color: var(--muted-foreground);
+}
+
+.uzi-data-table-module__paginationButtons__v64jr {
+  display: inline-flex;
+  gap: 0.25rem;
+}
+
+.uzi-data-table-module__pageBtn__gdLj2 {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--background);
+  color: var(--foreground);
+  cursor: pointer;
+  font-size: 0.85rem;
+  transition: background-color 0.12s, border-color 0.12s;
+}
+
+.uzi-data-table-module__pageBtn__gdLj2:hover:not(:disabled) {
+  background-color: var(--muted);
+  border-color: var(--accent);
+}
+
+.uzi-data-table-module__pageBtn__gdLj2:focus-visible {
+  outline: var(--focus-ring);
+  outline-offset: var(--focus-ring-offset);
+}
+
+.uzi-data-table-module__pageBtn__gdLj2:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.uzi-settings-page-module__wrapper__G7OOt {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: var(--background);
+  color: var(--foreground);
+}
+
+.uzi-settings-page-module__header__ao-nv {
+  padding: 2rem 2rem 0;
+  flex-shrink: 0;
+}
+
+.uzi-settings-page-module__headerContent__xwP9V {
+  max-width: 64rem;
+  margin: 0 auto;
+}
+
+.uzi-settings-page-module__title__anF9l {
+  margin: 0 0 0.25rem;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--foreground);
+  line-height: 1.3;
+}
+
+.uzi-settings-page-module__description__Qw6EQ {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--muted-foreground);
+  line-height: 1.5;
+}
+
+.uzi-settings-page-module__content__MBz6q {
+  flex: 1;
+  padding: 1.5rem 2rem 6rem;
+  max-width: 64rem;
+  margin: 0 auto;
+  width: 100%;
+  overflow-y: auto;
+}
+
+.uzi-settings-page-module__sections__HV2n4 {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.uzi-settings-page-module__section__Vjoe3 {
+  border-bottom: 1px solid var(--border);
+  padding-bottom: 1.5rem;
+}
+
+.uzi-settings-page-module__section__Vjoe3:last-of-type {
+  border-bottom: none;
+}
+
+.uzi-settings-page-module__sectionHeader__XiOWN {
+  margin-bottom: 1.25rem;
+}
+
+.uzi-settings-page-module__sectionTitle__bN5lO {
+  margin: 0 0 0.25rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--foreground);
+}
+
+.uzi-settings-page-module__sectionDescription__3wjhy {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--muted-foreground);
+  line-height: 1.5;
+}
+
+.uzi-settings-page-module__sectionBody__zraHK {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+}
+
+.uzi-settings-page-module__dangerZone__GD8XX {
+  margin-top: 2rem;
+  border: 1px solid var(--ts-danger-border, var(--destructive));
+  border-radius: 8px;
+  background: var(--ts-danger-bg, color-mix(in srgb, var(--destructive) 8%, transparent));
+  padding: 1.5rem;
+}
+
+.uzi-settings-page-module__dangerZoneHeader__2d3R1 {
+  margin-bottom: 1rem;
+}
+
+.uzi-settings-page-module__dangerZoneTitle__ljU2k {
+  margin: 0 0 0.25rem;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--ts-danger-text, var(--destructive));
+}
+
+.uzi-settings-page-module__dangerZoneDescription__Z3Ohe {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--muted-foreground);
+  line-height: 1.5;
+}
+
+.uzi-settings-page-module__dangerZoneBody__zAQbu {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.uzi-settings-page-module__footer__dO4Xo {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border-top: 1px solid var(--border);
+  background: var(--background);
+  z-index: 10;
+  padding: 0.75rem 2rem;
+}
+
+.uzi-settings-page-module__footerContent__pPOdb {
+  max-width: 64rem;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+}
+
+.uzi-settings-page-module__savingIndicator__ujaC5 {
+  font-size: 0.85rem;
+  color: var(--muted-foreground);
+}
+
+@media (max-width: 48rem) {
+  .uzi-settings-page-module__header__ao-nv {
+    padding: 1.5rem 1rem 0;
+  }
+
+  .uzi-settings-page-module__content__MBz6q {
+    padding: 1rem 1rem 6rem;
+  }
+
+  .uzi-settings-page-module__footer__dO4Xo {
+    padding: 0.75rem 1rem;
+  }
+
+  .uzi-settings-page-module__footerContent__pPOdb {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0.5rem;
+  }
+}
+.uzi-error-page-module__layout__OVDE8 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  min-height: 100dvh;
+  padding: 24px;
+  background: var(--background);
+}
+
+.uzi-error-page-module__card__2veSo {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  max-width: 40rem;
+  padding: 3rem 2rem;
+}
+
+.uzi-error-page-module__icon__vJy8E {
+  color: var(--muted-foreground);
+}
+
+.uzi-error-page-module__iconSvg__h4u4V {
+  width: 4rem;
+  height: 4rem;
+  stroke-width: 1.5;
+}
+
+.uzi-error-page-module__statusCode__Ub40l {
+  font-size: 6rem;
+  font-weight: 700;
+  line-height: 1;
+  color: var(--muted-foreground);
+  letter-spacing: -0.04em;
+}
+
+.uzi-error-page-module__content__b2dAY {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+}
+
+.uzi-error-page-module__title__8iioy {
+  margin: 0;
+  font-size: 1.5rem;
+  font-weight: 600;
+  color: var(--foreground);
+  line-height: 1.3;
+}
+
+.uzi-error-page-module__subtitle__NVk-v {
+  margin: 0;
+  font-size: 1rem;
+  color: var(--muted-foreground);
+  line-height: 1.6;
+  max-width: 32rem;
+}
+
+.uzi-error-page-module__action__iX5fQ {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+}
+
+@media (max-width: 48rem) {
+  .uzi-error-page-module__statusCode__Ub40l {
+    font-size: 4rem;
+  }
+
+  .uzi-error-page-module__title__8iioy {
+    font-size: 1.25rem;
+  }
+
+  .uzi-error-page-module__card__2veSo {
+    padding: 2rem 1.5rem;
+  }
+}
+.uzi-empty-state-page-module__wrapper__3f-kg {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  min-height: 100dvh;
+  padding: 24px;
+  background: var(--background);
+}
+
+.uzi-empty-state-page-module__card__vcQUh {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.5rem;
+  max-width: 28rem;
+  width: 100%;
+  padding: 2.5rem 2rem;
+  border-radius: var(--ts-card-radius, 12px);
+  border: 1px solid var(--ts-card-border, var(--border));
+  background: var(--ts-card-bg, var(--card));
+  box-shadow: var(--ts-card-shadow, 0 16px 36px rgba(0, 0, 0, 0.28));
+  color: var(--ts-card-fg, var(--foreground));
+  text-align: center;
+}
+
+.uzi-empty-state-page-module__iconArea__xpt5d {
+  display: grid;
+  place-items: center;
+  color: var(--muted-foreground);
+}
+
+.uzi-empty-state-page-module__iconSvg__1TzoN {
+  width: 3.5rem;
+  height: 3.5rem;
+  stroke-width: 1.5;
+}
+
+.uzi-empty-state-page-module__content__OjvBh {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.uzi-empty-state-page-module__title__nvFC7 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--foreground);
+  line-height: 1.3;
+}
+
+.uzi-empty-state-page-module__description__GqDMs {
+  margin: 0;
+  font-size: 0.9rem;
+  color: var(--muted-foreground);
+  line-height: 1.6;
+}
+
+.uzi-empty-state-page-module__actions__ojrjI {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 0.625rem;
+}
+
+@media (max-width: 48rem) {
+  .uzi-empty-state-page-module__card__vcQUh {
+    padding: 2rem 1.5rem;
+  }
+}
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomny-dev/uzi",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Rapid-fire React UI components. Ship faster, build more.",
   "type": "module",
   "repository": {
@@ -48,6 +48,8 @@
     "dev": "vite build --watch",
     "lint": "tsc --noEmit",
     "test": "vitest run",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "verify:package": "node scripts/verify-client-boundary.mjs"
   },
   "peerDependencies": {
@@ -63,12 +65,18 @@
     "@radix-ui/react-toast": "^1.2.15"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-links": "^8.6.18",
+    "@storybook/addon-storysource": "^8.6.14",
+    "@storybook/react": "8",
+    "@storybook/react-vite": "^8.6.18",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^5.2.0",
     "jsdom": "^29.1.1",
+    "storybook": "^8.6.18",
     "typescript": "^5.4.3",
     "vite": "^8.0.0",
     "vite-plugin-css-injected-by-js": "^5.0.1",