@creativecodeco/ui 0.4.2 → 0.5.0

package/lib/hooks/use-safe-button-props.hook.d.ts

@@ -62,7 +62,7 @@ export default function useSafeButtonProps({ onClick, onSubmit, loading, ...prop
     itemRef?: string | undefined;
     results?: number | undefined;
     security?: string | undefined;
-    unselectable?: "on" | "off" | undefined;
+    unselectable?: "off" | "on" | undefined;
     inputMode?: "search" | "email" | "tel" | "text" | "url" | "none" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;

package/lib/theme/css/accordion.css

@@ -0,0 +1,9 @@
+.accordion-type {
+  &-arrow {
+    @apply collapse-arrow;
+  }
+
+  &-plus {
+    @apply collapse-plus;
+  }
+}

package/lib/theme/css/main.css

@@ -2,6 +2,7 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@import './accordion.css';
 @import './avatar.css';
 @import './button.css';
 @import './checkbox.css';

package/lib/theme/main.css

@@ -678,8 +678,8 @@ html {
     color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
   }
 
-  .menu li > *:not(ul):not(.menu-title):not(details):active,
-.menu li > *:not(ul):not(.menu-title):not(details).active,
+  .menu li > *:not(ul, .menu-title, details, .btn):active,
+.menu li > *:not(ul, .menu-title, details, .btn).active,
 .menu li > details > summary:active {
     --tw-bg-opacity: 1;
     background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
@@ -713,6 +713,62 @@ html {
   border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));
   --tw-border-opacity: 0.2;
 }
+.collapse:not(td):not(tr):not(colgroup) {
+  visibility: visible;
+}
+.collapse {
+  position: relative;
+  display: grid;
+  overflow: hidden;
+  grid-template-rows: auto 0fr;
+  transition: grid-template-rows 0.2s;
+  width: 100%;
+  border-radius: var(--rounded-box, 1rem);
+}
+.collapse-title,
+.collapse > input[type="checkbox"],
+.collapse > input[type="radio"],
+.collapse-content {
+  grid-column-start: 1;
+  grid-row-start: 1;
+}
+.collapse > input[type="checkbox"],
+.collapse > input[type="radio"] {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  opacity: 0;
+}
+.collapse-content {
+  visibility: hidden;
+  grid-column-start: 1;
+  grid-row-start: 2;
+  min-height: 0px;
+  transition: visibility 0.2s;
+  transition: padding 0.2s ease-out,
+    background-color 0.2s ease-out;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  cursor: unset;
+}
+.collapse[open],
+.collapse-open,
+.collapse:focus:not(.collapse-close) {
+  grid-template-rows: auto 1fr;
+}
+.collapse:not(.collapse-close):has(> input[type="checkbox"]:checked),
+.collapse:not(.collapse-close):has(> input[type="radio"]:checked) {
+  grid-template-rows: auto 1fr;
+}
+.collapse[open] > .collapse-content,
+.collapse-open > .collapse-content,
+.collapse:focus:not(.collapse-close) > .collapse-content,
+.collapse:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-content,
+.collapse:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-content {
+  visibility: visible;
+  min-height: -moz-fit-content;
+  min-height: fit-content;
+}
 .dropdown {
   position: relative;
   display: inline-block;
@@ -809,7 +865,7 @@ html {
     transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
   }
 
-  :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
+  :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
     cursor: pointer;
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -817,7 +873,7 @@ html {
 
   @supports (color: oklch(0 0 0)) {
 
-    :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(.active):hover, :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(.active):hover {
+    :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(.active, .btn):hover, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(.active, .btn):hover {
       background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
     }
   }
@@ -858,17 +914,41 @@ html {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
+.input[type="number"]::-webkit-inner-spin-button,
+.input-md[type="number"]::-webkit-inner-spin-button {
+  margin-top: -1rem;
+  margin-bottom: -1rem;
+  margin-inline-end: -1rem;
+}
+.\!join {
+  display: inline-flex !important;
+  align-items: stretch !important;
+  border-radius: var(--rounded-btn, 0.5rem) !important;
+}
 .join {
   display: inline-flex;
   align-items: stretch;
   border-radius: var(--rounded-btn, 0.5rem);
 }
+.\!join :where(.join-item) {
+  border-start-end-radius: 0 !important;
+  border-end-end-radius: 0 !important;
+  border-end-start-radius: 0 !important;
+  border-start-start-radius: 0 !important;
+}
 .join :where(.join-item) {
   border-start-end-radius: 0;
   border-end-end-radius: 0;
   border-end-start-radius: 0;
   border-start-start-radius: 0;
 }
+.\!join .join-item:not(:first-child):not(:last-child),
+  .\!join *:not(:first-child):not(:last-child) .join-item {
+  border-start-end-radius: 0 !important;
+  border-end-end-radius: 0 !important;
+  border-end-start-radius: 0 !important;
+  border-start-start-radius: 0 !important;
+}
 .join .join-item:not(:first-child):not(:last-child),
   .join *:not(:first-child):not(:last-child) .join-item {
   border-start-end-radius: 0;
@@ -876,39 +956,104 @@ html {
   border-end-start-radius: 0;
   border-start-start-radius: 0;
 }
+.\!join .join-item:not(:first-child):not(:last-child),
+  .\!join *:not(:first-child):not(:last-child) .join-item {
+  border-start-end-radius: 0 !important;
+  border-end-end-radius: 0 !important;
+  border-end-start-radius: 0 !important;
+  border-start-start-radius: 0 !important;
+}
+.\!join .join-item:first-child:not(:last-child),
+  .\!join *:first-child:not(:last-child) .join-item {
+  border-start-end-radius: 0 !important;
+  border-end-end-radius: 0 !important;
+}
 .join .join-item:first-child:not(:last-child),
   .join *:first-child:not(:last-child) .join-item {
   border-start-end-radius: 0;
   border-end-end-radius: 0;
 }
+.\!join .join-item:first-child:not(:last-child),
+  .\!join *:first-child:not(:last-child) .join-item {
+  border-start-end-radius: 0 !important;
+  border-end-end-radius: 0 !important;
+}
+.\!join .dropdown .join-item:first-child:not(:last-child),
+  .\!join *:first-child:not(:last-child) .dropdown .join-item {
+  border-start-end-radius: inherit !important;
+  border-end-end-radius: inherit !important;
+}
 .join .dropdown .join-item:first-child:not(:last-child),
   .join *:first-child:not(:last-child) .dropdown .join-item {
   border-start-end-radius: inherit;
   border-end-end-radius: inherit;
 }
+.\!join .dropdown .join-item:first-child:not(:last-child),
+  .\!join *:first-child:not(:last-child) .dropdown .join-item {
+  border-start-end-radius: inherit !important;
+  border-end-end-radius: inherit !important;
+}
+.\!join :where(.join-item:first-child:not(:last-child)),
+  .\!join :where(*:first-child:not(:last-child) .join-item) {
+  border-end-start-radius: inherit !important;
+  border-start-start-radius: inherit !important;
+}
 .join :where(.join-item:first-child:not(:last-child)),
   .join :where(*:first-child:not(:last-child) .join-item) {
   border-end-start-radius: inherit;
   border-start-start-radius: inherit;
 }
+.\!join :where(.join-item:first-child:not(:last-child)),
+  .\!join :where(*:first-child:not(:last-child) .join-item) {
+  border-end-start-radius: inherit !important;
+  border-start-start-radius: inherit !important;
+}
+.\!join .join-item:last-child:not(:first-child),
+  .\!join *:last-child:not(:first-child) .join-item {
+  border-end-start-radius: 0 !important;
+  border-start-start-radius: 0 !important;
+}
 .join .join-item:last-child:not(:first-child),
   .join *:last-child:not(:first-child) .join-item {
   border-end-start-radius: 0;
   border-start-start-radius: 0;
 }
+.\!join .join-item:last-child:not(:first-child),
+  .\!join *:last-child:not(:first-child) .join-item {
+  border-end-start-radius: 0 !important;
+  border-start-start-radius: 0 !important;
+}
+.\!join :where(.join-item:last-child:not(:first-child)),
+  .\!join :where(*:last-child:not(:first-child) .join-item) {
+  border-start-end-radius: inherit !important;
+  border-end-end-radius: inherit !important;
+}
 .join :where(.join-item:last-child:not(:first-child)),
   .join :where(*:last-child:not(:first-child) .join-item) {
   border-start-end-radius: inherit;
   border-end-end-radius: inherit;
 }
+.\!join :where(.join-item:last-child:not(:first-child)),
+  .\!join :where(*:last-child:not(:first-child) .join-item) {
+  border-start-end-radius: inherit !important;
+  border-end-end-radius: inherit !important;
+}
 @supports not selector(:has(*)) {
 
+  :where(.\!join *) {
+    border-radius: inherit !important;
+  }
+
   :where(.join *) {
     border-radius: inherit;
   }
 }
 @supports selector(:has(*)) {
 
+  :where(.\!join *:has(.join-item)) {
+    border-radius: inherit !important;
+  }
+
   :where(.join *:has(.join-item)) {
     border-radius: inherit;
   }
@@ -927,8 +1072,7 @@ html {
   margin-inline-start: 1rem;
   padding-inline-start: 0.5rem;
 }
-.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
-  .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)), .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
   display: grid;
   grid-auto-flow: column;
   align-content: flex-start;
@@ -1141,6 +1285,115 @@ html {
     background-position-y: 0;
   }
 }
+details.collapse {
+  width: 100%;
+}
+details.collapse summary {
+  position: relative;
+  display: block;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+details.collapse summary::-webkit-details-marker {
+  display: none;
+}
+.collapse:focus-visible {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
+}
+.collapse:has(.collapse-title:focus-visible),
+.collapse:has(> input[type="checkbox"]:focus-visible),
+.collapse:has(> input[type="radio"]:focus-visible) {
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: var(--fallback-bc,oklch(var(--bc)/1));
+}
+.collapse-arrow > .collapse-title:after {
+  position: absolute;
+  display: block;
+  height: 0.5rem;
+  width: 0.5rem;
+  --tw-translate-y: -100%;
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-duration: 0.2s;
+  top: 1.9rem;
+  inset-inline-end: 1.4rem;
+  content: "";
+  transform-origin: 75% 75%;
+  box-shadow: 2px 2px;
+  pointer-events: none;
+}
+.collapse-plus > .collapse-title:after {
+  position: absolute;
+  display: block;
+  height: 0.5rem;
+  width: 0.5rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-duration: 300ms;
+  top: 0.9rem;
+  inset-inline-end: 1.4rem;
+  content: "+";
+  pointer-events: none;
+}
+.collapse:not(.collapse-open):not(.collapse-close) > input[type="checkbox"],
+.collapse:not(.collapse-open):not(.collapse-close) > input[type="radio"]:not(:checked),
+.collapse:not(.collapse-open):not(.collapse-close) > .collapse-title {
+  cursor: pointer;
+}
+.collapse:focus:not(.collapse-open):not(.collapse-close):not(.collapse[open]) > .collapse-title {
+  cursor: unset;
+}
+.collapse-title {
+  position: relative;
+}
+:where(.collapse > input[type="checkbox"]),
+:where(.collapse > input[type="radio"]) {
+  z-index: 1;
+}
+.collapse-title,
+:where(.collapse > input[type="checkbox"]),
+:where(.collapse > input[type="radio"]) {
+  width: 100%;
+  padding: 1rem;
+  padding-inline-end: 3rem;
+  min-height: 3.75rem;
+  transition: background-color 0.2s ease-out;
+}
+.collapse[open] > :where(.collapse-content),
+.collapse-open > :where(.collapse-content),
+.collapse:focus:not(.collapse-close) > :where(.collapse-content),
+.collapse:not(.collapse-close) > :where(input[type="checkbox"]:checked ~ .collapse-content),
+.collapse:not(.collapse-close) > :where(input[type="radio"]:checked ~ .collapse-content) {
+  padding-bottom: 1rem;
+  transition: padding 0.2s ease-out,
+    background-color 0.2s ease-out;
+}
+.collapse[open].collapse-arrow > .collapse-title:after,
+.collapse-open.collapse-arrow > .collapse-title:after,
+.collapse-arrow:focus:not(.collapse-close) > .collapse-title:after,
+.collapse-arrow:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,
+.collapse-arrow:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
+  --tw-translate-y: -50%;
+  --tw-rotate: 225deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.collapse[open].collapse-plus > .collapse-title:after,
+.collapse-open.collapse-plus > .collapse-title:after,
+.collapse-plus:focus:not(.collapse-close) > .collapse-title:after,
+.collapse-plus:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,
+.collapse-plus:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
+  content: "−";
+}
 .dropdown.dropdown-open .dropdown-content,
 .dropdown:focus .dropdown-content,
 .dropdown:focus-within .dropdown-content {
@@ -1154,6 +1407,11 @@ html {
   --tw-text-opacity: 1;
   color: var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));
 }
+.input input {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));
+  background-color: transparent;
+}
 .input input:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1206,11 +1464,19 @@ html {
 .input::-webkit-date-and-time-value {
   text-align: inherit;
 }
+.\!join > :where(*:not(:first-child)) {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+  margin-inline-start: -1px !important;
+}
 .join > :where(*:not(:first-child)) {
   margin-top: 0px;
   margin-bottom: 0px;
   margin-inline-start: -1px;
 }
+.join-item:focus {
+  isolation: isolate;
+}
 .\!loading {
   pointer-events: none !important;
   display: inline-block !important;
@@ -1259,7 +1525,7 @@ html {
   opacity: 0.1;
   content: "";
 }
-.menu :where(li:not(.menu-title) > *:not(ul):not(details):not(.menu-title)),
+.menu :where(li:not(.menu-title) > *:not(ul, details, .menu-title, .btn)),
 .menu :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
   border-radius: var(--rounded-btn, 0.5rem);
   padding-left: 1rem;
@@ -1275,12 +1541,7 @@ html {
   transition-duration: 200ms;
   text-wrap: balance;
 }
-:where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active).focus,
-  :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):not(summary):not(.active):focus,
-  :where(.menu li:not(.menu-title):not(.disabled) > *:not(ul):not(details):not(.menu-title)):is(summary):not(.active):focus-visible,
-  :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active).focus,
-  :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):not(summary):not(.active):focus,
-  :where(.menu li:not(.menu-title):not(.disabled) > details > summary:not(.menu-title)):is(summary):not(.active):focus-visible {
+:where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > *:not(ul, details, .menu-title)):is(summary):not(.active, .btn):focus-visible, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn).focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):not(summary, .active, .btn):focus, :where(.menu li:not(.menu-title, .disabled) > details > summary:not(.menu-title)):is(summary):not(.active, .btn):focus-visible {
   cursor: pointer;
   background-color: var(--fallback-bc,oklch(var(--bc)/0.1));
   --tw-text-opacity: 1;
@@ -1288,8 +1549,8 @@ html {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.menu li > *:not(ul):not(.menu-title):not(details):active,
-.menu li > *:not(ul):not(.menu-title):not(details).active,
+.menu li > *:not(ul, .menu-title, details, .btn):active,
+.menu li > *:not(ul, .menu-title, details, .btn).active,
 .menu li > details > summary:active {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
@@ -1535,9 +1796,19 @@ html {
     opacity: 1;
   }
 }
+.\!join.join-vertical {
+  flex-direction: column !important;
+}
 .join.join-vertical {
   flex-direction: column;
 }
+.\!join.join-vertical .join-item:first-child:not(:last-child),
+  .\!join.join-vertical *:first-child:not(:last-child) .join-item {
+  border-end-start-radius: 0 !important;
+  border-end-end-radius: 0 !important;
+  border-start-start-radius: inherit !important;
+  border-start-end-radius: inherit !important;
+}
 .join.join-vertical .join-item:first-child:not(:last-child),
   .join.join-vertical *:first-child:not(:last-child) .join-item {
   border-end-start-radius: 0;
@@ -1545,6 +1816,20 @@ html {
   border-start-start-radius: inherit;
   border-start-end-radius: inherit;
 }
+.\!join.join-vertical .join-item:first-child:not(:last-child),
+  .\!join.join-vertical *:first-child:not(:last-child) .join-item {
+  border-end-start-radius: 0 !important;
+  border-end-end-radius: 0 !important;
+  border-start-start-radius: inherit !important;
+  border-start-end-radius: inherit !important;
+}
+.\!join.join-vertical .join-item:last-child:not(:first-child),
+  .\!join.join-vertical *:last-child:not(:first-child) .join-item {
+  border-start-start-radius: 0 !important;
+  border-start-end-radius: 0 !important;
+  border-end-start-radius: inherit !important;
+  border-end-end-radius: inherit !important;
+}
 .join.join-vertical .join-item:last-child:not(:first-child),
   .join.join-vertical *:last-child:not(:first-child) .join-item {
   border-start-start-radius: 0;
@@ -1552,9 +1837,26 @@ html {
   border-end-start-radius: inherit;
   border-end-end-radius: inherit;
 }
+.\!join.join-vertical .join-item:last-child:not(:first-child),
+  .\!join.join-vertical *:last-child:not(:first-child) .join-item {
+  border-start-start-radius: 0 !important;
+  border-start-end-radius: 0 !important;
+  border-end-start-radius: inherit !important;
+  border-end-end-radius: inherit !important;
+}
+.\!join.join-horizontal {
+  flex-direction: row !important;
+}
 .join.join-horizontal {
   flex-direction: row;
 }
+.\!join.join-horizontal .join-item:first-child:not(:last-child),
+  .\!join.join-horizontal *:first-child:not(:last-child) .join-item {
+  border-end-end-radius: 0 !important;
+  border-start-end-radius: 0 !important;
+  border-end-start-radius: inherit !important;
+  border-start-start-radius: inherit !important;
+}
 .join.join-horizontal .join-item:first-child:not(:last-child),
   .join.join-horizontal *:first-child:not(:last-child) .join-item {
   border-end-end-radius: 0;
@@ -1562,6 +1864,20 @@ html {
   border-end-start-radius: inherit;
   border-start-start-radius: inherit;
 }
+.\!join.join-horizontal .join-item:first-child:not(:last-child),
+  .\!join.join-horizontal *:first-child:not(:last-child) .join-item {
+  border-end-end-radius: 0 !important;
+  border-start-end-radius: 0 !important;
+  border-end-start-radius: inherit !important;
+  border-start-start-radius: inherit !important;
+}
+.\!join.join-horizontal .join-item:last-child:not(:first-child),
+  .\!join.join-horizontal *:last-child:not(:first-child) .join-item {
+  border-end-start-radius: 0 !important;
+  border-start-start-radius: 0 !important;
+  border-end-end-radius: inherit !important;
+  border-start-end-radius: inherit !important;
+}
 .join.join-horizontal .join-item:last-child:not(:first-child),
   .join.join-horizontal *:last-child:not(:first-child) .join-item {
   border-end-start-radius: 0;
@@ -1569,6 +1885,13 @@ html {
   border-end-end-radius: inherit;
   border-start-end-radius: inherit;
 }
+.\!join.join-horizontal .join-item:last-child:not(:first-child),
+  .\!join.join-horizontal *:last-child:not(:first-child) .join-item {
+  border-end-start-radius: 0 !important;
+  border-start-start-radius: 0 !important;
+  border-end-end-radius: inherit !important;
+  border-start-end-radius: inherit !important;
+}
 .avatar.online:before {
   content: "";
   position: absolute;
@@ -1601,16 +1924,29 @@ html {
   top: 7%;
   right: 7%;
 }
+.\!join.join-vertical > :where(*:not(:first-child)) {
+  margin-left: 0px !important;
+  margin-right: 0px !important;
+  margin-top: -1px !important;
+}
 .join.join-vertical > :where(*:not(:first-child)) {
   margin-left: 0px;
   margin-right: 0px;
   margin-top: -1px;
 }
+.\!join.join-horizontal > :where(*:not(:first-child)) {
+  margin-top: 0px !important;
+  margin-bottom: 0px !important;
+  margin-inline-start: -1px !important;
+}
 .join.join-horizontal > :where(*:not(:first-child)) {
   margin-top: 0px;
   margin-bottom: 0px;
   margin-inline-start: -1px;
 }
+.collapse {
+  visibility: collapse;
+}
 .relative {
   position: relative;
 }
@@ -1635,9 +1971,15 @@ html {
 .cursor-pointer {
   cursor: pointer;
 }
+.flex-wrap {
+  flex-wrap: wrap;
+}
 .justify-start {
   justify-content: flex-start;
 }
+.gap-2 {
+  gap: 0.5rem;
+}
 .gap-3 {
   gap: 0.75rem;
 }
@@ -1650,14 +1992,32 @@ html {
 .rounded-full {
   border-radius: 9999px;
 }
+.border {
+  border-width: 1px;
+}
+.border-base-300 {
+  --tw-border-opacity: 1;
+  border-color: var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)));
+}
 .bg-base-100 {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
 }
+.bg-base-200 {
+  --tw-bg-opacity: 1;
+  background-color: var(--fallback-b2,oklch(var(--b2)/var(--tw-bg-opacity)));
+}
 .bg-neutral {
   --tw-bg-opacity: 1;
   background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));
 }
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+.font-medium {
+  font-weight: 500;
+}
 .text-neutral-content {
   --tw-text-opacity: 1;
   color: var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));
@@ -1677,6 +2037,50 @@ html {
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
+.accordion-type-arrow > .collapse-title:after {
+  position: absolute;
+  display: block;
+  height: 0.5rem;
+  width: 0.5rem;
+  --tw-translate-y: -100%;
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-duration: 150ms;
+  transition-duration: 0.2s;
+  top: 1.9rem;
+  inset-inline-end: 1.4rem;
+  content: "";
+  transform-origin: 75% 75%;
+  box-shadow: 2px 2px;
+  pointer-events: none;
+}
+.collapse[open].accordion-type-arrow > .collapse-title:after,
+.collapse-open.accordion-type-arrow > .collapse-title:after,.accordion-type-arrow:focus:not(.collapse-close) > .collapse-title:after,.accordion-type-arrow:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,.accordion-type-arrow:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
+  --tw-translate-y: -50%;
+  --tw-rotate: 225deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.accordion-type-plus > .collapse-title:after {
+  position: absolute;
+  display: block;
+  height: 0.5rem;
+  width: 0.5rem;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  transition-duration: 300ms;
+  top: 0.9rem;
+  inset-inline-end: 1.4rem;
+  content: "+";
+  pointer-events: none;
+}
+.collapse[open].accordion-type-plus > .collapse-title:after,
+.collapse-open.accordion-type-plus > .collapse-title:after,.accordion-type-plus:focus:not(.collapse-close) > .collapse-title:after,.accordion-type-plus:not(.collapse-close) > input[type="checkbox"]:checked ~ .collapse-title:after,.accordion-type-plus:not(.collapse-close) > input[type="radio"]:checked ~ .collapse-title:after {
+  content: "−";
+}
 .avatar-size-xs {
   width: 2rem;
 }
@@ -3309,6 +3713,11 @@ html {
   -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
           mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' stroke='%23000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cstyle%3E.spinner_V8m1%7Btransform-origin:center;animation:spinner_zKoa 2s linear infinite%7D.spinner_V8m1 circle%7Bstroke-linecap:round;animation:spinner_YpZS 1.5s ease-out infinite%7D%40keyframes spinner_zKoa%7B100%25%7Btransform:rotate(360deg)%7D%7D%40keyframes spinner_YpZS%7B0%25%7Bstroke-dasharray:0 150;stroke-dashoffset:0%7D47.5%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-16%7D95%25%2C100%25%7Bstroke-dasharray:42 150;stroke-dashoffset:-59%7D%7D%3C%2Fstyle%3E%3Cg class='spinner_V8m1'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke-width='3'%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E");
 }
+.text-box-size-xs[type="number"]::-webkit-inner-spin-button {
+  margin-top: -0.25rem;
+  margin-bottom: -0.25rem;
+  margin-inline-end: -0px;
+}
 .text-box-size-xs {
   height: 1.5rem;
   padding-left: 0.5rem;
@@ -3323,6 +3732,11 @@ html {
 .text-box-size-xs.text-box-with-right-icon {
   padding-right: 2rem;
 }
+.text-box-size-sm[type="number"]::-webkit-inner-spin-button {
+  margin-top: 0px;
+  margin-bottom: 0px;
+  margin-inline-end: -0px;
+}
 .text-box-size-sm {
   height: 2rem;
   padding-left: 0.75rem;
@@ -3336,6 +3750,11 @@ html {
 .text-box-size-sm.text-box-with-right-icon {
   padding-right: 2rem;
 }
+.text-box-size-md[type="number"]::-webkit-inner-spin-button {
+  margin-top: -1rem;
+  margin-bottom: -1rem;
+  margin-inline-end: -1rem;
+}
 .text-box-size-md {
   height: 3rem;
   padding-left: 1rem;
@@ -3350,6 +3769,11 @@ html {
 .text-box-size-md.text-box-with-right-icon {
   padding-right: 2.25rem;
 }
+.text-box-size-lg[type="number"]::-webkit-inner-spin-button {
+  margin-top: -1.5rem;
+  margin-bottom: -1.5rem;
+  margin-inline-end: -1.5rem;
+}
 .text-box-size-lg {
   height: 4rem;
   padding-left: 1.5rem;

package/lib/types/ui/components/accordion.types.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export interface AccordionType {
+    name: string;
+    iconType?: 'arrow' | 'plus';
+    join?: boolean;
+    multiple?: boolean;
+    options: AccordionOption[];
+}
+export interface AccordionOption {
+    header: React.ReactElement;
+    body: React.ReactElement;
+}

package/lib/types/ui/components/accordion.types.js

@@ -0,0 +1 @@
+export {};

package/lib/types/ui/components/index.d.ts

@@ -1,2 +1,3 @@
+export type * from './accordion.types';
 export type * from './avatar.types';
 export type * from './button.types';

package/lib/ui/components/accordion/accordion.component.d.ts

@@ -0,0 +1,3 @@
+import type { AccordionType } from '../../../types';
+declare const Accordion: ({ name, join, options, iconType, multiple }: AccordionType) => import("react/jsx-runtime").JSX.Element;
+export default Accordion;

package/lib/ui/components/accordion/accordion.component.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cls from 'classnames';
+const Accordion = ({ name, join, options, iconType = 'arrow', multiple }) => {
+    return (_jsx("div", { className: cls('flex flex-wrap', {
+            'join join-vertical w-full': join,
+            'gap-2': !join
+        }), children: options.map(({ header, body }, index) => (_jsxs("div", { className: cls('collapse bg-base-200', {
+                [`accordion-type-${iconType}`]: iconType,
+                'join-item border border-base-300': join
+            }), children: [_jsx("input", { type: multiple ? 'checkbox' : 'radio', name: name }), _jsx("div", { className: 'collapse-title text-xl font-medium', children: header }), _jsx("div", { className: 'collapse-content', children: body })] }, index))) }));
+};
+export default Accordion;

package/lib/ui/components/accordion/index.d.ts

@@ -0,0 +1,2 @@
+import Accordion from './accordion.component';
+export { Accordion };

package/lib/ui/components/accordion/index.js

@@ -0,0 +1,2 @@
+import Accordion from './accordion.component';
+export { Accordion };

package/lib/ui/components/index.d.ts

@@ -1,2 +1,3 @@
+export * from './accordion';
 export * from './avatar';
 export * from './button';

package/lib/ui/components/index.js

@@ -1,2 +1,3 @@
+export * from './accordion';
 export * from './avatar';
 export * from './button';

package/package.json

@@ -10,7 +10,7 @@
     "framework design",
     "design system"
   ],
-  "version": "0.4.2",
+  "version": "0.5.0",
   "homepage": "https://github.com/creativecodeco/ui",
   "author": {
     "name": "John Toro",
@@ -20,7 +20,7 @@
   "main": "lib/index.js",
   "source": "src/index.ts",
   "scripts": {
-    "dev": "npm run storybook",
+    "dev": "npm run build; npm run storybook",
     "dev:css": "postcss src/theme/main.css -o lib/theme/main.css --watch",
     "build": "rm -rf lib; tsc -p tsconfig.build.json; npm run build:alias; npm run build:css",
     "build:alias": "tsc-alias -p tsconfig.build.json",
@@ -48,42 +48,42 @@
     "usehooks-ts": "2.9.1"
   },
   "dependencies": {
-    "postcss": "8.4.34",
-    "postcss-import": "16.0.0",
+    "postcss": "8.4.35",
+    "postcss-import": "16.0.1",
     "react": "18.2.0",
     "react-hook-form": "7.50.1",
     "tailwindcss": "3.4.1",
-    "usehooks-ts": "2.13.0"
+    "usehooks-ts": "2.15.1"
   },
   "devDependencies": {
-    "@babel/core": "7.23.9",
-    "@babel/preset-env": "7.23.9",
+    "@babel/core": "7.24.0",
+    "@babel/preset-env": "7.24.0",
     "@babel/preset-react": "7.23.3",
     "@babel/preset-typescript": "7.23.3",
     "@jest/globals": "29.7.0",
-    "@storybook/addon-essentials": "7.6.12",
-    "@storybook/addon-interactions": "7.6.12",
-    "@storybook/addon-links": "7.6.12",
-    "@storybook/addon-mdx-gfm": "7.6.12",
-    "@storybook/blocks": "7.6.12",
-    "@storybook/react": "7.6.12",
-    "@storybook/react-webpack5": "7.6.12",
-    "@storybook/test": "7.6.12",
+    "@storybook/addon-essentials": "7.6.17",
+    "@storybook/addon-interactions": "7.6.17",
+    "@storybook/addon-links": "7.6.17",
+    "@storybook/addon-mdx-gfm": "7.6.17",
+    "@storybook/blocks": "7.6.17",
+    "@storybook/react": "7.6.17",
+    "@storybook/react-webpack5": "7.6.17",
+    "@storybook/test": "7.6.17",
     "@testing-library/dom": "9.3.4",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.1",
     "@testing-library/user-event": "14.5.2",
     "@types/jest": "29.5.12",
-    "@types/node": "20.11.16",
-    "@types/react": "18.2.55",
-    "@types/react-dom": "18.2.18",
+    "@types/node": "20.11.21",
+    "@types/react": "18.2.60",
+    "@types/react-dom": "18.2.19",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "autoprefixer": "10.4.17",
-    "chromatic": "10.7.1",
+    "chromatic": "11.0.0",
     "classnames": "2.5.1",
     "cpx2": "7.0.1",
-    "daisyui": "4.6.1",
-    "eslint": "8.56.0",
+    "daisyui": "4.7.2",
+    "eslint": "8.57.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-standard": "17.1.0",
     "eslint-config-standard-react": "13.0.0",
@@ -96,9 +96,9 @@
     "eslint-plugin-promise": "6.1.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-standard": "5.0.0",
-    "eslint-plugin-storybook": "0.6.15",
-    "eslint-plugin-unused-imports": "3.0.0",
-    "husky": "9.0.10",
+    "eslint-plugin-storybook": "0.8.0",
+    "eslint-plugin-unused-imports": "3.1.0",
+    "husky": "9.0.11",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
     "jest-junit": "16.0.0",
@@ -108,7 +108,7 @@
     "prop-types": "15.8.1",
     "react-dom": "18.2.0",
     "react-icons": "5.0.1",
-    "storybook": "7.6.12",
+    "storybook": "7.6.17",
     "storybook-addon-themes": "6.1.0",
     "string-width": "7.1.0",
     "ts-jest": "29.1.2",