@rark-ui/themes 1.0.0 → 1.2.0

package/dist/default/index.d.ts

@@ -1,4 +1,4 @@
 export { cn } from '../shared/utils/cn';
 export { tv } from '../shared/utils/tv';
-export { addonsCrafts, coreCrafts } from './crafts';
+export * as crafts from './crafts';
 export type * from './crafts';

package/dist/default/index.js

@@ -1,3 +1,3 @@
 export { cn } from '../shared/utils/cn';
 export { tv } from '../shared/utils/tv';
-export { addonsCrafts, coreCrafts } from './crafts';
+export * as crafts from './crafts';

package/dist/razer/crafts/index.d.ts

@@ -1,4 +1,15 @@
-export * as addonsCrafts from './addons';
-export type * from './addons';
-export * as coreCrafts from './core';
-export type * from './core';
+/**
+ *
+ * you can extend the core crafts by importing them from the default theme
+ * and then extending them with your own customizations
+ *
+ * example:
+ * import { coreCrafts } from '../../../default'
+ * import { tv } from '../../../shared/utils/tv'
+ * export const tvButton = tv({
+ *   extend: coreCrafts.tvButton,
+ *   // your own customizations here
+ * })
+ *
+ */
+export {};

package/dist/razer/crafts/index.js

@@ -1,2 +1,15 @@
-export * as addonsCrafts from './addons';
-export * as coreCrafts from './core';
+/**
+ *
+ * you can extend the core crafts by importing them from the default theme
+ * and then extending them with your own customizations
+ *
+ * example:
+ * import { coreCrafts } from '../../../default'
+ * import { tv } from '../../../shared/utils/tv'
+ * export const tvButton = tv({
+ *   extend: coreCrafts.tvButton,
+ *   // your own customizations here
+ * })
+ *
+ */
+export {};

package/dist/razer/index.css

@@ -91,7 +91,6 @@
     --color-h28: oklch(27.68% 0 0);
     --color-h78: oklch(57.27% 0 0);
     --color-h88: oklch(62.68% 0 0);
-    --color-hee: oklch(94.91% 0 0);
     --color-h44: oklch(38.67% 0 0);
     --color-h22: oklch(25.2% 0 0);
     --color-h16: oklch(20.02% 0 0);
@@ -271,9 +270,6 @@
   .pointer-events-none {
     pointer-events: none;
   }
-  .invisible {
-    visibility: hidden;
-  }
   .visible {
     visibility: visible;
   }
@@ -345,9 +341,6 @@
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
-  .z-\(--z-devtools\) {
-    z-index: var(--z-devtools);
-  }
   .z-\(--z-loading\) {
     z-index: var(--z-loading);
   }
@@ -669,9 +662,6 @@
   .h-\[max\(var\(--slider-thumb-height\)\,1rem\)\] {
     height: max(var(--slider-thumb-height), 1rem);
   }
-  .h-auto {
-    height: auto;
-  }
   .h-full {
     height: 100%;
   }
@@ -810,9 +800,6 @@
   .w-screen {
     width: 100vw;
   }
-  .max-w-125 {
-    max-width: calc(var(--spacing) * 125);
-  }
   .max-w-\[520px\] {
     max-width: 520px;
   }
@@ -1039,9 +1026,6 @@
   .overflow-y-auto {
     overflow-y: auto;
   }
-  .overscroll-contain {
-    overscroll-behavior: contain;
-  }
   .rounded {
     border-radius: var(--radius);
   }
@@ -1257,9 +1241,6 @@
   .py-1\.5 {
     padding-block: calc(var(--spacing) * 1.5);
   }
-  .py-1\.25 {
-    padding-block: calc(var(--spacing) * 1.25);
-  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -1369,9 +1350,6 @@
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
-  .break-words {
-    overflow-wrap: break-word;
-  }
   .wrap-break-word {
     overflow-wrap: break-word;
   }
@@ -1448,6 +1426,9 @@
     --tw-blur: blur(8px);
     filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
   }
+  .filter {
+    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
+  }
   .transition-all {
     transition-property: all;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1525,9 +1506,6 @@
   .\[--width\:var\(--spacing\)\] {
     --width: var(--spacing);
   }
-  .overflow-anchor-none {
-    overflow-anchor: none;
-  }
   .placeholder\:text-base {
     &::placeholder {
       font-size: var(--text-base);
@@ -4221,56 +4199,6 @@
     }
   }
 }
-@layer components {
-  .rui-virtual-list {
-    &::-webkit-scrollbar {
-      width: 6px;
-      height: 6px;
-    }
-    &::-webkit-scrollbar-track-piece {
-      border-radius: 6px;
-      background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      height: 30px;
-      border-radius: 6px;
-      background-color: color-mix(in srgb, oklch(46.04% 0 0) 40%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-h58) 40%, transparent);
-      }
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-rz-green);
-        }
-      }
-      &:focus {
-        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);
-        }
-      }
-      &:active {
-        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);
-        }
-      }
-    }
-  }
-  .rui-virtual-infinite-spinner {
-    stroke: var(--color-rz-green);
-  }
-  .rui-virtual-infinite-error {
-    & .retry {
-      cursor: pointer;
-      &:hover {
-        @media (hover: hover) {
-          color: var(--color-rz-green);
-        }
-      }
-    }
-  }
-}
 @layer components {
   .rui-floating-panel-content {
     border-radius: 1.25rem;
@@ -4297,23 +4225,6 @@
     }
   }
 }
-@layer components {
-  .rui-v-title {
-    border-color: var(--color-h00);
-    background-color: var(--color-hee);
-    color: var(--color-h00);
-    &:where([data-theme-surface=dark], [data-theme-surface=dark] *) {
-      --tw-border-style: none;
-      border-style: none;
-    }
-    &:where([data-theme-surface=dark], [data-theme-surface=dark] *) {
-      background-color: var(--color-h44);
-    }
-    &:where([data-theme-surface=dark], [data-theme-surface=dark] *) {
-      color: var(--color-hee);
-    }
-  }
-}
 @layer base {
   @property --motion-bounce {
     syntax: "*";

package/dist/razer/index.d.ts

@@ -1,4 +1,4 @@
 export { cn } from '../shared/utils/cn';
 export { tv } from '../shared/utils/tv';
-export { addonsCrafts, coreCrafts } from './crafts';
-export type * from './crafts';
+export * as crafts from './crafts/index';
+export type * as Crafts from './crafts/index';

package/dist/razer/index.js

@@ -1,3 +1,3 @@
 export { cn } from '../shared/utils/cn';
 export { tv } from '../shared/utils/tv';
-export { addonsCrafts, coreCrafts } from './crafts';
+export * as crafts from './crafts/index';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rark-ui/themes",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "packageManager": "pnpm@10.13.1",
   "description": "Themes for Rark UI",
   "author": "Hwacc(mshcccck@gmail.com)",
@@ -23,15 +23,16 @@
       "default": "./dist/default/index.js"
     },
     "./razer/index.css": "./dist/razer/index.css",
+    "./razer/preset.css": "./src/razer/preset.css",
     "./default/index.css": "./dist/default/index.css"
   },
+  "module": "./dist/index.js",
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "scripts": {
-    "build": "pnpm -s run build:js && pnpm -s run build:css",
-    "build:js": "tsc",
-    "build:css": "pnpm exec tailwindcss -i ./src/razer/index.css -o ./dist/razer/index.css",
+    "build": "bun run build.ts",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
@@ -43,5 +44,8 @@
     "tailwindcss": "^4.1.18",
     "tailwindcss-animated": "^2.0.0",
     "tailwindcss-motion": "^1.1.1"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/default/crafts/badge.ts

@@ -0,0 +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>

package/src/default/crafts/button.ts

@@ -0,0 +1,68 @@
+import type { VariantProps } from '../../shared/utils/tv'
+import { tv } from '../../shared/utils/tv'
+
+const prefix = 'rui-btn'
+
+export const tvButton = tv(
+  {
+    slots: {
+      root: [
+        'inline-flex',
+        'items-center',
+        'justify-center',
+        'rounded',
+        'border',
+        'transition-all',
+        'disabled:pointer-events-none',
+        'disabled:opacity-(--disabled-opacity)',
+        '[&_svg]:pointer-events-none',
+        '[&_svg]:shrink-0',
+      ],
+      loading: 'size-[1lh] animate-spin',
+    },
+    variants: {
+      variant: {
+        default: '',
+        normal: '',
+        outline: '',
+        text: '',
+        icon: {
+          root: ['p-0', 'aspect-square', 'border-none'],
+        },
+      },
+      size: {
+        xs: {
+          root: 'h-6 px-3 gap-1.5 text-xs',
+        },
+        sm: {
+          root: 'h-7 px-4 gap-2 text-sm',
+        },
+        base: {
+          root: 'h-8 px-5 gap-2.5 text-base',
+        },
+        lg: {
+          root: 'h-9 px-6 gap-3 text-lg',
+        },
+      },
+      loading: {
+        true: {
+          root: 'pointer-events-none',
+        },
+        false: '',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'base',
+      loading: false,
+    },
+  },
+  {
+    slots: {
+      root: prefix,
+      loading: `${prefix}-loading`,
+    },
+  },
+)
+
+export type ButtonVariants = VariantProps<typeof tvButton>

package/src/default/crafts/checkbox.ts

@@ -0,0 +1,75 @@
+import type { VariantProps } from '../../shared/utils/tv'
+import { tv } from '../../shared/utils/tv'
+
+const prefix = 'rui-checkbox'
+
+export const tvCheckbox = tv({
+  slots: {
+    root: ['flex', 'items-center', 'gap-2.5', 'w-fit'],
+    control: ['peer', 'shrink-0', 'rounded-xs', 'border'],
+    indicator: ['flex', 'h-full', 'w-full', 'items-center', 'justify-center', 'text-inherit'],
+    indicatorChecked: 'size-[0.875lh] stroke-black stroke-[.125rem] [&>path]:animate-check-dash',
+    indicatorMinus: 'size-[0.875lh] stroke-black stroke-[.125rem] [&_path]:animate-indeterminate-dash',
+    label: '',
+  },
+  variants: {
+    disabled: {
+      true: '',
+      false: '',
+    },
+    size: {
+      xs: '',
+      sm: '',
+      base: '',
+      lg: '',
+    },
+  },
+  defaultVariants: {
+    size: 'base',
+  },
+  compoundVariants: [
+    {
+      size: 'xs',
+      class: {
+        control: 'size-3.5',
+        label: 'text-xs',
+        indicator: 'text-xs',
+      },
+    },
+    {
+      size: 'sm',
+      class: {
+        control: 'size-4',
+        label: 'text-sm',
+        indicator: 'text-sm',
+      },
+    },
+    {
+      size: 'base',
+      class: {
+        control: 'size-4.5',
+        label: 'text-base',
+        indicator: 'text-base',
+      },
+    },
+    {
+      size: 'lg',
+      class: {
+        control: 'size-5',
+        label: 'text-lg',
+        indicator: 'text-lg',
+      },
+    },
+  ],
+}, {
+  slots: {
+    root: prefix,
+    control: `${prefix}-control`,
+    indicator: `${prefix}-indicator`,
+    indicatorChecked: `${prefix}-indicator-checked`,
+    indicatorMinus: `${prefix}-indicator-minus`,
+    label: `${prefix}-label`,
+  },
+})
+
+export type CheckboxVariants = VariantProps<typeof tvCheckbox>

package/src/default/crafts/collapsible.ts

@@ -0,0 +1,61 @@
+import type { VariantProps } from '../../shared/utils/tv'
+import { tv } from '../../shared/utils/tv'
+
+const prefix = 'rui-collapsible'
+
+export const tvCollapsible = tv({
+  slots: {
+    root: [],
+    trigger: ['w-fit flex items-center'],
+    indicator: [
+      'data-[state=closed]:rotate-0',
+      'data-[state=open]:rotate-180',
+      'transition-transform',
+    ],
+    content: [
+      'overflow-hidden',
+      'data-[state=open]:animate-collapsible-down',
+      'data-[state=closed]:animate-collapsible-up',
+    ],
+  },
+  variants: {
+    size: {
+      xs: {
+        trigger: ['text-xs gap-3'],
+      },
+      sm: {
+        trigger: ['text-sm gap-4'],
+      },
+      base: {
+        trigger: ['text-base gap-4.5'],
+      },
+      lg: {
+        trigger: ['text-lg gap-5'],
+      },
+    },
+  },
+}, {
+  slots: {
+    root: prefix,
+    trigger: `${prefix}-trigger`,
+    indicator: `${prefix}-trigger-indicator`,
+    content: `${prefix}-content`,
+  },
+})
+export type CollapsibleVariants = VariantProps<typeof tvCollapsible>
+
+const readMorePrefix = 'rui-readmore'
+export const tvReadMore = tv({
+  slots: {
+    root: [],
+    content: [],
+    trigger: [],
+  },
+}, {
+  slots: {
+    root: readMorePrefix,
+    content: `${readMorePrefix}-content`,
+    trigger: `${readMorePrefix}-trigger`,
+  },
+})
+export type ReadMoreVariants = VariantProps<typeof tvReadMore>