@revotech-group/revotech-ui-kit 0.1.20 → 0.1.23

package/dist/library.css

@@ -1718,6 +1718,7 @@ body {
   --sidebar-ring: 0 0% 64%;
   --radius: 0.5rem;
   --custom-outline: 0 0% 64% / 50%;
+  --success: 137 82% 30%;
 }
 
 [data-theme='dark'] {
@@ -1755,6 +1756,7 @@ body {
   --sidebar-ring: 0 0% 32%;
   --radius: 0.5rem;
   --custom-outline: 0 0% 45% / 50%;
+  --success: 133 33% 57%;
 }
 
 [data-theme='light'] .rtg-no-autofill-bg:-webkit-autofill {
@@ -1771,10 +1773,6 @@ body {
 .rtg-no-autofill-bg:-webkit-autofill:active {
   -webkit-transition: background-color 5000s ease-in-out;
   transition: background-color 5000s ease-in-out;
-  box-shadow: 0 0 0 1000px transparent inset !important;
-  -webkit-text-fill-color: inherit !important;
-  -webkit-transition: background-color 5000s ease-in-out 0s !important;
-  transition: background-color 5000s ease-in-out 0s !important;
 }
 
 @media (max-width: 640px) {
@@ -1854,19 +1852,23 @@ body {
   z-index: 20;
 }
 
+.focus-within\:rtg-border-ring:focus-within {
+  border-color: hsl(var(--ring));
+}
+
 .focus-within\:rtg-outline-none:focus-within {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
-.focus-within\:rtg-ring-1:focus-within {
+.focus-within\:rtg-ring-\[3px\]:focus-within {
   --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(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + 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);
 }
 
-.focus-within\:rtg-ring-ring:focus-within {
-  --tw-ring-color: hsl(var(--ring));
+.focus-within\:rtg-ring-custom-outline:focus-within {
+  --tw-ring-color: hsl(var(--custom-outline));
 }
 
 .hover\:\!rtg-bg-accent:hover {

package/dist/rtg-ui-kit.js

@@ -5984,14 +5984,14 @@ let se = class extends h {
       // Base wrapper styles
       "rtg-flex rtg-items-center rtg-border rtg-border-input rtg-rounded-md rtg-px-3 rtg-py-1 disabled:rtg-opacity-50",
       // Focus ring styles on wrapper when child input is focused
-      "focus-within:rtg-ring-1 focus-within:rtg-ring-ring focus-within:rtg-outline-none",
+      "focus-within:rtg-outline-none focus-within:rtg-ring-[3px] focus-within:rtg-ring-custom-outline focus-within:rtg-border-ring",
       this.customClass
     )}"
           ${G(e)}
         >
           <select
             class="${p(
-      "rtg-w-[40px] rtg-text-sm rtg-outline-none rtg-bg-transparent"
+      "rtg-w-[40px] rtg-text-sm rtg-outline-none rtg-bg-background rtg-text-foreground"
     )}"
             @change=${this.handleCountryChange}
             .value=${this.country}
@@ -6519,7 +6519,7 @@ const Xa = pe(
       variant: {
         default: "rtg-bg-primary rtg-text-primary-foreground rtg-shadow hover:rtg-bg-primary/90 focus:rtg-ring-[3px] focus:rtg-ring-custom-outline",
         destructive: "rtg-bg-destructive rtg-text-destructive-foreground rtg-shadow-sm hover:rtg-bg-destructive/90 focus:rtg-ring-[3px] focus:rtg-ring-custom-outline",
-        outline: "rtg-border rtg-border-input rtg-bg-background rtg-shadow-sm hover:rtg-bg-accent hover:rtg-text-accent-foreground focus:rtg-ring-[3px] focus:rtg-ring-custom-outline",
+        outline: "rtg-border rtg-text-primary rtg-border-input rtg-bg-background rtg-shadow-sm hover:rtg-bg-accent hover:rtg-text-accent-foreground focus:rtg-ring-[3px] focus:rtg-ring-custom-outline",
         secondary: "rtg-bg-secondary rtg-text-secondary-foreground rtg-shadow-sm hover:rtg-bg-secondary/80 focus:rtg-ring-[3px] focus:rtg-ring-custom-outline",
         ghost: "hover:rtg-bg-accent hover:rtg-text-accent-foreground",
         link: "rtg-text-primary rtg-underline-offset-4 hover:rtg-underline"
@@ -12747,7 +12747,7 @@ let it = class extends h {
       value: "",
       isSelected: !1,
       userIndex: s
-    }), t.addEventListener("selected-input", (i) => {
+    }), t.addEventListener("focus", (i) => {
       const v = this.querySelector(
         `input[name="input-${i.detail.selectedItems}"]`
       );
@@ -12755,7 +12755,7 @@ let it = class extends h {
     });
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this._inputOtp && this._inputOtp.removeEventListener("selected-input", () => {
+    super.disconnectedCallback(), this._inputOtp && this._inputOtp.removeEventListener("focus", () => {
     });
   }
   getAttributesToExclude() {
@@ -13001,7 +13001,7 @@ let at = class extends h {
     return this.querySelector("div[part=input-otp]");
   }
   raiseEvent(e, t = "changes", o = 1 / 0) {
-    const s = new CustomEvent("selected-input", {
+    const s = new CustomEvent("focus", {
       bubbles: !0,
       composed: !0,
       detail: {

package/dist/rtg-ui-kit.umd.cjs

@@ -2861,11 +2861,11 @@ body {
     }
   `;let Ot=or;customElements.define("shadow-wrapper",Ot);class wr extends Nn.AsyncDirective{constructor(){super(...arguments),this.prevData={}}render(e){return Ln.nothing}update(e,[r]){var n;this.element!==e.element&&(this.element=e.element),this.host=((n=e.options)===null||n===void 0?void 0:n.host)||this.element,this.apply(r),this.groom(r),this.prevData={...r}}apply(e){if(!e)return;const{prevData:r,element:n}=this;for(const t in e){const a=e[t];a!==r[t]&&(n[t]=a)}}groom(e){const{prevData:r,element:n}=this;if(r)for(const t in r)(!e||!(t in e)&&n[t]===r[t])&&(n[t]=void 0)}}_t.directive(wr);class Cr extends wr{constructor(){super(...arguments),this.eventData={}}apply(e){if(e)for(const r in e){const n=e[r];n!==this.eventData[r]&&this.applyEvent(r,n)}}applyEvent(e,r){const{prevData:n,element:t}=this;this.eventData[e]=r,n[e]&&t.removeEventListener(e,this,r),t.addEventListener(e,this,r)}groom(e){const{prevData:r,element:n}=this;if(r)for(const t in r)(!e||!(t in e)&&n[t]===r[t])&&this.groomEvent(t,r[t])}groomEvent(e,r){const{element:n}=this;delete this.eventData[e],n.removeEventListener(e,this,r)}handleEvent(e){const r=this.eventData[e.type];typeof r=="function"?r.call(this.host,e):r.handleEvent(e)}disconnected(){const{eventData:e,element:r}=this;for(const n in e){const t=n.slice(1),a=e[n];r.removeEventListener(t,this,a)}}reconnected(){const{eventData:e,element:r}=this;for(const n in e){const t=n.slice(1),a=e[n];r.addEventListener(t,this,a)}}}_t.directive(Cr);class wo extends Cr{apply(e){if(!e)return;const{prevData:r,element:n}=this;for(const t in e){const a=e[t];if(a===r[t])continue;const s=t.slice(1);switch(t[0]){case"@":this.eventData[s]=a,this.applyEvent(s,a);break;case".":n[s]=a;break;case"?":a?n.setAttribute(s,""):n.removeAttribute(s);break;default:a!=null?n.setAttribute(t,String(a)):n.removeAttribute(t);break}}}groom(e){const{prevData:r,element:n}=this;if(r)for(const t in r){const a=t.slice(1);if(!e||!(t in e)&&n[a]===r[t])switch(t[0]){case"@":this.groomEvent(a,r[t]);break;case".":n[a]=void 0;break;case"?":n.removeAttribute(a);break;default:n.removeAttribute(t);break}}}}const V=_t.directive(wo),_r=[{label:"AF",value:"AF",code:"+93"},{label:"AL",value:"AL",code:"+355"},{label:"DZ",value:"DZ",code:"+213"},{label:"AS",value:"AS",code:"+1684"},{label:"AD",value:"AD",code:"+376"},{label:"AO",value:"AO",code:"+244"},{label:"AI",value:"AI",code:"+1264"},{label:"AG",value:"AG",code:"+1268"},{label:"AR",value:"AR",code:"+54"},{label:"AM",value:"AM",code:"+374"},{label:"AW",value:"AW",code:"+297"},{label:"AU",value:"AU",code:"+61"},{label:"AT",value:"AT",code:"+43"},{label:"AZ",value:"AZ",code:"+994"},{label:"BS",value:"BS",code:"+1242"},{label:"BH",value:"BH",code:"+973"},{label:"BD",value:"BD",code:"+880"},{label:"BB",value:"BB",code:"+1246"},{label:"BY",value:"BY",code:"+375"},{label:"BE",value:"BE",code:"+32"},{label:"BZ",value:"BZ",code:"+501"},{label:"BJ",value:"BJ",code:"+229"},{label:"BM",value:"BM",code:"+1441"},{label:"BT",value:"BT",code:"+975"},{label:"BO",value:"BO",code:"+591"},{label:"BA",value:"BA",code:"+387"},{label:"BW",value:"BW",code:"+267"},{label:"BR",value:"BR",code:"+55"},{label:"IO",value:"IO",code:"+246"},{label:"VG",value:"VG",code:"+1284"},{label:"BN",value:"BN",code:"+673"},{label:"BG",value:"BG",code:"+359"},{label:"BF",value:"BF",code:"+226"},{label:"BI",value:"BI",code:"+257"},{label:"KH",value:"KH",code:"+855"},{label:"CM",value:"CM",code:"+237"},{label:"CA",value:"CA",code:"+1"},{label:"CV",value:"CV",code:"+238"},{label:"KY",value:"KY",code:"+1345"},{label:"CF",value:"CF",code:"+236"},{label:"TD",value:"TD",code:"+235"},{label:"CL",value:"CL",code:"+56"},{label:"CN",value:"CN",code:"+86"},{label:"CX",value:"CX",code:"+61"},{label:"CC",value:"CC",code:"+61"},{label:"CO",value:"CO",code:"+57"},{label:"KM",value:"KM",code:"+269"},{label:"CK",value:"CK",code:"+682"},{label:"CR",value:"CR",code:"+506"},{label:"HR",value:"HR",code:"+385"},{label:"CU",value:"CU",code:"+53"},{label:"CW",value:"CW",code:"+599"},{label:"CY",value:"CY",code:"+357"},{label:"CZ",value:"CZ",code:"+420"},{label:"CD",value:"CD",code:"+243"},{label:"DK",value:"DK",code:"+45"},{label:"DJ",value:"DJ",code:"+253"},{label:"DM",value:"DM",code:"+1767"},{label:"DO",value:"DO",code:"+1809"},{label:"DO",value:"DO",code:"+1829"},{label:"DO",value:"DO",code:"+1849"},{label:"TL",value:"TL",code:"+670"},{label:"EC",value:"EC",code:"+593"},{label:"EG",value:"EG",code:"+20"},{label:"SV",value:"SV",code:"+503"},{label:"GQ",value:"GQ",code:"+240"},{label:"ER",value:"ER",code:"+291"},{label:"EE",value:"EE",code:"+372"},{label:"ET",value:"ET",code:"+251"},{label:"FK",value:"FK",code:"+500"},{label:"FO",value:"FO",code:"+298"},{label:"FJ",value:"FJ",code:"+679"},{label:"FI",value:"FI",code:"+358"},{label:"FR",value:"FR",code:"+33"},{label:"PF",value:"PF",code:"+689"},{label:"GA",value:"GA",code:"+241"},{label:"GM",value:"GM",code:"+220"},{label:"GE",value:"GE",code:"+995"},{label:"DE",value:"DE",code:"+49"},{label:"GH",value:"GH",code:"+233"},{label:"GI",value:"GI",code:"+350"},{label:"GR",value:"GR",code:"+30"},{label:"GL",value:"GL",code:"+299"},{label:"GD",value:"GD",code:"+1473"},{label:"GU",value:"GU",code:"+1671"},{label:"GT",value:"GT",code:"+502"},{label:"GG",value:"GG",code:"+441481"},{label:"GN",value:"GN",code:"+224"},{label:"GW",value:"GW",code:"+245"},{label:"GY",value:"GY",code:"+592"},{label:"HT",value:"HT",code:"+509"},{label:"HN",value:"HN",code:"+504"},{label:"HK",value:"HK",code:"+852"},{label:"HU",value:"HU",code:"+36"},{label:"IS",value:"IS",code:"+354"},{label:"IN",value:"IN",code:"+91"},{label:"ID",value:"ID",code:"+62"},{label:"IR",value:"IR",code:"+98"},{label:"IQ",value:"IQ",code:"+964"},{label:"IE",value:"IE",code:"+353"},{label:"IM",value:"IM",code:"+441624"},{label:"IL",value:"IL",code:"+972"},{label:"IT",value:"IT",code:"+39"},{label:"CI",value:"CI",code:"+225"},{label:"JM",value:"JM",code:"+1876"},{label:"JP",value:"JP",code:"+81"},{label:"JE",value:"JE",code:"+441534"},{label:"JO",value:"JO",code:"+962"},{label:"KZ",value:"KZ",code:"+7"},{label:"KE",value:"KE",code:"+254"},{label:"KI",value:"KI",code:"+686"},{label:"XK",value:"XK",code:"+383"},{label:"KW",value:"KW",code:"+965"},{label:"KG",value:"KG",code:"+996"},{label:"LA",value:"LA",code:"+856"},{label:"LV",value:"LV",code:"+371"},{label:"LB",value:"LB",code:"+961"},{label:"LS",value:"LS",code:"+266"},{label:"LR",value:"LR",code:"+231"},{label:"LY",value:"LY",code:"+218"},{label:"LI",value:"LI",code:"+423"},{label:"LT",value:"LT",code:"+370"},{label:"LU",value:"LU",code:"+352"},{label:"MO",value:"MO",code:"+853"},{label:"MK",value:"MK",code:"+389"},{label:"MG",value:"MG",code:"+261"},{label:"MW",value:"MW",code:"+265"},{label:"MY",value:"MY",code:"+60"},{label:"MV",value:"MV",code:"+960"},{label:"ML",value:"ML",code:"+223"},{label:"MT",value:"MT",code:"+356"},{label:"MH",value:"MH",code:"+692"},{label:"MR",value:"MR",code:"+222"},{label:"MU",value:"MU",code:"+230"},{label:"YT",value:"YT",code:"+262"},{label:"MX",value:"MX",code:"+52"},{label:"FM",value:"FM",code:"+691"},{label:"MD",value:"MD",code:"+373"},{label:"MC",value:"MC",code:"+377"},{label:"MN",value:"MN",code:"+976"},{label:"ME",value:"ME",code:"+382"},{label:"MS",value:"MS",code:"+1664"},{label:"MA",value:"MA",code:"+212"},{label:"MZ",value:"MZ",code:"+258"},{label:"MM",value:"MM",code:"+95"},{label:"NA",value:"NA",code:"+264"},{label:"NR",value:"NR",code:"+674"},{label:"NP",value:"NP",code:"+977"},{label:"NL",value:"NL",code:"+31"},{label:"AN",value:"AN",code:"+599"},{label:"NC",value:"NC",code:"+687"},{label:"NZ",value:"NZ",code:"+64"},{label:"NI",value:"NI",code:"+505"},{label:"NE",value:"NE",code:"+227"},{label:"NG",value:"NG",code:"+234"},{label:"NU",value:"NU",code:"+683"},{label:"KP",value:"KP",code:"+850"},{label:"MP",value:"MP",code:"+1670"},{label:"NO",value:"NO",code:"+47"},{label:"OM",value:"OM",code:"+968"},{label:"PK",value:"PK",code:"+92"},{label:"PW",value:"PW",code:"+680"},{label:"PS",value:"PS",code:"+970"},{label:"PA",value:"PA",code:"+507"},{label:"PG",value:"PG",code:"+675"},{label:"PY",value:"PY",code:"+595"},{label:"PE",value:"PE",code:"+51"},{label:"PH",value:"PH",code:"+63"},{label:"PN",value:"PN",code:"+64"},{label:"PL",value:"PL",code:"+48"},{label:"PT",value:"PT",code:"+351"},{label:"PR",value:"PR",code:"+1787"},{label:"PR",value:"PR",code:"+1939"},{label:"QA",value:"QA",code:"+974"},{label:"CG",value:"CG",code:"+242"},{label:"RE",value:"RE",code:"+262"},{label:"RO",value:"RO",code:"+40"},{label:"RU",value:"RU",code:"+7"},{label:"RW",value:"RW",code:"+250"},{label:"BL",value:"BL",code:"+590"},{label:"SH",value:"SH",code:"+290"},{label:"KN",value:"KN",code:"+1869"},{label:"LC",value:"LC",code:"+1758"},{label:"MF",value:"MF",code:"+590"},{label:"PM",value:"PM",code:"+508"},{label:"VC",value:"VC",code:"+1784"},{label:"WS",value:"WS",code:"+685"},{label:"SM",value:"SM",code:"+378"},{label:"ST",value:"ST",code:"+239"},{label:"SA",value:"SA",code:"+966"},{label:"SN",value:"SN",code:"+221"},{label:"RS",value:"RS",code:"+381"},{label:"SC",value:"SC",code:"+248"},{label:"SL",value:"SL",code:"+232"},{label:"SG",value:"SG",code:"+65"},{label:"SX",value:"SX",code:"+1721"},{label:"SK",value:"SK",code:"+421"},{label:"SI",value:"SI",code:"+386"},{label:"SB",value:"SB",code:"+677"},{label:"SO",value:"SO",code:"+252"},{label:"ZA",value:"ZA",code:"+27"},{label:"KR",value:"KR",code:"+82"},{label:"SS",value:"SS",code:"+211"},{label:"ES",value:"ES",code:"+34"},{label:"LK",value:"LK",code:"+94"},{label:"SD",value:"SD",code:"+249"},{label:"SR",value:"SR",code:"+597"},{label:"SJ",value:"SJ",code:"+47"},{label:"SZ",value:"SZ",code:"+268"},{label:"SE",value:"SE",code:"+46"},{label:"CH",value:"CH",code:"+41"},{label:"SY",value:"SY",code:"+963"},{label:"TW",value:"TW",code:"+886"},{label:"TJ",value:"TJ",code:"+992"},{label:"TZ",value:"TZ",code:"+255"},{label:"TH",value:"TH",code:"+66"},{label:"TG",value:"TG",code:"+228"},{label:"TK",value:"TK",code:"+690"},{label:"TO",value:"TO",code:"+676"},{label:"TT",value:"TT",code:"+1868"},{label:"TN",value:"TN",code:"+216"},{label:"TR",value:"TR",code:"+90"},{label:"TM",value:"TM",code:"+993"},{label:"TC",value:"TC",code:"+1649"},{label:"TV",value:"TV",code:"+688"},{label:"VI",value:"VI",code:"+1340"},{label:"UG",value:"UG",code:"+256"},{label:"UA",value:"UA",code:"+380"},{label:"AE",value:"AE",code:"+971"},{label:"GB",value:"GB",code:"+44"},{label:"US",value:"US",code:"+1"},{label:"UY",value:"UY",code:"+598"},{label:"UZ",value:"UZ",code:"+998"},{label:"VU",value:"VU",code:"+678"},{label:"VA",value:"VA",code:"+379"},{label:"VE",value:"VE",code:"+58"},{label:"VN",value:"VN",code:"+84"},{label:"WF",value:"WF",code:"+681"},{label:"EH",value:"EH",code:"+212"},{label:"YE",value:"YE",code:"+967"},{label:"ZM",value:"ZM",code:"+260"},{label:"ZW",value:"ZW",code:"+263"}];var Co=Object.defineProperty,_o=Object.getOwnPropertyDescriptor,Q=(i,e,r,n)=>{for(var t=n>1?void 0:n?_o(e,r):e,a=i.length-1,s;a>=0;a--)(s=i[a])&&(t=(n?s(e,r,t):s(t))||t);return n&&t&&Co(e,r,t),t};o.RtgInput=class extends h{constructor(){super(),this.disabled=!1,this.type="text",this.placeholder="",this.defaultValue="",this.value="",this.dataKey="",this.country="US",this.countryCode="+1",this.selectedLabel="US",this.rawTelValue="",this.value=this.defaultValue,this.rawTelValue=this.defaultValue}handleCountryChange(e){const r=e.target,n=_r.find(t=>t.value===r.value);n&&(this.country=n.value,this.countryCode=n.code,this.selectedLabel=n.value,this.emitValueChange(),this.requestUpdate()),e.stopPropagation()}firstUpdated(e){this.removeParentAttributes();const r=["--input-border-radius","--input-padding"];this.applyCustomClass(r,"input","input-base"),this.type==="tel"?this.rawTelValue=this.defaultValue:this.defaultValue&&(this.value=this.defaultValue),this.observeStyleAndClassSync(this.inputElement)}handleInputChange(e){const r=e.target;if(this.type==="file"){this.value=r.files?r.files[0].name:"",this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value}}));return}this.type==="tel"?(this.rawTelValue=r.value,this.emitValueChange()):(this.value=r.value,this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value}})))}emitValueChange(){this.value=`${this.countryCode}-${this.rawTelValue}`,this.dispatchEvent(new CustomEvent("input",{bubbles:!0,composed:!0,detail:{value:this.value,code:this.countryCode}}))}handleFocus(){this.dispatchEvent(new CustomEvent("focus",{bubbles:!0,composed:!0,detail:{dataKey:this.dataKey}}))}getAttributesToExclude(){return["disabled","type","placeholder","value","data-testid","custom-class","data-key"]}getAttributesToRemoveFromParent(){return["class","style"]}createRenderRoot(){return this}render(){const e=this.getFilteredAttributes();return this.type==="tel"?d.html`
         <div
-          class="${p("rtg-flex rtg-items-center rtg-border rtg-border-input rtg-rounded-md rtg-px-3 rtg-py-1 disabled:rtg-opacity-50","focus-within:rtg-ring-1 focus-within:rtg-ring-ring focus-within:rtg-outline-none",this.customClass)}"
+          class="${p("rtg-flex rtg-items-center rtg-border rtg-border-input rtg-rounded-md rtg-px-3 rtg-py-1 disabled:rtg-opacity-50","focus-within:rtg-outline-none focus-within:rtg-ring-[3px] focus-within:rtg-ring-custom-outline focus-within:rtg-border-ring",this.customClass)}"
           ${V(e)}
         >
           <select
-            class="${p("rtg-w-[40px] rtg-text-sm rtg-outline-none rtg-bg-transparent")}"
+            class="${p("rtg-w-[40px] rtg-text-sm rtg-outline-none rtg-bg-background rtg-text-foreground")}"
             @change=${this.handleCountryChange}
             .value=${this.country}
           >
@@ -3001,7 +3001,7 @@ body {
             </div>`:""}
         ${this.message?d.html`<div part="alert-description">${this.message}</div>`:""}
       </div>
-    `}},o.Alert.alertVariants=Or,Xe([l.property({type:String})],o.Alert.prototype,"title",2),Xe([l.property({type:String})],o.Alert.prototype,"message",2),Xe([l.property({type:String})],o.Alert.prototype,"variant",2),Xe([l.property({type:String})],o.Alert.prototype,"size",2),o.Alert=Xe([l.customElement("rtg-alert")],o.Alert);const Ko=J("rtg-inline-flex rtg-items-center rtg-justify-center rtg-whitespace-nowrap rtg-rounded-sm rtg-text-sm rtg-font-medium rtg-transition-colors focus-visible:rtg-outline-none focus-visible:rtg-ring-1 focus-visible:rtg-ring-ring disabled:rtg-pointer-events-none disabled:rtg-opacity-50",{variants:{variant:{outline:"rtg-border rtg-border-input rtg-bg-transparent rtg-shadow-sm hover:rtg-bg-accent hover:rtg-text-accent-foreground"},size:{default:"rtg-h-7 rtg-w-7 rtg-p-0"}},defaultVariants:{variant:"outline",size:"default"}}),Wo=J("rtg-inline-flex rtg-items-center rtg-justify-center rtg-whitespace-nowrap rtg-rounded-md rtg-text-sm rtg-font-medium rtg-transition-colors focus-visible:rtg-outline-none focus-visible:rtg-ring-1 focus-visible:rtg-ring-ring disabled:rtg-pointer-events-none disabled:rtg-opacity-50",{variants:{variant:{default:"rtg-bg-primary rtg-text-primary-foreground rtg-shadow hover:rtg-bg-primary/90 focus:rtg-ring-[3px] focus:rtg-ring-custom-outline",destructive:"rtg-bg-destructive rtg-text-destructive-foreground rtg-shadow-sm hover:rtg-bg-destructive/90 focus:rtg-ring-[3px] focus:rtg-ring-custom-outline",outline:"rtg-border rtg-border-input rtg-bg-background rtg-shadow-sm hover:rtg-bg-accent hover:rtg-text-accent-foreground focus:rtg-ring-[3px] focus:rtg-ring-custom-outline",secondary:"rtg-bg-secondary rtg-text-secondary-foreground rtg-shadow-sm hover:rtg-bg-secondary/80 focus:rtg-ring-[3px] focus:rtg-ring-custom-outline",ghost:"hover:rtg-bg-accent hover:rtg-text-accent-foreground",link:"rtg-text-primary rtg-underline-offset-4 hover:rtg-underline"},size:{default:"rtg-h-9 rtg-rounded-md rtg-px-4 rtg-py-2 rtg-has-[>svg]:px-3",sm:"rtg-h-8 rtg-rounded-md rtg-px-3 rtg-text-xs rtg-has-[>svg]:px-2.5",lg:"rtg-h-10 rtg-rounded-md rtg-px-6 rtg-has-[>svg]:px-4",icon:"rtg-h-9 rtg-w-9"}},defaultVariants:{variant:"default",size:"default"}});var jo=Object.defineProperty,Xo=Object.getOwnPropertyDescriptor,_e=(i,e,r,n)=>{for(var t=n>1?void 0:n?Xo(e,r):e,a=i.length-1,s;a>=0;a--)(s=i[a])&&(t=(n?s(e,r,t):s(t))||t);return n&&t&&jo(e,r,t),t};o.Button=class extends h{constructor(){super(...arguments),this.click=()=>{},this.disabled=!1,this.type="button",this.variant="default",this.size="default"}createRenderRoot(){return this}getAttributesToExclude(){return["click","disabled","type","variant","size","data-testid","custom-class"]}getAttributesToRemoveFromParent(){return["class","style"]}firstUpdated(){this.moveLightDomChildrenInto(this.buttonElement),this.removeParentAttributes(),this.observeStyleAndClassSync(this.buttonElement)}updated(e){this.removeParentAttributes()}render(){const e=this.getFilteredAttributes(),r=this.customStyle||"",n=this.customClass||"";return d.html`
+    `}},o.Alert.alertVariants=Or,Xe([l.property({type:String})],o.Alert.prototype,"title",2),Xe([l.property({type:String})],o.Alert.prototype,"message",2),Xe([l.property({type:String})],o.Alert.prototype,"variant",2),Xe([l.property({type:String})],o.Alert.prototype,"size",2),o.Alert=Xe([l.customElement("rtg-alert")],o.Alert);const Ko=J("rtg-inline-flex rtg-items-center rtg-justify-center rtg-whitespace-nowrap rtg-rounded-sm rtg-text-sm rtg-font-medium rtg-transition-colors focus-visible:rtg-outline-none focus-visible:rtg-ring-1 focus-visible:rtg-ring-ring disabled:rtg-pointer-events-none disabled:rtg-opacity-50",{variants:{variant:{outline:"rtg-border rtg-border-input rtg-bg-transparent rtg-shadow-sm hover:rtg-bg-accent hover:rtg-text-accent-foreground"},size:{default:"rtg-h-7 rtg-w-7 rtg-p-0"}},defaultVariants:{variant:"outline",size:"default"}}),Wo=J("rtg-inline-flex rtg-items-center rtg-justify-center rtg-whitespace-nowrap rtg-rounded-md rtg-text-sm rtg-font-medium rtg-transition-colors focus-visible:rtg-outline-none focus-visible:rtg-ring-1 focus-visible:rtg-ring-ring disabled:rtg-pointer-events-none disabled:rtg-opacity-50",{variants:{variant:{default:"rtg-bg-primary rtg-text-primary-foreground rtg-shadow hover:rtg-bg-primary/90 focus:rtg-ring-[3px] focus:rtg-ring-custom-outline",destructive:"rtg-bg-destructive rtg-text-destructive-foreground rtg-shadow-sm hover:rtg-bg-destructive/90 focus:rtg-ring-[3px] focus:rtg-ring-custom-outline",outline:"rtg-border rtg-text-primary rtg-border-input rtg-bg-background rtg-shadow-sm hover:rtg-bg-accent hover:rtg-text-accent-foreground focus:rtg-ring-[3px] focus:rtg-ring-custom-outline",secondary:"rtg-bg-secondary rtg-text-secondary-foreground rtg-shadow-sm hover:rtg-bg-secondary/80 focus:rtg-ring-[3px] focus:rtg-ring-custom-outline",ghost:"hover:rtg-bg-accent hover:rtg-text-accent-foreground",link:"rtg-text-primary rtg-underline-offset-4 hover:rtg-underline"},size:{default:"rtg-h-9 rtg-rounded-md rtg-px-4 rtg-py-2 rtg-has-[>svg]:px-3",sm:"rtg-h-8 rtg-rounded-md rtg-px-3 rtg-text-xs rtg-has-[>svg]:px-2.5",lg:"rtg-h-10 rtg-rounded-md rtg-px-6 rtg-has-[>svg]:px-4",icon:"rtg-h-9 rtg-w-9"}},defaultVariants:{variant:"default",size:"default"}});var jo=Object.defineProperty,Xo=Object.getOwnPropertyDescriptor,_e=(i,e,r,n)=>{for(var t=n>1?void 0:n?Xo(e,r):e,a=i.length-1,s;a>=0;a--)(s=i[a])&&(t=(n?s(e,r,t):s(t))||t);return n&&t&&jo(e,r,t),t};o.Button=class extends h{constructor(){super(...arguments),this.click=()=>{},this.disabled=!1,this.type="button",this.variant="default",this.size="default"}createRenderRoot(){return this}getAttributesToExclude(){return["click","disabled","type","variant","size","data-testid","custom-class"]}getAttributesToRemoveFromParent(){return["class","style"]}firstUpdated(){this.moveLightDomChildrenInto(this.buttonElement),this.removeParentAttributes(),this.observeStyleAndClassSync(this.buttonElement)}updated(e){this.removeParentAttributes()}render(){const e=this.getFilteredAttributes(),r=this.customStyle||"",n=this.customClass||"";return d.html`
       <button
         part="button"
         type="${this.type}"
@@ -4423,7 +4423,7 @@ body {
         class="${p(cd,this.className)}"
         ?disable="${this.disabled}"
       ></div>
-    `}},Pe([l.property({type:Boolean})],o.ToggleGroup.prototype,"disabled",2),Pe([l.property({type:String})],o.ToggleGroup.prototype,"type",2),Pe([l.property({attribute:!0,type:Boolean,reflect:!0})],o.ToggleGroup.prototype,"required",2),Pe([l.property({attribute:!0,type:String,reflect:!0})],o.ToggleGroup.prototype,"variant",2),Pe([l.property({attribute:!0,type:String})],o.ToggleGroup.prototype,"size",2),Pe([l.property({type:Array})],o.ToggleGroup.prototype,"selectedItems",2),o.ToggleGroup=Pe([l.customElement("rtg-toggle-group")],o.ToggleGroup);var hd=Object.defineProperty,md=Object.getOwnPropertyDescriptor,Fe=(i,e,r,n)=>{for(var t=n>1?void 0:n?md(e,r):e,a=i.length-1,s;a>=0;a--)(s=i[a])&&(t=(n?s(e,r,t):s(t))||t);return n&&t&&hd(e,r,t),t};o.InputOtpSlot=class extends h{constructor(){super(...arguments),this.click=()=>{},this.index=0,this.isFirst=!1,this.isLast=!1,this.value=""}get _inputOtp(){let e=this.parentElement;for(;e&&!(e instanceof o.InputOtp);)e=e.parentElement;return e}firstUpdated(e){const r=this._inputOtp;if(!r)return;const n=r.variant,t=this.index,a=r.maxLength;let s=!1;n==="with-separator"?s=t%2===1||t===a-1:n==="simple"?s=t%3===2||t===a-1:s=t===a-1,this.isLast=s,r.inputes.push({index:r.inputes.length,value:"",isSelected:!1,userIndex:t}),r.addEventListener("selected-input",m=>{const w=this.querySelector(`input[name="input-${m.detail.selectedItems}"]`);w&&(w.focus(),m.detail.eventType==="changes"&&(w.value=""))})}disconnectedCallback(){super.disconnectedCallback(),this._inputOtp&&this._inputOtp.removeEventListener("selected-input",()=>{})}getAttributesToExclude(){return[]}handleFocus(e){const r=this._inputOtp;if(!r)return;const n=r.inputes.findIndex(a=>a.value===""),t=this.index;if(n!==-1&&t>n){e.preventDefault(),e.stopImmediatePropagation();const a=n;r.raiseEvent(a,"focus")}else r.raiseEvent(t,"focus")}handleInputChange(e){var t;const r=e.target;if(new RegExp(/^\d+$/).test(r.value)){const a=this._inputOtp;if(a){let s=a.inputes.findIndex(m=>m.index===this.index);a.inputes[s]={...a.inputes[s],value:r.value,isSelected:!1},(t=a.checkIfCompleteAndSubmit)==null||t.call(a),s+1<a.inputes.length&&a.raiseEvent(s+1,"changes")}}else r.value=""}handleKeyDown(e){const r=e.target,n=this._inputOtp;if(!n)return;const t=n.inputes.findIndex(a=>a.index===this.index);switch(e.key){case"Backspace":{e.preventDefault();const a=r.value==="",s=n.inputes.find(C=>C.value===""),m=s!==void 0?n.inputes.indexOf(s):n.inputes.length;if(a&&t>=m){t>0&&n.raiseEvent(t-1,"focus");return}n.inputes[t].value="",r.value="";for(let C=t;C<n.inputes.length-1;C++){n.inputes[C].value=n.inputes[C+1].value;const x=n.querySelector(`input[name="input-${n.inputes[C].index}"]`);x&&(x.value=n.inputes[C].value)}const w=n.inputes[n.inputes.length-1];w.value="";const b=n.querySelector(`input[name="input-${w.index}"]`);b&&(b.value=""),n.raiseEvent(t,"focus");break}case"ArrowLeft":e.preventDefault(),t>0&&n.raiseEvent(t-1,"focus");break;case"ArrowRight":e.preventDefault(),t<n.maxLength-1&&n.raiseEvent(t+1,"focus");break}}handlePaste(e){var w;e.preventDefault();const r=this._inputOtp;if(!r)return;const t=(((w=e.clipboardData)==null?void 0:w.getData("text"))??"").replace(/\D/g,"").split("").slice(0);if(t.length===0)return;const a=r.inputes.findIndex(b=>b.index===this.index),s=r.maxLength-a;t.splice(s);for(let b=0;b<t.length;b++){const C=a+b;if(C>=r.maxLength)break;r.inputes[C].value=t[b];const x=r.querySelector(`input[name="input-${C}"]`);x&&(x.value=t[b])}const m=a+t.length;m<r.maxLength&&r.raiseEvent(m,"focus")}createRenderRoot(){return this}render(){var m;const e=((m=this._inputOtp)==null?void 0:m.variant)??"digits-only",r=this.isFirst,n=this.isLast,t=e==="with-spacing",a=e==="with-separator",s={"rtg-bg-transparent":!0,"rtg-h-[36px]":!0,"rtg-w-[36px]":!0,"rtg-text-center rtg-relative rtg-flex rtg-h-10 rtg-w-10 rtg-items-center rtg-justify-center rtg-border-y rtg-border-r rtg-border-input rtg-text-sm rtg-transition-all":!0,"first:rtg-rounded-l-md first:rtg-border-l":this.isFirst,"rtg-overflow-hidden":!0,"focus:rtg-border focus:rtg-border-input focus:rtg-border-[3px]":!0,"rtg-border":t||a,"rtg-border-t":!t||a,"rtg-border-b":!t||a,"rtg-border-r":!t||a,"rtg-border-l":this.isFirst||t||a,"first:rtg-rounded-l-md":e==="with-spacing"?!0:r,"last:rtg-rounded-r-md":e==="with-spacing"?!0:n,"rtg-rounded-none":!r&&!n&&(e==="digits-only"||e==="simple"||e==="with-separator")};return d.html`
+    `}},Pe([l.property({type:Boolean})],o.ToggleGroup.prototype,"disabled",2),Pe([l.property({type:String})],o.ToggleGroup.prototype,"type",2),Pe([l.property({attribute:!0,type:Boolean,reflect:!0})],o.ToggleGroup.prototype,"required",2),Pe([l.property({attribute:!0,type:String,reflect:!0})],o.ToggleGroup.prototype,"variant",2),Pe([l.property({attribute:!0,type:String})],o.ToggleGroup.prototype,"size",2),Pe([l.property({type:Array})],o.ToggleGroup.prototype,"selectedItems",2),o.ToggleGroup=Pe([l.customElement("rtg-toggle-group")],o.ToggleGroup);var hd=Object.defineProperty,md=Object.getOwnPropertyDescriptor,Fe=(i,e,r,n)=>{for(var t=n>1?void 0:n?md(e,r):e,a=i.length-1,s;a>=0;a--)(s=i[a])&&(t=(n?s(e,r,t):s(t))||t);return n&&t&&hd(e,r,t),t};o.InputOtpSlot=class extends h{constructor(){super(...arguments),this.click=()=>{},this.index=0,this.isFirst=!1,this.isLast=!1,this.value=""}get _inputOtp(){let e=this.parentElement;for(;e&&!(e instanceof o.InputOtp);)e=e.parentElement;return e}firstUpdated(e){const r=this._inputOtp;if(!r)return;const n=r.variant,t=this.index,a=r.maxLength;let s=!1;n==="with-separator"?s=t%2===1||t===a-1:n==="simple"?s=t%3===2||t===a-1:s=t===a-1,this.isLast=s,r.inputes.push({index:r.inputes.length,value:"",isSelected:!1,userIndex:t}),r.addEventListener("focus",m=>{const w=this.querySelector(`input[name="input-${m.detail.selectedItems}"]`);w&&(w.focus(),m.detail.eventType==="changes"&&(w.value=""))})}disconnectedCallback(){super.disconnectedCallback(),this._inputOtp&&this._inputOtp.removeEventListener("focus",()=>{})}getAttributesToExclude(){return[]}handleFocus(e){const r=this._inputOtp;if(!r)return;const n=r.inputes.findIndex(a=>a.value===""),t=this.index;if(n!==-1&&t>n){e.preventDefault(),e.stopImmediatePropagation();const a=n;r.raiseEvent(a,"focus")}else r.raiseEvent(t,"focus")}handleInputChange(e){var t;const r=e.target;if(new RegExp(/^\d+$/).test(r.value)){const a=this._inputOtp;if(a){let s=a.inputes.findIndex(m=>m.index===this.index);a.inputes[s]={...a.inputes[s],value:r.value,isSelected:!1},(t=a.checkIfCompleteAndSubmit)==null||t.call(a),s+1<a.inputes.length&&a.raiseEvent(s+1,"changes")}}else r.value=""}handleKeyDown(e){const r=e.target,n=this._inputOtp;if(!n)return;const t=n.inputes.findIndex(a=>a.index===this.index);switch(e.key){case"Backspace":{e.preventDefault();const a=r.value==="",s=n.inputes.find(C=>C.value===""),m=s!==void 0?n.inputes.indexOf(s):n.inputes.length;if(a&&t>=m){t>0&&n.raiseEvent(t-1,"focus");return}n.inputes[t].value="",r.value="";for(let C=t;C<n.inputes.length-1;C++){n.inputes[C].value=n.inputes[C+1].value;const x=n.querySelector(`input[name="input-${n.inputes[C].index}"]`);x&&(x.value=n.inputes[C].value)}const w=n.inputes[n.inputes.length-1];w.value="";const b=n.querySelector(`input[name="input-${w.index}"]`);b&&(b.value=""),n.raiseEvent(t,"focus");break}case"ArrowLeft":e.preventDefault(),t>0&&n.raiseEvent(t-1,"focus");break;case"ArrowRight":e.preventDefault(),t<n.maxLength-1&&n.raiseEvent(t+1,"focus");break}}handlePaste(e){var w;e.preventDefault();const r=this._inputOtp;if(!r)return;const t=(((w=e.clipboardData)==null?void 0:w.getData("text"))??"").replace(/\D/g,"").split("").slice(0);if(t.length===0)return;const a=r.inputes.findIndex(b=>b.index===this.index),s=r.maxLength-a;t.splice(s);for(let b=0;b<t.length;b++){const C=a+b;if(C>=r.maxLength)break;r.inputes[C].value=t[b];const x=r.querySelector(`input[name="input-${C}"]`);x&&(x.value=t[b])}const m=a+t.length;m<r.maxLength&&r.raiseEvent(m,"focus")}createRenderRoot(){return this}render(){var m;const e=((m=this._inputOtp)==null?void 0:m.variant)??"digits-only",r=this.isFirst,n=this.isLast,t=e==="with-spacing",a=e==="with-separator",s={"rtg-bg-transparent":!0,"rtg-h-[36px]":!0,"rtg-w-[36px]":!0,"rtg-text-center rtg-relative rtg-flex rtg-h-10 rtg-w-10 rtg-items-center rtg-justify-center rtg-border-y rtg-border-r rtg-border-input rtg-text-sm rtg-transition-all":!0,"first:rtg-rounded-l-md first:rtg-border-l":this.isFirst,"rtg-overflow-hidden":!0,"focus:rtg-border focus:rtg-border-input focus:rtg-border-[3px]":!0,"rtg-border":t||a,"rtg-border-t":!t||a,"rtg-border-b":!t||a,"rtg-border-r":!t||a,"rtg-border-l":this.isFirst||t||a,"first:rtg-rounded-l-md":e==="with-spacing"?!0:r,"last:rtg-rounded-r-md":e==="with-spacing"?!0:n,"rtg-rounded-none":!r&&!n&&(e==="digits-only"||e==="simple"||e==="with-separator")};return d.html`
       <input
         part="input-otp-slot"
         auto-complete="one-time-code"
@@ -4452,7 +4452,7 @@ body {
       >
         ${fi()}
       </div>
-    `}},sn([l.property({type:Number})],o.InputOtpSeparator.prototype,"index",2),o.InputOtpSeparator=sn([l.customElement("rtg-input-otp-separator")],o.InputOtpSeparator);var wd=Object.defineProperty,Cd=Object.getOwnPropertyDescriptor,rt=(i,e,r,n)=>{for(var t=n>1?void 0:n?Cd(e,r):e,a=i.length-1,s;a>=0;a--)(s=i[a])&&(t=(n?s(e,r,t):s(t))||t);return n&&t&&wd(e,r,t),t};o.InputOtp=class extends h{constructor(){super(),this.maxLength=6,this.onChange=()=>{},this.pin=new Array(this.maxLength),this.variant="digits-only",this.inputes=[]}connectedCallback(){super.connectedCallback()}getAttributesToExclude(){return[]}get _containerElement(){return this.querySelector("div[part=input-otp]")}raiseEvent(e,r="changes",n=1/0){const t=new CustomEvent("selected-input",{bubbles:!0,composed:!0,detail:{selectedItems:e,eventType:r,customIndex:n}});this.dispatchEvent(t)}createRenderRoot(){return this}firstUpdated(e){this.moveLightDomChildrenInto(this._containerElement),this.applyVariantStyles()}updated(e){e.has("variant")&&this.applyVariantStyles()}checkIfCompleteAndSubmit(){if(this.inputes.every(r=>r.value!=="")){const r=this.inputes.map(t=>t.value).join(""),n=new CustomEvent("otp-complete",{detail:{value:r},bubbles:!0,composed:!0});this.dispatchEvent(n)}}applyVariantStyles(){const e=this.querySelectorAll("rtg-input-otp-group");switch(e.forEach(r=>{r.className="",r.classList.add("rtg-flex","rtg-items-center")}),this.variant){case"with-spacing":e.forEach(r=>r.classList.add("rtg-gap-2"));break}}render(){return d.html`
+    `}},sn([l.property({type:Number})],o.InputOtpSeparator.prototype,"index",2),o.InputOtpSeparator=sn([l.customElement("rtg-input-otp-separator")],o.InputOtpSeparator);var wd=Object.defineProperty,Cd=Object.getOwnPropertyDescriptor,rt=(i,e,r,n)=>{for(var t=n>1?void 0:n?Cd(e,r):e,a=i.length-1,s;a>=0;a--)(s=i[a])&&(t=(n?s(e,r,t):s(t))||t);return n&&t&&wd(e,r,t),t};o.InputOtp=class extends h{constructor(){super(),this.maxLength=6,this.onChange=()=>{},this.pin=new Array(this.maxLength),this.variant="digits-only",this.inputes=[]}connectedCallback(){super.connectedCallback()}getAttributesToExclude(){return[]}get _containerElement(){return this.querySelector("div[part=input-otp]")}raiseEvent(e,r="changes",n=1/0){const t=new CustomEvent("focus",{bubbles:!0,composed:!0,detail:{selectedItems:e,eventType:r,customIndex:n}});this.dispatchEvent(t)}createRenderRoot(){return this}firstUpdated(e){this.moveLightDomChildrenInto(this._containerElement),this.applyVariantStyles()}updated(e){e.has("variant")&&this.applyVariantStyles()}checkIfCompleteAndSubmit(){if(this.inputes.every(r=>r.value!=="")){const r=this.inputes.map(t=>t.value).join(""),n=new CustomEvent("otp-complete",{detail:{value:r},bubbles:!0,composed:!0});this.dispatchEvent(n)}}applyVariantStyles(){const e=this.querySelectorAll("rtg-input-otp-group");switch(e.forEach(r=>{r.className="",r.classList.add("rtg-flex","rtg-items-center")}),this.variant){case"with-spacing":e.forEach(r=>r.classList.add("rtg-gap-2"));break}}render(){return d.html`
       <div
         part="input-otp"
         class="${p("rtg-flex rtg-items-center",this.className)}"

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent wc-ui following open-wc recommendations",
   "license": "MIT",
   "author": "wc-ui",
-  "version": "0.1.20",
+  "version": "0.1.23",
   "type": "module",
   "main": "dist/rtg-ui-kit.umd.cjs",
   "module": "./dist/rtg-ui-kit.js",