@rark-ui/themes 1.2.0 → 1.2.2

package/dist/razer/index.css

@@ -18,8 +18,6 @@
     --text-lg--line-height: 1.25;
     --text-xl: 1.25rem;
     --text-xl--line-height: 1.25;
-    --font-weight-medium: 500;
-    --font-weight-bold: 700;
     --radius-xs: 0.125rem;
     --radius-md: calc(var(--radius) + 0.125rem);
     --radius-lg: calc(var(--radius) + 0.25rem);
@@ -34,14 +32,14 @@
     --radius: 0.125rem;
     --tw-duration: var(--motion-duration);
     --tw-timing: var(--motion-timing);
-    --animate-collapsible-down: collapsible-down var(--tw-duration, 200ms)
+    --animate-collapsible-down: collapsible-down var(--tw-duration, 200ms)
     var(--tw-timing, ease-in-out);
-    --animate-collapsible-up: collapsible-up var(--tw-duration, 200ms)
+    --animate-collapsible-up: collapsible-up var(--tw-duration, 200ms)
     var(--tw-timing, ease-in-out);
     --animate-rippling: rippling var(--tw-ripple-duration, 600ms) ease-out;
-    --animate-backdrop-blur-in: backdrop-blur-in var(--tw-duration, 200ms) 
+    --animate-backdrop-blur-in: backdrop-blur-in var(--tw-duration, 200ms) 
     var(--tw-timing, ease-out) forwards;
-    --animate-backdrop-blur-out: backdrop-blur-out var(--tw-duration, 200ms)
+    --animate-backdrop-blur-out: backdrop-blur-out var(--tw-duration, 200ms)
     var(--tw-timing, ease-out) forwards;
     --z-base: 0;
     --z-sticky: 10;
@@ -68,7 +66,6 @@
     --color-rz-blue: oklch(69% 0.1282 229.93);
     --color-black: oklch(0% 0 0);
     --color-h00: oklch(0% 0 0);
-    --color-white: oklch(100% 0 0);
     --color-hff: oklch(100% 0 0);
     --color-h70: oklch(54.52% 0 0);
     --color-h4f: oklch(42.76% 0 0);
@@ -320,18 +317,12 @@
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
-  .top-2 {
-    top: calc(var(--spacing) * 2);
-  }
   .-right-\[\.5em\] {
     right: calc(.5em * -1);
   }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
-  .right-2 {
-    right: calc(var(--spacing) * 2);
-  }
   .bottom-0 {
     bottom: calc(var(--spacing) * 0);
   }
@@ -380,12 +371,6 @@
   .mt-2 {
     margin-top: calc(var(--spacing) * 2);
   }
-  .mt-3 {
-    margin-top: calc(var(--spacing) * 3);
-  }
-  .mt-4 {
-    margin-top: calc(var(--spacing) * 4);
-  }
   .mb-0\.5 {
     margin-bottom: calc(var(--spacing) * 0.5);
   }
@@ -404,9 +389,6 @@
   .mb-3 {
     margin-bottom: calc(var(--spacing) * 3);
   }
-  .ml-1 {
-    margin-left: calc(var(--spacing) * 1);
-  }
   .box-content {
     box-sizing: content-box;
   }
@@ -514,10 +496,6 @@
     width: calc(var(--spacing) * 12);
     height: calc(var(--spacing) * 12);
   }
-  .size-14 {
-    width: calc(var(--spacing) * 14);
-    height: calc(var(--spacing) * 14);
-  }
   .size-\[\.5rem\] {
     width: .5rem;
     height: .5rem;
@@ -602,54 +580,6 @@
   .h-12 {
     height: calc(var(--spacing) * 12);
   }
-  .h-14 {
-    height: calc(var(--spacing) * 14);
-  }
-  .h-20 {
-    height: calc(var(--spacing) * 20);
-  }
-  .h-24 {
-    height: calc(var(--spacing) * 24);
-  }
-  .h-25 {
-    height: calc(var(--spacing) * 25);
-  }
-  .h-28 {
-    height: calc(var(--spacing) * 28);
-  }
-  .h-30 {
-    height: calc(var(--spacing) * 30);
-  }
-  .h-36 {
-    height: calc(var(--spacing) * 36);
-  }
-  .h-40 {
-    height: calc(var(--spacing) * 40);
-  }
-  .h-50 {
-    height: calc(var(--spacing) * 50);
-  }
-  .h-52 {
-    height: calc(var(--spacing) * 52);
-  }
-  .h-60 {
-    height: calc(var(--spacing) * 60);
-  }
-  .h-80 {
-    height: calc(var(--spacing) * 80);
-  }
-  .h-100 {
-    height: calc(var(--spacing) * 100);
-  }
-  .h-120 {
-    height: calc(var(--spacing) * 120);
-  }
-  .h-160 {
-    height: calc(var(--spacing) * 160);
-  }
-  .h-200 {
-    height: calc(var(--spacing) * 200);
-  }
   .h-\[max\(var\(--slider-thumb-height\)\,\.5rem\)\] {
     height: max(var(--slider-thumb-height), .5rem);
   }
@@ -734,48 +664,6 @@
   .w-18 {
     width: calc(var(--spacing) * 18);
   }
-  .w-25 {
-    width: calc(var(--spacing) * 25);
-  }
-  .w-40 {
-    width: calc(var(--spacing) * 40);
-  }
-  .w-56 {
-    width: calc(var(--spacing) * 56);
-  }
-  .w-60 {
-    width: calc(var(--spacing) * 60);
-  }
-  .w-64 {
-    width: calc(var(--spacing) * 64);
-  }
-  .w-70 {
-    width: calc(var(--spacing) * 70);
-  }
-  .w-80 {
-    width: calc(var(--spacing) * 80);
-  }
-  .w-90 {
-    width: calc(var(--spacing) * 90);
-  }
-  .w-100 {
-    width: calc(var(--spacing) * 100);
-  }
-  .w-110 {
-    width: calc(var(--spacing) * 110);
-  }
-  .w-120 {
-    width: calc(var(--spacing) * 120);
-  }
-  .w-140 {
-    width: calc(var(--spacing) * 140);
-  }
-  .w-160 {
-    width: calc(var(--spacing) * 160);
-  }
-  .w-200 {
-    width: calc(var(--spacing) * 200);
-  }
   .w-\[max\(var\(--slider-thumb-width\)\,\.5rem\)\] {
     width: max(var(--slider-thumb-width), .5rem);
   }
@@ -800,15 +688,6 @@
   .w-screen {
     width: 100vw;
   }
-  .max-w-\[520px\] {
-    max-width: 520px;
-  }
-  .max-w-\[560px\] {
-    max-width: 560px;
-  }
-  .max-w-\[720px\] {
-    max-width: 720px;
-  }
   .max-w-\[calc\(100\%-var\(--spacing\)\*10\)\] {
     max-width: calc(100% - var(--spacing) * 10);
   }
@@ -917,12 +796,6 @@
   .items-center {
     align-items: center;
   }
-  .items-end {
-    align-items: flex-end;
-  }
-  .items-start {
-    align-items: flex-start;
-  }
   .justify-between {
     justify-content: space-between;
   }
@@ -971,16 +844,6 @@
   .gap-8 {
     gap: calc(var(--spacing) * 8);
   }
-  .gap-40 {
-    gap: calc(var(--spacing) * 40);
-  }
-  .space-y-2 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .space-x-3 {
     :where(& > :not(:last-child)) {
       --tw-space-x-reverse: 0;
@@ -1014,15 +877,9 @@
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-  .overflow-auto {
-    overflow: auto;
-  }
   .overflow-hidden {
     overflow: hidden;
   }
-  .overflow-x-hidden {
-    overflow-x: hidden;
-  }
   .overflow-y-auto {
     overflow-y: auto;
   }
@@ -1094,54 +951,15 @@
     --tw-border-style: none;
     border-style: none;
   }
-  .border-h33 {
-    border-color: var(--color-h33);
-  }
-  .border-h55 {
-    border-color: var(--color-h55);
-  }
-  .border-rz-green {
-    border-color: var(--color-rz-green);
-  }
-  .bg-h00 {
-    background-color: var(--color-h00);
-  }
-  .bg-h00\/20 {
-    background-color: color-mix(in srgb, oklch(0% 0 0) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-h00) 20%, transparent);
-    }
-  }
-  .bg-h22 {
-    background-color: var(--color-h22);
-  }
-  .bg-rz-green {
-    background-color: var(--color-rz-green);
-  }
-  .bg-rz-green\/70 {
-    background-color: color-mix(in srgb, oklch(76.87% 0.2343 141.32) 70%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-rz-green) 70%, transparent);
-    }
-  }
   .bg-transparent {
     background-color: transparent;
   }
-  .bg-cover {
-    background-size: cover;
-  }
-  .bg-center {
-    background-position: center;
-  }
   .stroke-black {
     stroke: var(--color-black);
   }
   .stroke-\[\.125rem\] {
     stroke-width: .125rem;
   }
-  .object-cover {
-    object-fit: cover;
-  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -1274,9 +1092,6 @@
   .pr-7 {
     padding-right: calc(var(--spacing) * 7);
   }
-  .pb-2 {
-    padding-bottom: calc(var(--spacing) * 2);
-  }
   .pl-4 {
     padding-left: calc(var(--spacing) * 4);
   }
@@ -1335,78 +1150,18 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .text-\[10px\] {
-    font-size: 10px;
-  }
-  .leading-none {
-    --tw-leading: 1;
-    line-height: 1;
-  }
-  .font-bold {
-    --tw-font-weight: var(--font-weight-bold);
-    font-weight: var(--font-weight-bold);
-  }
-  .font-medium {
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-  }
-  .wrap-break-word {
-    overflow-wrap: break-word;
-  }
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .whitespace-pre-wrap {
-    white-space: pre-wrap;
-  }
-  .text-black {
-    color: var(--color-black);
-  }
-  .text-h55 {
-    color: var(--color-h55);
-  }
-  .text-hcc {
-    color: var(--color-hcc);
-  }
-  .text-hff {
-    color: var(--color-hff);
-  }
   .text-inherit {
     color: inherit;
   }
-  .text-rz-green {
-    color: var(--color-rz-green);
-  }
-  .text-rz-red {
-    color: var(--color-rz-red);
-  }
-  .text-white {
-    color: var(--color-white);
-  }
   .uppercase {
     text-transform: uppercase;
   }
-  .italic {
-    font-style: italic;
-  }
-  .underline {
-    text-decoration-line: underline;
-  }
   .opacity-30 {
     opacity: 30%;
   }
-  .opacity-60 {
-    opacity: 60%;
-  }
-  .opacity-70 {
-    opacity: 70%;
-  }
-  .opacity-75 {
-    opacity: 75%;
-  }
-  .opacity-80 {
-    opacity: 80%;
-  }
   .outline-hidden {
     --tw-outline-style: none;
     outline-style: none;
@@ -1452,12 +1207,6 @@
     -webkit-user-select: none;
     user-select: none;
   }
-  .\[--arrow-background\:var\(--color-rz-green\)\] {
-    --arrow-background: var(--color-rz-green);
-  }
-  .\[--arrow-border\:var\(--color-h00\)\] {
-    --arrow-border: var(--color-h00);
-  }
   .\[--height\:calc\(var\(--spacing\)\)\] {
     --height: calc(var(--spacing));
   }
@@ -1608,34 +1357,6 @@
       content: var(--tw-content);
     }
   }
-  .hover\:bg-rz-green {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-rz-green);
-      }
-    }
-  }
-  .hover\:text-hff {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-hff);
-      }
-    }
-  }
-  .hover\:text-rz-green-light {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-rz-green-light);
-      }
-    }
-  }
-  .hover\:underline {
-    &:hover {
-      @media (hover: hover) {
-        text-decoration-line: underline;
-      }
-    }
-  }
   .focus\:outline-none {
     &:focus {
       --tw-outline-style: none;
@@ -1676,11 +1397,6 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .data-\[state\=checked\]\:bg-rz-green {
-    &[data-state="checked"] {
-      background-color: var(--color-rz-green);
-    }
-  }
   .data-\[state\=closed\]\:rotate-0 {
     &[data-state="closed"] {
       rotate: 0deg;
@@ -1771,11 +1487,6 @@
       opacity: var(--disabled-opacity);
     }
   }
-  .data-\[state\=indeterminate\]\:bg-rz-green {
-    &[data-state="indeterminate"] {
-      background-color: var(--color-rz-green);
-    }
-  }
   .data-\[state\=open\]\:rotate-90 {
     &[data-state="open"] {
       rotate: 90deg;
@@ -1931,21 +1642,6 @@
       max-width: 80vw;
     }
   }
-  .md\:grid-cols-2 {
-    @media (width >= 48rem) {
-      grid-template-columns: repeat(2, minmax(0, 1fr));
-    }
-  }
-  .dark\:bg-h00 {
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--color-h00);
-    }
-  }
-  .dark\:text-hff {
-    @media (prefers-color-scheme: dark) {
-      color: var(--color-hff);
-    }
-  }
   .\[\&_\[data-part\=\"input\"\]\]\:px-0 {
     & [data-part="input"] {
       padding-inline: calc(var(--spacing) * 0);
@@ -2030,11 +1726,6 @@
       height: 100%;
     }
   }
-  .\[\&\>svg\]\:stroke-3 {
-    &>svg {
-      stroke-width: 3;
-    }
-  }
 }
 @property --motion-duration {
   syntax: '<time>';
@@ -4755,11 +4446,6 @@
   syntax: "*";
   inherits: false;
 }
-@property --tw-space-y-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
 @property --tw-space-x-reverse {
   syntax: "*";
   inherits: false;
@@ -4770,14 +4456,6 @@
   inherits: false;
   initial-value: solid;
 }
-@property --tw-leading {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-outline-style {
   syntax: "*";
   inherits: false;
@@ -5082,11 +4760,8 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
-      --tw-space-y-reverse: 0;
       --tw-space-x-reverse: 0;
       --tw-border-style: solid;
-      --tw-leading: initial;
-      --tw-font-weight: initial;
       --tw-outline-style: solid;
       --tw-blur: initial;
       --tw-brightness: initial;

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@rark-ui/themes",
   "type": "module",
-  "version": "1.2.0",
-  "packageManager": "pnpm@10.13.1",
+  "version": "1.2.2",
   "description": "Themes for Rark UI",
-  "author": "Hwacc(mshcccck@gmail.com)",
+  "author": {
+    "name": "Hwacc",
+    "email": "mshcccck@gmail.com",
+    "url": "https://github.com/Hwacc/rark-ui"
+  },
   "license": "MIT",
   "keywords": [
     "rark-ui",
@@ -31,10 +34,6 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "build": "bun run build.ts",
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
   "dependencies": {
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.2.2"
@@ -47,5 +46,9 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "bun run build.ts",
+    "test": "echo \"Error: no test specified\" && exit 1"
   }
-}
+}

package/src/default/crafts/badge.ts

@@ -1,56 +1,56 @@
-import type { VariantProps } from '../../shared/utils/tv'
-import { tv } from '../../shared/utils/tv'
-
-const prefix = 'rui-badge'
-
-export const tvBadge = tv(
-  {
-    base: [
-      'inline-flex',
-      'items-center',
-      'rounded',
-      'uppercase',
-      'outline-none',
-      'transition-colors',
-    ],
-    variants: {
-      variant: {
-        default: '',
-        secondary: '',
-        dot: ['rounded-full', '-top-[.5em]', '-right-[.5em]'],
-      },
-      size: {
-        xs: ['text-3xs', 'py-0.25', 'px-1'],
-        sm: ['text-2xs', 'py-0.25', 'px-1'],
-        base: ['text-xs', 'py-0.5', 'px-1.25'],
-        lg: ['text-sm', 'py-0.5', 'px-1.5'],
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'base',
-    },
-    compoundVariants: [
-      {
-        variant: 'dot',
-        size: 'base',
-        class: ['p-0', 'size-[.375rem]'],
-      },
-      {
-        variant: 'dot',
-        size: 'sm',
-        class: ['p-0', 'size-[.25rem]'],
-      },
-      {
-        variant: 'dot',
-        size: 'lg',
-        class: ['p-0', 'size-[.5rem]'],
-      },
-    ],
-  },
-  {
-    class: prefix,
-  },
-)
-
-export type BadgeVariants = VariantProps<typeof tvBadge>
+import type { VariantProps } from '../../shared/utils/tv'
+import { tv } from '../../shared/utils/tv'
+
+const prefix = 'rui-badge'
+
+export const tvBadge = tv(
+  {
+    base: [
+      'inline-flex',
+      'items-center',
+      'rounded',
+      'uppercase',
+      'outline-none',
+      'transition-colors',
+    ],
+    variants: {
+      variant: {
+        default: '',
+        secondary: '',
+        dot: ['rounded-full', '-top-[.5em]', '-right-[.5em]'],
+      },
+      size: {
+        xs: ['text-3xs', 'py-0.25', 'px-1'],
+        sm: ['text-2xs', 'py-0.25', 'px-1'],
+        base: ['text-xs', 'py-0.5', 'px-1.25'],
+        lg: ['text-sm', 'py-0.5', 'px-1.5'],
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'base',
+    },
+    compoundVariants: [
+      {
+        variant: 'dot',
+        size: 'base',
+        class: ['p-0', 'size-[.375rem]'],
+      },
+      {
+        variant: 'dot',
+        size: 'sm',
+        class: ['p-0', 'size-[.25rem]'],
+      },
+      {
+        variant: 'dot',
+        size: 'lg',
+        class: ['p-0', 'size-[.5rem]'],
+      },
+    ],
+  },
+  {
+    class: prefix,
+  },
+)
+
+export type BadgeVariants = VariantProps<typeof tvBadge>