jk-ui-cli 0.0.6 → 0.0.8

package/stubs/themes/romance.stub

@@ -0,0 +1,54 @@
+
+@theme inline {
+  /* primary: rose */
+  --color-primary-50: var(--color-rose-50);
+  --color-primary-100: var(--color-rose-100);
+  --color-primary-200: var(--color-rose-200);
+  --color-primary-300: var(--color-rose-300);
+  --color-primary-400: var(--color-rose-400);
+  --color-primary-500: var(--color-rose-500);
+  --color-primary-600: var(--color-rose-600);
+  --color-primary-700: var(--color-rose-700);
+  --color-primary-800: var(--color-rose-800);
+  --color-primary-900: var(--color-rose-900);
+  --color-primary-950: var(--color-rose-950);
+
+  /* secondary: red */
+  --color-secondary-50: var(--color-red-50);
+  --color-secondary-100: var(--color-red-100);
+  --color-secondary-200: var(--color-red-200);
+  --color-secondary-300: var(--color-red-300);
+  --color-secondary-400: var(--color-red-400);
+  --color-secondary-500: var(--color-red-500);
+  --color-secondary-600: var(--color-red-600);
+  --color-secondary-700: var(--color-red-700);
+  --color-secondary-800: var(--color-red-800);
+  --color-secondary-900: var(--color-red-900);
+  --color-secondary-950: var(--color-red-950);
+
+  /* accent: orange */
+  --color-accent-50: var(--color-orange-50);
+  --color-accent-100: var(--color-orange-100);
+  --color-accent-200: var(--color-orange-200);
+  --color-accent-300: var(--color-orange-300);
+  --color-accent-400: var(--color-orange-400);
+  --color-accent-500: var(--color-orange-500);
+  --color-accent-600: var(--color-orange-600);
+  --color-accent-700: var(--color-orange-700);
+  --color-accent-800: var(--color-orange-800);
+  --color-accent-900: var(--color-orange-900);
+  --color-accent-950: var(--color-orange-950);
+
+  /* gray: zinc */
+  --color-gray-50: var(--color-zinc-50);
+  --color-gray-100: var(--color-zinc-100);
+  --color-gray-200: var(--color-zinc-200);
+  --color-gray-300: var(--color-zinc-300);
+  --color-gray-400: var(--color-zinc-400);
+  --color-gray-500: var(--color-zinc-500);
+  --color-gray-600: var(--color-zinc-600);
+  --color-gray-700: var(--color-zinc-700);
+  --color-gray-800: var(--color-zinc-800);
+  --color-gray-900: var(--color-zinc-900);
+  --color-gray-950: var(--color-zinc-950);
+}

package/stubs/themes/spring.stub

@@ -0,0 +1,54 @@
+
+@theme inline {
+  /* primary: lime */
+  --color-primary-50: var(--color-lime-50);
+  --color-primary-100: var(--color-lime-100);
+  --color-primary-200: var(--color-lime-200);
+  --color-primary-300: var(--color-lime-300);
+  --color-primary-400: var(--color-lime-400);
+  --color-primary-500: var(--color-lime-500);
+  --color-primary-600: var(--color-lime-600);
+  --color-primary-700: var(--color-lime-700);
+  --color-primary-800: var(--color-lime-800);
+  --color-primary-900: var(--color-lime-900);
+  --color-primary-950: var(--color-lime-950);
+
+  /* secondary: green */
+  --color-secondary-50: var(--color-green-50);
+  --color-secondary-100: var(--color-green-100);
+  --color-secondary-200: var(--color-green-200);
+  --color-secondary-300: var(--color-green-300);
+  --color-secondary-400: var(--color-green-400);
+  --color-secondary-500: var(--color-green-500);
+  --color-secondary-600: var(--color-green-600);
+  --color-secondary-700: var(--color-green-700);
+  --color-secondary-800: var(--color-green-800);
+  --color-secondary-900: var(--color-green-900);
+  --color-secondary-950: var(--color-green-950);
+
+  /* accent: yellow */
+  --color-accent-50: var(--color-yellow-50);
+  --color-accent-100: var(--color-yellow-100);
+  --color-accent-200: var(--color-yellow-200);
+  --color-accent-300: var(--color-yellow-300);
+  --color-accent-400: var(--color-yellow-400);
+  --color-accent-500: var(--color-yellow-500);
+  --color-accent-600: var(--color-yellow-600);
+  --color-accent-700: var(--color-yellow-700);
+  --color-accent-800: var(--color-yellow-800);
+  --color-accent-900: var(--color-yellow-900);
+  --color-accent-950: var(--color-yellow-950);
+
+  
+  --color-gray-50: oklch(97.59% 0.0060 223.46);
+  --color-gray-100: oklch(95.22% 0.0042 271.37);
+  --color-gray-200: oklch(93.68% 0.0121 247.96);
+  --color-gray-300: oklch(84.77% 0.0177 219.68);
+  --color-gray-400: oklch(72.20% 0.0197 227.39);
+  --color-gray-500: oklch(57.98% 0.0207 227.53);
+  --color-gray-600: oklch(46.82% 0.0217 227.71);
+  --color-gray-700: oklch(39.10% 0.0245 229.77);
+  --color-gray-800: oklch(28.64% 0.0211 240.03);
+  --color-gray-900: oklch(19.64% 0.0136 243.66);
+  --color-gray-950: oklch(9.51% 0.0061 243.12);
+}

package/stubs/themes/trust.stub

@@ -0,0 +1,54 @@
+
+@theme inline {
+  /* primary: blue */
+  --color-primary-50: var(--color-blue-50);
+  --color-primary-100: var(--color-blue-100);
+  --color-primary-200: var(--color-blue-200);
+  --color-primary-300: var(--color-blue-300);
+  --color-primary-400: var(--color-blue-400);
+  --color-primary-500: var(--color-blue-500);
+  --color-primary-600: var(--color-blue-600);
+  --color-primary-700: var(--color-blue-700);
+  --color-primary-800: var(--color-blue-800);
+  --color-primary-900: var(--color-blue-900);
+  --color-primary-950: var(--color-blue-950);
+
+  /* secondary: purple */
+  --color-secondary-50: var(--color-purple-50);
+  --color-secondary-100: var(--color-purple-100);
+  --color-secondary-200: var(--color-purple-200);
+  --color-secondary-300: var(--color-purple-300);
+  --color-secondary-400: var(--color-purple-400);
+  --color-secondary-500: var(--color-purple-500);
+  --color-secondary-600: var(--color-purple-600);
+  --color-secondary-700: var(--color-purple-700);
+  --color-secondary-800: var(--color-purple-800);
+  --color-secondary-900: var(--color-purple-900);
+  --color-secondary-950: var(--color-purple-950);
+
+  /* accent: lime */
+  --color-accent-50: var(--color-lime-50);
+  --color-accent-100: var(--color-lime-100);
+  --color-accent-200: var(--color-lime-200);
+  --color-accent-300: var(--color-lime-300);
+  --color-accent-400: var(--color-lime-400);
+  --color-accent-500: var(--color-lime-500);
+  --color-accent-600: var(--color-lime-600);
+  --color-accent-700: var(--color-lime-700);
+  --color-accent-800: var(--color-lime-800);
+  --color-accent-900: var(--color-lime-900);
+  --color-accent-950: var(--color-lime-950);
+
+  /* gray: slate */
+  --color-gray-50: var(--color-slate-50);
+  --color-gray-100: var(--color-slate-100);
+  --color-gray-200: var(--color-slate-200);
+  --color-gray-300: var(--color-slate-300);
+  --color-gray-400: var(--color-slate-400);
+  --color-gray-500: var(--color-slate-500);
+  --color-gray-600: var(--color-slate-600);
+  --color-gray-700: var(--color-slate-700);
+  --color-gray-800: var(--color-slate-800);
+  --color-gray-900: var(--color-slate-900);
+  --color-gray-950: var(--color-slate-950);
+}

package/stubs/themes/winter.stub

@@ -0,0 +1,93 @@
+
+@theme inline {
+  /* primary: cyan */
+  --color-primary-50: var(--color-cyan-50);
+  --color-primary-100: var(--color-cyan-100);
+  --color-primary-200: var(--color-cyan-200);
+  --color-primary-300: var(--color-cyan-300);
+  --color-primary-400: var(--color-cyan-400);
+  --color-primary-500: var(--color-cyan-500);
+  --color-primary-600: var(--color-cyan-600);
+  --color-primary-700: var(--color-cyan-700);
+  --color-primary-800: var(--color-cyan-800);
+  --color-primary-900: var(--color-cyan-900);
+  --color-primary-950: var(--color-cyan-950);
+
+  /* secondary: sky */
+  --color-secondary-50: var(--color-sky-50);
+  --color-secondary-100: var(--color-sky-100);
+  --color-secondary-200: var(--color-sky-200);
+  --color-secondary-300: var(--color-sky-300);
+  --color-secondary-400: var(--color-sky-400);
+  --color-secondary-500: var(--color-sky-500);
+  --color-secondary-600: var(--color-sky-600);
+  --color-secondary-700: var(--color-sky-700);
+  --color-secondary-800: var(--color-sky-800);
+  --color-secondary-900: var(--color-sky-900);
+  --color-secondary-950: var(--color-sky-950);
+
+  /* accent: emerald */
+  --color-accent-50: var(--color-emerald-50);
+  --color-accent-100: var(--color-emerald-100);
+  --color-accent-200: var(--color-emerald-200);
+  --color-accent-300: var(--color-emerald-300);
+  --color-accent-400: var(--color-emerald-400);
+  --color-accent-500: var(--color-emerald-500);
+  --color-accent-600: var(--color-emerald-600);
+  --color-accent-700: var(--color-emerald-700);
+  --color-accent-800: var(--color-emerald-800);
+  --color-accent-900: var(--color-emerald-900);
+  --color-accent-950: var(--color-emerald-950);
+
+  /* danger: rose */
+  --color-danger-50: var(--color-rose-50);
+  --color-danger-100: var(--color-rose-100);
+  --color-danger-200: var(--color-rose-200);
+  --color-danger-300: var(--color-rose-300);
+  --color-danger-400: var(--color-rose-400);
+  --color-danger-500: var(--color-rose-500);
+  --color-danger-600: var(--color-rose-600);
+  --color-danger-700: var(--color-rose-700);
+  --color-danger-800: var(--color-rose-800);
+  --color-danger-900: var(--color-rose-900);
+  --color-danger-950: var(--color-rose-950);
+
+  /* warning: amber */
+  --color-warning-50: var(--color-amber-50);
+  --color-warning-100: var(--color-amber-100);
+  --color-warning-200: var(--color-amber-200);
+  --color-warning-300: var(--color-amber-300);
+  --color-warning-400: var(--color-amber-400);
+  --color-warning-500: var(--color-amber-500);
+  --color-warning-600: var(--color-amber-600);
+  --color-warning-700: var(--color-amber-700);
+  --color-warning-800: var(--color-amber-800);
+  --color-warning-900: var(--color-amber-900);
+  --color-warning-950: var(--color-amber-950);
+
+  /* info: cyan */
+  --color-info-50: var(--color-cyan-50);
+  --color-info-100: var(--color-cyan-100);
+  --color-info-200: var(--color-cyan-200);
+  --color-info-300: var(--color-cyan-300);
+  --color-info-400: var(--color-cyan-400);
+  --color-info-500: var(--color-cyan-500);
+  --color-info-600: var(--color-cyan-600);
+  --color-info-700: var(--color-cyan-700);
+  --color-info-800: var(--color-cyan-800);
+  --color-info-900: var(--color-cyan-900);
+  --color-info-950: var(--color-cyan-950);
+
+  
+  --color-gray-50: oklch(98.22% 0.0041 271.37);
+  --color-gray-100: oklch(95.84% 0.0250 229.11);
+  --color-gray-200: oklch(93.62% 0.0166 250.85);
+  --color-gray-300: oklch(88.32% 0.0320 255.59);
+  --color-gray-400: oklch(71.07% 0.0351 256.79);
+  --color-gray-500: oklch(58.13% 0.0466 245.42);
+  --color-gray-600: oklch(44.55% 0.0374 257.28);
+  --color-gray-700: oklch(40.19% 0.0450 244.38);
+  --color-gray-800: oklch(27.27% 0.0432 246.11);
+  --color-gray-900: oklch(20.09% 0.0455 251.13);
+  --color-gray-950: oklch(11.28% 0.0430 258.66);
+}

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

@@ -1,48 +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 selected (&[data-selected="true"]);
-@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"]);
-
-@custom-variant fx-empty (&[data-empty="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]);
-
-@custom-variant orientation-horizontal (&[data-orientation=horizontal]);
-@custom-variant orientation-vertical (&[data-orientation=vertical]);

package/stubs/css/jk-ui/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/jk-ui/form.stub

@@ -1,259 +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_color_color_base{
-  @apply bg-(--checkbox-bg) text-(--checkbox-fg);
-}
-
-@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 fx-checked:[--checkbox-bg:var(--checkbox-bg-checked)] fx-checked:[--checkbox-fg:var(--checkbox-fg-checked)];
-}
-
-@utility ui-c_r-selected-indeterminate {
-  @apply fx-indeterminate:[--checkbox-bg:var(--checkbox-bg-checked)] fx-indeterminate:[--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-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;
-}