@iit/precision-ui 0.4.1 → 0.5.1

package/dist/index.es8.js

@@ -1,6 +1,6 @@
 import l from "react";
 import { cva as s } from "class-variance-authority";
-import { cn as c } from "./index.es29.js";
+import { cn as c } from "./index.es31.js";
 import { getAdapter as f } from "./index.es9.js";
 const m = s("duration-200 transition-colors", {
   variants: {

package/dist/styles.css

@@ -430,12 +430,18 @@ body{
     white-space: nowrap;
     border-width: 0;
 }
+.fixed{
+    position: fixed;
+}
 .absolute{
     position: absolute;
 }
 .relative{
     position: relative;
 }
+.inset-0{
+    inset: 0px;
+}
 .-bottom-12{
     bottom: -3rem;
 }
@@ -469,6 +475,9 @@ body{
 .left-\[2px\]{
     left: 2px;
 }
+.left-\[50\%\]{
+    left: 50%;
+}
 .left-\[5px\]{
     left: 5px;
 }
@@ -484,6 +493,9 @@ body{
 .right-3{
     right: 0.75rem;
 }
+.right-4{
+    right: 1rem;
+}
 .right-6{
     right: 1.5rem;
 }
@@ -496,6 +508,12 @@ body{
 .top-1\/2{
     top: 50%;
 }
+.top-4{
+    top: 1rem;
+}
+.top-\[50\%\]{
+    top: 50%;
+}
 .top-auto{
     top: auto;
 }
@@ -620,6 +638,12 @@ body{
 .h-16{
     height: 4rem;
 }
+.h-2{
+    height: 0.5rem;
+}
+.h-2\.5{
+    height: 0.625rem;
+}
 .h-4{
     height: 1rem;
 }
@@ -647,6 +671,12 @@ body{
 .h-full{
     height: 100%;
 }
+.max-h-\[calc\(100dvh-0\.75rem\)\]{
+    max-height: calc(100dvh - 0.75rem);
+}
+.max-h-\[calc\(100dvh-1rem\)\]{
+    max-height: calc(100dvh - 1rem);
+}
 .min-h-\[190px\]{
     min-height: 190px;
 }
@@ -662,6 +692,12 @@ body{
 .w-10{
     width: 2.5rem;
 }
+.w-2{
+    width: 0.5rem;
+}
+.w-2\.5{
+    width: 0.625rem;
+}
 .w-4{
     width: 1rem;
 }
@@ -689,6 +725,9 @@ body{
 .w-\[96\%\]{
     width: 96%;
 }
+.w-\[calc\(100dvw-0\.75rem\)\]{
+    width: calc(100dvw - 0.75rem);
+}
 .w-auto{
     width: auto;
 }
@@ -716,12 +755,18 @@ body{
 .max-w-\[900px\]{
     max-width: 900px;
 }
+.max-w-lg{
+    max-width: 32rem;
+}
 .max-w-md{
     max-width: 28rem;
 }
 .max-w-sm{
     max-width: 24rem;
 }
+.flex-1{
+    flex: 1 1 0%;
+}
 .shrink-0{
     flex-shrink: 0;
 }
@@ -739,10 +784,18 @@ body{
     --precision-ui-tw-translate-y: -50%;
     transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
 }
+.translate-x-\[-50\%\]{
+    --precision-ui-tw-translate-x: -50%;
+    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
+}
 .translate-y-0{
     --precision-ui-tw-translate-y: 0px;
     transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
 }
+.translate-y-\[-50\%\]{
+    --precision-ui-tw-translate-y: -50%;
+    transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
+}
 .rotate-90{
     --precision-ui-tw-rotate: 90deg;
     transform: translate(var(--precision-ui-tw-translate-x), var(--precision-ui-tw-translate-y)) rotate(var(--precision-ui-tw-rotate)) skewX(var(--precision-ui-tw-skew-x)) skewY(var(--precision-ui-tw-skew-y)) scaleX(var(--precision-ui-tw-scale-x)) scaleY(var(--precision-ui-tw-scale-y));
@@ -756,6 +809,14 @@ body{
 .cursor-pointer{
     cursor: pointer;
 }
+.touch-none{
+    touch-action: none;
+}
+.select-none{
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+}
 .auto-rows-\[222px\]{
     grid-auto-rows: 222px;
 }
@@ -768,6 +829,9 @@ body{
 .flex-col{
     flex-direction: column;
 }
+.flex-col-reverse{
+    flex-direction: column-reverse;
+}
 .items-start{
     align-items: flex-start;
 }
@@ -821,6 +885,16 @@ body{
     margin-right: calc(1.25rem * var(--precision-ui-tw-space-x-reverse));
     margin-left: calc(1.25rem * calc(1 - var(--precision-ui-tw-space-x-reverse)));
 }
+.space-y-1 > :not([hidden]) ~ :not([hidden]){
+    --precision-ui-tw-space-y-reverse: 0;
+    margin-top: calc(0.25rem * calc(1 - var(--precision-ui-tw-space-y-reverse)));
+    margin-bottom: calc(0.25rem * var(--precision-ui-tw-space-y-reverse));
+}
+.space-y-1\.5 > :not([hidden]) ~ :not([hidden]){
+    --precision-ui-tw-space-y-reverse: 0;
+    margin-top: calc(0.375rem * calc(1 - var(--precision-ui-tw-space-y-reverse)));
+    margin-bottom: calc(0.375rem * var(--precision-ui-tw-space-y-reverse));
+}
 .space-y-10 > :not([hidden]) ~ :not([hidden]){
     --precision-ui-tw-space-y-reverse: 0;
     margin-top: calc(2.5rem * calc(1 - var(--precision-ui-tw-space-y-reverse)));
@@ -858,6 +932,9 @@ body{
 .rounded-2xl{
     border-radius: 1rem;
 }
+.rounded-\[inherit\]{
+    border-radius: inherit;
+}
 .rounded-full{
     border-radius: 9999px;
 }
@@ -890,6 +967,9 @@ body{
 .border-b-0{
     border-bottom-width: 0px;
 }
+.border-l{
+    border-left-width: 1px;
+}
 .border-r-0{
     border-right-width: 0px;
 }
@@ -946,13 +1026,25 @@ body{
 .border-b-whitish-opacity-32{
     border-bottom-color: hsl(var(--precision-ui-tw-whitish-opacity-32));
 }
+.border-l-transparent{
+    border-left-color: transparent;
+}
+.border-t-transparent{
+    border-top-color: transparent;
+}
 .bg-background{
     background-color: hsl(var(--precision-ui-tw-background));
 }
+.bg-black\/80{
+    background-color: rgb(0 0 0 / 0.8);
+}
 .bg-blue-100{
     --precision-ui-tw-bg-opacity: 1;
     background-color: rgb(219 234 254 / var(--precision-ui-tw-bg-opacity));
 }
+.bg-border{
+    background-color: hsl(var(--precision-ui-tw-border));
+}
 .bg-destructive{
     background-color: hsl(var(--precision-ui-tw-destructive));
 }
@@ -1044,6 +1136,9 @@ body{
 .p-\[10px\]{
     padding: 10px;
 }
+.p-\[1px\]{
+    padding: 1px;
+}
 .p-\[5px\]{
     padding: 5px;
 }
@@ -1179,6 +1274,10 @@ body{
 .align-middle{
     vertical-align: middle;
 }
+.text-lg{
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+}
 .text-sm{
     font-size: 0.875rem;
     line-height: 1.25rem;
@@ -1186,6 +1285,9 @@ body{
 .font-medium{
     font-weight: 500;
 }
+.font-semibold{
+    font-weight: 600;
+}
 .leading-none{
     line-height: 1;
 }
@@ -1269,6 +1371,14 @@ body{
 .opacity-50{
     opacity: 0.5;
 }
+.opacity-70{
+    opacity: 0.7;
+}
+.shadow-lg{
+    --precision-ui-tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+    --precision-ui-tw-shadow-colored: 0 10px 15px -3px var(--precision-ui-tw-shadow-color), 0 4px 6px -4px var(--precision-ui-tw-shadow-color);
+    box-shadow: var(--precision-ui-tw-ring-offset-shadow, 0 0 #0000), var(--precision-ui-tw-ring-shadow, 0 0 #0000), var(--precision-ui-tw-shadow);
+}
 .shadow-md{
     --precision-ui-tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
     --precision-ui-tw-shadow-colored: 0 4px 6px -1px var(--precision-ui-tw-shadow-color), 0 2px 4px -2px var(--precision-ui-tw-shadow-color);
@@ -1302,6 +1412,11 @@ body{
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
 }
+.transition-opacity{
+    transition-property: opacity;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
 .transition-transform{
     transition-property: transform;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -2032,6 +2147,9 @@ html {
 .hover\:underline:hover{
     text-decoration-line: underline;
 }
+.hover\:opacity-100:hover{
+    opacity: 1;
+}
 .focus\:border-navy:focus{
     border-color: hsl(var(--precision-ui-tw-navy));
 }
@@ -2043,6 +2161,17 @@ html {
     outline: 2px solid transparent;
     outline-offset: 2px;
 }
+.focus\:ring-2:focus{
+    --precision-ui-tw-ring-offset-shadow: var(--precision-ui-tw-ring-inset) 0 0 0 var(--precision-ui-tw-ring-offset-width) var(--precision-ui-tw-ring-offset-color);
+    --precision-ui-tw-ring-shadow: var(--precision-ui-tw-ring-inset) 0 0 0 calc(2px + var(--precision-ui-tw-ring-offset-width)) var(--precision-ui-tw-ring-color);
+    box-shadow: var(--precision-ui-tw-ring-offset-shadow), var(--precision-ui-tw-ring-shadow), var(--precision-ui-tw-shadow, 0 0 #0000);
+}
+.focus\:ring-ring:focus{
+    --precision-ui-tw-ring-color: hsl(var(--precision-ui-tw-ring));
+}
+.focus\:ring-offset-2:focus{
+    --precision-ui-tw-ring-offset-width: 2px;
+}
 .focus-visible\:outline-none:focus-visible{
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -2116,12 +2245,18 @@ html {
 .data-\[state\=checked\]\:bg-whitish[data-state=checked]{
     background-color: hsl(var(--precision-ui-tw-whitish));
 }
+.data-\[state\=open\]\:bg-accent[data-state=open]{
+    background-color: hsl(var(--precision-ui-tw-accent));
+}
 .data-\[state\=checked\]\:text-navy[data-state=checked]{
     color: hsl(var(--precision-ui-tw-navy));
 }
 .data-\[state\=checked\]\:text-whitish[data-state=checked]{
     color: hsl(var(--precision-ui-tw-whitish));
 }
+.data-\[state\=open\]\:text-muted-foreground[data-state=open]{
+    color: hsl(var(--precision-ui-tw-muted-foreground));
+}
 .data-\[state\=open\]\:animate-in[data-state=open]{
     animation-name: enter;
     animation-duration: 150ms;
@@ -2164,6 +2299,18 @@ html {
 .data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top]{
     --precision-ui-tw-enter-translate-y: 0.5rem;
 }
+.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed]{
+    --precision-ui-tw-exit-translate-x: -50%;
+}
+.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed]{
+    --precision-ui-tw-exit-translate-y: -48%;
+}
+.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open]{
+    --precision-ui-tw-enter-translate-x: -50%;
+}
+.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open]{
+    --precision-ui-tw-enter-translate-y: -48%;
+}
 .hover\:data-\[state\=checked\]\:bg-navy-opacity-80[data-state=checked]:hover{
     background-color: hsl(var(--precision-ui-tw-navy-opacity-80));
 }
@@ -2201,6 +2348,23 @@ html {
     .sm\:grid-cols-9{
         grid-template-columns: repeat(9, minmax(0, 1fr));
     }
+    .sm\:flex-row{
+        flex-direction: row;
+    }
+    .sm\:justify-end{
+        justify-content: flex-end;
+    }
+    .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]){
+        --precision-ui-tw-space-x-reverse: 0;
+        margin-right: calc(0.5rem * var(--precision-ui-tw-space-x-reverse));
+        margin-left: calc(0.5rem * calc(1 - var(--precision-ui-tw-space-x-reverse)));
+    }
+    .sm\:rounded-lg{
+        border-radius: var(--precision-ui-tw-radius);
+    }
+    .sm\:text-left{
+        text-align: left;
+    }
 }
 @media (min-width: 768px){
     .md\:max-w-3xl{

package/package.json

@@ -13,7 +13,7 @@
     "type": "git",
     "url": "git+https://github.com/wowxoxo/precision-ui.git"
   },
-  "version": "0.4.1",
+  "version": "0.5.1",
   "type": "module",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -48,8 +48,10 @@
     "@hookform/resolvers": "^3.10.0",
     "@iit/precision-ui-icons": "^0.4.0",
     "@radix-ui/react-checkbox": "^1.1.3",
+    "@radix-ui/react-dialog": "^1.1.5",
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.4",
+    "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-slot": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.6",
     "class-variance-authority": "^0.7.0",
@@ -65,10 +67,10 @@
     "zod": "^3.24.1"
   },
   "peerDependencies": {
+    "@hookform/resolvers": "^3.10.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.54.2",
-    "@hookform/resolvers": "^3.10.0",
     "zod": "^3.24.1"
   },
   "peerDependenciesMeta": {