jk-ui-cli 0.0.2 → 0.0.4

package/package.json

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

package/readme.md

@@ -0,0 +1 @@
+## JK-UI CLI

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

@@ -10,6 +10,7 @@
 @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]);
@@ -19,6 +20,8 @@
 @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"]);
@@ -39,4 +42,7 @@
 @custom-variant placement-bottom (&[data-placement="bottom"]);
 
 @custom-variant exiting (&[data-exiting]);
-@custom-variant entering (&[data-entering]);
+@custom-variant entering (&[data-entering]);
+
+@custom-variant orientation-horizontal (&[data-orientation=horizontal]);
+@custom-variant orientation-vertical (&[data-orientation=vertical]);

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

@@ -117,15 +117,23 @@
 }
 
 
+@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 bg-(--checkbox-bg) text-(--checkbox-fg) fx-checked:[--checkbox-bg:var(--checkbox-bg-checked)] fx-checked:[--checkbox-fg:var(--checkbox-fg-checked)];
+  @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;
 }
@@ -134,13 +142,6 @@
   @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)
-  }
-}
 
 
 

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

@@ -19,23 +19,30 @@
 
 
 @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;
+  @apply *:data-[slot=icon]:col-start-1 *:data-[slot=icon]:row-start-1
+   *:data-[slot=icon]:me-(--mr-icon) *:data-[slot=icon]:-ms-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
+  @apply not-has-[[slot=description]]:*:data-[slot=icon]:size-5 sm:not-has-[[slot=description]]:*:data-[slot=icon]:size-4
 }
 
 @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
+  @apply has-[[slot=description]]:*:data-[slot=icon]:h-lh has-[[slot=description]]:[&_[data-slot='icon']:not([class*='w-'])]:w-5 sm:has-[[slot=description]]:[&_[data-slot='icon']:not([class*='w-'])]:w-4
 }
 
 @utility dropdown-item-label {
-  @apply [&>[slot=label]+[data-slot=icon]]:absolute [&>[slot=label]+[data-slot=icon]]:right-1;
+  @apply [&>[slot=label]+[data-slot=icon]]:absolute [&>[slot=label]+[data-slot=icon]]:end-0 [&>[slot=label]+[data-slot=icon]]:top-1;
+}
+
+@utility dropdown-item-keyboard{
+  @apply *:data-[slot=keyboard]:end-3
 }
 
 @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)];
+   @apply *:data-[slot=avatar]:*:me-(--mr-icon) *:data-[slot=avatar]:me-(--mr-icon) has-[[slot=description]]:*:data-[slot=avatar]:row-span-2 *:data-[slot=avatar]:[--avatar-size:--spacing(5)] sm:*:data-[slot=avatar]:[--avatar-size:--spacing(4)];
 }
 
 @utility dropdown-item-force-color {
@@ -76,6 +83,17 @@
   }
 }
 
+@utility dropdown-item-selected-icon{
+  @apply selected:[&>[data-slot=icon]:has(+[data-slot=icon])]:absolute selected:[&>[data-slot=icon]:has(+[data-slot=icon])]:end-0 selected:[&>[data-slot=icon]:has(+[data-slot=icon])]:top-1
+}
+
+@utility dropdown-item-selected-avatar-icon{
+  @apply selected:[&>[data-slot=icon]:has(+[data-slot=avatar])]:absolute selected:[&>[data-slot=icon]:has(+[data-slot=avatar])]:end-0 selected:[&>[data-slot=icon]:has(+[data-slot=avatar])]:top-1
+}
+@utility dropdown-item-selected-avatar{
+  @apply selected:[&>[data-slot=avatar]+[data-slot=icon]+[slot=label]]:me-6 selected:[&>[data-slot=avatar]+[slot=label]]:me-6 selected:[&>[data-slot=icon]+[data-slot=avatar]+[slot=label]]:me-6 selected:[&>[data-slot=icon]+[slot=label]]:me-6
+}
+
 @utility dropdown-item-disabled {
   &[data-disabled="true"] {
     @apply opacity-50 forced-colors:text-[GrayText];
@@ -211,4 +229,24 @@
 
 @utility d-flex-place-center {
   @apply flex justify-center items-center;
+}
+
+
+@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%);
 }

package/stubs/utls/lib.stub

@@ -1,13 +1,13 @@
 import { clsx, type ClassValue } from "clsx"
+
 import { twMerge } from "tailwind-merge"
 import { tv } from "tailwind-variants";
 
 export function cx(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
-
 export const focusRing = tv({
-  base: 'outline outline-blue-600 dark:outline-blue-500 forced-colors:outline-[Highlight] outline-offset-2',
+  base: 'outline outline-primary forced-colors:outline-[Highlight] outline-offset-2',
   variants: {
     isFocusVisible: {
       false: 'outline-0',

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

@@ -1,128 +0,0 @@
-
-
-@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);
-}