@jbpark/ui-kit 10.1.0 → 10.2.0

package/dist/style.css

@@ -12,6 +12,7 @@
     --color-yellow-400: oklch(85.2% .199 91.936);
     --color-yellow-500: oklch(79.5% .184 86.047);
     --color-yellow-600: oklch(68.1% .162 75.834);
+    --color-yellow-700: oklch(55.4% .135 66.442);
     --color-lime-500: oklch(76.8% .233 130.85);
     --color-green-400: oklch(79.2% .209 151.711);
     --color-green-500: oklch(72.3% .219 149.579);
@@ -205,6 +206,49 @@
   :is(.dark, [data-theme="dark"]) [data-slot="tag"][data-color="warning"] {
     --tag-fg: var(--color-yellow-400);
   }
+  [data-slot="alert"] {
+    color: var(--foreground);
+    border-color: var(--alert-accent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklch, var(--alert-accent), transparent 55%);
+    }
+    background-color: var(--background);
+  }
+  [data-slot="alert"][data-variant="filled"] {
+    background-color: var(--alert-accent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab,
+      var(--alert-accent) 10%,
+      var(--background));
+    }
+  }
+  [data-slot="alert"] > [aria-hidden="true"] {
+    color: var(--alert-accent);
+  }
+  [data-slot="alert"][data-status="info"] {
+    --alert-accent: var(--color-blue-600);
+  }
+  [data-slot="alert"][data-status="success"] {
+    --alert-accent: var(--color-green-600);
+  }
+  [data-slot="alert"][data-status="warning"] {
+    --alert-accent: var(--color-yellow-700);
+  }
+  [data-slot="alert"][data-status="error"] {
+    --alert-accent: var(--destructive);
+  }
+  :is(.dark, [data-theme="dark"]) [data-slot="alert"][data-status="info"] {
+    --alert-accent: var(--color-blue-400);
+  }
+  :is(.dark, [data-theme="dark"]) [data-slot="alert"][data-status="success"] {
+    --alert-accent: var(--color-green-400);
+  }
+  :is(.dark, [data-theme="dark"]) [data-slot="alert"][data-status="warning"] {
+    --alert-accent: var(--color-yellow-400);
+  }
+  :is(.dark, [data-theme="dark"]) [data-slot="alert"][data-status="error"] {
+    --alert-accent: var(--color-red-400);
+  }
   [data-slot="col"] {
     flex-basis: calc(var(--col-span-xs) / 24 * 100%);
     max-width: calc(var(--col-span-xs) / 24 * 100%);
@@ -412,6 +456,9 @@
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
+  .mx-3 {
+    margin-inline: calc(var(--spacing) * 3);
+  }
   .mx-auto {
     margin-inline: auto;
   }
@@ -421,9 +468,15 @@
   .my-1 {
     margin-block: var(--spacing);
   }
+  .my-2 {
+    margin-block: calc(var(--spacing) * 2);
+  }
   .ms-2 {
     margin-inline-start: calc(var(--spacing) * 2);
   }
+  .ms-3\.5 {
+    margin-inline-start: calc(var(--spacing) * 3.5);
+  }
   .me-2 {
     margin-inline-end: calc(var(--spacing) * 2);
   }
@@ -439,6 +492,9 @@
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
+  .mt-3\.5 {
+    margin-top: calc(var(--spacing) * 3.5);
+  }
   .mt-4 {
     margin-top: calc(var(--spacing) * 4);
   }
@@ -469,6 +525,9 @@
   .-mb-px {
     margin-bottom: -1px;
   }
+  .mb-1\.5 {
+    margin-bottom: calc(var(--spacing) * 1.5);
+  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -548,6 +607,10 @@
     width: var(--cell-size);
     height: var(--cell-size);
   }
+  .size-1\/2 {
+    width: calc(1 / 2 * 100%);
+    height: calc(1 / 2 * 100%);
+  }
   .size-2 {
     width: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 2);
@@ -584,6 +647,10 @@
     width: calc(var(--spacing) * 6) !important;
     height: calc(var(--spacing) * 6) !important;
   }
+  .size-7 {
+    width: calc(var(--spacing) * 7);
+    height: calc(var(--spacing) * 7);
+  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -600,6 +667,14 @@
     width: calc(var(--spacing) * 10);
     height: calc(var(--spacing) * 10);
   }
+  .size-12 {
+    width: calc(var(--spacing) * 12);
+    height: calc(var(--spacing) * 12);
+  }
+  .size-full {
+    width: 100%;
+    height: 100%;
+  }
   .h-\(--cell-size\) {
     height: var(--cell-size);
   }
@@ -618,6 +693,9 @@
   .h-6\! {
     height: calc(var(--spacing) * 6) !important;
   }
+  .h-7 {
+    height: calc(var(--spacing) * 7);
+  }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
@@ -654,6 +732,9 @@
   .h-full {
     height: 100%;
   }
+  .h-full\! {
+    height: 100% !important;
+  }
   .h-px {
     height: 1px;
   }
@@ -666,9 +747,21 @@
   .min-h-0 {
     min-height: 0px;
   }
+  .min-h-5 {
+    min-height: calc(var(--spacing) * 5);
+  }
+  .min-h-7 {
+    min-height: calc(var(--spacing) * 7);
+  }
+  .min-h-8 {
+    min-height: calc(var(--spacing) * 8);
+  }
   .min-h-9 {
     min-height: calc(var(--spacing) * 9);
   }
+  .min-h-10 {
+    min-height: calc(var(--spacing) * 10);
+  }
   .min-h-16 {
     min-height: calc(var(--spacing) * 16);
   }
@@ -810,6 +903,12 @@
   .min-w-0 {
     min-width: 0px;
   }
+  .min-w-3 {
+    min-width: calc(var(--spacing) * 3);
+  }
+  .min-w-5 {
+    min-width: calc(var(--spacing) * 5);
+  }
   .min-w-6 {
     min-width: calc(var(--spacing) * 6);
   }
@@ -868,6 +967,10 @@
     --tw-translate-x: 0px !important;
     translate: var(--tw-translate-x) var(--tw-translate-y) !important;
   }
+  .translate-x-1\/2 {
+    --tw-translate-x: calc(1 / 2 * 100%);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-x-2 {
     --tw-translate-x: calc(var(--spacing) * 2);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -880,6 +983,10 @@
     --tw-translate-y: calc(calc(1 / 2 * 100%) * -1) !important;
     translate: var(--tw-translate-x) var(--tw-translate-y) !important;
   }
+  .-translate-y-1\/2 {
+    --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .translate-y-0\.5 {
     --tw-translate-y: calc(var(--spacing) * 0.5);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1014,6 +1121,9 @@
   .gap-2 {
     gap: calc(var(--spacing) * 2);
   }
+  .gap-2\.5 {
+    gap: calc(var(--spacing) * 2.5);
+  }
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
@@ -1208,6 +1318,9 @@
   .border-current {
     border-color: currentcolor;
   }
+  .border-destructive {
+    border-color: var(--destructive);
+  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
@@ -1268,6 +1381,9 @@
   .bg-gray-100 {
     background-color: var(--color-gray-100);
   }
+  .bg-green-600 {
+    background-color: var(--color-green-600);
+  }
   .bg-inherit {
     background-color: inherit;
   }
@@ -1307,6 +1423,9 @@
   .bg-white {
     background-color: var(--color-white);
   }
+  .bg-yellow-500 {
+    background-color: var(--color-yellow-500);
+  }
   .fill-border {
     fill: var(--border);
   }
@@ -1358,6 +1477,9 @@
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
+  .px-2\! {
+    padding-inline: calc(var(--spacing) * 2) !important;
+  }
   .px-2\.5 {
     padding-inline: calc(var(--spacing) * 2.5);
   }
@@ -1451,6 +1573,9 @@
   .text-start {
     text-align: start;
   }
+  .align-middle {
+    vertical-align: middle;
+  }
   .font-mono {
     font-family: var(--ui-font-mono, var(--font-geist-mono));
   }
@@ -1548,6 +1673,9 @@
   .text-background {
     color: var(--background);
   }
+  .text-black {
+    color: var(--color-black);
+  }
   .text-blue-400 {
     color: var(--color-blue-400);
   }
@@ -1602,6 +1730,10 @@
   .italic {
     font-style: italic;
   }
+  .tabular-nums {
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
   .underline {
     text-decoration-line: underline;
   }
@@ -1916,6 +2048,19 @@
       background-color: color-mix(in oklab, var(--muted) 30%, transparent);
     }
   }
+  .focus-within\:border-ring:focus-within {
+    border-color: var(--ring);
+  }
+  .focus-within\:ring-\[3px\]:focus-within {
+    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + 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-within\:ring-ring\/50:focus-within {
+    --tw-ring-color: var(--ring);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
   @media (hover: hover) {
     .hover\:border-current:hover {
       border-color: currentcolor;
@@ -2259,12 +2404,18 @@
   .data-ending-style\:opacity-0[data-ending-style] {
     opacity: 0%;
   }
+  .data-error\:invisible[data-error] {
+    visibility: hidden;
+  }
   .data-highlighted\:bg-accent[data-highlighted] {
     background-color: var(--accent);
   }
   .data-highlighted\:text-accent-foreground[data-highlighted] {
     color: var(--accent-foreground);
   }
+  .data-loading\:invisible[data-loading] {
+    visibility: hidden;
+  }
   .data-open\:bg-accent[data-open] {
     background-color: var(--accent);
   }
@@ -2274,6 +2425,16 @@
   .data-placeholder\:text-muted-foreground[data-placeholder] {
     color: var(--muted-foreground);
   }
+  .data-pressed\:bg-background[data-pressed] {
+    background-color: var(--background);
+  }
+  .data-pressed\:text-foreground[data-pressed] {
+    color: var(--foreground);
+  }
+  .data-pressed\:shadow-xs[data-pressed] {
+    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .data-separator-active\:bg-border[data-separator-active] {
     background-color: var(--border);
   }
@@ -2695,6 +2856,10 @@
       align-items: flex-start;
     }
   }
+  .rtl\:-translate-x-1\/2:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+    --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .dark\:border-input:is(.dark *, [data-theme="dark"] *) {
     border-color: var(--input);
   }
@@ -2704,6 +2869,9 @@
       background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
     }
   }
+  .dark\:bg-green-500:is(.dark *, [data-theme="dark"] *) {
+    background-color: var(--color-green-500);
+  }
   .dark\:bg-input\/30:is(.dark *, [data-theme="dark"] *) {
     background-color: var(--input);
     @supports (color: color-mix(in lab, red, red)) {
@@ -3211,6 +3379,26 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-ordinal {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-slashed-zero {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-figure {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-spacing {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-numeric-fraction {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -3382,6 +3570,11 @@
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-ordinal: initial;
+      --tw-slashed-zero: initial;
+      --tw-numeric-figure: initial;
+      --tw-numeric-spacing: initial;
+      --tw-numeric-fraction: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "10.1.0",
+  "version": "10.2.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",
@@ -44,6 +44,21 @@
       "import": "./dist/index.mjs",
       "default": "./dist/index.mjs"
     },
+    "./Avatar": {
+      "types": "./dist/Avatar.d.mts",
+      "import": "./dist/Avatar.mjs",
+      "default": "./dist/Avatar.mjs"
+    },
+    "./Badge": {
+      "types": "./dist/Badge.d.mts",
+      "import": "./dist/Badge.mjs",
+      "default": "./dist/Badge.mjs"
+    },
+    "./Segmented": {
+      "types": "./dist/Segmented.d.mts",
+      "import": "./dist/Segmented.mjs",
+      "default": "./dist/Segmented.mjs"
+    },
     "./Typography": {
       "types": "./dist/Typography.d.mts",
       "import": "./dist/Typography.mjs",
@@ -69,11 +84,21 @@
       "import": "./dist/Card.mjs",
       "default": "./dist/Card.mjs"
     },
+    "./Alert": {
+      "types": "./dist/Alert.d.mts",
+      "import": "./dist/Alert.mjs",
+      "default": "./dist/Alert.mjs"
+    },
     "./Breadcrumb": {
       "types": "./dist/Breadcrumb.d.mts",
       "import": "./dist/Breadcrumb.mjs",
       "default": "./dist/Breadcrumb.mjs"
     },
+    "./Steps": {
+      "types": "./dist/Steps.d.mts",
+      "import": "./dist/Steps.mjs",
+      "default": "./dist/Steps.mjs"
+    },
     "./Pagination": {
       "types": "./dist/Pagination.d.mts",
       "import": "./dist/Pagination.mjs",