jk-ui-cli 0.0.1

package/stubs/css/jk-ui/base.stub

@@ -0,0 +1,42 @@
+@custom-variant fx-open (&[data-state="open"]);
+@custom-variant fx-close (&[data-state="close"]);
+@custom-variant fx-visible (&[data-state="visible"]);
+@custom-variant fx-hidden (&[data-state="hidden"]);
+@custom-variant fx-opened (&[data-state="opened"]);
+@custom-variant fx-closed (&[data-state="closed"]);
+@custom-variant fx-resized (&[data-resized="true"]);
+@custom-variant fx-active (&[data-state="active"]);
+@custom-variant fx-inactive (&[data-state="inactive"]);
+@custom-variant fx-focus-active (&[data-focus="active"]);
+
+@custom-variant fx-selected (&[data-selected]);
+@custom-variant fx-checked (&[data-checked="true"]);
+@custom-variant fx-indeterminate (&[data-indeterminate="true"]);
+@custom-variant fx-inert (&[data-inert]);
+@custom-variant fx-focused (&[data-focus="true"]);
+@custom-variant fx-focus-visible (&[data-focus-visible="true"]);
+@custom-variant fx-invalid (&[data-invalid="true"]);
+@custom-variant fx-expanded (&[data-expanded="true"]);
+@custom-variant fx-pressed (&[data-pressed="true"]);
+
+/* data-focus-visible-within */
+@custom-variant fx-focus-visible-within (&[data-focus-visible-within="true"]);
+@custom-variant fx-focus-visible (&[data-focus-visible="true"]);
+
+
+@custom-variant slot-icon (&[slot="icon"]);
+@custom-variant slot-label (&[slot="label"]);
+@custom-variant slot-description (&[slot="description"]);
+@custom-variant slot-kbd (&[slot="kbd"]);
+
+@custom-variant fx-slide-x (&[data-ax="x"]);
+@custom-variant fx-slide-y (&[data-ax="y"]);
+
+
+@custom-variant placement-left (&[data-placement="left"]);
+@custom-variant placement-right (&[data-placement="right"]);
+@custom-variant placement-top (&[data-placement="top"]);
+@custom-variant placement-bottom (&[data-placement="bottom"]);
+
+@custom-variant exiting (&[data-exiting]);
+@custom-variant entering (&[data-entering]);

package/stubs/css/jk-ui/button.stub

@@ -0,0 +1,100 @@
+
+
+@utility btn {
+  @apply flex items-center disabled:opacity-90 disabled:cursor-not-allowed disabled:hover:opacity-70 transition-colors ease-linear outline-offset-2 outline-2 outline-transparent focus-visible:outline-(--btn-focus-outline-color);
+}
+
+@utility btn-xs {
+  @apply h-6 px-3.5 text-xs;
+}
+
+@utility btn-icon-xs {
+  @apply size-6 text-xs justify-center;
+}
+
+@utility btn-sm {
+  @apply h-8 px-4 text-sm;
+}
+
+@utility btn-icon-sm {
+  @apply size-8 text-sm justify-center;
+}
+
+@utility btn-md {
+  @apply h-10 px-5 text-sm;
+}
+
+@utility btn-icon-md {
+  @apply size-10 justify-center text-sm;
+}
+
+@utility btn-lg {
+  @apply h-12 px-6 text-sm;
+}
+
+@utility btn-icon-lg {
+  @apply size-12 justify-center text-sm;
+}
+
+@utility btn-xl {
+  @apply h-14 px-7 text-sm;
+}
+
+@utility btn-icon-xl {
+  @apply size-14 justify-center text-sm;
+}
+
+
+@utility btn-solid {
+  @apply bg-(--btn-solid-color) hover:bg-(--btn-solid-color-hover) active:bg-(--btn-solid-color-press) focus-visible:outline-(--btn-solid-color-hover) [--btn-focus-outline-color:var(--btn-solid-color-hover)];
+  background-image: radial-gradient(farthest-corner at 50% -50%, rgba(255, 255, 255, .1) 0%, transparent 100%);
+  box-shadow: inset 0px 2px 0 var(--btn-solid-top-shadow), inset 0px -2px 0 var(--btn-solid-bottom-shadow);
+}
+
+@utility btn-flexi {
+  @apply bg-(--btn-flexi-bg) hover:bg-(--btn-flexi-hover-bg) active:bg-(--btn-flexi-active-bg) active:[--btn-flexi-shadow-a:--btn-flexi-shadow-active-a] active:[--btn-flexi-shadow-b:--btn-flexi-shadow-active-b] active:[--btn-flexi-shadow-c:--btn-flexi-shadow-active-c] [--btn-focus-outline-color:--btn-flexi-hover-bg];
+  --tw-shadow: 0 -1px 0 0px var(--tw-shadow-color, var(--btn-flexi-shadow-a)) inset, 0 0 0 1px var(--tw-shadow-color, var(--btn-flexi-shadow-b)) inset, 0 0.5px 0 1.5px var(--tw-shadow-color, var(--btn-flexi-shadow-c)) inset;
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+
+@utility btn-outline {
+  background-image: radial-gradient(76% 151% at 52% -52%, rgba(255, 255, 255, var(--outline-radial-opacity)) 0%, transparent 100%);
+  box-shadow: rgba(255, 255, 255, var(--inner-border-color)) 0px 1px 0px 0px inset, var(--btn-outline-color) 0px 0px 0px 1px, 0px 1px 2px rgba(0, 0, 0, 0.1);
+  @apply hover:brightness-[0.98] active:brightness-100 bg-(--btn-outline-bg) hover:bg-(--btn-outline-bg-hover) active:bg-(--btn-outline-bg) [--outline-radial-opacity:0.6] [--inner-border-color:1] text-(--btn-outline-text-color) focus-visible:outline-(--btn-outline-color-hover);
+
+  &:is(.dark *) {
+    background-image: none;
+    --inner-border-color: 0;
+    --outline-radial-opacity: 0.2;
+  }
+}
+
+@utility btn-soft {
+  @apply bg-(--btn-soft-bg-color) hover:bg-(--btn-soft-bg-color-hover) active:bg-(--btn-soft-bg-color-press) text-(--btn-soft-text-color) [--btn-focus-outline-color:--btn-soft-text-color];
+
+  &:hover {
+    @media (hover: hover) {
+      color: var(--btn-soft-text-color-hover, --btn-soft-text-color);
+    }
+  }
+
+  &:active {
+    color: var(--btn-soft-text-color-hover, --btn-soft-text-color);
+  }
+}
+
+
+
+@utility btn-ghost {
+  @apply hover:bg-(--btn-ghost-bg-color-hover) active:bg-(--btn-ghost-bg-color-press) text-(--btn-ghost-text-color) [--btn-focus-outline-color:--btn-ghost-text-color];
+
+  &:hover {
+    @media (hover: hover) {
+      color: var(--btn-ghost-text-color-hover, --btn-ghost-text-color);
+    }
+  }
+
+  &:active {
+    color: var(--btn-ghost-text-color-hover, --btn-ghost-text-color);
+  }
+}

package/stubs/css/jk-ui/form.stub

@@ -0,0 +1,258 @@
+@utility ui-form-ring-base {
+  @apply outline outline-transparent ring-transparent ring-offset-transparent ring-3 ring-offset-1;
+}
+
+@utility ui-form-ring {
+  @apply focus:ring-(--focus-ring) focus:outline-(--ui-input-focus-outline);
+}
+
+@utility ui-input-opt-ring {
+  @apply data-[active=true]:ring-(--focus-ring) data-[active=true]:outline-(--ui-input-focus-outline) hover:outline-(--ui-input-focus-outline);
+}
+
+@utility ui-input-opt-ring-danger {
+  @apply data-[active=true]:aria-invalid:ring-(--focus-ring-invalid) data-[active=true]:aria-invalid:outline-(--ui-input-focus-outline-invalid);
+}
+
+
+
+@utility ui-form-input {
+  @apply disabled:hover:cursor-not-allowed disabled:opacity-60 transition-all ease-linear duration-200;
+}
+
+@utility ui-form-outline {
+  @apply outline-offset-0 focus:outline-offset-0 focus:border-transparent;
+}
+
+@utility ui-form-otp-outline {
+  @apply outline-offset-0 data-[active=true]:outline-offset-0 data-[active=true]:border-transparent;
+}
+
+
+@utility ui-form-group-base {
+  @apply w-full data-invalide:outline-(--ui-input-invalid-outline);
+
+  & input,
+  & select {
+    @apply flex-1 placeholder-(--ui-input-place-holder) leading-6;
+  }
+}
+
+@utility ui-form-group {
+  @apply has-disabled:hover:cursor-not-allowed disabled:hover:cursor-not-allowed has-disabled:opacity-80 disabled:opacity-80 outline-offset-0 transition-all ease-linear duration-200;
+
+  & input {
+    @apply outline-none focus:outline-none appearance-none;
+  }
+}
+
+
+@utility ui-form-group-ring {
+  @apply focus-within:outline-offset-0 focus-within:border-transparent focus-within:outline-(--ui-input-focus-outline) focus-within:ring-(--focus-ring);
+}
+
+@utility ui-input-select-trigger-base {
+  @apply relative focus:enabled:hover:border-ring/80 enabled:hover:border-fg-muted/30 flex w-full min-w-0 items-center;
+}
+
+@utility ui-form-select-trigger {
+  @apply relative;
+}
+
+@utility ui-form-select-trigger-invalid {
+  @apply group-open/select:border-ring/70 group-open/select:ring-3 group-open/select:ring-ring/20;
+}
+
+@utility ui-form-select-triger-invalid-base {
+  @apply group-focus/select:group-invalid/select:border-(--select-trigger-danger-border) group-focus/select:group-invalid/select:enabled:hover:border-(--select-trigger-danger-border-hover);
+}
+
+@utility ui-form-select-trigger-invalid-outline {
+  @apply group-open/select:invalid:border-(--select-trigger-danger-border) group-open/select:invalid:ring-3 group-open/select:invalid:ring-(--select-trigger-danger-ring) group-invalid/select:border-(--select-trigger-danger-border) group-invalid/select:ring-(--select-trigger-danger-ring) group-invalid/select:enabled:hover:border-(--select-trigger-danger-border);
+}
+
+@utility ui-form-select-trigger-access {
+  @apply in-disabled:bg-bg-muted in-disabled:opacity-50 forced-colors:in-disabled:border-[GrayText] forced-colors:in-disabled:text-[GrayText];
+}
+
+@utility ui-form-select-trigger-ring {
+  @apply focus:outline-offset-0 focus:border-transparent focus:outline-(--ui-input-focus-outline) focus:ring-(--focus-ring)
+}
+
+/* to complete for select trigger  */
+
+/* "*:data-[slot=icon]:size-5 *:data-[slot=icon]:shrink-0 *:data-[slot=icon]:self-center *:data-[slot=icon]:text-(--btn-icon) pressed:*:data-[slot=icon]:text-(--btn-icon-active) focus-visible:*:data-[slot=icon]:text-(--btn-icon-active)/80 enabled:hover:*:data-[slot=icon]:text-(--btn-icon-active)/90 sm:*:data-[slot=icon]:size-4 forced-colors:[--btn-icon:ButtonText] forced-colors:hover:[--btn-icon:ButtonText]",
+          "*:data-[slot=loader]:size-5 *:data-[slot=loader]:shrink-0 *:data-[slot=loader]:self-center *:data-[slot=loader]:text-(--btn-icon) sm:*:data-[slot=loader]:size-4",
+
+          "forced-colors:group-focus/select:border-[Highlight] forced-colors:group-invalid/select:border-[Mark] forced-colors:group-focus/select:group-invalid/select:border-[Mark]",
+          "group-disabled/select:bg-muted group-disabled/select:opacity-50 forced-colors:group-disabled/select:border-[GrayText] forced-colors:group-disabled/select:text-[GrayText]",
+          "",
+          "dark:scheme-dark", */
+
+
+
+
+@utility ui-form-input-xs {
+  @apply px-2 text-xs h-6;
+}
+
+@utility ui-form-input-sm {
+  @apply px-2.5 text-sm h-8;
+}
+
+@utility ui-form-input-md {
+  @apply px-3 text-sm h-9;
+}
+
+@utility ui-form-input-lg {
+  @apply px-3 text-sm h-10;
+}
+
+@utility ui-form-input-xl {
+  @apply px-3.5 text-base h-11;
+}
+
+@utility ui-form-base {
+  @apply appearance-none w-full placeholder-(--ui-input-place-holder) data-invalid:outline-(--ui-input-invalid-outline) leading-6;
+}
+
+
+
+@utility ui_c_r {
+  @apply outline-offset-0 outline outline-transparent fx-checked:outline-offset-0 fx-checked:border-transparent fx-indeterminate:outline-offset-0 fx-indeterminate:border-transparent fx-checked:outline-(--ui-input-focus-outline) fx-indeterminate:outline-(--ui-input-focus-outline);
+}
+
+@utility ui_c_r-selected {
+  @apply bg-(--checkbox-bg) text-(--checkbox-fg) fx-checked:[--checkbox-bg:var(--checkbox-bg-checked)] fx-checked:[--checkbox-fg:var(--checkbox-fg-checked)];
+}
+
+@utility ui-c_r-ring {
+  @apply ring-transparent ring-offset-transparent fx-focus-visible:ring-(--focus-ring) ring-3 ring-offset-1;
+}
+
+@utility ui_c_r_invalid {
+  @apply border-transparent outline outline-(--invalid-outline) outline-offset-0;
+}
+
+@utility ui-c_r-selected-indeterminate {
+
+  &[data-checked="true"],
+  &[data-indeterminate="true"] {
+    @apply bg-(--checkbox-bg) text-(--checkbox-fg)
+  }
+}
+
+
+
+@utility ui-c_r-group {
+  @apply space-y-3 has-[[slot=description]]:space-y-6 has-[[slot=description]]:**:data-[slot=label]:font-medium **:[[slot=description]]:block;
+}
+
+@utility ui-c_r-wrapper {
+  @apply grid gap-y-1 gap-x-3;
+}
+
+@utility ui-c_r-wrapper-indicator {
+  @apply *:data-[slot=indicator]:col-start-1 *:data-[slot=indicator]:row-start-1;
+}
+
+@utility ui-c_r-wrapper-label {
+  @apply *:data-[slot=label]:col-start-2 *:data-[slot=label]:row-start-1;
+}
+
+@utility ui-c_r-wrapper-description {
+  @apply has-[[slot=description]]:**:data-[slot=label]:font-medium *:[[slot=description]]:col-start-2 *:[[slot=description]]:row-start-2
+}
+
+@utility ui-checkbox-base {
+  @apply in-disabled:bg-bg-muted relative size-(--checkbox-size) *:data-[slot=check-indicator]:size-(--checkbox-indicator-size) isolate flex shrink-0 items-center justify-center;
+}
+
+
+@utility ui-radio-base {
+  @apply relative isolate size-(--radio-size) flex before:absolute rounded-full before:rounded-full;
+}
+
+@utility ui-radio-indicator {
+  @apply before:top-1/2 before:left-1/2 before:-translate-1/2 before:size-2 before:bg-current
+}
+
+@utility ui-data-segment-placeholder {
+  @apply text-(--ui-input-place-holder) [data-focused]:text-(--date-segment-focus-fg)
+}
+
+@utility ui-date-segment {
+  color: var(--date-segment-focus-fg) !important;
+  @apply bg-(--date-segment-focus-bg) forced-colors:bg-[Highlight] forced-colors:text-[HighlightText]
+}
+
+
+
+
+/* switch  */
+@utility switch {
+  border-radius: var(--toggle-radius, 9999px);
+  --u-knob-width: var(--knob-width, var(--knob-size));
+  --u-knob-height: var(--knob-height, var(--knob-size));
+  --u-knob-bg-checked: var(--knob-bg-checked, var(--knob-bg));
+  --u-knob-radius: var(--knob-radius, 9999px);
+  @apply cursor-pointer bg-(--switch-bg) w-(--toggle-width) h-(--toggle-height) relative ease-linear transition-all duration-300 disabled:opacity-70 disabled:cursor-not-allowed group-fx-selected:bg-(--switch-bg-selected);
+}
+
+
+@utility switch-knob {
+  @apply absolute w-(--u-knob-width) h-(--u-knob-height) bg-(--knob-bg) rounded-(--u-knob-radius) left-(--knob-left) top-(--knob-top) group-fx-selected:left-(--knob-checked-left) group-fx-selected:bg-(--u-knob-bg-checked) ease-linear transition-all duration-300;
+}
+
+
+
+@utility switch-xs {
+  --toggle-width: 2.25rem;
+  --toggle-height: 1.25rem;
+  --knob-size: 1rem;
+}
+
+@utility switch-placement-xs{
+  --knob-left: 0.125rem;
+  --knob-top: 0.125rem;
+  --knob-checked-left: 1.125rem;
+}
+
+
+@utility switch-sm {
+  --toggle-width: 2.5rem;
+  --toggle-height: 1.5rem;
+  --knob-size: 1.25rem;
+}
+
+@utility switch-placement-sm{
+  --knob-left: 0.125rem;
+  --knob-top: 0.125rem;
+  --knob-checked-left: 1.125rem;
+}
+
+
+@utility switch-md {
+    --toggle-width: 3rem;
+  --toggle-height: 1.75rem;
+  --knob-size: 1.25rem;
+}
+
+@utility switch-placement-md{
+  --knob-left: 0.25rem;
+  --knob-top: 0.25rem;
+  --knob-checked-left: 1.5rem;
+}
+
+
+@utility switch-lg {
+  --toggle-width: 3.5rem;
+  --toggle-height: 2rem;
+  --knob-size: 1.5rem;
+}
+
+@utility switch-placement-lg{
+  --knob-left: 0.25rem;
+  --knob-top: 0.25rem;
+  --knob-checked-left: 1.5rem;
+}

package/stubs/css/jk-ui/grid-bg.stub

@@ -0,0 +1,128 @@
+
+
+@utility ui-grid-dotted {
+  background-image: radial-gradient(currentColor var(--dotsize), var(--bg-grid-dotted) var(--dotsize));
+  background-size: var(--unify-ui-grid-width) var(--unify-ui-grid-height);
+}
+
+@utility ui-radial-gradient {
+  background: radial-gradient(125% 125% at 50% 10%, var(--unify-radial-bg) 40%, currentColor 100%);
+}
+
+@utility ui-grid {
+  --unify-grid-color: currentColor;
+  background-image: linear-gradient(to right, var(--unify-grid-color) 1px, transparent 1px), linear-gradient(to bottom, var(--unify-grid-color) 1px, transparent 1px);
+  background-size: var(--unify-ui-grid-width) var(--unify-ui-grid-height);
+}
+
+@utility ui-striper-overlay-mask {
+  mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, #000 70%, transparent 110%);
+}
+
+@utility ui-grid-w-xs {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-xs);
+}
+
+@utility ui-grid-w-sm {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-sm);
+}
+
+@utility ui-grid-w-md {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-md);
+}
+
+@utility ui-grid-w-lg {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-lg);
+}
+
+@utility ui-grid-w-xl {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-xl);
+}
+
+@utility ui-grid-w-2xl {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-2xl);
+}
+
+@utility ui-grid-h-xs {
+  --unify-ui-grid-height: var(--unify-ui-grid-height-xs);
+}
+
+@utility ui-grid-h-sm {
+  --unify-ui-grid-height: var(--unify-ui-grid-height-sm);
+}
+
+@utility ui-grid-h-md {
+  --unify-ui-grid-height: var(--unify-ui-grid-height-md);
+}
+
+@utility ui-grid-h-lg {
+  --unify-ui-grid-height: var(--unify-ui-grid-height-lg);
+}
+
+@utility ui-grid-h-xl {
+  --unify-ui-grid-height: var(--unify-ui-grid-height-xl);
+}
+
+@utility ui-grid-h-2xl {
+  --unify-ui-grid-height: var(--unify-ui-grid-height-2xl);
+}
+
+@utility ui-grid-square-xs {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-xs);
+  --unify-ui-grid-height: var(--unify-ui-grid-width-xs);
+}
+
+@utility ui-grid-square-sm {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-sm);
+  --unify-ui-grid-height: var(--unify-ui-grid-width-sm);
+}
+
+@utility ui-grid-square-md {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-md);
+  --unify-ui-grid-height: var(--unify-ui-grid-width-md);
+}
+
+@utility ui-grid-square-lg {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-lg);
+  --unify-ui-grid-height: var(--unify-ui-grid-width-lg);
+}
+
+@utility ui-grid-square-xl {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-xl);
+  --unify-ui-grid-height: var(--unify-ui-grid-width-xl);
+}
+
+@utility ui-grid-square-2xl {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-2xl);
+  --unify-ui-grid-height: var(--unify-ui-grid-width-2xl);
+}
+
+@utility ui-grid-rec-xs {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-xs);
+  --unify-ui-grid-height: var(--unify-ui-grid-height-xs);
+}
+
+@utility ui-grid-rec-sm {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-sm);
+  --unify-ui-grid-height: var(--unify-ui-grid-height-sm);
+}
+
+@utility ui-grid-rec-md {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-md);
+  --unify-ui-grid-height: var(--unify-ui-grid-height-md);
+}
+
+@utility ui-grid-rec-lg {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-lg);
+  --unify-ui-grid-height: var(--unify-ui-grid-height-lg);
+}
+
+@utility ui-grid-rec-xl {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-xl);
+  --unify-ui-grid-height: var(--unify-ui-grid-height-xl);
+}
+
+@utility ui-grid-rec-2xl {
+  --unify-ui-grid-width: var(--unify-ui-grid-width-2xl);
+  --unify-ui-grid-height: var(--unify-ui-grid-height-2xl);
+}

package/stubs/css/jk-ui/ui.stub

@@ -0,0 +1,186 @@
+@utility ui-radius {
+  @apply rounded-(--ui-radius);
+}
+
+@utility ui-soft {
+  @apply bg-(--ui-soft-bg) text-(--ui-soft-text);
+}
+
+@utility ui-solid {
+  @apply bg-(--ui-solid-bg) text-(--ui-solid-text);
+}
+
+@utility ui-outline {
+  @apply text-(--ui-outline-text) border border-(--ui-outline-border);
+}
+
+@utility ui-subtle {
+  @apply bg-(--ui-subtle-bg) border text-(--ui-subtle-text) border-(--ui-subtle-border);
+}
+
+
+@utility aspect-utrawide {
+  @apply aspect-[21/9];
+}
+
+@utility aspect-standard-tv {
+  @apply aspect-[4/3];
+}
+
+@utility aspect-35mm-film {
+  @apply aspect-[3/2];
+}
+
+@utility avatar-xs {
+  width: calc(var(--spacing, 0.25rem) * 6.5);
+  height: calc(var(--spacing, 0.25rem) * 6.5);
+}
+
+@utility avatar-sm {
+  width: calc(var(--spacing, 0.25rem) * 8);
+  height: calc(var(--spacing, 0.25rem) * 8);
+}
+
+@utility avatar-md {
+  width: calc(var(--spacing, 0.25rem) * 9.5);
+  height: calc(var(--spacing, 0.25rem) * 9.5);
+}
+
+@utility avatar-lg {
+  width: calc(var(--spacing, 0.25rem) * 10.5);
+  height: calc(var(--spacing, 0.25rem) * 10.5);
+}
+
+@utility avatar-xl {
+  width: calc(var(--spacing, 0.25rem) * 12);
+  height: calc(var(--spacing, 0.25rem) * 12);
+}
+
+@utility avatar-placeholder {
+  @apply flex items-center justify-center truncate;
+}
+
+@utility avatar-placeholder-xs {
+  width: calc(var(--spacing, 0.25rem) * 6.5);
+  height: calc(var(--spacing, 0.25rem) * 6.5);
+  @apply text-xs;
+}
+
+@utility avatar-placeholder-sm {
+  width: calc(var(--spacing, 0.25rem) * 8);
+  height: calc(var(--spacing, 0.25rem) * 8);
+  @apply text-sm;
+}
+
+@utility avatar-placeholder-md {
+  width: calc(var(--spacing, 0.25rem) * 8);
+  height: calc(var(--spacing, 0.25rem) * 8);
+  @apply text-sm;
+}
+
+@utility avatar-placeholder-lg {
+  width: calc(var(--spacing, 0.25rem) * 10.5);
+  height: calc(var(--spacing, 0.25rem) * 10.5);
+  @apply text-base;
+}
+
+@utility avatar-placeholder-xl {
+  width: calc(var(--spacing, 0.25rem) * 12);
+  height: calc(var(--spacing, 0.25rem) * 12);
+  @apply text-base;
+}
+
+
+@utility badge-xs {
+  padding: calc(var(--spacing, 0.25rem) * 0.5) calc(var(--spacing, 0.25rem) * 1);
+  @apply text-xs;
+}
+
+@utility badge-sm {
+  padding: calc(var(--spacing, 0.25rem) * 0.65) calc(var(--spacing, 0.25rem) * 1.5);
+  @apply text-xs;
+}
+
+@utility badge-md {
+  @apply text-sm;
+  padding: calc(var(--spacing, 0.25rem) * 1) calc(var(--spacing, 0.25rem) * 2);
+
+}
+
+@utility badge-lg {
+  padding: calc(var(--spacing, 0.25rem) * 1.115) calc(var(--spacing, 0.25rem) * 2.5);
+}
+
+@utility badge-xl {
+  padding: calc(var(--spacing, 0.25rem) * 1.3) calc(var(--spacing, 0.25rem) * 3);
+}
+
+@utility kbd-xs {
+  padding: calc(var(--spacing, 0.25rem) * 0.5) calc(var(--spacing, 0.25rem) * 1);
+  @apply text-xs;
+}
+
+@utility kbd-sm {
+  padding: calc(var(--spacing, 0.25rem) * 0.65) calc(var(--spacing, 0.25rem) * 1.5);
+  @apply text-xs;
+}
+
+@utility kbd-md {
+  @apply text-sm;
+  padding: calc(var(--spacing, 0.25rem) * 1) calc(var(--spacing, 0.25rem) * 2);
+
+}
+
+@utility kbd-lg {
+  padding: calc(var(--spacing, 0.25rem) * 1.115) calc(var(--spacing, 0.25rem) * 2.5);
+}
+
+@utility kbd-xl {
+  padding: calc(var(--spacing, 0.25rem) * 1.3) calc(var(--spacing, 0.25rem) * 3);
+}
+
+
+@utility disclosure-indicator-plus { 
+  @apply before:absolute before:left-0 before:w-2.5 before:top-1/2 
+  before:-translate-y-1/2 before:h-[0.15rem] before:bg-current 
+  after:absolute after:left-0 after:w-2.5 after:top-1/2 
+  after:-translate-y-1/2 after:h-[0.15rem] after:bg-current ;
+}
+
+@utility disclosure-indicator-to-minus {
+  @apply after:-rotate-90 after:origin-center group-aria-expanded:after:rotate-0 after:ease-linear after:transform after:duration-300;
+}
+
+@utility disclosure-item-base{
+  @apply px-(--disclosure-gutter-x) py-(--disclosure-gutter-y)
+}
+
+
+
+@utility divider-custom {
+  @apply relative before:absolute before:inset-x-0 flex items-center;
+}
+
+@utility divider-custom-1 {
+  @apply before:h-px;
+}
+
+@utility divider-custom-2 {
+  @apply before:h-[2px];
+}
+
+@utility divider-custom-3 {
+  @apply before:h-[3px];
+}
+
+@utility divider-custom-4 {
+  @apply before:h-[4px];
+}
+
+@utility divider-custom-6 {
+  @apply before:h-[6px];
+}
+
+@utility divider-custom-8 {
+  @apply before:h-[8px];
+}