jk-ui-cli 0.0.4 → 0.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "jk-ui-cli",
-    "version": "0.0.4",
+    "version": "0.0.6",
     "description": "A CLI tool for ReactJS based projects",
     "type": "module",
     "bin": {

package/stubs/css/buttons.stub

@@ -18,6 +18,26 @@
     --btn-solid-color-press: var(--color-secondary-800);
 }
 
+@utility btn-solid-success {
+    --btn-solid-top-shadow: var(--color-success-500);
+    --btn-solid-bottom-shadow: var(--color-success-700);
+    --btn-solid-top-shadow-hover: var(--color-success-600);
+    --btn-solid-bottom-shadow-hover: var(--color-success-800);
+    --btn-solid-color: var(--color-success-600);
+    --btn-solid-color-hover: var(--color-success-700);
+    --btn-solid-color-press: var(--color-success-800);
+}
+
+@utility btn-solid-danger {
+    --btn-solid-top-shadow: var(--color-danger-500);
+    --btn-solid-bottom-shadow: var(--color-danger-700);
+    --btn-solid-top-shadow-hover: var(--color-danger-600);
+    --btn-solid-bottom-shadow-hover: var(--color-danger-800);
+    --btn-solid-color: var(--color-danger-600);
+    --btn-solid-color-hover: var(--color-danger-700);
+    --btn-solid-color-press: var(--color-danger-800);
+}
+
 @utility btn-solid-neutral {
     --btn-solid-top-shadow: var(--color-gray-800);
     --btn-solid-bottom-shadow: var(--color-gray-700);
@@ -38,54 +58,6 @@
     }
 }
 
-@utility btn-flexi-white {
-    --btn-flexi-bg: var(--color-white);
-    --btn-flexi-hover-bg: var(--color-gray-100);
-    --btn-flexi-active-bg: var(--color-gray-50);
-    --btn-flexi-shadow-a: var(--color-gray-300);
-    --btn-flexi-shadow-b: var(--color-gray-200);
-    --btn-flexi-shadow-c: var(--color-gray-50);
-    --btn-flexi-shadow-active-a: var(--color-gray-400);
-    --btn-flexi-shadow-active-b: var(--color-gray-300);
-    --btn-flexi-shadow-active-c: var(--color-gray-500);
-
-    &:is(.dark *) {
-        --btn-flexi-bg: var(--color-gray-900);
-        --btn-flexi-hover-bg: var(--color-gray-800);
-        --btn-flexi-active-bg: var(--color-gray-900);
-        --btn-flexi-shadow-a: var(--color-gray-800);
-        --btn-flexi-shadow-b: var(--color-gray-900);
-        --btn-flexi-shadow-c: var(--color-gray-800);
-        --btn-flexi-shadow-active-a: var(--color-gray-700);
-        --btn-flexi-shadow-active-b: var(--color-gray-800);
-        --btn-flexi-shadow-active-c: var(--color-gray-900);
-    }
-}
-
-@utility btn-flexi-neutral {
-    --btn-flexi-bg: var(--color-gray-900);
-    --btn-flexi-hover-bg: var(--color-gray-800);
-    --btn-flexi-active-bg: var(--color-gray-950);
-    --btn-flexi-shadow-a: var(--color-gray-700);
-    --btn-flexi-shadow-b: var(--color-gray-500);
-    --btn-flexi-shadow-c: var(--color-gray-400);
-    --btn-flexi-shadow-active-a: var(--color-gray-700);
-    --btn-flexi-shadow-active-b: var(--color-gray-600);
-    --btn-flexi-shadow-active-c: var(--color-gray-500);
-
-    &:is(.dark *) {
-        --btn-flexi-bg: var(--color-white);
-        --btn-flexi-hover-bg: var(--color-gray-100);
-        --btn-flexi-active-bg: var(--color-gray-50);
-        --btn-flexi-shadow-a: var(--color-gray-100);
-        --btn-flexi-shadow-b: var(--color-gray-200);
-        --btn-flexi-shadow-c: var(--color-gray-50);
-        --btn-flexi-shadow-active-a: var(--color-gray-200);
-        --btn-flexi-shadow-active-b: var(--color-gray-300);
-        --btn-flexi-shadow-active-c: var(--color-gray-50);
-    }
-}
-
 
 @utility btn-outline-danger {
     --btn-outline-bg: var(--color-danger-50);

package/stubs/css/dark/buttons.stub

@@ -18,6 +18,26 @@
     --btn-solid-color-press: var(--color-secondary-800);
 }
 
+@utility btn-solid-success {
+    --btn-solid-top-shadow: var(--color-success-500);
+    --btn-solid-bottom-shadow: var(--color-success-700);
+    --btn-solid-top-shadow-hover: var(--color-success-600);
+    --btn-solid-bottom-shadow-hover: var(--color-success-800);
+    --btn-solid-color: var(--color-success-600);
+    --btn-solid-color-hover: var(--color-success-700);
+    --btn-solid-color-press: var(--color-success-800);
+}
+
+@utility btn-solid-danger {
+    --btn-solid-top-shadow: var(--color-danger-500);
+    --btn-solid-bottom-shadow: var(--color-danger-700);
+    --btn-solid-top-shadow-hover: var(--color-danger-600);
+    --btn-solid-bottom-shadow-hover: var(--color-danger-800);
+    --btn-solid-color: var(--color-danger-600);
+    --btn-solid-color-hover: var(--color-danger-700);
+    --btn-solid-color-press: var(--color-danger-800);
+}
+
 @utility btn-solid-neutral {
     --btn-solid-top-shadow: var(--color-gray-200);
     --btn-solid-bottom-shadow: var(--color-gray-100);

package/stubs/css/dark/utilities.stub

@@ -37,6 +37,11 @@
     --ui-outline-text: var(--color-danger-500);
 }
 
+
+@utility ui-soft-gray {
+    --ui-soft-bg: --alpha(var(--color-gray-700) / 30%);
+    --ui-soft-text: var(--color-gray-300);
+}
 @utility ui-soft-success {
         --ui-soft-bg: --alpha(var(--color-success-900) / 30%);
         --ui-soft-text: var(--color-success-300);
@@ -52,6 +57,12 @@
     --ui-soft-text: var(--color-danger-300);
 }
 
+
+@utility ui-subtle-gray {
+    --ui-subtle-bg: --alpha(var(--color-gray-800) / 30%);
+    --ui-subtle-text: var(--color-gray-300);
+    --ui-subtle-border: --alpha(var(--color-gray-800) / 80%);
+}
 @utility ui-subtle-success {
     --ui-subtle-bg: --alpha(var(--color-success-900) / 30%);
     --ui-subtle-text: var(--color-success-300);

package/stubs/css/light/buttons.stub

@@ -27,6 +27,15 @@
     --btn-solid-color-hover: var(--color-success-700);
     --btn-solid-color-press: var(--color-success-800);
 }
+@utility btn-solid-danger {
+    --btn-solid-top-shadow: var(--color-danger-500);
+    --btn-solid-bottom-shadow: var(--color-danger-700);
+    --btn-solid-top-shadow-hover: var(--color-danger-600);
+    --btn-solid-bottom-shadow-hover: var(--color-danger-800);
+    --btn-solid-color: var(--color-danger-600);
+    --btn-solid-color-hover: var(--color-danger-700);
+    --btn-solid-color-press: var(--color-danger-800);
+}
 
 @utility btn-solid-neutral {
     --btn-solid-top-shadow: var(--color-gray-800);

package/stubs/css/light/utilities.stub

@@ -37,6 +37,10 @@
     --ui-outline-text: var(--color-danger-600);
 }
 
+@utility ui-soft-gray {
+    --ui-soft-bg: --alpha(var(--color-gray-200) / 40%);
+    --ui-soft-text: var(--color-gray-700);
+}
 @utility ui-soft-success {
     --ui-soft-bg: --alpha(var(--color-success-100) / 40%);
     --ui-soft-text: var(--color-success-600);
@@ -52,6 +56,12 @@
     --ui-soft-text: var(--color-danger-600);
 }
 
+@utility ui-subtle-gray {
+    --ui-subtle-bg: --alpha(var(--color-gray-200) / 40%);
+    --ui-subtle-text: var(--color-gray-700);
+    --ui-subtle-border: var(--color-gray-200);
+}
+
 @utility ui-subtle-success {
     --ui-subtle-bg: --alpha(var(--color-success-100) / 40%);
     --ui-subtle-text: var(--color-success-600);

package/stubs/css/utilities.stub

@@ -110,6 +110,15 @@
     }
 }
 
+@utility ui-soft-gray {
+    --ui-soft-bg: --alpha(var(--color-gray-200) / 40%);
+    --ui-soft-text: var(--color-gray-700);
+
+    &:is(.dark *) {
+        --ui-soft-bg: --alpha(var(--color-gray-700) / 30%);
+        --ui-soft-text: var(--color-gray-300);
+    }
+}
 @utility ui-soft-success {
     --ui-soft-bg: --alpha(var(--color-success-100) / 40%);
     --ui-soft-text: var(--color-success-600);
@@ -141,6 +150,19 @@
 }
 
 
+
+@utility ui-subtle-gray {
+    --ui-subtle-bg: --alpha(var(--color-gray-200) / 40%);
+    --ui-subtle-text: var(--color-gray-700);
+    --ui-subtle-border: var(--color-gray-200);
+
+    &:is(.dark *) {
+        --ui-subtle-bg: --alpha(var(--color-gray-800) / 30%);
+        --ui-subtle-text: var(--color-gray-300);
+        --ui-subtle-border: --alpha(var(--color-gray-800) / 80%);
+    }
+}
+
 @utility ui-subtle-success {
     --ui-subtle-bg: --alpha(var(--color-success-100) / 40%);
     --ui-subtle-text: var(--color-success-600);

package/stubs/css/all-themes.stub

@@ -1,61 +0,0 @@
-
-:root {
-    --c-primary: var(--color-primary-600);
-    --c-secondary: var(--color-secondary-600);
-    --c-accent: var(--color-accent-600);
-    --c-info: var(--color-info-600);
-    --c-warning: var(--color-warning-600);
-    --c-danger: var(--color-danger-600);
-    --c-success: var(--color-success-600);
-
-    --c-fg-title: var(--color-gray-900);
-    --c-fg-subtitle: var(--color-gray-800);
-    --c-fg: var(--color-gray-700);
-    --c-fg-muted: var(--color-gray-600);
-
-    --c-bg: var(--color-white);
-    --c-bg-subtle: var(--color-gray-100);
-    --c-bg-surface: var(--color-gray-50);
-    --c-bg-muted: var(--color-gray-200);
-    --c-bg-surface-elevated: var(--color-gray-300);
-    --c-card: var(--color-bg);
-    --c-card-gray: var(--color-bg-subtle);
-    --c-overlay: var(--c-bg);
-    --c-overlay-gray: var(--c-bg-subtle);
-
-
-    --c-border-strong: var(--color-gray-300);
-    --c-border-amphasis: var(--color-gray-400);
-    --c-border: var(--color-gray-200);
-    --c-border-sub: var(--color-gray-100);
-    --c-border-card:var(--color-gray-200);
-    --c-border-input: var(--color-gray-200);
-}
-
-
-.dark {
-    --c-primary: var(--color-primary-500);
-    --c-secondary: var(--color-secondary-500);
-    --c-accent: var(--color-accent-500);
-    --c-info: var(--color-info-500);
-    --c-warning: var(--color-warning-500);
-    --c-danger: var(--color-danger-500);
-    --c-success: var(--color-success-500);
-
-    --c-fg-title: var(--color-white);
-    --c-fg-subtitle: var(--color-gray-100);
-    --c-fg: var(--color-gray-300);
-    --c-fg-muted: var(--color-gray-400);
-
-    --c-bg: var(--color-gray-950);
-    --c-bg-subtle: var(--color-gray-900);
-    
-    --c-bg-muted: var(--color-gray-800);
-    --c-bg-surface-elevated: var(--color-gray-700);
-
-    --c-border-strong: var(--color-gray-700);
-    --c-border-amphasis: var(--color-gray-600);
-    --c-border: var(--color-gray-900);
-    --c-border-sub: var(--color-gray-900);
-    --c-border-card:var(--color-gray-800);
-}

package/stubs/css/flexiwind/base.stub

@@ -1,36 +0,0 @@
-@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 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/flexiwind/button.stub

@@ -1,100 +0,0 @@
-
-
-@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/flexiwind/form.stub

@@ -1,189 +0,0 @@
-@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]
-}
-
-