@a-type/ui 3.0.31 → 3.0.33

package/dist/cjs/uno/preflights/fonts.js.map

@@ -1 +1 @@
-{"version":3,"file":"fonts.js","sourceRoot":"","sources":["../../../../src/uno/preflights/fonts.ts"],"names":[],"mappings":";;;AAAA,yCAAuC;AAMhC,MAAM,cAAc,GAAG,CAC7B,EAAE,iBAAiB,KAA4B;IAC9C,iBAAiB,EAChB,wEAAwE;CACzE,EACA,EAAE,CACH,IAAA,oBAAS,EAAC;IACT,MAAM,EAAE,GAAG,EAAE,CAAC;;;eAGD,iBAAiB;;;;;EAK9B;CACA,CAAC,CAAC;AAhBS,QAAA,cAAc,kBAgBvB"}
+{"version":3,"file":"fonts.js","sourceRoot":"","sources":["../../../../src/uno/preflights/fonts.ts"],"names":[],"mappings":";;;AAAA,yCAAuC;AAMhC,MAAM,cAAc,GAAG,CAAC,EAC9B,iBAAiB,GAAG,wEAAwE,MAClE,EAAE,EAAE,EAAE,CAChC,IAAA,oBAAS,EAAC;IACT,MAAM,EAAE,GAAG,EAAE,CAAC;;;eAGD,iBAAiB;;;;;EAK9B;CACA,CAAC,CAAC;AAbS,QAAA,cAAc,kBAavB"}

package/dist/css/main.css

@@ -4,7 +4,7 @@
  :root { --p-lemon-hue: 90.8; --p-leek-hue: 165.88; --p-tomato-hue: 10.51; --p-blueberry-hue: 248.14; --p-eggplant-hue: 280.21; --p-attention-hue: 30; --p-success-hue: 140; } .theme-lemon, .theme-override-lemon.theme-override-lemon { --p-primary-hue: var(--p-lemon-hue); --p-accent-hue: var(--p-leek-hue); --l-main-hue: var(--p-primary-hue);  --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); background-color: var(--v-bg); } .theme-leek, .theme-override-leek.theme-override-leek { --p-primary-hue: var(--p-leek-hue); --p-accent-hue: var(--p-lemon-hue); --l-main-hue: var(--p-primary-hue);  --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); background-color: var(--v-bg); } .theme-tomato, .theme-override-tomato.theme-override-tomato { --p-primary-hue: var(--p-tomato-hue); --p-accent-hue: var(--p-leek-hue); --l-main-hue: var(--p-primary-hue);  --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); background-color: var(--v-bg); } .theme-blueberry, .theme-override-blueberry.theme-override-blueberry { --p-primary-hue: var(--p-blueberry-hue); --p-accent-hue: var(--p-leek-hue); --l-main-hue: var(--p-primary-hue);  --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); background-color: var(--v-bg); } .theme-eggplant, .theme-override-eggplant.theme-override-eggplant { --p-primary-hue: var(--p-eggplant-hue); --p-accent-hue: var(--p-leek-hue); --l-main-hue: var(--p-primary-hue);  --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); background-color: var(--v-bg); } .theme-gray, .theme-salt, .theme-override-gray.theme-override-gray { --l-saturation: 0.15;  --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); background-color: var(--v-bg); } .theme-high-contrast, .theme-override-high-contrast.theme-override-high-contrast { --l-saturation: 0.04; --l-lightness-spread: 10;  --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); background-color: var(--v-bg); } .palette-primary { --l-main-hue: var(--p-primary-hue); --l-saturation: 1; } .palette-accent { --l-main-hue: var(--p-accent-hue); --l-saturation: 1; } .palette-attention { --l-main-hue: var(--p-attention-hue); --l-saturation: 1; } .palette-success { --l-main-hue: var(--p-success-hue); --l-saturation: 1; } .palette-lemon { --l-main-hue: var(--p-lemon-hue); --l-saturation: 1; } .palette-leek { --l-main-hue: var(--p-leek-hue); --l-saturation: 1; } .palette-tomato { --l-main-hue: var(--p-tomato-hue); --l-saturation: 1; } .palette-blueberry { --l-main-hue: var(--p-blueberry-hue); --l-saturation: 1; } .palette-eggplant { --l-main-hue: var(--p-eggplant-hue); --l-saturation: 1; } .palette-gray { --l-saturation: 0.15; } .palette-high-contrast { --l-saturation: 0.04; --l-lightness-spread: 10; } body {  --v-color: oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); color: var(--v-color); --v-bg: oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8)))); background-color: var(--v-bg); --l-main-hue: var(--p-primary-hue); } @property --v-bg-altered { syntax: "*"; inherits: false; } @property --v-color-altered { syntax: "*"; inherits: false; } @property --v-border-altered { syntax: "*"; inherits: false; } @property --v-ring-altered { syntax: "*"; inherits: false; } @property --v-bg-opacity { syntax: "<percentage>"; inherits: false; } @property --v-color-opacity { syntax: "<percentage>"; inherits: false; } @property --v-border-opacity { syntax: "<percentage>"; inherits: false; } @property --v-ring-opacity { syntax: "<percentage>"; inherits: false; } 
  @layer preflightBase { html {  --mode-mult: 1; --mode-l-neutral: 90%; --mode-l-range-up: 10%; --mode-l-range-down: 70%; --mode-s-neutral: 75%; --mode-s-range-up: -55%; --mode-s-range-down: 20%; --mode-white: #ffffff; --mode-black: #000000; } @media (prefers-color-scheme: dark) { html {  --mode-mult: -1; --mode-l-neutral: 60%; --mode-l-range-up: 38%; --mode-l-range-down: 70%; --mode-s-neutral: 80%; --mode-s-range-up: 40%; --mode-s-range-down: -30%; --mode-white: #000000; --mode-black: #ffffff; } } } @layer preflightVariants { .override-light {  --mode-mult: 1; --mode-l-neutral: 90%; --mode-l-range-up: 10%; --mode-l-range-down: 70%; --mode-s-neutral: 75%; --mode-s-range-up: -55%; --mode-s-range-down: 20%; --mode-white: #ffffff; --mode-black: #000000; } .override-dark {  --mode-mult: -1; --mode-l-neutral: 60%; --mode-l-range-up: 38%; --mode-l-range-down: 70%; --mode-s-neutral: 80%; --mode-s-range-up: 40%; --mode-s-range-down: -30%; --mode-white: #000000; --mode-black: #ffffff; } }
  @layer preflightBase { :root { --global-saturation: 0.5; --global-corner-scale: 1; --global-spacing-scale: 1; --global-border-scale: 1; --global-shadow-spread: 1; --p-primary-hue: 90.8; --p-accent-hue: 165.88; } } @property --local-corner-scale { syntax: "*"; inherits: false; } 
- @font-face { font-family: "Inter"; src: url("undefined") format("truetype-variations"); font-weight: 1 999; font-style: oblique 0deg 5deg; font-display: block; } 
+ @font-face { font-family: "Inter"; src: url("https://resources.biscuits.club/fonts/Inter-VariableFont_slnt,wght.ttf") format("truetype-variations"); font-weight: 1 999; font-style: oblique 0deg 5deg; font-display: block; } 
 .outline-off{outline:none;}.unset{all:unset;}.container{width:100%;}.hidden-input{pointer-events:none;position:absolute;z-index:-1;opacity:0;}.bottom-keyboard{bottom:var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px));}.center{left:50%;top:50%;--un-translate-x:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-translate-y:-50%;}.center-x{left:50%;--un-translate-x:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.center-y{top:50%;--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.hidden-input::webkit-file-upload-button{display:none;}.body{min-height:100vh;color:var(--v-color-altered,var(--v-color));--v-color:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-color-opacity:100%;background-color:var(--v-bg-altered,var(--v-bg));--v-bg:oklch(calc(clamp(0%, (var(--mode-l-neutral) + (var(--mode-l-range-up) * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) + (var(--mode-s-range-up) * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-bg-opacity:100%;}.flex-0-0-auto{flex-shrink:0;flex-grow:0;flex-basis:auto;}.flex-1-0-0{flex-shrink:0;flex-grow:1;flex-basis:0;}.border{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;}.border-default{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;}.border-light{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;--v-border-altered:oklch(from var(--v-border,currentColor) calc(l * (1 + 3 / 30 * -1 * var(--mode-mult, 1))) calc(c * (1 - (3 * 0.1 * -1 * (1 + (1 - var(--global-saturation, 0)))))) h);}@layer components{.layer-components\:\[\&\[data-focus\=true\]\]\:outline-off[data-focus=true]{outline:none;}.layer-components\:unset{all:unset;}.layer-components\:focus\:outline-off:focus{outline:none;}.layer-components\:focus-visible\:outline-off:focus-visible{outline:none;}.col{display:flex;flex-direction:column;align-items:center;gap:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.row{display:flex;flex-direction:row;align-items:center;gap:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.layer-components\:border{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;}.layer-components\:\[\&\[data-state\=on\]\]\:border-default[data-state=on],.layer-components\:border-default{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;}.layer-components\:border-light{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;--v-border-altered:oklch(from var(--v-border,currentColor) calc(l * (1 + 3 / 30 * -1 * var(--mode-mult, 1))) calc(c * (1 - (3 * 0.1 * -1 * (1 + (1 - var(--global-saturation, 0)))))) h);}.layer-components\:\[\&\[data-state\=on\]\]\:hover\:border-default:hover[data-state=on]{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:oklch(calc(clamp(0%, (var(--mode-l-neutral) - (var(--mode-l-range-down) * 1 * var(--mode-mult, 1) * var(--l-lightness-spread, 1))), 100%)) calc(clamp(0%, (0.04 * var(--l-saturation, 1) * var(--global-saturation, 1) * (var(--mode-s-neutral) - (var(--mode-s-range-down) * 1 * var(--mode-mult, 1)))), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;}.layer-components\:focus-visible\:border:focus-visible{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;}}@layer composed{.layer-composed\:border{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;}.layer-composed\:border-light{border-width:calc(1px * var(--global-border-scale,1));border-style:solid;border-right-color:var(--v-border-r-color-altered, var(--v-border-r-color, var(--v-border-altered,var(--v-border))));border-bottom-color:var(--v-border-b-color-altered, var(--v-border-b-color, var(--v-border-altered,var(--v-border))));border-left-color:var(--v-border-l-color-altered, var(--v-border-l-color, var(--v-border-altered,var(--v-border))));border-top-color:var(--v-border-t-color-altered, var(--v-border-t-color, var(--v-border-altered,var(--v-border))));--v-border:oklch(calc(var(--mode-l-neutral)) calc(clamp(0%, (0.15 * var(--l-saturation, 1) * var(--global-saturation, 1) * var(--mode-s-neutral)), 100%)) calc(var(--l-main-hue,var(--p-primary-hue,91.8))));--v-border-opacity:100%;--v-border-altered:oklch(from var(--v-border,currentColor) calc(l * (1 + 3 / 30 * -1 * var(--mode-mult, 1))) calc(c * (1 - (3 * 0.1 * -1 * (1 + (1 - var(--global-saturation, 0)))))) h);}}@media (min-width: 640px){.container{max-width:640px;}}@media (min-width: 768px){.container{max-width:768px;}}@media (min-width: 1024px){.container{max-width:1024px;}}@media (min-width: 1280px){.container{max-width:1280px;}}@media (min-width: 1536px){.container{max-width:1536px;}}.\!\[background-attachment\:local\,local\,scroll\,scroll\]{background-attachment:local,local,scroll,scroll !important;}.\!\[background-repeat\:no-repeat\]{background-repeat:no-repeat !important;}.\!\[background-size\:100\%_40px\,100\%_40px\,100\%_14px\,100\%_14px\]{background-size:100% 40px,100% 40px,100% 14px,100% 14px !important;}.\[--l-saturation\:0\]{--l-saturation:0;}.\[\&\[data-different-month\]\]\:\[visibility\:hidden\][data-different-month]{visibility:hidden;}.\[all\:unset\]{all:unset;}.\[background-size\:400\%_400\%\]{background-size:400% 400%;}.\[background\:linear-gradient\(var\(--v-bg\)_30\%\,rgba\(255\,255\,255\,0\)\)_center_top\,linear-gradient\(rgba\(255\,255\,255\,0\)\,var\(--v-bg\)_70\%\)_center_bottom\,radial-gradient\(farthest-side_at_50\%_0\,oklch\(from_var\(--v-bg\)_calc\(l\*0\.9\)_c_h\)\,rgba\(0\,0\,0\,0\)\)_center_top\,radial-gradient\(farthest-side_at_50\%_100\%\,oklch\(from_var\(--v-bg\)_calc\(l\*0\.9\)_c_h\)\,rgba\(0\,0\,0\,0\)\)_center_bottom\]{background:linear-gradient(var(--v-bg) 30%,rgba(255,255,255,0)) center top,linear-gradient(rgba(255,255,255,0),var(--v-bg) 70%) center bottom,radial-gradient(farthest-side at 50% 0,oklch(from var(--v-bg) calc(l*0.9) c h),rgba(0,0,0,0)) center top,radial-gradient(farthest-side at 50% 100%,oklch(from var(--v-bg) calc(l*0.9) c h),rgba(0,0,0,0)) center bottom;}.\[grid-area\:content\]{grid-area:content;}.\[grid-area\:leftGrid\]{grid-area:leftGrid;}.\[grid-area\:leftMonth\]{grid-area:leftMonth;}.\[grid-area\:nextMonth\]{grid-area:nextMonth;}.\[grid-area\:prevMonth\]{grid-area:prevMonth;}.\[grid-area\:rightGrid\]{grid-area:rightGrid;}.\[grid-area\:rightMonth\]{grid-area:rightMonth;}.\[grid-auto-rows\:var\(--day-size\,32px\)\]{grid-auto-rows:var(--day-size,32px);}.\[grid-template-areas\:\"prevMonth_leftMonth_nextMonth\"\"leftGrid_leftGrid_leftGrid\"\]{grid-template-areas:"prevMonth leftMonth nextMonth""leftGrid leftGrid leftGrid";}.\[grid-template-columns\:auto_1fr_auto\]{grid-template-columns:auto 1fr auto;}.\[grid-template-rows\:auto_1fr\]{grid-template-rows:auto 1fr;}.\[outline\:none\]{outline:none;}.\[stroke-dasharray\:80_200\]{stroke-dasharray:80 200;}.\[stroke-dashoffset\:0\]{stroke-dashoffset:0;}.contain-strict{contain:strict;}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0;}.pointer-events-auto{pointer-events:auto;}.\!pointer-events-none{pointer-events:none !important;}.pointer-events-none{pointer-events:none;}.after\:pointer-events-none::after{pointer-events:none;}.\!visible{visibility:visible !important;}.visible{visibility:visible;}.\[\&\[data-state\=active\]\]\:relative[data-state=active],.relative{position:relative;}.absolute{position:absolute;}.fixed{position:fixed;}.sticky{position:sticky;}.\[\&\[data-today\]\]\:before\:absolute[data-today]::before{position:absolute;}.before\:absolute::before{position:absolute;}.after\:absolute::after{position:absolute;}.static{position:static;}.inset-0{inset:0;}.after\:inset-0::after{inset:0;}.bottom-\[anchor\(bottom\)\]{bottom:anchor(bottom);}.bottom-\[var\(--mock-virtual-keyboard-height\,env\(keyboard-inset-height\,0px\)\)\]{bottom:var(--mock-virtual-keyboard-height,env(keyboard-inset-height,0px));}.bottom-0,.bottom-0px{bottom:0;}.bottom-2{bottom:0.5rem;}.bottom-3{bottom:0.75rem;}.left-\[anchor\(right\)\]{left:anchor(right);}.left-0{left:0;}.left-1\/2{left:50%;}.left-2{left:0.5rem;}.right-\[anchor\(right\)\]{right:anchor(right);}.right-0{right:0;}.right-1{right:0.25rem;}.right-2{right:0.5rem;}.right-md{right:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.top-\[anchor\(bottom\)\]{top:anchor(bottom);}.top-0{top:0;}.top-1\/2,.top-50\%{top:50%;}.top-1px{top:1px;}.top-2{top:0.5rem;}.top-auto{top:auto;}.top-md{top:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.top-sm{top:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.\[\&\[data-today\]\]\:before\:left-\[1px\][data-today]::before{left:1px;}.\[\&\[data-today\]\]\:before\:top-\[1px\][data-today]::before{top:1px;}.before\:left-1\/2::before{left:50%;}.before\:top-1\/2::before{top:50%;}.after\:bottom-0::after{bottom:0;}.after\:right-0::after{right:0;}.after\:top-0::after{top:0;}.after\:top-auto::after{top:auto;}.\[\&\[data-highlighted\]\]\:z-1[data-highlighted],.\[\&\[data-in-range\]\]\:z-1[data-in-range],.\[\&\[data-range-end\]\]\:z-1[data-range-end],.\[\&\[data-range-start\]\]\:z-1[data-range-start],.\[\&\[data-state\=active\]\]\:z-1[data-state=active],.z-1{z-index:1;}.\[\&\[data-selected\]\]\:z-2[data-selected]{z-index:2;}.z--1{z-index:-1;}.z-\[100000\]{z-index:100000;}.z-\[calc\(var\(--z-dialog\)\+1\)\]{z-index:calc(var(--z-dialog) + 1);}.z-1000{z-index:1000;}.z-10000{z-index:10000;}.z-10001{z-index:10001;}.hover\:z-1:hover{z-index:1;}.after\:z-1::after{z-index:1;}.grid{display:grid;}.grid-col-span-2{grid-column:span 2/span 2;}.grid-cols-\[repeat\(7\,var\(--day-size\,32px\)\)\]{grid-template-columns:repeat(7,var(--day-size,32px));}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr));}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr));}.m-0{margin:0;}.m-1{margin:0.25rem;}.m-2{margin:0.5rem;}.m-auto{margin:auto;}.m\[k\]{margin:k;}.m5\.87{margin:1.4675rem;}.my-4{margin-top:1rem;margin-bottom:1rem;}.my-auto{margin-top:auto;margin-bottom:auto;}.mb--1px{margin-bottom:-1px;}.mb-1{margin-bottom:0.25rem;}.mb-sm{margin-bottom:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.me{margin-inline-end:1rem;}.ml--1{margin-left:-0.25rem;}.ml-auto{margin-left:auto;}.ml-md{margin-left:calc(1rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.ml-sm{margin-left:calc(0.5rem * var(--spacing-scale,1) * var(--global-spacing-scale,1));}.mr--1px{margin-right:-1px;}.mr-1{margin-right:0.25rem;}.mr-auto{margin-right:auto;}.mt-2px{margin-top:2px;}.mt-auto{margin-top:auto;}.block{display:block;}.inline-block{display:inline-block;}.\!hidden{display:none !important;}.\[\&\:\:webkit-file-upload-button\]\:hidden::webkit-file-upload-button,.hidden,[data-has-icon=true] .\[\[data-has-icon\=true\]_\&\]\:hidden{display:none;}.aspect-\[9\/16\]{aspect-ratio:9/16;}.\[\&\[data-state\=closed\]\]\:max-h-\[var\(--peek-height\,120px\)\][data-state=closed]{max-height:var(--peek-height,120px);}.h-\[100vh\]{height:100vh;}.h-\[12px\]{height:12px;}.h-\[var\(--mock-virtual-keyboard-height\,0\)\]{height:var(--mock-virtual-keyboard-height,0);}.h-10{height:2.5rem;}.h-100px{height:100px;}.h-16{height:4rem;}.h-16px{height:16px;}.h-1em{height:1em;}.h-1px{height:1px;}.h-200px{height:200px;}.h-240px{height:240px;}.h-24px{height:24px;}.h-25px{height:25px;}.h-32{height:8rem;}.h-4,.h4{height:1rem;}.h-600px{height:600px;}.h-64{height:16rem;}.h-80px{height:80px;}.h-full{height:100%;}.h-touch{height:30px;}.h1{height:0.25rem;}.h2{height:0.5rem;}.h3{height:0.75rem;}.h5{height:1.25rem;}.max-h-200px{max-height:200px;}.max-h-20vh{max-height:20vh;}.max-h-full{max-height:100%;}.max-w-300px{max-width:300px;}.max-w-400px{max-width:400px;}.max-w-full{max-width:100%;}.min-h-0{min-height:0;}.min-h-18px{min-height:18px;}.min-h-20vh{min-height:20vh;}.min-h-32px{min-height:32px;}.min-h-80px{min-height:80px;}.min-h-screen{min-height:100vh;}.min-w-0{min-width:0;}.min-w-32px{min-width:32px;}.min-w-80px{min-width:80px;}.w-\[12px\]{width:12px;}.w-0{width:0;}.w-16{width:4rem;}.w-16px{width:16px;}.w-1em{width:1em;}.w-24px{width:24px;}.w-300px{width:300px;}.w-4{width:1rem;}.w-400px{width:400px;}.w-64{width:16rem;}.w-80px{width:80px;}.w-full{width:100%;}.w-max-content{width:max-content;}.w-touch{width:30px;}.\[\&\[data-today\]\]\:before\:h-\[6px\][data-today]::before{height:6px;}.\[\&\[data-today\]\]\:before\:w-\[6px\][data-today]::before{width:6px;}.before\:min-h-44px::before{min-height:44px;}.before\:min-w-44px::before{min-width:44px;}.before\:w-full::before{width:100%;}.after\:h-80px::after{height:80px;}.after\:w-50px::after{width:50px;}.\[\&\[data-state\=delayed-open\]\]\:flex[data-state=delayed-open],.\[\&\[data-state\=instant-open\]\]\:flex[data-state=instant-open],.flex{display:flex;}.after\:flex::after{display:flex;}.inline-flex{display:inline-flex;}.flex-1{flex:1 1 0%;}.flex-shrink-0,.shrink-0{flex-shrink:0;}.flex-grow-0{flex-grow:0;}.flex-grow-1,.grow{flex-grow:1;}.flex-basis-0{flex-basis:0;}.flex-basis-auto{flex-basis:auto;}.flex-row{flex-direction:row;}.flex-col{flex-direction:column;}.after\:flex-col::after{flex-direction:column;}.flex-wrap{flex-wrap:wrap;}.table{display:table;}.transform-origin-\[50\%_50\%\]{transform-origin:50% 50%;}.-translate-x-1\/2,.translate-x--1\/2{--un-translate-x:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.translate-y--1\/2,.translate-y-\[-50\%\]{--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.before\:-translate-x-1\/2::before{--un-translate-x:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.before\:-translate-y-1\/2::before{--un-translate-y:-50%;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.rotate-180{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.rotate-90{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:90deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.transform{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}.transform-gpu{transform:translate3d(var(--un-translate-x), var(--un-translate-y), var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}@keyframes peek-close{
 						from { height: calc(var(--collapsible-height) + 80px); max-height: none; }
 						to { height: min(var(--peek-height, 120px), var(--collapsible-height)); max-height: var(--peek-height, 120px); }

package/dist/esm/components/datePicker/Calendar.d.ts

@@ -0,0 +1,11 @@
+import { CalendarDaysProps } from 'calendar-blocks';
+export declare const MonthRow: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const MonthLabel: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+export declare const MonthButton: import("react").FunctionComponent<import("../button/Button.js").ButtonProps>;
+export declare const CalendarGridRoot: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const DayLabel: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+export declare const DayLabels: () => import("react/jsx-runtime").JSX.Element;
+export declare function CalendarGrid({ className, ...props }: CalendarDaysProps & {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare const CalendarDay: import("react").FunctionComponent<import("calendar-blocks").CalendarDayProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/esm/components/datePicker/Calendar.js

@@ -0,0 +1,32 @@
+// @unocss-include
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { CalendarDay as BaseCalendarDay, CalendarDays, } from 'calendar-blocks';
+import { withClassName } from '../../hooks.js';
+import { Button } from '../button/index.js';
+export const MonthRow = withClassName('div', 'flex flex-row justify-between items-center w-full');
+export const MonthLabel = withClassName('span', 'text-sm font-bold min-w-0 overflow-hidden text-center text-ellipsis', 'self-center');
+export const MonthButton = withClassName(Button, 'self-center');
+export const CalendarGridRoot = withClassName('div', 'grid grid-cols-[repeat(7,var(--day-size,32px))] [grid-auto-rows:var(--day-size,32px)]', 'height-[calc(var(--day-size,32px)*7)] rounded overflow-hidden p-2');
+export const DayLabel = withClassName('div', 'flex items-center justify-center text-sm color-gray-dark');
+export const DayLabels = () => (_jsxs(_Fragment, { children: [_jsx(DayLabel, { children: "S" }), _jsx(DayLabel, { children: "M" }), _jsx(DayLabel, { children: "T" }), _jsx(DayLabel, { children: "W" }), _jsx(DayLabel, { children: "T" }), _jsx(DayLabel, { children: "F" }), _jsx(DayLabel, { children: "S" })] }));
+export function CalendarGrid(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsxs(CalendarGridRoot, { className: className, children: [_jsx(DayLabels, {}), _jsx(CalendarDays, Object.assign({}, props))] }));
+}
+export const CalendarDay = withClassName(BaseCalendarDay, 'border border-solid border-transparent bg-white mr--1px mb--1px relative color-black', 'flex items-center justify-center transition cursor-pointer', '[&[data-highlighted]]:z-1 [&[data-highlighted]]:ring-2 [&[data-highlighted]]:ring-accent', 'hover:z-1 hover:ring-2 hover:ring-accent', 'active:bg-main-light active:rounded', '[&[data-selected]]:bg-main [&[data-selected]]:z-2 [&[data-selected]]:rounded', '[&[data-in-range]]:bg-main-light [&[data-in-range]]:rounded-none [&[data-in-range]]:z-1', '[&[data-range-start]]:bg-main [&[data-range-start]]:rounded-l [&[data-range-start]]:rounded-r-none [&[data-range-start]]:z-1', '[&[data-range-end]]:bg-main [&[data-range-end]]:rounded-r [&[data-range-end]]:rounded-l-none [&[data-range-end]]:z-1', 'disabled:opacity-50 disabled:cursor-default', 
+// today dot
+"[&[data-today]]:before:content-[''] [&[data-today]]:before:absolute [&[data-today]]:before:left-[1px] [&[data-today]]:before:top-[1px] [&[data-today]]:before:w-[6px] [&[data-today]]:before:h-[6px] [&[data-today]]:before:rounded-lg [&[data-today]]:before:bg-attention [&[data-today]]:before:border-1 [&[data-today]]:before:border-solid [&[data-today]]:before:border-black", 
+// calendar edges
+'[&[data-top-edge]]:border-t-gray', '[&[data-bottom-edge]]:border-b-gray', '[&[data-first-column]]:border-l-gray', '[&[data-last-column]]:border-r-gray', '[&[data-day-first]]:border-l-gray [&[data-day-first]]:rounded-tl', '[&[data-day-last]]:border-r-gray [&[data-day-last]]:rounded-br', '[&[data-first-column][data-bottom-edge]]:rounded-bl', '[&[data-last-column][data-bottom-edge]]:rounded-br', '[&[data-first-column][data-top-edge]]:rounded-tl', '[&[data-last-column][data-top-edge]]:rounded-tr', '[&[data-different-month]]:[visibility:hidden]');
+//# sourceMappingURL=Calendar.js.map

package/dist/esm/components/datePicker/Calendar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sourceRoot":"","sources":["../../../../src/components/datePicker/Calendar.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACN,WAAW,IAAI,eAAe,EAC9B,YAAY,GAEZ,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AAE5C,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,mDAAmD,CACnD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,aAAa,CACtC,MAAM,EACN,qEAAqE,EACrE,aAAa,CACb,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CAC5C,KAAK,EACL,uFAAuF,EACvF,mEAAmE,CACnE,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAG,aAAa,CACpC,KAAK,EACL,0DAA0D,CAC1D,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,CAC9B,8BACC,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,EACtB,KAAC,QAAQ,oBAAa,IACpB,CACH,CAAC;AAEF,MAAM,UAAU,YAAY,CAAC,EAGgB;QAHhB,EAC5B,SAAS,OAEmC,EADzC,KAAK,cAFoB,aAG5B,CADQ;IAER,OAAO,CACN,MAAC,gBAAgB,IAAC,SAAS,EAAE,SAAS,aACrC,KAAC,SAAS,KAAG,EACb,KAAC,YAAY,oBAAK,KAAK,EAAI,IACT,CACnB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CACvC,eAAe,EACf,sFAAsF,EACtF,4DAA4D,EAC5D,gDAAgD,EAChD,gCAAgC,EAChC,gCAAgC,EAChC,0CAA0C,EAC1C,qDAAqD,EACrD,8DAA8D,EAC9D,4DAA4D,EAC5D,sCAAsC;AACtC,YAAY;AACZ,gJAAgJ;AAChJ,iBAAiB;AACjB,oCAAoC,EACpC,uCAAuC,EACvC,wCAAwC,EACxC,uCAAuC,EACvC,gDAAgD,EAChD,+CAA+C,EAC/C,qDAAqD,EACrD,oDAAoD,EACpD,kDAAkD,EAClD,iDAAiD,EACjD,+CAA+C,CAC/C,CAAC"}

package/dist/esm/components/datePicker/DatePicker.d.ts

@@ -1,20 +1,49 @@
+import { CalendarDays } from 'calendar-blocks';
+import { ReactNode } from 'react';
 import { PaletteName } from '../../uno/index.js';
+import { CalendarGrid } from './Calendar.js';
+declare function DatePickerMonthControls({}: {}): import("react/jsx-runtime").JSX.Element;
+declare function DatePickerRoot({ className, color, value, onChange, children, ...rest }: DatePickerProps & {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
 export interface DatePickerProps {
     value: Date | null;
     onChange: (date: Date | null) => void;
     className?: string;
     color?: PaletteName;
 }
-export declare function DatePicker({ value, onChange, className, color, ...rest }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
-export interface DateRangePickerProps {
-    value: {
-        start: Date | null;
-        end: Date | null;
-    };
-    onChange: (value: {
-        start: Date | null;
-        end: Date | null;
-    }) => void;
-    className?: string;
-}
-export declare function DateRangePicker({ value, onChange, className, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+declare function DatePickerDefault(props: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare const DatePicker: typeof DatePickerDefault & {
+    Root: typeof DatePickerRoot;
+    Calendar: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange" | "value"> & {
+        onDisplayChange?: (newValue: {
+            month: number;
+            year: number;
+        }) => any;
+        displayYear: number;
+        displayMonth: number;
+        value?: Date | null;
+        onChange?: (value: Date | null) => any;
+        rangeValue?: {
+            start: Date | null;
+            end: Date | null;
+        };
+        onRangeChange?: (range: {
+            start: Date | null;
+            end: Date | null;
+        }) => any;
+        onRangeStartChange?: (range: Date) => any;
+        getDateEnabled?: (date: Date) => boolean;
+        defaultDate?: Date;
+        weekStartsOn?: import("calendar-blocks/dist/constants.js").WeekDay;
+    } & import("react").RefAttributes<any>>;
+    CalendarDay: import("react").FunctionComponent<import("calendar-blocks").CalendarDayProps & import("react").RefAttributes<HTMLButtonElement>>;
+    CalendarDays: typeof CalendarDays;
+    CalendarGrid: typeof CalendarGrid;
+    DayLabels: () => import("react/jsx-runtime").JSX.Element;
+    MonthControls: typeof DatePickerMonthControls;
+    MonthButton: import("react").FunctionComponent<import("../index.js").ButtonProps>;
+    MonthLabel: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+    MonthRow: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+};
+export {};

package/dist/esm/components/datePicker/DatePicker.js

@@ -10,83 +10,47 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { CalendarDay as BaseCalendarDay, Calendar, CalendarDays, } from 'calendar-blocks';
-import classNames from 'clsx';
-import { useCallback, useState } from 'react';
-import { withClassName } from '../../hooks.js';
-import { Button } from '../button/index.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Calendar, CalendarDays, useCalendarContext } from 'calendar-blocks';
+import { clsx } from 'clsx';
+import { useState } from 'react';
 import { Icon } from '../icon/index.js';
-export function DatePicker(_a) {
-    var { value, onChange, className, color } = _a, rest = __rest(_a, ["value", "onChange", "className", "color"]);
-    const [{ month, year }, setDisplay] = useState(() => ({
-        month: new Date().getMonth(),
-        year: new Date().getFullYear(),
-    }));
+import { CalendarDay, CalendarGrid, DayLabels, MonthButton, MonthLabel, MonthRow, } from './Calendar.js';
+function DatePickerMonthControls({}) {
+    const { setDisplayInfo, month, year } = useCalendarContext();
     const monthLabel = new Date(year, month).toLocaleDateString('en-US', {
         month: 'long',
         year: 'numeric',
     });
-    return (_jsxs("div", Object.assign({ className: classNames(color && `palette-${color}`, 'layer-components:flex layer-components:flex-col layer-components:items-center layer-components:justify-center layer-components:w-[calc(var(--day-size,32px)*7)]', className) }, rest, { children: [_jsxs(MonthRow, { children: [_jsx(MonthButton, { emphasis: "ghost", onClick: () => setDisplay((cur) => ({
-                            month: cur.month - 1,
-                            year: cur.year,
-                        })), children: _jsx(Icon, { name: "arrowLeft" }) }), _jsx(MonthLabel, { children: monthLabel }), _jsx(MonthButton, { emphasis: "ghost", onClick: () => setDisplay((cur) => ({
-                            month: cur.month + 1,
-                            year: cur.year,
-                        })), children: _jsx(Icon, { name: "arrowRight" }) })] }), _jsx(Calendar, { displayMonth: month, displayYear: year, value: value, onChange: onChange, onDisplayChange: setDisplay, children: _jsxs(CalendarGrid, { children: [_jsx(DayLabels, {}), _jsx(CalendarDays, { children: (value) => _jsx(CalendarDay, { value: value }, value.key) })] }) })] })));
+    return (_jsxs(MonthRow, { children: [_jsx(MonthButton, { emphasis: "ghost", onClick: () => setDisplayInfo({
+                    month: month - 1,
+                    year: year,
+                }), children: _jsx(Icon, { name: "arrowLeft" }) }), _jsx(MonthLabel, { children: monthLabel }), _jsx(MonthButton, { emphasis: "ghost", onClick: () => setDisplayInfo({
+                    month: month + 1,
+                    year: year,
+                }), children: _jsx(Icon, { name: "arrowRight" }) })] }));
 }
-export function DateRangePicker({ value, onChange, className, }) {
+function DatePickerRoot(_a) {
+    var { className, color, value, onChange, children } = _a, rest = __rest(_a, ["className", "color", "value", "onChange", "children"]);
     const [{ month, year }, setDisplay] = useState(() => ({
         month: new Date().getMonth(),
         year: new Date().getFullYear(),
     }));
-    const monthLabel = new Date(year, month).toLocaleDateString('en-US', {
-        month: 'long',
-        year: 'numeric',
-    });
-    const nextMonth = new Date(year, month + 1);
-    const nextMonthLabel = nextMonth.toLocaleDateString('en-US', {
-        month: 'long',
-        year: 'numeric',
-    });
-    const onDisplayChange = useCallback(({ month: newMonth, year: newYear }) => {
-        /**
-         * Important UX consideration:
-         *
-         * since we are displaying 2 months at once, we don't
-         * always want to change our view if the user's cursor
-         * date moves from one month to another. Specifically,
-         * if they move from the first visible month to the
-         * second visible month, we don't need to change the view,
-         * since they are still within the visible range.
-         * So, we write logic to ignore that case!
-         */
-        if (newMonth === month + 1 && newYear === year) {
-            return; // ignore movement from the first to the second frame
-        }
-        setDisplay({
-            month: newMonth,
-            year: newYear,
-        });
-    }, [month, year]);
-    return (_jsx(Calendar, { displayMonth: month, displayYear: year, rangeValue: value, onRangeChange: (range) => onChange(range), onDisplayChange: onDisplayChange, className: classNames('flex justify-center', className), children: _jsxs(RangeLayout, { children: [_jsx(MonthButton, { emphasis: "ghost", className: "[grid-area:prevMonth]", onClick: () => setDisplay((cur) => ({
-                        month: cur.month - 1,
-                        year: cur.year,
-                    })), children: _jsx(Icon, { name: "arrowLeft" }) }), _jsx(MonthLabel, { className: "[grid-area:leftMonth]", children: monthLabel }), _jsx(MonthLabel, { className: "[grid-area:rightMonth] !hidden !sm:block", children: nextMonthLabel }), _jsx(MonthButton, { emphasis: "ghost", className: "[grid-area:nextMonth]", onClick: () => setDisplay((cur) => ({
-                        month: cur.month + 1,
-                        year: cur.year,
-                    })), children: _jsx(Icon, { name: "arrowRight" }) }), _jsxs(CalendarGrid, { className: "[grid-area:leftGrid]", children: [_jsx(DayLabels, {}), _jsx(CalendarDays, { children: (value) => _jsx(CalendarDay, { value: value }, value.key) })] }), _jsxs(CalendarGrid, { className: "[grid-area:rightGrid] !hidden !sm:grid", children: [_jsx(DayLabels, {}), _jsx(CalendarDays, { monthOffset: 1, children: (value) => _jsx(CalendarDay, { value: value }, value.key) })] })] }) }));
+    return (_jsx("div", Object.assign({ className: clsx(color && `palette-${color}`, 'layer-components:flex layer-components:flex-col layer-components:items-center layer-components:justify-center layer-components:w-[calc(var(--day-size,32px)*7)]') }, rest, { children: _jsx(Calendar, { displayMonth: month, displayYear: year, value: value, onChange: onChange, onDisplayChange: setDisplay, children: children }) })));
+}
+function DatePickerDefault(props) {
+    return (_jsxs(DatePickerRoot, Object.assign({}, props, { children: [_jsx(DatePickerMonthControls, {}), _jsx(CalendarGrid, { children: (value) => _jsx(CalendarDay, { value: value }, value.key) })] })));
 }
-const MonthRow = withClassName('div', 'flex flex-row justify-between items-center w-full');
-const MonthLabel = withClassName('span', 'text-sm font-bold min-w-0 overflow-hidden text-center text-ellipsis', 'self-center');
-const MonthButton = withClassName(Button, 'self-center');
-const CalendarGrid = withClassName('div', 'grid grid-cols-[repeat(7,var(--day-size,32px))] [grid-auto-rows:var(--day-size,32px)]', 'height-[calc(var(--day-size,32px)*7)] rounded overflow-hidden p-2');
-const CalendarDay = withClassName(BaseCalendarDay, 'border border-solid border-transparent bg-white mr--1px mb--1px relative color-black', 'flex items-center justify-center transition cursor-pointer', '[&[data-highlighted]]:z-1 [&[data-highlighted]]:ring-2 [&[data-highlighted]]:ring-accent', 'hover:z-1 hover:ring-2 hover:ring-accent', 'active:bg-main-light active:rounded', '[&[data-selected]]:bg-main [&[data-selected]]:z-2 [&[data-selected]]:rounded', '[&[data-in-range]]:bg-main-light [&[data-in-range]]:rounded-none [&[data-in-range]]:z-1', '[&[data-range-start]]:bg-main [&[data-range-start]]:rounded-l [&[data-range-start]]:rounded-r-none [&[data-range-start]]:z-1', '[&[data-range-end]]:bg-main [&[data-range-end]]:rounded-r [&[data-range-end]]:rounded-l-none [&[data-range-end]]:z-1', 'disabled:opacity-50 disabled:cursor-default', 
-// today dot
-"[&[data-today]]:before:content-[''] [&[data-today]]:before:absolute [&[data-today]]:before:left-[1px] [&[data-today]]:before:top-[1px] [&[data-today]]:before:w-[6px] [&[data-today]]:before:h-[6px] [&[data-today]]:before:rounded-lg [&[data-today]]:before:bg-attention [&[data-today]]:before:border-1 [&[data-today]]:before:border-solid [&[data-today]]:before:border-black", 
-// calendar edges
-'[&[data-top-edge]]:border-t-gray', '[&[data-bottom-edge]]:border-b-gray', '[&[data-first-column]]:border-l-gray', '[&[data-last-column]]:border-r-gray', '[&[data-day-first]]:border-l-gray [&[data-day-first]]:rounded-tl', '[&[data-day-last]]:border-r-gray [&[data-day-last]]:rounded-br', '[&[data-first-column][data-bottom-edge]]:rounded-bl', '[&[data-last-column][data-bottom-edge]]:rounded-br', '[&[data-first-column][data-top-edge]]:rounded-tl', '[&[data-last-column][data-top-edge]]:rounded-tr', '[&[data-different-month]]:[visibility:hidden]');
-const DayLabel = withClassName('div', 'flex items-center justify-center text-sm color-gray-dark');
-const DayLabels = () => (_jsxs(_Fragment, { children: [_jsx(DayLabel, { children: "S" }), _jsx(DayLabel, { children: "M" }), _jsx(DayLabel, { children: "T" }), _jsx(DayLabel, { children: "W" }), _jsx(DayLabel, { children: "T" }), _jsx(DayLabel, { children: "F" }), _jsx(DayLabel, { children: "S" })] }));
-const RangeLayout = withClassName('div', 'grid [grid-template-areas:"prevMonth_leftMonth_nextMonth""leftGrid_leftGrid_leftGrid"] [grid-template-columns:auto_1fr_auto]', '[grid-template-rows:auto_1fr] gap-2', 'sm:grid-areas-[prevMonth_leftMonth_rightMonth_nextMonth]-[leftGrid_leftGrid_rightGrid_rightGrid] sm:[grid-template-columns:auto_1fr_1fr_auto]');
+export const DatePicker = Object.assign(DatePickerDefault, {
+    Root: DatePickerRoot,
+    Calendar,
+    CalendarDay,
+    CalendarDays,
+    CalendarGrid,
+    DayLabels,
+    MonthControls: DatePickerMonthControls,
+    MonthButton,
+    MonthLabel,
+    MonthRow,
+});
 //# sourceMappingURL=DatePicker.js.map

package/dist/esm/components/datePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components/datePicker/DatePicker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../../src/components/datePicker/DatePicker.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC7E,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAC5B,OAAO,EAAa,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EACN,WAAW,EACX,YAAY,EACZ,SAAS,EACT,WAAW,EACX,UAAU,EACV,QAAQ,GACR,MAAM,eAAe,CAAC;AAEvB,SAAS,uBAAuB,CAAC,EAAM;IACtC,MAAM,EAAE,cAAc,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,kBAAkB,EAAE,CAAC;IAC7D,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC,kBAAkB,CAAC,OAAO,EAAE;QACpE,KAAK,EAAE,MAAM;QACb,IAAI,EAAE,SAAS;KACf,CAAC,CAAC;IAEH,OAAO,CACN,MAAC,QAAQ,eACR,KAAC,WAAW,IACX,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAE,GAAG,EAAE,CACb,cAAc,CAAC;oBACd,KAAK,EAAE,KAAK,GAAG,CAAC;oBAChB,IAAI,EAAE,IAAI;iBACV,CAAC,YAGH,KAAC,IAAI,IAAC,IAAI,EAAC,WAAW,GAAG,GACZ,EACd,KAAC,UAAU,cAAE,UAAU,GAAc,EACrC,KAAC,WAAW,IACX,QAAQ,EAAC,OAAO,EAChB,OAAO,EAAE,GAAG,EAAE,CACb,cAAc,CAAC;oBACd,KAAK,EAAE,KAAK,GAAG,CAAC;oBAChB,IAAI,EAAE,IAAI;iBACV,CAAC,YAGH,KAAC,IAAI,IAAC,IAAI,EAAC,YAAY,GAAG,GACb,IACJ,CACX,CAAC;AACH,CAAC;AAED,SAAS,cAAc,CAAC,EASvB;QATuB,EACvB,SAAS,EACT,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,OAIR,EAHG,IAAI,cANgB,uDAOvB,CADO;IAIP,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,EAAE,CAAC,CAAC;QACrD,KAAK,EAAE,IAAI,IAAI,EAAE,CAAC,QAAQ,EAAE;QAC5B,IAAI,EAAE,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE;KAC9B,CAAC,CAAC,CAAC;IAEJ,OAAO,CACN,4BACC,SAAS,EAAE,IAAI,CACd,KAAK,IAAI,WAAW,KAAK,EAAE,EAC3B,+FAA+F,CAC/F,IACG,IAAI,cAER,KAAC,QAAQ,IACR,YAAY,EAAE,KAAK,EACnB,WAAW,EAAE,IAAI,EACjB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,UAAU,YAE1B,QAAQ,GACC,IACN,CACN,CAAC;AACH,CAAC;AASD,SAAS,iBAAiB,CAAC,KAAsB;IAChD,OAAO,CACN,MAAC,cAAc,oBAAK,KAAK,eACxB,KAAC,uBAAuB,KAAG,EAC3B,KAAC,YAAY,cACX,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,WAAW,IAAC,KAAK,EAAE,KAAK,IAAO,KAAK,CAAC,GAAG,CAAI,GAC3C,KACC,CACjB,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAAC,iBAAiB,EAAE;IAC1D,IAAI,EAAE,cAAc;IACpB,QAAQ;IACR,WAAW;IACX,YAAY;IACZ,YAAY;IACZ,SAAS;IACT,aAAa,EAAE,uBAAuB;IACtC,WAAW;IACX,UAAU;IACV,QAAQ;CACR,CAAC,CAAC"}

package/dist/esm/components/datePicker/DatePicker.stories.d.ts

@@ -2,7 +2,41 @@ import type { StoryObj } from '@storybook/react';
 import { DatePicker } from './DatePicker.js';
 declare const meta: {
     title: string;
-    component: typeof DatePicker;
+    component: ((props: import("./DatePicker.js").DatePickerProps) => import("react/jsx-runtime").JSX.Element) & {
+        Root: ({ className, color, value, onChange, children, ...rest }: import("./DatePicker.js").DatePickerProps & {
+            children?: import("react").ReactNode;
+        }) => import("react/jsx-runtime").JSX.Element;
+        Calendar: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange" | "value"> & {
+            onDisplayChange?: (newValue: {
+                month: number;
+                year: number;
+            }) => any;
+            displayYear: number;
+            displayMonth: number;
+            value?: Date | null;
+            onChange?: (value: Date | null) => any;
+            rangeValue?: {
+                start: Date | null;
+                end: Date | null;
+            };
+            onRangeChange?: (range: {
+                start: Date | null;
+                end: Date | null;
+            }) => any;
+            onRangeStartChange?: (range: Date) => any;
+            getDateEnabled?: (date: Date) => boolean;
+            defaultDate?: Date;
+            weekStartsOn?: import("calendar-blocks/dist/constants.js").WeekDay;
+        } & import("react").RefAttributes<any>>;
+        CalendarDay: import("react").FunctionComponent<import("calendar-blocks").CalendarDayProps & import("react").RefAttributes<HTMLButtonElement>>;
+        CalendarDays: typeof import("calendar-blocks").CalendarDays;
+        CalendarGrid: typeof import("./Calendar.js").CalendarGrid;
+        DayLabels: () => import("react/jsx-runtime").JSX.Element;
+        MonthControls: ({}: {}) => import("react/jsx-runtime").JSX.Element;
+        MonthButton: import("react").FunctionComponent<import("../index.js").ButtonProps>;
+        MonthLabel: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+        MonthRow: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    };
     argTypes: {};
     parameters: {
         controls: {
@@ -14,3 +48,4 @@ export default meta;
 type Story = StoryObj<typeof DatePicker>;
 export declare const Default: Story;
 export declare const Range: Story;
+export declare const CustomComposition: Story;

package/dist/esm/components/datePicker/DatePicker.stories.js

@@ -1,7 +1,9 @@
 // @unocss-include
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useState } from 'react';
-import { DatePicker, DateRangePicker } from './DatePicker.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { Spinner } from '../spinner/Spinner.js';
+import { DatePicker } from './DatePicker.js';
+import { DateRangePicker } from './DateRangePicker.js';
 const meta = {
     title: 'Components/DatePicker',
     component: DatePicker,
@@ -23,4 +25,18 @@ export const Range = {
         return _jsx(DateRangePicker, { value: value, onChange: setValue });
     },
 };
+export const CustomComposition = {
+    render() {
+        const [value, setValue] = useState(null);
+        return (_jsxs(DatePicker.Root, { value: value, onChange: setValue, children: [_jsx(DatePicker.MonthControls, {}), _jsx(DatePicker.CalendarGrid, { children: (value) => _jsx(FakeLoadingDay, { value: value }, value.key) })] }));
+    },
+};
+function FakeLoadingDay({ value }) {
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        const timeout = setTimeout(() => setLoading(false), Math.random() * 2000 + 500);
+        return () => clearTimeout(timeout);
+    }, []);
+    return (_jsx(DatePicker.CalendarDay, { value: value, children: loading ? _jsx(Spinner, { size: 10 }) : value.date.getDate() }));
+}
 //# sourceMappingURL=DatePicker.stories.js.map

package/dist/esm/components/datePicker/DatePicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../src/components/datePicker/DatePicker.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAE9D,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACiC,CAAC;AAEpC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAc,IAAI,CAAC,CAAC;QACtD,OAAO,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IACzD,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC3B,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAG/B,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;QAC/B,OAAO,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IAC9D,CAAC;CACD,CAAC"}
+{"version":3,"file":"DatePicker.stories.js","sourceRoot":"","sources":["../../../../src/components/datePicker/DatePicker.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CACiC,CAAC;AAEpC,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAc,IAAI,CAAC,CAAC;QACtD,OAAO,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IACzD,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC3B,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAG/B,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC,CAAC;QAC/B,OAAO,KAAC,eAAe,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,GAAI,CAAC;IAC9D,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACvC,MAAM;QACL,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAc,IAAI,CAAC,CAAC;QAEtD,OAAO,CACN,MAAC,UAAU,CAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,aAChD,KAAC,UAAU,CAAC,aAAa,KAAG,EAC5B,KAAC,UAAU,CAAC,YAAY,cACtB,CAAC,KAAK,EAAE,EAAE,CAAC,KAAC,cAAc,IAAC,KAAK,EAAE,KAAK,IAAO,KAAK,CAAC,GAAG,CAAI,GACnC,IACT,CAClB,CAAC;IACH,CAAC;CACD,CAAC;AAEF,SAAS,cAAc,CAAC,EAAE,KAAK,EAA+B;IAC7D,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IAC7C,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,OAAO,GAAG,UAAU,CACzB,GAAG,EAAE,CAAC,UAAU,CAAC,KAAK,CAAC,EACvB,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,GAAG,GAAG,CAC1B,CAAC;QACF,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACN,KAAC,UAAU,CAAC,WAAW,IAAC,KAAK,EAAE,KAAK,YAClC,OAAO,CAAC,CAAC,CAAC,KAAC,OAAO,IAAC,IAAI,EAAE,EAAE,GAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,GAC/B,CACzB,CAAC;AACH,CAAC"}

package/dist/esm/components/datePicker/DateRangePicker.d.ts

@@ -0,0 +1,55 @@
+import { CalendarDays } from 'calendar-blocks';
+import { ReactNode } from 'react';
+import { PaletteName } from '../../uno/index.js';
+import { CalendarGrid } from './Calendar.js';
+declare function DateRangePickerMonthControls(): import("react/jsx-runtime").JSX.Element;
+declare function DateRangePickerRoot({ children, color, value, onChange, className, ...rest }: DateRangePickerProps & {
+    children?: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export interface DateRangePickerProps {
+    value: {
+        start: Date | null;
+        end: Date | null;
+    };
+    onChange: (value: {
+        start: Date | null;
+        end: Date | null;
+    }) => void;
+    className?: string;
+    color?: PaletteName;
+}
+declare function DateRangePickerBase(props: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare const DateRangePicker: typeof DateRangePickerBase & {
+    Root: typeof DateRangePickerRoot;
+    RangeLayout: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>>;
+    DayLabels: () => import("react/jsx-runtime").JSX.Element;
+    CalendarDay: import("react").FunctionComponent<import("calendar-blocks").CalendarDayProps & import("react").RefAttributes<HTMLButtonElement>>;
+    Calendar: import("react").ForwardRefExoticComponent<Omit<import("react").HTMLAttributes<HTMLDivElement>, "onChange" | "value"> & {
+        onDisplayChange?: (newValue: {
+            month: number;
+            year: number;
+        }) => any;
+        displayYear: number;
+        displayMonth: number;
+        value?: Date | null;
+        onChange?: (value: Date | null) => any;
+        rangeValue?: {
+            start: Date | null;
+            end: Date | null;
+        };
+        onRangeChange?: (range: {
+            start: Date | null;
+            end: Date | null;
+        }) => any;
+        onRangeStartChange?: (range: Date) => any;
+        getDateEnabled?: (date: Date) => boolean;
+        defaultDate?: Date;
+        weekStartsOn?: import("calendar-blocks/dist/constants.js").WeekDay;
+    } & import("react").RefAttributes<any>>;
+    CalendarGrid: typeof CalendarGrid;
+    CalendarDays: typeof CalendarDays;
+    MonthControls: typeof DateRangePickerMonthControls;
+    MonthButton: import("react").FunctionComponent<import("../index.js").ButtonProps>;
+    MonthLabel: import("react").FunctionComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>>;
+};
+export {};

package/dist/esm/components/datePicker/DateRangePicker.js

@@ -0,0 +1,83 @@
+// @unocss-include
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Calendar, CalendarDays, useCalendarContext } from 'calendar-blocks';
+import clsx from 'clsx';
+import { useCallback, useState } from 'react';
+import { withClassName } from '../../hooks.js';
+import { Icon } from '../icon/Icon.js';
+import { CalendarDay, CalendarGrid, DayLabels, MonthButton, MonthLabel, } from './Calendar.js';
+const RangeLayout = withClassName('div', 'grid [grid-template-areas:"prevMonth_leftMonth_nextMonth""leftGrid_leftGrid_leftGrid"] [grid-template-columns:auto_1fr_auto]', '[grid-template-rows:auto_1fr] gap-2', 'sm:grid-areas-[prevMonth_leftMonth_rightMonth_nextMonth]-[leftGrid_leftGrid_rightGrid_rightGrid] sm:[grid-template-columns:auto_1fr_1fr_auto]');
+function DateRangePickerMonthControls() {
+    const { setDisplayInfo, month, year } = useCalendarContext();
+    const monthLabel = new Date(year, month).toLocaleDateString('en-US', {
+        month: 'long',
+        year: 'numeric',
+    });
+    const nextMonth = new Date(year, month + 1);
+    const nextMonthLabel = nextMonth.toLocaleDateString('en-US', {
+        month: 'long',
+        year: 'numeric',
+    });
+    return (_jsxs(_Fragment, { children: [_jsx(MonthButton, { emphasis: "ghost", className: "[grid-area:prevMonth]", onClick: () => setDisplayInfo({
+                    month: month - 1,
+                    year: year,
+                }), children: _jsx(Icon, { name: "arrowLeft" }) }), _jsx(MonthLabel, { className: "[grid-area:leftMonth]", children: monthLabel }), _jsx(MonthLabel, { className: "[grid-area:rightMonth] !hidden !sm:block", children: nextMonthLabel }), _jsx(MonthButton, { emphasis: "ghost", className: "[grid-area:nextMonth]", onClick: () => setDisplayInfo({
+                    month: month + 1,
+                    year: year,
+                }), children: _jsx(Icon, { name: "arrowRight" }) })] }));
+}
+function DateRangePickerRoot(_a) {
+    var { children, color, value, onChange, className } = _a, rest = __rest(_a, ["children", "color", "value", "onChange", "className"]);
+    const [{ month, year }, setDisplay] = useState(() => ({
+        month: new Date().getMonth(),
+        year: new Date().getFullYear(),
+    }));
+    const onDisplayChange = useCallback(({ month: newMonth, year: newYear }) => {
+        /**
+         * Important UX consideration:
+         *
+         * since we are displaying 2 months at once, we don't
+         * always want to change our view if the user's cursor
+         * date moves from one month to another. Specifically,
+         * if they move from the first visible month to the
+         * second visible month, we don't need to change the view,
+         * since they are still within the visible range.
+         * So, we write logic to ignore that case!
+         */
+        if (newMonth === month + 1 && newYear === year) {
+            return; // ignore movement from the first to the second frame
+        }
+        setDisplay({
+            month: newMonth,
+            year: newYear,
+        });
+    }, [month, year]);
+    return (_jsx(Calendar, Object.assign({ displayMonth: month, displayYear: year, rangeValue: value, onRangeChange: (range) => onChange(range), onDisplayChange: onDisplayChange, className: clsx('flex justify-center', color && `palette-${color}`, className) }, rest, { children: _jsx(RangeLayout, { children: children }) })));
+}
+function DateRangePickerBase(props) {
+    return (_jsxs(DateRangePickerRoot, Object.assign({}, props, { children: [_jsx(DateRangePickerMonthControls, {}), _jsx(CalendarGrid, { className: "[grid-area:leftGrid]", children: (value) => _jsx(CalendarDay, { value: value }, value.key) }), _jsx(CalendarGrid, { className: "[grid-area:rightGrid] !hidden !sm:grid", monthOffset: 1, children: (value) => _jsx(CalendarDay, { value: value }, value.key) })] })));
+}
+export const DateRangePicker = Object.assign(DateRangePickerBase, {
+    Root: DateRangePickerRoot,
+    RangeLayout,
+    DayLabels,
+    CalendarDay,
+    Calendar,
+    CalendarGrid,
+    CalendarDays,
+    MonthControls: DateRangePickerMonthControls,
+    MonthButton,
+    MonthLabel,
+});
+//# sourceMappingURL=DateRangePicker.js.map

package/dist/esm/components/datePicker/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","sourceRoot":"","sources":["../../../../src/components/datePicker/DateRangePicker.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/datePicker/index.d.ts

@@ -1 +1,3 @@
+export type * from 'calendar-blocks';
 export * from './DatePicker.js';
+export * from './DateRangePicker.js';

package/dist/esm/components/datePicker/index.js

@@ -1,3 +1,4 @@
 // @unocss-include
 export * from './DatePicker.js';
+export * from './DateRangePicker.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/components/datePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/datePicker/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/datePicker/index.ts"],"names":[],"mappings":"AACA,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC"}