@abydahana/aksara-ui 1.1.4 → 1.1.5

package/dist/aksara.css

@@ -22757,16 +22757,36 @@ img,svg,video {
   cursor:pointer;
   transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out,transform .15s ease-in-out
 }
+.btn-xs {
+  min-height:1.5rem;
+  padding:.125rem .375rem;
+  font-size:.75rem
+}
 .btn-sm {
   min-height:1.75rem;
   padding:.25rem .5rem;
   font-size:.8125rem
 }
+.btn-md {
+  min-height:2.375rem;
+  padding:.5rem .875rem;
+  font-size:.875rem
+}
 .btn-lg {
   min-height:2.875rem;
   padding:.75rem 1.125rem;
   font-size:1.0625rem
 }
+.btn-xl {
+  min-height:3.375rem;
+  padding:.875rem 1.375rem;
+  font-size:1.25rem
+}
+.btn-xxl {
+  min-height:3.875rem;
+  padding:1rem 1.625rem;
+  font-size:1.5rem
+}
 .btn-block {
   display:flex;
   width:100%
@@ -22774,15 +22794,108 @@ img,svg,video {
 .btn-icon {
   inline-size:2.375rem;
   block-size:2.375rem;
+  aspect-ratio:1/1;
+  flex-shrink:0;
+  min-height:unset;
+  min-width:unset;
+  padding:0
+}
+.btn-xs.btn-icon {
+  inline-size:1.5rem;
+  block-size:1.5rem;
+  aspect-ratio:1/1;
+  flex-shrink:0;
+  min-height:unset;
+  min-width:unset;
   padding:0
 }
 .btn-sm.btn-icon {
   inline-size:1.75rem;
-  block-size:1.75rem
+  block-size:1.75rem;
+  aspect-ratio:1/1;
+  flex-shrink:0;
+  min-height:unset;
+  min-width:unset;
+  padding:0
+}
+.btn-md.btn-icon {
+  inline-size:2.375rem;
+  block-size:2.375rem;
+  aspect-ratio:1/1;
+  flex-shrink:0;
+  min-height:unset;
+  min-width:unset;
+  padding:0
 }
 .btn-lg.btn-icon {
   inline-size:2.875rem;
-  block-size:2.875rem
+  block-size:2.875rem;
+  aspect-ratio:1/1;
+  flex-shrink:0;
+  min-height:unset;
+  min-width:unset;
+  padding:0
+}
+.btn-xl.btn-icon {
+  inline-size:3.375rem;
+  block-size:3.375rem;
+  aspect-ratio:1/1;
+  flex-shrink:0;
+  min-height:unset;
+  min-width:unset;
+  padding:0
+}
+.btn-xxl.btn-icon {
+  inline-size:3.875rem;
+  block-size:3.875rem;
+  aspect-ratio:1/1;
+  flex-shrink:0;
+  min-height:unset;
+  min-width:unset;
+  padding:0
+}
+.btn.rounded-circle,.btn.rounded-full,button.rounded-circle,a.btn.rounded-circle {
+  aspect-ratio:1/1;
+  flex-shrink:0;
+  min-height:unset;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center
+}
+.btn.rounded-circle:not(.btn-icon):not([class*="w-"]):not([style*="width"]),.btn.rounded-full:not(.btn-icon):not([class*="w-"]):not([style*="width"]) {
+  inline-size:2.375rem;
+  block-size:2.375rem;
+  padding:0
+}
+.btn.btn-xs.rounded-circle:not(.btn-icon):not([class*="w-"]):not([style*="width"]),.btn.btn-xs.rounded-full:not(.btn-icon):not([class*="w-"]):not([style*="width"]) {
+  inline-size:1.5rem;
+  block-size:1.5rem;
+  padding:0
+}
+.btn.btn-sm.rounded-circle:not(.btn-icon):not([class*="w-"]):not([style*="width"]),.btn.btn-sm.rounded-full:not(.btn-icon):not([class*="w-"]):not([style*="width"]) {
+  inline-size:1.75rem;
+  block-size:1.75rem;
+  padding:0
+}
+.btn.btn-md.rounded-circle:not(.btn-icon):not([class*="w-"]):not([style*="width"]),.btn.btn-md.rounded-full:not(.btn-icon):not([class*="w-"]):not([style*="width"]) {
+  inline-size:2.375rem;
+  block-size:2.375rem;
+  padding:0
+}
+.btn.btn-lg.rounded-circle:not(.btn-icon):not([class*="w-"]):not([style*="width"]),.btn.btn-lg.rounded-full:not(.btn-icon):not([class*="w-"]):not([style*="width"]) {
+  inline-size:2.875rem;
+  block-size:2.875rem;
+  padding:0
+}
+.btn.btn-xl.rounded-circle:not(.btn-icon):not([class*="w-"]):not([style*="width"]),.btn.btn-xl.rounded-full:not(.btn-icon):not([class*="w-"]):not([style*="width"]) {
+  inline-size:3.375rem;
+  block-size:3.375rem;
+  padding:0
+}
+.btn.btn-xxl.rounded-circle:not(.btn-icon):not([class*="w-"]):not([style*="width"]),.btn.btn-xxl.rounded-full:not(.btn-icon):not([class*="w-"]):not([style*="width"]) {
+  inline-size:3.875rem;
+  block-size:3.875rem;
+  padding:0
 }
 .btn-ghost {
   color:var(--aksara-text-body);
@@ -22800,12 +22913,24 @@ img,svg,video {
   justify-content:center;
   vertical-align:middle
 }
+.btn-group-xs {
+  font-size:.75rem
+}
 .btn-group-sm {
   font-size:.8125rem
 }
+.btn-group-md {
+  font-size:.875rem
+}
 .btn-group-lg {
   font-size:1.0625rem
 }
+.btn-group-xl {
+  font-size:1.25rem
+}
+.btn-group-xxl {
+  font-size:1.5rem
+}
 .btn-toolbar {
   display:flex;
   flex-wrap:wrap;
@@ -22843,6 +22968,15 @@ img,svg,video {
   border-end-start-radius:var(--aksara-radius-sm);
   border-end-end-radius:var(--aksara-radius-sm)
 }
+.btn-group-xs>.btn,.btn-group-xs>.btn-group>.btn,.btn-group-xs>.btn-group-vertical>.btn {
+  min-height:1.5rem;
+  padding:.125rem .375rem;
+  font-size:.75rem
+}
+.btn-group-xs>.btn-icon,.btn-group-xs>.btn.btn-icon,.btn-group-xs>.btn-group>.btn-icon,.btn-group-xs>.btn-group>.btn.btn-icon,.btn-group-xs>.btn-group-vertical>.btn-icon,.btn-group-xs>.btn-group-vertical>.btn.btn-icon {
+  inline-size:1.5rem;
+  block-size:1.5rem
+}
 .btn-group-sm>.btn,.btn-group-sm>.btn-group>.btn,.btn-group-sm>.btn-group-vertical>.btn {
   min-height:1.75rem;
   padding:.25rem .5rem;
@@ -22852,6 +22986,15 @@ img,svg,video {
   inline-size:1.75rem;
   block-size:1.75rem
 }
+.btn-group-md>.btn,.btn-group-md>.btn-group>.btn,.btn-group-md>.btn-group-vertical>.btn {
+  min-height:2.375rem;
+  padding:.5rem .875rem;
+  font-size:.875rem
+}
+.btn-group-md>.btn-icon,.btn-group-md>.btn.btn-icon,.btn-group-md>.btn-group>.btn-icon,.btn-group-md>.btn-group>.btn.btn-icon,.btn-group-md>.btn-group-vertical>.btn-icon,.btn-group-md>.btn-group-vertical>.btn.btn-icon {
+  inline-size:2.375rem;
+  block-size:2.375rem
+}
 .btn-group-lg>.btn,.btn-group-lg>.btn-group>.btn,.btn-group-lg>.btn-group-vertical>.btn {
   min-height:2.875rem;
   padding:.75rem 1.125rem;
@@ -22861,6 +23004,24 @@ img,svg,video {
   inline-size:2.875rem;
   block-size:2.875rem
 }
+.btn-group-xl>.btn,.btn-group-xl>.btn-group>.btn,.btn-group-xl>.btn-group-vertical>.btn {
+  min-height:3.375rem;
+  padding:.875rem 1.375rem;
+  font-size:1.25rem
+}
+.btn-group-xl>.btn-icon,.btn-group-xl>.btn.btn-icon,.btn-group-xl>.btn-group>.btn-icon,.btn-group-xl>.btn-group>.btn.btn-icon,.btn-group-xl>.btn-group-vertical>.btn-icon,.btn-group-xl>.btn-group-vertical>.btn.btn-icon {
+  inline-size:3.375rem;
+  block-size:3.375rem
+}
+.btn-group-xxl>.btn,.btn-group-xxl>.btn-group>.btn,.btn-group-xxl>.btn-group-vertical>.btn {
+  min-height:3.875rem;
+  padding:1rem 1.625rem;
+  font-size:1.5rem
+}
+.btn-group-xxl>.btn-icon,.btn-group-xxl>.btn.btn-icon,.btn-group-xxl>.btn-group>.btn-icon,.btn-group-xxl>.btn-group>.btn.btn-icon,.btn-group-xxl>.btn-group-vertical>.btn-icon,.btn-group-xxl>.btn-group-vertical>.btn.btn-icon {
+  inline-size:3.875rem;
+  block-size:3.875rem
+}
 .btn:focus-visible {
   outline:0;
   box-shadow:none
@@ -23085,7 +23246,6 @@ img,svg,video {
   border-color:rgb(var(--aksara-light) / 1)
 }
 .card {
-  background:var(--aksara-surface);
   color:var(--aksara-text-body);
   border:1px solid var(--aksara-border-subtle);
   border-radius:var(--aksara-radius);
@@ -23289,6 +23449,30 @@ img,svg,video {
   background:var(--aksara-bg-subtle);
   color:var(--aksara-text-body)
 }
+.badge-xs {
+  padding:.125rem .35rem;
+  font-size:.625rem
+}
+.badge-sm {
+  padding:.2rem .45rem;
+  font-size:.7rem
+}
+.badge-md {
+  padding:.25rem .55rem;
+  font-size:.75rem
+}
+.badge-lg {
+  padding:.35rem .65rem;
+  font-size:.875rem
+}
+.badge-xl {
+  padding:.45rem .8rem;
+  font-size:1rem
+}
+.badge-xxl {
+  padding:.55rem .95rem;
+  font-size:1.125rem
+}
 .badge-dot {
   inline-size:.5rem;
   block-size:.5rem;
@@ -23744,7 +23928,9 @@ img,svg,video {
   justify-content:center;
   inline-size:2rem;
   block-size:2rem;
+  aspect-ratio:1/1;
   flex:0 0 auto;
+  flex-shrink:0;
   border:0;
   border-radius:9999px;
   background:var(--aksara-bg-subtle);
@@ -23759,7 +23945,26 @@ img,svg,video {
   justify-content:center;
   inline-size:2rem;
   block-size:2rem;
+  aspect-ratio:1/1;
   flex:0 0 auto;
+  flex-shrink:0;
+  border:0;
+  border-radius:9999px;
+  background:var(--aksara-bg-subtle);
+  color:var(--aksara-text-subtle);
+  cursor:pointer;
+  transition:background-color .15s ease,color .15s ease,transform .15s ease
+}
+.btn-close {
+  position:relative;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  inline-size:2rem;
+  block-size:2rem;
+  aspect-ratio:1/1;
+  flex:0 0 auto;
+  flex-shrink:0;
   border:0;
   border-radius:9999px;
   background:var(--aksara-bg-subtle);
@@ -23775,7 +23980,31 @@ img,svg,video {
   inline-size:2.5rem;
   block-size:2.5rem
 }
-.close::before,.close::after,.modal-close::before,.modal-close::after {
+.btn-close-xs,.btn-xs.btn-close {
+  inline-size:1.25rem;
+  block-size:1.25rem
+}
+.btn-close-sm,.btn-sm.btn-close {
+  inline-size:1.5rem;
+  block-size:1.5rem
+}
+.btn-close-md,.btn-md.btn-close {
+  inline-size:2rem;
+  block-size:2rem
+}
+.btn-close-lg,.btn-lg.btn-close {
+  inline-size:2.5rem;
+  block-size:2.5rem
+}
+.btn-close-xl,.btn-xl.btn-close {
+  inline-size:3rem;
+  block-size:3rem
+}
+.btn-close-xxl,.btn-xxl.btn-close {
+  inline-size:3.5rem;
+  block-size:3.5rem
+}
+.close::before,.close::after,.modal-close::before,.modal-close::after,.btn-close::before,.btn-close::after {
   content:"";
   position:absolute;
   inline-size:50%;
@@ -23783,22 +24012,26 @@ img,svg,video {
   border-radius:9999px;
   background:currentColor
 }
-.close::before,.modal-close::before {
+.close::before,.modal-close::before,.btn-close::before {
   transform:rotate(45deg)
 }
-.close::after,.modal-close::after {
+.close::after,.modal-close::after,.btn-close::after {
   transform:rotate(-45deg)
 }
-.close > *,.modal-close > * {
+.close > *,.modal-close > *,.btn-close > * {
   display:none
 }
-.close:hover,.modal-close:hover {
+.close:hover,.modal-close:hover,.btn-close:hover {
   background:rgb(var(--aksara-primary)/.12);
   color:rgb(var(--aksara-primary))
 }
-.close:active,.modal-close:active {
+.close:active,.modal-close:active,.btn-close:active {
   transform:scale(.94)
 }
+.close-white,.btn-close-white {
+  color:#fff;
+  background:rgba(255,255,255,.16)
+}
 .tooltip {
   position:absolute;
   z-index:1080;
@@ -24577,11 +24810,36 @@ img,svg,video {
   border-radius:9999px;
   animation:aksara-spin .75s linear infinite
 }
+.spinner-xs {
+  inline-size:.75rem;
+  block-size:.75rem;
+  border-width:.125rem
+}
 .spinner-sm {
   inline-size:1rem;
   block-size:1rem;
   border-width:.15rem
 }
+.spinner-md {
+  inline-size:2rem;
+  block-size:2rem;
+  border-width:.25rem
+}
+.spinner-lg {
+  inline-size:2.75rem;
+  block-size:2.75rem;
+  border-width:.3rem
+}
+.spinner-xl {
+  inline-size:3.5rem;
+  block-size:3.5rem;
+  border-width:.35rem
+}
+.spinner-xxl {
+  inline-size:4.25rem;
+  block-size:4.25rem;
+  border-width:.4rem
+}
 .placeholder {
   display:inline-block;
   min-height:1em;
@@ -24878,6 +25136,60 @@ img,svg,video {
   padding:0;
   margin:0
 }
+.pagination-xs {
+  gap:.125rem
+}
+.pagination-xs .page-link {
+  min-width:1.5rem;
+  height:1.5rem;
+  padding:0 .375rem;
+  font-size:.75rem
+}
+.pagination-sm {
+  gap:.2rem
+}
+.pagination-sm .page-link {
+  min-width:1.875rem;
+  height:1.875rem;
+  padding:0 .5rem;
+  font-size:.8125rem
+}
+.pagination-md {
+  gap:.25rem
+}
+.pagination-md .page-link {
+  min-width:2.25rem;
+  height:2.25rem;
+  padding:0 .625rem;
+  font-size:.875rem
+}
+.pagination-lg {
+  gap:.375rem
+}
+.pagination-lg .page-link {
+  min-width:2.75rem;
+  height:2.75rem;
+  padding:0 .875rem;
+  font-size:1.0625rem
+}
+.pagination-xl {
+  gap:.5rem
+}
+.pagination-xl .page-link {
+  min-width:3.25rem;
+  height:3.25rem;
+  padding:0 1rem;
+  font-size:1.25rem
+}
+.pagination-xxl {
+  gap:.625rem
+}
+.pagination-xxl .page-link {
+  min-width:3.75rem;
+  height:3.75rem;
+  padding:0 1.25rem;
+  font-size:1.5rem
+}
 .page-link {
   display:inline-flex;
   align-items:center;
@@ -25342,6 +25654,33 @@ textarea.form-control {
 .input-group>.btn:focus {
   z-index:4
 }
+.input-group-xs {
+}
+.input-group-xs>.form-control,.input-group-xs>.form-select,.input-group-xs>.input-group-text,.input-group-xs>.btn,.input-group>.form-control-xs,.input-group>.form-select-xs,.input-group>.btn-xs {
+  padding:.1875rem .375rem;
+  font-size:.75rem;
+  line-height:1.4;
+  min-height:26px;
+  height:26px;
+  box-sizing:border-box
+}
+.input-group-xs>textarea.form-control,.input-group>textarea.form-control-xs {
+  height:auto;
+  min-height:auto
+}
+.input-group-xs>.form-select,.input-group>.form-select-xs {
+  padding-right:1.75rem;
+  background-position:right .375rem center;
+  background-size:12px 8px
+}
+.input-group-xs>:first-child,.input-group:has(>.form-control-xs:first-child)>:first-child,.input-group:has(>.btn-xs:first-child)>:first-child {
+  border-start-start-radius:var(--aksara-radius-sm);
+  border-end-start-radius:var(--aksara-radius-sm)
+}
+.input-group-xs>:last-child,.input-group:has(>.form-control-xs:last-child)>:last-child,.input-group:has(>.btn-xs:last-child)>:last-child {
+  border-start-end-radius:var(--aksara-radius-sm);
+  border-end-end-radius:var(--aksara-radius-sm)
+}
 .input-group-sm {
 }
 .input-group-sm>.form-control,.input-group-sm>.form-select,.input-group-sm>.input-group-text,.input-group-sm>.btn,.input-group>.form-control-sm,.input-group>.form-select-sm,.input-group>.btn-sm {
@@ -25369,6 +25708,8 @@ textarea.form-control {
   border-start-end-radius:var(--aksara-radius-sm);
   border-end-end-radius:var(--aksara-radius-sm)
 }
+.input-group-md {
+}
 .input-group-lg {
 }
 .input-group-lg>.form-control,.input-group-lg>.form-select,.input-group-lg>.input-group-text,.input-group-lg>.btn,.input-group>.form-control-lg,.input-group>.form-select-lg,.input-group>.btn-lg {
@@ -25396,12 +25737,86 @@ textarea.form-control {
   border-start-end-radius:var(--aksara-radius-md,.5rem);
   border-end-end-radius:var(--aksara-radius-md,.5rem)
 }
+.input-group-xl {
+}
+.input-group-xl>.form-control,.input-group-xl>.form-select,.input-group-xl>.input-group-text,.input-group-xl>.btn,.input-group>.form-control-xl,.input-group>.form-select-xl,.input-group>.btn-xl {
+  padding:.875rem 1.125rem;
+  font-size:1.25rem;
+  line-height:1.5;
+  min-height:56px;
+  height:56px;
+  box-sizing:border-box
+}
+.input-group-xl>textarea.form-control,.input-group>textarea.form-control-xl {
+  height:auto;
+  min-height:auto
+}
+.input-group-xl>.form-select,.input-group>.form-select-xl {
+  padding-right:2.75rem;
+  background-position:right 1.125rem center;
+  background-size:20px 16px
+}
+.input-group-xl>:first-child {
+  border-start-start-radius:var(--aksara-radius-md,.5rem);
+  border-end-start-radius:var(--aksara-radius-md,.5rem)
+}
+.input-group-xl>:last-child {
+  border-start-end-radius:var(--aksara-radius-md,.5rem);
+  border-end-end-radius:var(--aksara-radius-md,.5rem)
+}
+.input-group-xxl {
+}
+.input-group-xxl>.form-control,.input-group-xxl>.form-select,.input-group-xxl>.input-group-text,.input-group-xxl>.btn,.input-group>.form-control-xxl,.input-group>.form-select-xxl,.input-group>.btn-xxl {
+  padding:1rem 1.25rem;
+  font-size:1.5rem;
+  line-height:1.5;
+  min-height:64px;
+  height:64px;
+  box-sizing:border-box
+}
+.input-group-xxl>textarea.form-control,.input-group>textarea.form-control-xxl {
+  height:auto;
+  min-height:auto
+}
+.input-group-xxl>.form-select,.input-group>.form-select-xxl {
+  padding-right:3rem;
+  background-position:right 1.25rem center;
+  background-size:22px 18px
+}
+.input-group-xxl>:first-child {
+  border-start-start-radius:var(--aksara-radius-lg,.75rem);
+  border-end-start-radius:var(--aksara-radius-lg,.75rem)
+}
+.input-group-xxl>:last-child {
+  border-start-end-radius:var(--aksara-radius-lg,.75rem);
+  border-end-end-radius:var(--aksara-radius-lg,.75rem)
+}
 .is-valid {
   border-color:rgb(var(--aksara-success))
 }
 .is-invalid {
   border-color:rgb(var(--aksara-danger))
 }
+.form-control-xs {
+  padding:.1875rem .375rem;
+  font-size:.75rem;
+  line-height:1.4;
+  min-height:26px;
+  height:26px;
+  box-sizing:border-box;
+  border-radius:var(--aksara-radius-sm)
+}
+.form-select-xs {
+  padding:.1875rem 1.75rem .1875rem .375rem;
+  font-size:.75rem;
+  line-height:1.4;
+  min-height:26px;
+  height:26px;
+  box-sizing:border-box;
+  border-radius:var(--aksara-radius-sm);
+  background-position:right .375rem center;
+  background-size:12px 8px
+}
 .form-control-sm {
   padding:.25rem .5rem;
   font-size:.875rem;
@@ -25460,9 +25875,48 @@ textarea.form-control {
   background-position:right 1rem center;
   background-size:18px 14px
 }
+.form-control-xl {
+  padding:.875rem 1.125rem;
+  font-size:1.25rem;
+  line-height:1.5;
+  min-height:56px;
+  height:56px;
+  box-sizing:border-box;
+  border-radius:var(--aksara-radius-md,.5rem)
+}
+.form-select-xl {
+  padding:.875rem 2.75rem .875rem 1.125rem;
+  font-size:1.25rem;
+  line-height:1.5;
+  min-height:56px;
+  height:56px;
+  box-sizing:border-box;
+  border-radius:var(--aksara-radius-md,.5rem);
+  background-position:right 1.125rem center;
+  background-size:20px 16px
+}
+.form-control-xxl {
+  padding:1rem 1.25rem;
+  font-size:1.5rem;
+  line-height:1.5;
+  min-height:64px;
+  height:64px;
+  box-sizing:border-box;
+  border-radius:var(--aksara-radius-lg,.75rem)
+}
+.form-select-xxl {
+  padding:1rem 3rem 1rem 1.25rem;
+  font-size:1.5rem;
+  line-height:1.5;
+  min-height:64px;
+  height:64px;
+  box-sizing:border-box;
+  border-radius:var(--aksara-radius-lg,.75rem);
+  background-position:right 1.25rem center;
+  background-size:22px 18px
+}
 .form-control:focus,.form-select:focus {
   color:var(--aksara-text-body);
-  background:var(--aksara-surface);
   border-color:rgb(var(--aksara-primary));
   box-shadow:none;
   outline:0