@jbpark/ui-kit 2.3.4 → 2.5.0

package/dist/style.css

@@ -215,6 +215,9 @@
     white-space: nowrap;
     border-width: 0;
   }
+  .\!absolute {
+    position: absolute !important;
+  }
   .absolute {
     position: absolute;
   }
@@ -302,6 +305,12 @@
   .col-span-3 {
     grid-column: span 3 / span 3;
   }
+  .col-start-1 {
+    grid-column-start: 1;
+  }
+  .row-start-1 {
+    grid-row-start: 1;
+  }
   .container {
     width: 100%;
     @media (width >= 40rem) {
@@ -344,15 +353,39 @@
   .mt-auto {
     margin-top: auto;
   }
+  .mr-1\.5 {
+    margin-right: calc(var(--spacing) * 1.5);
+  }
+  .mr-2 {
+    margin-right: calc(var(--spacing) * 2);
+  }
+  .mr-6 {
+    margin-right: calc(var(--spacing) * 6);
+  }
+  .mr-7 {
+    margin-right: calc(var(--spacing) * 7);
+  }
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .ml-1\.5 {
+    margin-left: calc(var(--spacing) * 1.5);
+  }
+  .ml-2 {
+    margin-left: calc(var(--spacing) * 2);
+  }
   .ml-4 {
     margin-left: calc(var(--spacing) * 4);
   }
+  .ml-6 {
+    margin-left: calc(var(--spacing) * 6);
+  }
+  .ml-7 {
+    margin-left: calc(var(--spacing) * 7);
+  }
   .box-content {
     box-sizing: content-box;
   }
@@ -395,10 +428,18 @@
     width: calc(var(--spacing) * 4);
     height: calc(var(--spacing) * 4);
   }
+  .size-5\! {
+    width: calc(var(--spacing) * 5) !important;
+    height: calc(var(--spacing) * 5) !important;
+  }
   .size-6 {
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
+  .size-6\! {
+    width: calc(var(--spacing) * 6) !important;
+    height: calc(var(--spacing) * 6) !important;
+  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
@@ -423,14 +464,14 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
-  .h-7 {
-    height: calc(var(--spacing) * 7);
+  .h-6\! {
+    height: calc(var(--spacing) * 6) !important;
   }
   .h-8 {
     height: calc(var(--spacing) * 8);
   }
-  .h-8\.5 {
-    height: calc(var(--spacing) * 8.5);
+  .h-8\! {
+    height: calc(var(--spacing) * 8) !important;
   }
   .h-9 {
     height: calc(var(--spacing) * 9);
@@ -468,14 +509,14 @@
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
-  .w-7 {
-    width: calc(var(--spacing) * 7);
+  .w-10\! {
+    width: calc(var(--spacing) * 10) !important;
   }
   .w-12 {
     width: calc(var(--spacing) * 12);
   }
-  .w-13 {
-    width: calc(var(--spacing) * 13);
+  .w-12\! {
+    width: calc(var(--spacing) * 12) !important;
   }
   .w-15 {
     width: calc(var(--spacing) * 15);
@@ -504,6 +545,9 @@
   .w-auto {
     width: auto;
   }
+  .w-auto\! {
+    width: auto !important;
+  }
   .w-fit {
     width: fit-content;
   }
@@ -555,6 +599,10 @@
   .origin-\(--radix-select-content-transform-origin\) {
     transform-origin: var(--radix-select-content-transform-origin);
   }
+  .\!translate-x-0 {
+    --tw-translate-x: calc(var(--spacing) * 0) !important;
+    translate: var(--tw-translate-x) var(--tw-translate-y) !important;
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -563,6 +611,10 @@
     --tw-translate-x: -50%;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .\!-translate-y-1\/2 {
+    --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);
@@ -665,6 +717,9 @@
   .justify-end {
     justify-content: flex-end;
   }
+  .gap-0 {
+    gap: calc(var(--spacing) * 0);
+  }
   .gap-0\.5 {
     gap: calc(var(--spacing) * 0.5);
   }
@@ -757,10 +812,18 @@
     border-top-left-radius: 30px !important;
     border-top-right-radius: 30px !important;
   }
+  .rounded-l-lg {
+    border-top-left-radius: var(--radius);
+    border-bottom-left-radius: var(--radius);
+  }
   .rounded-l-none {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
+  .rounded-r-lg {
+    border-top-right-radius: var(--radius);
+    border-bottom-right-radius: var(--radius);
+  }
   .rounded-r-none {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
@@ -792,8 +855,11 @@
   .border-\(--btn-border\) {
     border-color: var(--btn-border);
   }
-  .border-\[rgb\(var\(--btn-border\)\/0\.5\)\] {
-    border-color: rgb(var(--btn-border)/0.5);
+  .border-\[color-mix\(in_oklch\,var\(--btn-border\)\,transparent_50\%\)\] {
+    border-color: var(--btn-border);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklch,var(--btn-border),transparent 50%);
+    }
   }
   .border-current {
     border-color: currentcolor;
@@ -804,6 +870,9 @@
   .border-input {
     border-color: var(--input);
   }
+  .border-primary {
+    border-color: var(--primary);
+  }
   .border-transparent {
     border-color: transparent;
   }
@@ -1000,6 +1069,9 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
+  .text-\[10px\] {
+    font-size: 10px;
+  }
   .leading-5\.75 {
     --tw-leading: calc(var(--spacing) * 5.75);
     line-height: calc(var(--spacing) * 5.75);
@@ -1101,12 +1173,18 @@
   .underline-offset-8 {
     text-underline-offset: 8px;
   }
+  .opacity-0 {
+    opacity: 0%;
+  }
   .opacity-50 {
     opacity: 50%;
   }
   .opacity-70 {
     opacity: 70%;
   }
+  .opacity-100 {
+    opacity: 100%;
+  }
   .shadow {
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1160,6 +1238,16 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[left\] {
+    transition-property: left;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+  .transition-\[margin\] {
+    transition-property: margin;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1187,6 +1275,12 @@
     --tw-duration: 200ms;
     transition-duration: 200ms;
   }
+  .will-change-\[left\] {
+    will-change: left;
+  }
+  .will-change-\[margin\] {
+    will-change: margin;
+  }
   .outline-none {
     --tw-outline-style: none;
     outline-style: none;
@@ -2067,10 +2161,14 @@
       }
     }
   }
-  .data-\[state\=checked\]\:translate-x-5 {
+  .data-\[state\=checked\]\:left-\[calc\(100\%-22px\)\] {
     &[data-state="checked"] {
-      --tw-translate-x: calc(var(--spacing) * 5);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
+      left: calc(100% - 22px);
+    }
+  }
+  .data-\[state\=checked\]\:left-\[calc\(100\%-26px\)\] {
+    &[data-state="checked"] {
+      left: calc(100% - 26px);
     }
   }
   .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\] {
@@ -2104,15 +2202,14 @@
       color: var(--muted-foreground);
     }
   }
-  .data-\[state\=unchecked\]\:translate-x-0 {
+  .data-\[state\=unchecked\]\:left-0\.5 {
     &[data-state="unchecked"] {
-      --tw-translate-x: calc(var(--spacing) * 0);
-      translate: var(--tw-translate-x) var(--tw-translate-y);
+      left: calc(var(--spacing) * 0.5);
     }
   }
-  .data-\[state\=unchecked\]\:translate-x-\[2px\] {
+  .data-\[state\=unchecked\]\:translate-x-0 {
     &[data-state="unchecked"] {
-      --tw-translate-x: 2px;
+      --tw-translate-x: calc(var(--spacing) * 0);
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
@@ -2444,6 +2541,12 @@
       height: calc(var(--spacing) * 4);
     }
   }
+  .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-5 {
+    & svg:not([class*='size-']) {
+      width: calc(var(--spacing) * 5);
+      height: calc(var(--spacing) * 5);
+    }
+  }
   .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground {
     & svg:not([class*='text-']) {
       color: var(--muted-foreground);
@@ -2669,69 +2772,53 @@
   }
   [data-slot='button'][data-color='default'] {
     --btn-bg: var(--muted);
-    --btn-border: 107 114 128;
+    --btn-border: var(--muted-foreground);
   }
   [data-slot='button'][data-color='primary'] {
     --btn-bg: var(--primary);
-    --btn-border: var(--primary);
     --btn-fg: var(--primary-foreground);
   }
   [data-slot='button'][data-color='danger'] {
     --btn-bg: var(--destructive);
-    --btn-border: 239 68 68;
-    --btn-fg: white;
   }
   [data-slot='button'][data-color='blue'] {
     --btn-bg: #3b82f6;
-    --btn-border: 59 130 246;
   }
   [data-slot='button'][data-color='purple'] {
     --btn-bg: #a855f7;
-    --btn-border: 168 85 247;
   }
   [data-slot='button'][data-color='cyan'] {
     --btn-bg: #06b6d4;
-    --btn-border: 6 182 212;
   }
   [data-slot='button'][data-color='green'] {
     --btn-bg: #22c55e;
-    --btn-border: 34 197 94;
   }
   [data-slot='button'][data-color='magenta'] {
     --btn-bg: #d946ef;
-    --btn-border: 217 70 239;
   }
   [data-slot='button'][data-color='pink'] {
     --btn-bg: #ec4899;
-    --btn-border: 236 72 153;
   }
   [data-slot='button'][data-color='red'] {
     --btn-bg: #ef4444;
-    --btn-border: 239 68 68;
   }
   [data-slot='button'][data-color='orange'] {
     --btn-bg: #f97316;
-    --btn-border: 249 115 22;
   }
   [data-slot='button'][data-color='yellow'] {
     --btn-bg: #eab308;
-    --btn-border: 234 179 8;
   }
   [data-slot='button'][data-color='volcano'] {
     --btn-bg: #ea580c;
-    --btn-border: 234 88 12;
   }
   [data-slot='button'][data-color='geekblue'] {
     --btn-bg: #6366f1;
-    --btn-border: 99 102 241;
   }
   [data-slot='button'][data-color='lime'] {
     --btn-bg: #84cc16;
-    --btn-border: 132 204 22;
   }
   [data-slot='button'][data-color='gold'] {
     --btn-bg: #f59e0b;
-    --btn-border: 245 158 11;
   }
 }
 @property --tw-translate-x {

package/dist/utils.d.mts

@@ -2,8 +2,8 @@ import * as React$1 from "react";
 import { ClassValue } from "clsx";
 
 //#region src/lib/utils/index.d.ts
-declare function cn(...inputs: ClassValue[]): string;
-declare function renderConditional<T extends React$1.ReactNode>(value: T, wrapper?: (value: NonNullable<T>) => React$1.ReactNode): React$1.ReactNode;
+declare const cn: (...inputs: ClassValue[]) => string;
+declare const renderConditional: <T extends React$1.ReactNode>(value: T, wrapper?: (value: NonNullable<T>) => React$1.ReactNode) => React$1.ReactNode;
 //#endregion
 export { cn, renderConditional };
 //# sourceMappingURL=utils.d.mts.map

package/dist/utils.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.mts","names":[],"sources":["../src/lib/utils/index.ts"],"mappings":";;;;iBAKgB,EAAA,CAAA,GAAM,MAAA,EAAQ,UAAA;AAAA,iBAId,iBAAA,WAA4B,OAAA,CAAM,SAAA,CAAA,CAChD,KAAA,EAAO,CAAA,EACP,OAAA,IAAW,KAAA,EAAO,WAAA,CAAY,CAAA,MAAO,OAAA,CAAM,SAAA,GAC1C,OAAA,CAAM,SAAA"}
+{"version":3,"file":"utils.d.mts","names":[],"sources":["../src/lib/utils/index.ts"],"mappings":";;;;cAKa,EAAA,MAAS,MAAA,EAAQ,UAAA;AAAA,cAIjB,iBAAA,aAA+B,OAAA,CAAM,SAAA,EAChD,KAAA,EAAO,CAAA,EACP,OAAA,IAAW,KAAA,EAAO,WAAA,CAAY,CAAA,MAAO,OAAA,CAAM,SAAA,KAC1C,OAAA,CAAM,SAAA"}

package/dist/utils.mjs

@@ -3,14 +3,14 @@ import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 //#region src/lib/utils/index.ts
-function cn(...inputs) {
+const cn = (...inputs) => {
 	return twMerge(clsx(inputs));
-}
-function renderConditional(value, wrapper) {
+};
+const renderConditional = (value, wrapper) => {
 	if (value === null || value === void 0) return null;
 	if (React$1.isValidElement(value)) return value;
 	return wrapper ? wrapper(value) : value;
-}
+};
 
 //#endregion
 export { cn, renderConditional };

package/dist/utils.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"utils.mjs","names":["React"],"sources":["../src/lib/utils/index.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\nexport function renderConditional<T extends React.ReactNode>(\n  value: T,\n  wrapper?: (value: NonNullable<T>) => React.ReactNode,\n): React.ReactNode {\n  if (value === null || value === undefined) {\n    return null;\n  }\n\n  if (React.isValidElement(value)) {\n    return value;\n  }\n\n  return wrapper ? wrapper(value as NonNullable<T>) : value;\n}\n"],"mappings":";;;;;AAKA,SAAgB,GAAG,GAAG,QAAsB;AAC1C,QAAO,QAAQ,KAAK,OAAO,CAAC;;AAG9B,SAAgB,kBACd,OACA,SACiB;AACjB,KAAI,UAAU,QAAQ,UAAU,OAC9B,QAAO;AAGT,KAAIA,QAAM,eAAe,MAAM,CAC7B,QAAO;AAGT,QAAO,UAAU,QAAQ,MAAwB,GAAG"}
+{"version":3,"file":"utils.mjs","names":["React"],"sources":["../src/lib/utils/index.ts"],"sourcesContent":["import * as React from 'react';\n\nimport { type ClassValue, clsx } from 'clsx';\nimport { twMerge } from 'tailwind-merge';\n\nexport const cn = (...inputs: ClassValue[]) => {\n  return twMerge(clsx(inputs));\n};\n\nexport const renderConditional = <T extends React.ReactNode>(\n  value: T,\n  wrapper?: (value: NonNullable<T>) => React.ReactNode,\n): React.ReactNode => {\n  if (value === null || value === undefined) {\n    return null;\n  }\n\n  if (React.isValidElement(value)) {\n    return value;\n  }\n\n  return wrapper ? wrapper(value as NonNullable<T>) : value;\n};\n"],"mappings":";;;;;AAKA,MAAa,MAAM,GAAG,WAAyB;AAC7C,QAAO,QAAQ,KAAK,OAAO,CAAC;;AAG9B,MAAa,qBACX,OACA,YACoB;AACpB,KAAI,UAAU,QAAQ,UAAU,OAC9B,QAAO;AAGT,KAAIA,QAAM,eAAe,MAAM,CAC7B,QAAO;AAGT,QAAO,UAAU,QAAQ,MAAwB,GAAG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbpark/ui-kit",
-  "version": "2.3.4",
+  "version": "2.5.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",