@jbpark/ui-kit 6.0.1 → 6.2.0

package/dist/style.css

@@ -149,6 +149,45 @@
   [data-slot="button"][data-color="gold"] {
     --btn-bg: #f59e0b;
   }
+  [data-slot="badge"][data-color="blue"] {
+    --tag-bg: #3b82f6;
+  }
+  [data-slot="badge"][data-color="purple"] {
+    --tag-bg: #a855f7;
+  }
+  [data-slot="badge"][data-color="cyan"] {
+    --tag-bg: #06b6d4;
+  }
+  [data-slot="badge"][data-color="green"] {
+    --tag-bg: #22c55e;
+  }
+  [data-slot="badge"][data-color="magenta"] {
+    --tag-bg: #d946ef;
+  }
+  [data-slot="badge"][data-color="pink"] {
+    --tag-bg: #ec4899;
+  }
+  [data-slot="badge"][data-color="red"] {
+    --tag-bg: #ef4444;
+  }
+  [data-slot="badge"][data-color="orange"] {
+    --tag-bg: #f97316;
+  }
+  [data-slot="badge"][data-color="yellow"] {
+    --tag-bg: #eab308;
+  }
+  [data-slot="badge"][data-color="volcano"] {
+    --tag-bg: #ea580c;
+  }
+  [data-slot="badge"][data-color="geekblue"] {
+    --tag-bg: #6366f1;
+  }
+  [data-slot="badge"][data-color="lime"] {
+    --tag-bg: #84cc16;
+  }
+  [data-slot="badge"][data-color="gold"] {
+    --tag-bg: #f59e0b;
+  }
   [data-slot="col"] {
     flex-basis: calc(var(--col-span-xs) / 24 * 100%);
     max-width: calc(var(--col-span-xs) / 24 * 100%);
@@ -786,6 +825,9 @@
   .cursor-pointer {
     cursor: pointer;
   }
+  .touch-none {
+    touch-action: none;
+  }
   .resize {
     resize: both;
   }
@@ -1033,6 +1075,9 @@
   .border-\(--btn-border\) {
     border-color: var(--btn-border);
   }
+  .border-\(--tag-bg\) {
+    border-color: var(--tag-bg);
+  }
   .border-\[color-mix\(in_oklch\,var\(--btn-border\)\,transparent_50\%\)\] {
     border-color: var(--btn-border);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1072,6 +1117,12 @@
   .bg-\(--btn-bg\) {
     background-color: var(--btn-bg);
   }
+  .bg-\[color-mix\(in_oklch\,var\(--tag-bg\)\,transparent_90\%\)\] {
+    background-color: var(--tag-bg);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklch,var(--tag-bg),transparent 90%);
+    }
+  }
   .bg-accent {
     background-color: var(--accent);
   }
@@ -1120,6 +1171,9 @@
   .bg-inherit {
     background-color: inherit;
   }
+  .bg-input {
+    background-color: var(--input);
+  }
   .bg-muted {
     background-color: var(--muted);
   }
@@ -1361,6 +1415,9 @@
   .text-\(--btn-fg\) {
     color: var(--btn-fg);
   }
+  .text-\(--tag-bg\) {
+    color: var(--tag-bg);
+  }
   .text-accent-foreground {
     color: var(--accent-foreground);
   }
@@ -1467,6 +1524,12 @@
     --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);
   }
+  .ring-ring\/50 {
+    --tw-ring-color: var(--ring);
+    @supports (color: color-mix(in lab, red, red)) {
+      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
   .ring-offset-background {
     --tw-ring-offset-color: var(--background);
   }
@@ -1979,6 +2042,10 @@
     .hover\:opacity-100:hover {
       opacity: 100%;
     }
+    .hover\:ring-4:hover {
+      --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);
+    }
   }
   .focus\:bg-accent:focus {
     background-color: var(--accent);
@@ -2012,6 +2079,10 @@
     --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);
   }
+  .focus-visible\:ring-4: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);
+  }
   .focus-visible\:ring-\[3px\]:focus-visible {
     --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);
@@ -2163,6 +2234,9 @@
   .data-\[disabled\]\:pointer-events-none[data-disabled] {
     pointer-events: none;
   }
+  .data-\[disabled\]\:cursor-not-allowed[data-disabled] {
+    cursor: not-allowed;
+  }
   .data-\[disabled\]\:opacity-50[data-disabled] {
     opacity: 50%;
   }
@@ -2172,6 +2246,12 @@
   .data-\[invalid\=true\]\:text-destructive[data-invalid="true"] {
     color: var(--destructive);
   }
+  .data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"] {
+    height: calc(var(--spacing) * 1.5);
+  }
+  .data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"] {
+    height: 100%;
+  }
   .data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"] {
     height: 1px;
   }
@@ -2181,9 +2261,24 @@
   .data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"] {
     height: 100%;
   }
+  .data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"] {
+    min-height: calc(var(--spacing) * 44);
+  }
+  .data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"] {
+    width: calc(var(--spacing) * 1.5);
+  }
+  .data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"] {
+    width: auto;
+  }
+  .data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"] {
+    width: 100%;
+  }
   .data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"] {
     width: 1px;
   }
+  .data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"] {
+    flex-direction: column;
+  }
   .data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
     color: var(--muted-foreground);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "6.0.1",
+  "version": "6.2.0",
   "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
   "keywords": [
     "react",
@@ -140,6 +140,7 @@
     "@radix-ui/react-radio-group": "^1.4.7",
     "@radix-ui/react-select": "^2.3.7",
     "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slider": "^1.4.7",
     "@radix-ui/react-slot": "^1.3.3",
     "@radix-ui/react-switch": "^1.3.7",
     "class-variance-authority": "^0.7.1",