@jbpark/ui-kit 10.0.1 → 10.1.0

package/dist/style.css

@@ -95,12 +95,15 @@
     border-style: solid;
     border-width: 0;
   }
-  :where(button[data-slot], [data-slot] button, [data-slot] input, [data-slot] select, [data-slot] textarea) {
+  :where([data-slot], [data-slot] *):where(button, input, select, textarea) {
     appearance: none;
     color: inherit;
     font: inherit;
     background-color: #0000;
   }
+  :where([data-slot], [data-slot] *):where(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, dd, blockquote, figure, pre) {
+    margin: 0;
+  }
 }
 @layer components {
   :is([data-slot="button"], [data-slot="tag"])[data-color="blue"] {
@@ -298,6 +301,12 @@
   .inset-x-0 {
     inset-inline: 0px;
   }
+  .end-0 {
+    inset-inline-end: calc(var(--spacing) * 0);
+  }
+  .end-2 {
+    inset-inline-end: calc(var(--spacing) * 2);
+  }
   .top-0 {
     top: 0px;
   }
@@ -325,6 +334,9 @@
   .-bottom-2 {
     bottom: calc(var(--spacing) * -2);
   }
+  .bottom-0 {
+    bottom: 0px;
+  }
   .bottom-5 {
     bottom: calc(var(--spacing) * 5);
   }
@@ -343,6 +355,9 @@
   .isolate {
     isolation: isolate;
   }
+  .z-1 {
+    z-index: 1;
+  }
   .z-10 {
     z-index: 10;
   }
@@ -394,6 +409,9 @@
   .-mx-1 {
     margin-inline: calc(var(--spacing) * -1);
   }
+  .mx-2 {
+    margin-inline: calc(var(--spacing) * 2);
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -403,6 +421,12 @@
   .my-1 {
     margin-block: var(--spacing);
   }
+  .ms-2 {
+    margin-inline-start: calc(var(--spacing) * 2);
+  }
+  .me-2 {
+    margin-inline-end: calc(var(--spacing) * 2);
+  }
   .mt-0\.5 {
     margin-top: calc(var(--spacing) * 0.5);
   }
@@ -442,6 +466,9 @@
   .mr-9 {
     margin-right: calc(var(--spacing) * 9);
   }
+  .-mb-px {
+    margin-bottom: -1px;
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -505,6 +532,12 @@
   .table {
     display: table;
   }
+  .table-cell {
+    display: table-cell;
+  }
+  .table-row {
+    display: table-row;
+  }
   .field-sizing-content {
     field-sizing: content;
   }
@@ -523,6 +556,10 @@
     width: calc(var(--spacing) * 2.5);
     height: calc(var(--spacing) * 2.5);
   }
+  .size-3 {
+    width: calc(var(--spacing) * 3);
+    height: calc(var(--spacing) * 3);
+  }
   .size-3\.5 {
     width: calc(var(--spacing) * 3.5);
     height: calc(var(--spacing) * 3.5);
@@ -531,6 +568,10 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-5 {
+    width: calc(var(--spacing) * 5);
+    height: calc(var(--spacing) * 5);
+  }
   .size-5\! {
     width: calc(var(--spacing) * 5) !important;
     height: calc(var(--spacing) * 5) !important;
@@ -619,9 +660,15 @@
   .max-h-\(--available-height\) {
     max-height: var(--available-height);
   }
+  .max-h-60 {
+    max-height: calc(var(--spacing) * 60);
+  }
   .min-h-0 {
     min-height: 0px;
   }
+  .min-h-9 {
+    min-height: calc(var(--spacing) * 9);
+  }
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
@@ -652,6 +699,9 @@
   .w-15 {
     width: calc(var(--spacing) * 15);
   }
+  .w-16 {
+    width: calc(var(--spacing) * 16);
+  }
   .w-16\! {
     width: calc(var(--spacing) * 16) !important;
   }
@@ -718,9 +768,15 @@
   .max-w-7xl {
     max-width: var(--container-7xl);
   }
+  .max-w-40 {
+    max-width: calc(var(--spacing) * 40);
+  }
   .max-w-48 {
     max-width: calc(var(--spacing) * 48);
   }
+  .max-w-64 {
+    max-width: calc(var(--spacing) * 64);
+  }
   .max-w-\[calc\(100\%-2rem\)\] {
     max-width: calc(100% - 2rem);
   }
@@ -754,6 +810,18 @@
   .min-w-0 {
     min-width: 0px;
   }
+  .min-w-6 {
+    min-width: calc(var(--spacing) * 6);
+  }
+  .min-w-8 {
+    min-width: calc(var(--spacing) * 8);
+  }
+  .min-w-16 {
+    min-width: calc(var(--spacing) * 16);
+  }
+  .min-w-24 {
+    min-width: calc(var(--spacing) * 24);
+  }
   .min-w-80 {
     min-width: calc(var(--spacing) * 80);
   }
@@ -763,6 +831,9 @@
   .min-w-\[200px\] {
     min-width: 200px;
   }
+  .min-w-max {
+    min-width: max-content;
+  }
   .flex-1 {
     flex: 1;
   }
@@ -859,6 +930,12 @@
   .resize {
     resize: both;
   }
+  .scroll-py-6 {
+    scroll-padding-block: calc(var(--spacing) * 6);
+  }
+  .\[scrollbar-width\:none\] {
+    scrollbar-width: none;
+  }
   .list-disc {
     list-style-type: disc;
   }
@@ -982,9 +1059,15 @@
   .overflow-hidden {
     overflow: hidden;
   }
+  .overflow-x-auto {
+    overflow-x: auto;
+  }
   .overflow-y-auto {
     overflow-y: auto;
   }
+  .overflow-y-hidden {
+    overflow-y: hidden;
+  }
   .rounded {
     border-radius: .25rem;
   }
@@ -1077,6 +1160,10 @@
     border-style: var(--tw-border-style);
     border-width: 0px;
   }
+  .border-e {
+    border-inline-end-style: var(--tw-border-style);
+    border-inline-end-width: 1px;
+  }
   .border-r-2 {
     border-right-style: var(--tw-border-style);
     border-right-width: 2px;
@@ -1190,6 +1277,12 @@
   .bg-muted {
     background-color: var(--muted);
   }
+  .bg-muted\/50 {
+    background-color: var(--muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+    }
+  }
   .bg-popover {
     background-color: var(--popover);
   }
@@ -1253,6 +1346,9 @@
   .px-\(--cell-size\) {
     padding-inline: var(--cell-size);
   }
+  .px-0 {
+    padding-inline: 0px;
+  }
   .px-1 {
     padding-inline: var(--spacing);
   }
@@ -1292,6 +1388,9 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
   .py-4 {
     padding-block: calc(var(--spacing) * 4);
   }
@@ -1301,6 +1400,15 @@
   .py-16 {
     padding-block: calc(var(--spacing) * 16);
   }
+  .ps-2 {
+    padding-inline-start: calc(var(--spacing) * 2);
+  }
+  .pe-1 {
+    padding-inline-end: var(--spacing);
+  }
+  .pe-8 {
+    padding-inline-end: calc(var(--spacing) * 8);
+  }
   .pt-0 {
     padding-top: 0px;
   }
@@ -1337,6 +1445,9 @@
   .text-left {
     text-align: left;
   }
+  .text-right {
+    text-align: right;
+  }
   .text-start {
     text-align: start;
   }
@@ -1791,10 +1902,20 @@
   .last\:mt-0:last-child {
     margin-top: 0px;
   }
+  .last\:border-e-0:last-child {
+    border-inline-end-style: var(--tw-border-style);
+    border-inline-end-width: 0px;
+  }
   .last\:border-b-0:last-child {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 0px;
   }
+  .even\:bg-muted\/30:nth-child(even) {
+    background-color: var(--muted);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--muted) 30%, transparent);
+    }
+  }
   @media (hover: hover) {
     .hover\:border-current:hover {
       border-color: currentcolor;
@@ -1805,6 +1926,14 @@
     .hover\:bg-accent:hover {
       background-color: var(--accent);
     }
+    .hover\:bg-background\/70:hover {
+      background-color: var(--background);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-background\/70:hover {
+        background-color: color-mix(in oklab, var(--background) 70%, transparent);
+      }
+    }
     .hover\:bg-black\/5:hover {
       background-color: color-mix(in srgb, #000 5%, transparent);
     }
@@ -1829,6 +1958,14 @@
         background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
       }
     }
+    .hover\:bg-muted\/50:hover {
+      background-color: var(--muted);
+    }
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-muted\/50:hover {
+        background-color: color-mix(in oklab, var(--muted) 50%, transparent);
+      }
+    }
     .hover\:bg-muted\/80:hover {
       background-color: var(--muted);
     }
@@ -1903,9 +2040,20 @@
       outline-offset: 2px;
     }
   }
+  .focus-visible\:rounded-sm:focus-visible {
+    border-radius: calc(var(--radius) - 4px);
+  }
+  .focus-visible\:border-0:focus-visible {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .focus-visible\:border-ring:focus-visible {
     border-color: var(--ring);
   }
+  .focus-visible\:ring-0:focus-visible {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .focus-visible\:ring-1:focus-visible {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1941,6 +2089,13 @@
       outline-offset: 2px;
     }
   }
+  .focus-visible\:outline-2:focus-visible {
+    outline-style: var(--tw-outline-style);
+    outline-width: 2px;
+  }
+  .focus-visible\:outline-ring:focus-visible {
+    outline-color: var(--ring);
+  }
   .active\:bg-\(--btn-bg-active\):active {
     background-color: var(--btn-bg-active);
   }
@@ -1966,15 +2121,6 @@
       --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
     }
   }
-  .has-data-\[state\=checked\]\:border-primary:has([data-state="checked"]) {
-    border-color: var(--primary);
-  }
-  .has-data-\[state\=checked\]\:bg-primary\/5:has([data-state="checked"]) {
-    background-color: var(--primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--primary) 5%, transparent);
-    }
-  }
   .has-\[\:focus-visible\]\:ring-4:has(:is(:focus-visible)) {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2067,6 +2213,12 @@
   .aria-\[orientation\=vertical\]\:flex-col[aria-orientation="vertical"] {
     flex-direction: column;
   }
+  .data-active\:border-primary[data-active] {
+    border-color: var(--primary);
+  }
+  .data-active\:text-foreground[data-active] {
+    color: var(--foreground);
+  }
   .data-checked\:left-\[calc\(100\%-22px\)\][data-checked] {
     left: calc(100% - 22px);
   }
@@ -2278,6 +2430,12 @@
   .data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"] {
     width: 100%;
   }
+  .data-\[orientation\=vertical\]\:-mr-px[data-orientation="vertical"] {
+    margin-right: -1px;
+  }
+  .data-\[orientation\=vertical\]\:mb-0[data-orientation="vertical"] {
+    margin-bottom: 0px;
+  }
   .data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
     height: 100%;
   }
@@ -2299,6 +2457,27 @@
   .data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
     flex-direction: column;
   }
+  .data-\[orientation\=vertical\]\:flex-row[data-orientation="vertical"] {
+    flex-direction: row;
+  }
+  .data-\[orientation\=vertical\]\:justify-start[data-orientation="vertical"] {
+    justify-content: flex-start;
+  }
+  .data-\[orientation\=vertical\]\:border-r[data-orientation="vertical"] {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 1px;
+  }
+  .data-\[orientation\=vertical\]\:border-r-2[data-orientation="vertical"] {
+    border-right-style: var(--tw-border-style);
+    border-right-width: 2px;
+  }
+  .data-\[orientation\=vertical\]\:border-b-0[data-orientation="vertical"] {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0px;
+  }
+  .data-\[orientation\=vertical\]\:text-left[data-orientation="vertical"] {
+    text-align: left;
+  }
   .data-\[range-end\=true\]\:rounded-md[data-range-end="true"] {
     border-radius: calc(var(--radius) - 2px);
   }
@@ -2415,6 +2594,9 @@
     .sm\:max-w-lg {
       max-width: var(--container-lg);
     }
+    .sm\:max-w-sm {
+      max-width: var(--container-sm);
+    }
     .sm\:flex-row {
       flex-direction: row;
     }
@@ -2552,12 +2734,6 @@
       --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
     }
   }
-  .dark\:has-data-\[state\=checked\]\:bg-primary\/10:is(.dark *, [data-theme="dark"] *):has([data-state="checked"]) {
-    background-color: var(--primary);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--primary) 10%, transparent);
-    }
-  }
   .dark\:aria-invalid\:ring-destructive\/40:is(.dark *, [data-theme="dark"] *)[aria-invalid="true"] {
     --tw-ring-color: var(--destructive);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2795,6 +2971,9 @@
   .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']) {
     color: var(--muted-foreground);
   }
+  .\[\&\:\:-webkit-scrollbar\]\:hidden::-webkit-scrollbar {
+    display: none;
+  }
   .\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button {
     display: none;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "10.0.1",
+  "version": "10.1.0",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Base UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",
@@ -69,6 +69,21 @@
       "import": "./dist/Card.mjs",
       "default": "./dist/Card.mjs"
     },
+    "./Breadcrumb": {
+      "types": "./dist/Breadcrumb.d.mts",
+      "import": "./dist/Breadcrumb.mjs",
+      "default": "./dist/Breadcrumb.mjs"
+    },
+    "./Pagination": {
+      "types": "./dist/Pagination.d.mts",
+      "import": "./dist/Pagination.mjs",
+      "default": "./dist/Pagination.mjs"
+    },
+    "./Table": {
+      "types": "./dist/Table.d.mts",
+      "import": "./dist/Table.mjs",
+      "default": "./dist/Table.mjs"
+    },
     "./Space": {
       "types": "./dist/Space.d.mts",
       "import": "./dist/Space.mjs",
@@ -141,7 +156,7 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@gsap/react": "^2.1.2",
-    "@jbpark/use-hooks": "^4.0.1",
+    "@jbpark/use-hooks": "^4.1.0",
     "@tiptap/core": "^3.30.1",
     "@tiptap/extension-placeholder": "^3.30.1",
     "@tiptap/extension-text-style": "^3.30.1",