jk-ui-cli 0.0.1

package/stubs/css/flexiwind/form.stub

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

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

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

package/stubs/css/flexiwind/utils.stub

@@ -0,0 +1,189 @@
+@utility dropdown-content {
+  @apply grid max-h-[inherit] grid-cols-[auto_1fr] overflow-y-auto overscroll-contain outline-hidden *:[[role='group']+[role=group]]:mt-4 *:[[role='group']+[role=separator]]:mt-1
+}
+
+@utility dropdown-item-base {
+  border-radius: calc(var(--dropdown-radius) - var(--dropdown-padding));
+  @apply outline-none focus:outline rounded-md px-3.5 py-1.5 ease-linear duration-200 transition-colors;
+}
+
+
+@utility dropdown-item-grid {
+  @apply col-span-full grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] supports-[grid-template-columns:subgrid]:grid-cols-subgrid;
+}
+
+@utility dropdown-item-bg {
+  @apply text-fg focus:outline-primary hover:text-fg-title focus:bg-bg-muted hover:bg-bg-muted fx-focus-active:bg-bg-muted;
+}
+
+@utility dropdown-item-bg-danger {
+  @apply focus:outline-danger focus:bg-danger-50 hover:bg-danger-100 text-danger dark:hover:bg-danger-500/10 dark:focus:bg-danger-500/10 **:slot-icon:text-danger/60 fx-focus-active:bg-danger-100 dark:fx-focus-active:bg-danger-500/10;
+}
+
+
+@utility dropdown-item-icon {
+  @apply *:data-[slot=icon]:col-start-1 *:data-[slot=icon]:row-start-1 *:data-[slot=icon]:mr-(--mr-icon) *:data-[slot=icon]:-ml-0.5 *:data-[slot=icon]:shrink-0 [&_[data-slot='icon']:not([class*='text-'])]:text-fg-muted;
+}
+
+@utility dropdown-item-has-description {
+  @apply not-has-[[slot=description]]:*:data-[slot=icon]:text-sm sm:not-has-[[slot=description]]:*:data-[slot=icon]:text-xs
+}
+
+@utility dropdown-item-description {
+  @apply has-[[slot=description]]:*:data-[slot=icon]:h-lh has-[[slot=description]]:[&_[data-slot='icon']:not([class*='w-'])]:text-sm sm:has-[[slot=description]]:[&_[data-slot='icon']:not([class*='w-'])]:text-xs
+}
+
+@utility dropdown-item-label {
+  @apply [&>[slot=label]+[data-slot=icon]]:absolute [&>[slot=label]+[data-slot=icon]]:right-1;
+}
+
+@utility dropdown-item-avatar {
+  @apply *:data-[slot=avatar]:*:mr-(--mr-icon) *:data-[slot=avatar]:mr-(--mr-icon) has-[[slot=description]]:*:data-[slot=avatar]:row-span-2 *:data-[slot=avatar]:[--avatar-size:--spacing(6)] sm:*:data-[slot=avatar]:[--avatar-size:--spacing(5)];
+}
+
+@utility dropdown-item-force-color {
+  @apply forced-color-adjust-none forced-colors:text-[CanvasText] forced-colors:**:slot-icon:text-[CanvasText] forced-colors:group-focus:**:slot-icon:text-[CanvasText];
+}
+
+/* ================================== */
+/* popover
+ */
+
+@utility dropdown-item-radius {
+  --popover-inner-radius: calc(var(--popover-radius) - var(--popover-padding));
+}
+
+/* animation */
+@utility popover-animation {
+  @apply placement-left:exiting:slide-out-to-right-1 placement-right:exiting:slide-out-to-left-1 placement-top:exiting:slide-out-to-bottom-1 placement-bottom:exiting:slide-out-to-top-1 placement-left:entering:slide-in-from-right-1 placement-right:entering:slide-in-from-left-1 placement-top:entering:slide-in-from-bottom-1 placement-bottom:entering:slide-in-from-top-1;
+
+}
+
+
+/* dropdown hover and states  */
+@utility dropdown-item-hover {
+  @apply forced-colors:bg-[Highlight] forced-colors:text-[HighlightText];
+
+  &[data-hovered="true"],
+  &[data-focused="true"] {
+    @apply bg-(--dropdown-item-hover-and-select) text-(--dropdown-item-hover-and-select-fg);
+  }
+}
+
+@utility dropdown-item-danger {
+  @apply [--dropdown-item-hover-and-select:var(--dropdown-item-danger-hover-and-select)] [--dropdown-item-hover-and-select-fg:var(--dropdown-item-danger-hover-and-select-fg)] [--dropdown-item-selected-fg:var(--dropdown-item-danger-fg)];
+}
+
+@utility dropdown-item-warning {
+  @apply [--dropdown-item-hover-and-select:var(--dropdown-item-warning-hover-and-select)] [--dropdown-item-hover-and-select-fg:var(--dropdown-item-warning-hover-and-select-fg)] [--dropdown-item-selected-fg:var(--dropdown-item-warning-fg)];
+}
+
+@utility dropdown-item-selected {
+  &[data-selected="true"] {
+    @apply text-(--dropdown-item-selected-fg);
+  }
+}
+
+@utility dropdown-item-disabled {
+  &[data-disabled="true"] {
+    @apply opacity-50 forced-colors:text-[GrayText];
+  }
+}
+
+
+@utility modal-overlay {
+  height: var(--visual-viewport-height,100vh);
+  @apply fixed inset-0 z-50 bg-gray-800/60
+}
+
+@utility sheet-overlay {
+  @apply fixed inset-0 z-50 h-(--page-height) w-screen overflow-hidden bg-gray-800/60;
+}
+
+@utility modal-overlay-entering {
+  @apply entering:fade-in entering:animate-in entering:duration-300 entering:ease-out;
+}
+
+@utility modal-overlay-exiting {
+  @apply exiting:fade-out exiting:animate-out exiting:ease-in;
+}
+
+@utility modal-overlay-grid {
+  @apply grid grid-rows-[1fr_auto] justify-items-center sm:grid-rows-[1fr_auto_3fr]
+}
+
+
+@utility modal-transition-entering {
+  @apply entering:slide-in-from-bottom sm:entering:zoom-in-95 sm:entering:slide-in-from-bottom-0 entering:animate-in entering:duration-300 entering:ease-out;
+}
+
+@utility modal-transition-exiting {
+  @apply exiting:slide-out-to-bottom sm:exiting:zoom-out-95 sm:exiting:slide-out-to-bottom-0 exiting:animate-out exiting:ease-in;
+}
+
+@utility modal-size-fullscreen {
+  :is(& *) {
+    &[data-slot="dialog-body"] {
+      min-height: calc(var(--visual-viewport-height) - var(--visual-viewport-vertical-padding) - var(--dialog-header-height, 0px) - var(--dialog-footer-height, 0px));
+    }
+  }
+
+  @apply sm:rounded-ui sm:[--visual-viewport-vertical-padding:16px]
+}
+
+@utility overlay-on-enterring {
+  @apply entering:fade-in entering:animate-in entering:duration-500
+}
+
+@utility overlay-on-exiting {
+  @apply exiting:fade-out exiting:animate-out exiting:duration-300
+}
+
+@utility dialog-footer {
+  gap: var(--gap, calc(var(--spacing) * 3));
+  padding-top: calc(var(--gutter) - calc(var(--spacing) * 3));
+  @apply p-(--gutter) flex items-center;
+}
+
+
+/* range calendar  */
+@utility cell-selection-selected {
+  @apply fx-selected:bg-(--range-selected-bg)
+}
+
+@utility cell-radius {
+  @apply [td:first-child_&]:rounded-s-ui data-selection-start:rounded-s-ui [td:last-child_&]:rounded-e-ui data-selection-end:rounded-e-ui
+}
+
+
+@utility cell-span-selection-none {
+  @apply group-hover:bg-bg-muted/60 group-data-pressed:bg-bg-muted/80
+}
+
+@utility cell-span-selection-middle-base {
+  @apply text-(--range-selected-fg)! group-hover:bg-(--range-selected-bg-hover) group-data-pressed:bg-(--range-selected-bg-pressed) forced-colors:group-hover:bg-[Highlight]
+}
+
+@utility cell-span-selection-middle-invalid {
+  @apply text-(--range-selected-invalid-fg) group-invalid:group-hover:bg-(--range-selected-invalid-bg-hover) group-invalid:group-data-pressed:bg-(--range-selected-invalid-bg-pressed) forced-colors:group-invalid:group-hover:bg-[Mark]
+}
+
+
+
+
+
+@utility ui-card {
+  @apply p-(--card-padding) rounded-(--card-radius)
+}
+
+@utility inner-radius {
+  border-radius: calc(var(--card-radius) - var(--card-padding));
+}
+
+@utility d-flex-items-center {
+  @apply flex items-center;
+}
+
+@utility d-flex-place-center {
+  @apply flex justify-center items-center;
+}