@clubmed/trident-ui 1.1.0-rc.3 → 1.1.0-rc.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # ClubMed React UI components changelog
 
+# [1.1.0-rc.4](https://scm.clubmed.com/clubmed/cm-trident-ui/compare/v1.1.0-rc.3...v1.1.0-rc.4) (2024-10-25)
+
+
+### Features
+
+* **molecules:** add Avatar component ([1a5717a](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/1a5717ab3b00c6923ef1a5d00894c2ab6e627586))
+* **molecules:** add new ID Button example on Button story ([b05ed10](https://scm.clubmed.com/clubmed/cm-trident-ui/-/commit/b05ed1087a1c4b2ec8657d37dea77f6d8a706bc7))
+
 # [1.1.0-rc.3](https://scm.clubmed.com/clubmed/cm-trident-ui/compare/v1.1.0-rc.2...v1.1.0-rc.3) (2024-10-25)
 
 

package/assets/style.css

@@ -1 +1 @@
-.tab-focus-pill{transform:translate(calc(var(--tab-index, 0) * -100% + var(--active-tab, 0) * 100% - (.25rem * (var(--tab-index) - var(--active-tab, 0)))))}[dir=rtl] .tab-focus-pill{transform:translate(calc(var(--tab-index) * 100% + var(--active-tab) * -100% + (.25rem * (var(--tab-index) - var(--active-tab)))))}label>span>input[type=checkbox]:not([role=switch]),label>span>input[type=radio]{position:absolute;height:100%;width:100%;border-width:0px;opacity:0}label>span>input[type=checkbox]:not([role=switch])+span,label>span>input[type=radio]+span{position:relative;display:flex;align-items:center;justify-content:center;border-width:1px;--tw-border-opacity: 1;border-color:hsl(var(--color-grey) / var(--tw-border-opacity));--tw-ring-opacity: 0;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>span>input[type=checkbox]:not([role=switch])+span svg,label>span>input[type=radio]+span svg{opacity:0;transform:scale(0);transform-origin:center;transition:all var(--transition-duration-boop) var(--transition-fn-boop)}label>span>input[type=checkbox]:not([role=switch]):checked+span svg,label>span>input[type=radio]:checked+span svg{opacity:1;transform:scale(1)}label>span>input[type=checkbox]:not([role=switch]):checked+span,label>span>input[type=checkbox]:not([role=switch]):not([disabled]):hover+span,label>span>input[type=radio]:checked+span,label>span>input[type=radio]:not([disabled]):hover+span{--tw-border-opacity: 1;border-color:hsl(var(--color-black) / var(--tw-border-opacity))}label>span>input[type=checkbox]:not([role=switch]):focus-visible+span,label>span>input[type=radio]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}label>span>input[type=radio]+span{border-radius:100%}label>span>input[type=checkbox]:not([role=switch])+span{border-radius:.5rem}label>input[type=checkbox][data-name=Filter]{position:absolute;height:100%;width:100%;border-width:0px;opacity:0}label>input[type=checkbox][data-name=Filter]+span{--tw-ring-opacity: 0;transition-property:all;position:relative;display:flex;align-items:center;justify-content:center;border-radius:7.5rem;border-width:1px;--tw-border-opacity: 1;border-color:hsl(var(--color-grey) / var(--tw-border-opacity));padding:.75rem 1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>input[type=checkbox][data-name=Filter]+span [data-icon=CheckDefault]{--tw-text-opacity: 1;color:hsl(var(--color-black) / var(--tw-text-opacity));opacity:0;transform:scale(0);transform-origin:center;width:0;transition:all var(--transition-duration-boop) var(--transition-fn-boop)}label>input[type=checkbox][data-name=Filter]:not([disabled]):not(:checked):hover+span{--tw-border-opacity: 1;border-color:hsl(var(--color-black) / var(--tw-border-opacity))}label>input[type=checkbox][data-name=Filter]:checked+span{--tw-border-opacity: 1;border-color:hsl(var(--color-saffron) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity))}label>input[type=checkbox][data-name=Filter]:checked+span [data-icon=CheckDefault]{margin-left:.5rem;opacity:1;width:24px;transform:scale(1)}label>input[type=checkbox][data-name=Filter]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}label>span>input[type=checkbox][role=switch]+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / var(--tw-ring-opacity));--tw-ring-opacity: 0;transition-property:all;position:relative;display:flex;align-items:center;border-radius:7.5rem;--tw-bg-opacity: 1;background-color:hsl(var(--color-grey) / var(--tw-bg-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>span>input[type=checkbox][role=switch]+span>svg{transition:all var(--transition-duration-boop) var(--transition-fn-boop);transform:translate(calc(0% + 4px))}label>span>input[type=checkbox][role=switch]+span>svg circle+circle{opacity:1;transition:opacity var(--transition-duration-boop) var(--transition-fn-boop)}label>span>input[type=checkbox][role=switch]:checked+span{--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity))}label>span>input[type=checkbox][role=switch]:checked+span>svg{transform:translate(calc(100% + 4px))}label>span>input[type=checkbox][role=switch]:checked+span>svg circle+circle{opacity:0}label>span>input[type=checkbox][role=switch]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}a[data-name=ButtonAnchor]:not([disabled]),button[data-name=Button]:not([disabled]){--tw-ring-opacity: 0;transition:all .2s ease-in-out;transform:translateZ(0) rotateX(0) rotateY(0) rotate(0) scaleZ(1) skew(0)}a[data-name=ButtonAnchor]:not([disabled]):active,button[data-name=Button]:not([disabled]):active{transform:translateZ(0) rotateX(0) rotateY(0) rotate(0) scale3D(.9799515022153259,.9799515022153259,.9799515022153259) skew(0)}a[data-name=ButtonAnchor]:not([disabled]):focus-visible,button[data-name=Button]:not([disabled]):focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2);outline:none}.container{width:100%}@media (min-width: 96em){.container{max-width:96em}}@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: 1220px){.container{max-width:1220px}}@media (min-width: 2060px){.container{max-width:2060px}}.input-range-container{position:relative;--tw-bg-opacity: 1;background-color:hsl(var(--color-pearl) / var(--tw-bg-opacity));display:grid;--diff: calc(var(--max) - var(--min));--tickmarkWidth: 2px;grid-template:repeat(2,max-content) var(--inputHeight) / 1fr 1fr;width:var(--inputWidth);background-image:repeating-linear-gradient(90deg,#999,#999 var(--tickmarkWidth),hsl(var(--color-pearl)) 0,hsl(var(--color-pearl)) calc(((100% - var(--tickmarkWidth)) / var(--max))))}.input-range-container:before,.input-range-container:after{--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity));grid-column:1 / span 2;grid-row:3;content:""}html:not(.rtl) .input-range-container:before{margin-left:calc((var(--valueA) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueB) - var(--valueA)) / var(--diff) * var(--usefulWidth))}html:not(.rtl) .input-range-container:after{margin-left:calc((var(--valueB) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueA) - var(--valueB)) / var(--diff) * var(--usefulWidth))}.rtl .input-range-container:before{margin-right:calc((var(--valueA) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueB) - var(--valueA)) / var(--diff) * var(--usefulWidth))}.rtl .input-range-container:after{margin-right:calc((var(--valueB) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueA) - var(--valueB)) / var(--diff) * var(--usefulWidth))}.input-range{z-index:1;top:0;left:0;margin:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;grid-column:1 / span 2;grid-row:3;background:none;--col: #000}.input-range-sliderThumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-webkit-slider-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-webkit-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-webkit-slider-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range::-moz-range-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-moz-appearance:none;-webkit-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-moz-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-moz-range-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range::-ms-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-ms-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-ms-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-webkit-slider-runnable-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-moz-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-ms-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range-output{display:block;position:absolute;margin-top:1.25rem;font-size:.75rem;line-height:.875rem;font-weight:600;left:calc(.5 * var(--thumbWidth))}html:not(.rtl) .input-range-output{transform:translate(calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * var(--usefulWidth) - 50%))}.rtl .input-range-output{transform:translate(calc((var(--max) - var(--value) - var(--min)) / (var(--max) - var(--min)) * var(--usefulWidth) - 50%))}
+.tab-focus-pill{transform:translate(calc(var(--tab-index, 0) * -100% + var(--active-tab, 0) * 100% - (.25rem * (var(--tab-index) - var(--active-tab, 0)))))}[dir=rtl] .tab-focus-pill{transform:translate(calc(var(--tab-index) * 100% + var(--active-tab) * -100% + (.25rem * (var(--tab-index) - var(--active-tab)))))}label>span>input[type=checkbox]:not([role=switch]),label>span>input[type=radio]{position:absolute;height:100%;width:100%;border-width:0px;opacity:0}label>span>input[type=checkbox]:not([role=switch])+span,label>span>input[type=radio]+span{position:relative;display:flex;align-items:center;justify-content:center;border-width:1px;--tw-border-opacity: 1;border-color:hsl(var(--color-grey) / var(--tw-border-opacity));--tw-ring-opacity: 0;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>span>input[type=checkbox]:not([role=switch])+span svg,label>span>input[type=radio]+span svg{opacity:0;transform:scale(0);transform-origin:center;transition:all var(--transition-duration-boop) var(--transition-fn-boop)}label>span>input[type=checkbox]:not([role=switch]):checked+span svg,label>span>input[type=radio]:checked+span svg{opacity:1;transform:scale(1)}label>span>input[type=checkbox]:not([role=switch]):checked+span,label>span>input[type=checkbox]:not([role=switch]):not([disabled]):hover+span,label>span>input[type=radio]:checked+span,label>span>input[type=radio]:not([disabled]):hover+span{--tw-border-opacity: 1;border-color:hsl(var(--color-black) / var(--tw-border-opacity))}label>span>input[type=checkbox]:not([role=switch]):focus-visible+span,label>span>input[type=radio]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}label>span>input[type=radio]+span{border-radius:100%}label>span>input[type=checkbox]:not([role=switch])+span{border-radius:.5rem}label>input[type=checkbox][data-name=Filter]{position:absolute;height:100%;width:100%;border-width:0px;opacity:0}label>input[type=checkbox][data-name=Filter]+span{--tw-ring-opacity: 0;transition-property:all;position:relative;display:flex;align-items:center;justify-content:center;border-radius:7.5rem;border-width:1px;--tw-border-opacity: 1;border-color:hsl(var(--color-grey) / var(--tw-border-opacity));padding:.75rem 1.25rem;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>input[type=checkbox][data-name=Filter]+span [data-icon=CheckDefault]{--tw-text-opacity: 1;color:hsl(var(--color-black) / var(--tw-text-opacity));opacity:0;transform:scale(0);transform-origin:center;width:0;transition:all var(--transition-duration-boop) var(--transition-fn-boop)}label>input[type=checkbox][data-name=Filter]:not([disabled]):not(:checked):hover+span{--tw-border-opacity: 1;border-color:hsl(var(--color-black) / var(--tw-border-opacity))}label>input[type=checkbox][data-name=Filter]:checked+span{--tw-border-opacity: 1;border-color:hsl(var(--color-saffron) / var(--tw-border-opacity));--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity))}label>input[type=checkbox][data-name=Filter]:checked+span [data-icon=CheckDefault]{margin-left:.5rem;opacity:1;width:24px;transform:scale(1)}label>input[type=checkbox][data-name=Filter]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}label>span>input[type=checkbox][role=switch]+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / var(--tw-ring-opacity));--tw-ring-opacity: 0;transition-property:all;position:relative;display:flex;align-items:center;border-radius:7.5rem;--tw-bg-opacity: 1;background-color:hsl(var(--color-grey) / var(--tw-bg-opacity));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s}label>span>input[type=checkbox][role=switch]+span>svg{transition:all var(--transition-duration-boop) var(--transition-fn-boop);transform:translate(calc(0% + 4px))}label>span>input[type=checkbox][role=switch]+span>svg circle+circle{opacity:1;transition:opacity var(--transition-duration-boop) var(--transition-fn-boop)}label>span>input[type=checkbox][role=switch]:checked+span{--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity))}label>span>input[type=checkbox][role=switch]:checked+span>svg{transform:translate(calc(100% + 4px))}label>span>input[type=checkbox][role=switch]:checked+span>svg circle+circle{opacity:0}label>span>input[type=checkbox][role=switch]:focus-visible+span{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2)}a[data-name=ButtonAnchor]:not([disabled]),button[data-name=Button]:not([disabled]){--tw-ring-opacity: 0;transition:all .2s ease-in-out;transform:translateZ(0) rotateX(0) rotateY(0) rotate(0) scaleZ(1) skew(0)}a[data-name=ButtonAnchor]:not([disabled]) .transition-colors,a[data-name=ButtonAnchor]:not([disabled]) small,button[data-name=Button]:not([disabled]) .transition-colors,button[data-name=Button]:not([disabled]) small{transition:color .2s ease-in-out;transform:translateZ(0) rotateX(0) rotateY(0) rotate(0) scaleZ(1) skew(0)}a[data-name=ButtonAnchor]:not([disabled]):active,button[data-name=Button]:not([disabled]):active{transform:translateZ(0) rotateX(0) rotateY(0) rotate(0) scale3D(.9799515022153259,.9799515022153259,.9799515022153259) skew(0)}a[data-name=ButtonAnchor]:not([disabled]):focus-visible,button[data-name=Button]:not([disabled]):focus-visible{--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(8px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-color: hsl(var(--color-lavender) / .2);outline:none}.container{width:100%}@media (min-width: 96em){.container{max-width:96em}}@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: 1220px){.container{max-width:1220px}}@media (min-width: 2060px){.container{max-width:2060px}}.input-range-container{position:relative;--tw-bg-opacity: 1;background-color:hsl(var(--color-pearl) / var(--tw-bg-opacity));display:grid;--diff: calc(var(--max) - var(--min));--tickmarkWidth: 2px;grid-template:repeat(2,max-content) var(--inputHeight) / 1fr 1fr;width:var(--inputWidth);background-image:repeating-linear-gradient(90deg,#999,#999 var(--tickmarkWidth),hsl(var(--color-pearl)) 0,hsl(var(--color-pearl)) calc(((100% - var(--tickmarkWidth)) / var(--max))))}.input-range-container:before,.input-range-container:after{--tw-bg-opacity: 1;background-color:hsl(var(--color-saffron) / var(--tw-bg-opacity));grid-column:1 / span 2;grid-row:3;content:""}html:not(.rtl) .input-range-container:before{margin-left:calc((var(--valueA) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueB) - var(--valueA)) / var(--diff) * var(--usefulWidth))}html:not(.rtl) .input-range-container:after{margin-left:calc((var(--valueB) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueA) - var(--valueB)) / var(--diff) * var(--usefulWidth))}.rtl .input-range-container:before{margin-right:calc((var(--valueA) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueB) - var(--valueA)) / var(--diff) * var(--usefulWidth))}.rtl .input-range-container:after{margin-right:calc((var(--valueB) - var(--min)) / var(--diff) * var(--usefulWidth));width:calc((var(--valueA) - var(--valueB)) / var(--diff) * var(--usefulWidth))}.input-range{z-index:1;top:0;left:0;margin:0;pointer-events:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;grid-column:1 / span 2;grid-row:3;background:none;--col: #000}.input-range-sliderThumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-webkit-slider-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-webkit-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-webkit-slider-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range::-moz-range-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-moz-appearance:none;-webkit-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-moz-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-moz-range-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range::-ms-thumb{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:0px;pointer-events:auto;width:var(--thumbWidth);height:var(--thumbWidth);cursor:ew-resize;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='31' height='31' x='.5' y='.5' fill='%23FFF' stroke='%23CCC' rx='4'/%3E%3Cpath fill='%23242424' d='M13 12h2v8h-2zm4 0h2v8h-2z'/%3E%3C/svg%3E");-ms-transition:transform;transition:transform;transition-timing-function:cubic-bezier(.4,0,1,1);transition-duration:.25s}.input-range::-ms-thumb:hover{--tw-scale-x: 1.05;--tw-scale-y: 1.05;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.input-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-webkit-slider-runnable-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-moz-range-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range::-ms-track{-webkit-appearance:none;box-shadow:none;border:none;background:transparent}.input-range-output{display:block;position:absolute;margin-top:1.25rem;font-size:.75rem;line-height:.875rem;font-weight:600;left:calc(.5 * var(--thumbWidth))}html:not(.rtl) .input-range-output{transform:translate(calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * var(--usefulWidth) - 50%))}.rtl .input-range-output{transform:translate(calc((var(--max) - var(--value) - var(--min)) / (var(--max) - var(--min)) * var(--usefulWidth) - 50%))}

package/molecules/Avatar.d.ts

@@ -0,0 +1,8 @@
+import { HTMLAttributes, PropsWithChildren } from 'react';
+interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+    alt?: string;
+    src?: string | undefined;
+    srcSet?: string | undefined;
+}
+export declare function Avatar({ alt, src, srcSet, style, children, className, ...props }: PropsWithChildren<AvatarProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/molecules/Avatar.js

@@ -0,0 +1,50 @@
+import { jsx as r, jsxs as d } from "/builds/clubmed/cm-trident-ui/node_modules/react/jsx-runtime.js";
+import l from "/builds/clubmed/cm-trident-ui/node_modules/classnames/index.js";
+const p = (e = "") => e.split(" ").map((i) => i.slice(0, 1)).join("");
+function b({
+  alt: e,
+  src: i,
+  srcSet: n,
+  style: o,
+  children: f,
+  className: t,
+  ...u
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ...u,
+      ...i || n ? { role: "figure", "aria-label": e } : {},
+      className: l(
+        "flex items-center justify-center relative overflow-hidden",
+        {
+          "rounded-full": !(t != null && t.includes("rounded-")),
+          "text-black": !(t != null && t.includes("text-")),
+          "bg-saffron": !(t != null && t.includes("bg-"))
+        },
+        t
+      ),
+      style: {
+        width: "48px",
+        height: "48px",
+        ...o
+      },
+      children: /* @__PURE__ */ d("span", { className: "flex items-center justify-center font-bold uppercase text-h6 h-full", children: [
+        i || n ? /* @__PURE__ */ r(
+          "img",
+          {
+            srcSet: n,
+            src: i,
+            alt: e,
+            className: "w-full h-full object-cover transparent indent-[1000px]"
+          }
+        ) : p(e),
+        f
+      ] })
+    }
+  );
+}
+export {
+  b as Avatar
+};
+//# sourceMappingURL=Avatar.js.map

package/molecules/Avatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.js","sources":["../../lib/molecules/Avatar.tsx"],"sourcesContent":["import { HTMLAttributes, PropsWithChildren } from 'react';\nimport classnames from 'classnames';\n\nconst initial = (text = '') => {\n  return text\n    .split(' ')\n    .map((text) => text.slice(0, 1))\n    .join('');\n};\n\ninterface AvatarProps extends HTMLAttributes<HTMLDivElement> {\n  alt?: string;\n  src?: string | undefined;\n  srcSet?: string | undefined;\n}\n\nexport function Avatar({\n  alt,\n  src,\n  srcSet,\n  style,\n  children,\n  className,\n  ...props\n}: PropsWithChildren<AvatarProps>) {\n  return (\n    <div\n      {...props}\n      {...(src || srcSet ? { role: 'figure', 'aria-label': alt } : {})}\n      className={classnames(\n        'flex items-center justify-center relative overflow-hidden',\n        {\n          'rounded-full': !className?.includes('rounded-'),\n          'text-black': !className?.includes('text-'),\n          'bg-saffron': !className?.includes('bg-'),\n        },\n        className,\n      )}\n      style={{\n        width: '48px',\n        height: '48px',\n        ...style,\n      }}\n    >\n      <span className=\"flex items-center justify-center font-bold uppercase text-h6 h-full\">\n        {src || srcSet ? (\n          <img\n            srcSet={srcSet}\n            src={src}\n            alt={alt}\n            className={'w-full h-full object-cover transparent indent-[1000px]'}\n          />\n        ) : (\n          initial(alt)\n        )}\n        {children}\n      </span>\n    </div>\n  );\n}\n"],"names":["initial","text","Avatar","alt","src","srcSet","style","children","className","props","jsx","classnames","jsxs"],"mappings":";;AAGA,MAAMA,IAAU,CAACC,IAAO,OACfA,EACJ,MAAM,GAAG,EACT,IAAI,CAACA,MAASA,EAAK,MAAM,GAAG,CAAC,CAAC,EAC9B,KAAK,EAAE;AASL,SAASC,EAAO;AAAA,EACrB,KAAAC;AAAA,EACA,KAAAC;AAAA,EACA,QAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAmC;AAE/B,SAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGD;AAAA,MACH,GAAIL,KAAOC,IAAS,EAAE,MAAM,UAAU,cAAcF,EAAI,IAAI,CAAC;AAAA,MAC9D,WAAWQ;AAAA,QACT;AAAA,QACA;AAAA,UACE,gBAAgB,EAACH,KAAA,QAAAA,EAAW,SAAS;AAAA,UACrC,cAAc,EAACA,KAAA,QAAAA,EAAW,SAAS;AAAA,UACnC,cAAc,EAACA,KAAA,QAAAA,EAAW,SAAS;AAAA,QACrC;AAAA,QACAA;AAAA,MACF;AAAA,MACA,OAAO;AAAA,QACL,OAAO;AAAA,QACP,QAAQ;AAAA,QACR,GAAGF;AAAA,MACL;AAAA,MAEA,UAAA,gBAAAM,EAAC,QAAK,EAAA,WAAU,uEACb,UAAA;AAAA,QAAAR,KAAOC,IACN,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,QAAAL;AAAA,YACA,KAAAD;AAAA,YACA,KAAAD;AAAA,YACA,WAAW;AAAA,UAAA;AAAA,QAAA,IAGbH,EAAQG,CAAG;AAAA,QAEZI;AAAA,MAAA,GACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/molecules/Forms/NumberField.d.ts

@@ -37,7 +37,7 @@ export declare function useNumberField(props: NumberFieldProps): {
     tabIndex?: number | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
-    "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
+    "aria-autocomplete"?: "none" | "list" | "both" | "inline" | undefined;
     "aria-braillelabel"?: string | undefined;
     "aria-brailleroledescription"?: string | undefined;
     "aria-busy"?: (boolean | "true" | "false") | undefined;
@@ -47,7 +47,7 @@ export declare function useNumberField(props: NumberFieldProps): {
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "true" | "false" | "step" | "page" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -297,21 +297,21 @@ export declare function useNumberField(props: NumberFieldProps): {
     is?: string | undefined;
     alt?: string | undefined;
     src?: string | undefined;
+    layout?: "horizontal" | "vertical" | undefined;
+    size?: number | undefined;
+    multiple?: boolean | undefined;
     autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
     accept?: string | undefined;
     capture?: boolean | "user" | "environment" | undefined;
     checked?: boolean | undefined;
-    enterKeyHint?: "done" | "search" | "enter" | "next" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "done" | "search" | "next" | "enter" | "go" | "previous" | "send" | undefined;
     maxLength?: number | undefined;
     minLength?: number | undefined;
-    multiple?: boolean | undefined;
     placeholder?: string | undefined;
     readOnly?: boolean | undefined;
     required?: boolean | undefined;
-    size?: number | undefined;
     step?: string | number | undefined;
     htmlFor?: string | undefined;
-    layout?: "horizontal" | "vertical" | undefined;
     description?: string | undefined;
     hideRequiredStar?: boolean | undefined;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clubmed/trident-ui",
-  "version": "1.1.0-rc.3",
+  "version": "1.1.0-rc.4",
   "type": "module",
   "description": "Shared ClubMed React UI components",
   "keywords": [
@@ -51,16 +51,16 @@
       "import": "./molecules/Forms/Checkboxes/index.js",
       "default": "./molecules/Forms/Checkboxes/index.js"
     },
-    "./molecules/Forms/Password": {
-      "types": "./molecules/Forms/Password/index.d.ts",
-      "import": "./molecules/Forms/Password/index.js",
-      "default": "./molecules/Forms/Password/index.js"
-    },
     "./molecules/Forms/Radios": {
       "types": "./molecules/Forms/Radios/index.d.ts",
       "import": "./molecules/Forms/Radios/index.js",
       "default": "./molecules/Forms/Radios/index.js"
     },
+    "./molecules/Forms/Password": {
+      "types": "./molecules/Forms/Password/index.d.ts",
+      "import": "./molecules/Forms/Password/index.js",
+      "default": "./molecules/Forms/Password/index.js"
+    },
     "./fonts/*": "./fonts/*",
     "./atoms/*": {
       "types": "./atoms/*.d.ts",