@raxium/themes 0.1.1

package/dist/razer/index.d.ts

@@ -0,0 +1,2 @@
+export * as crafts from './crafts/index';
+export type * as Crafts from './crafts/index';

package/dist/razer/index.js

@@ -0,0 +1 @@
+export * as crafts from './crafts/index';

package/dist/utils/cn.d.ts

@@ -0,0 +1,7 @@
+import type { ClassValue } from 'clsx';
+import clsx from 'clsx';
+/** clsx + twMerge，统一处理 class 类型并合并 Tailwind 冲突 */
+export declare function cn(...classes: ClassValue[]): string;
+export declare function cnMerge(...classes: ClassValue[]): string;
+export declare function cx(...classes: ClassValue[]): string;
+export { clsx };

package/dist/utils/cn.js

@@ -0,0 +1,13 @@
+import clsx from 'clsx';
+import { twMerge } from 'tailwind-merge';
+/** clsx + twMerge，统一处理 class 类型并合并 Tailwind 冲突 */
+export function cn(...classes) {
+    return twMerge(clsx(...classes));
+}
+export function cnMerge(...classes) {
+    return twMerge(clsx(...classes));
+}
+export function cx(...classes) {
+    return clsx(...classes);
+}
+export { clsx };

package/dist/utils/index.d.ts

@@ -0,0 +1,2 @@
+export * from './cn';
+export * from './tv';

package/dist/utils/index.js

@@ -0,0 +1,2 @@
+export * from './cn';
+export * from './tv';

package/dist/utils/tv.d.ts

@@ -0,0 +1,37 @@
+import type { ClassValue, TVCompoundSlots, TVCompoundVariants, TVDefaultVariants, TVReturnType, TVVariants } from 'tailwind-variants';
+import { tv as originTv } from 'tailwind-variants';
+type TVSlots = Record<string, ClassValue> | undefined;
+export type { VariantProps } from 'tailwind-variants';
+export declare function tv<V extends TVVariants<S, B, EV>, CV extends TVCompoundVariants<V, S, B, EV, ES>, DV extends TVDefaultVariants<V, S, EV, ES>, B extends ClassValue = undefined, S extends TVSlots = undefined, E extends TVReturnType = TVReturnType<V, S, B, EV extends undefined ? {} : EV, ES extends undefined ? {} : ES>, EV extends TVVariants<ES, B, E['variants'], ES> = E['variants'], ES extends TVSlots = E['slots'] extends TVSlots ? E['slots'] : undefined>(options: {
+    extend?: E;
+    base?: B;
+    slots?: S;
+    variants?: V;
+    compoundVariants?: CV;
+    compoundSlots?: TVCompoundSlots<V & {
+        unstyled: {
+            true: ClassValue;
+            false: ClassValue;
+        };
+    }, S, B>;
+    defaultVariants?: DV;
+}, ruiConfig?: {
+    class?: ClassValue;
+    className?: ClassValue;
+    slots?: Record<keyof S, ClassValue>;
+}, config?: any): ReturnType<typeof originTv<V & {
+    unstyled: {
+        true: ClassValue;
+        false: ClassValue;
+    };
+}, TVCompoundVariants<V & {
+    unstyled: {
+        true: ClassValue;
+        false: ClassValue;
+    };
+}, S, B, EV, ES>, TVDefaultVariants<V & {
+    unstyled: {
+        true: ClassValue;
+        false: ClassValue;
+    };
+}, S, EV, ES>, B, S, E, EV, ES>>;

package/dist/utils/tv.js

@@ -0,0 +1,29 @@
+import { tv as originTv } from 'tailwind-variants';
+export function tv(options, ruiConfig, config) {
+    // fix: extend时, ruiConfig丢失
+    const _ruiConfig = ruiConfig ?? options.extend?._ruiConfig;
+    const variants = {
+        ...(options.variants ?? {}),
+        unstyled: {
+            true: '',
+            false: _ruiConfig?.class ?? _ruiConfig?.className ?? '',
+        },
+    };
+    const unstyledCompoundSlots = [];
+    for (const key in _ruiConfig?.slots) {
+        unstyledCompoundSlots.push({
+            slots: [key],
+            unstyled: false,
+            class: _ruiConfig?.slots[key],
+        });
+    }
+    options.variants = variants;
+    options.defaultVariants = {
+        ...(options.defaultVariants ?? {}),
+        unstyled: false,
+    };
+    options.compoundSlots = (options.compoundSlots ?? []).concat(unstyledCompoundSlots);
+    const result = originTv(options, config);
+    result._ruiConfig = ruiConfig;
+    return result;
+}

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@raxium/themes",
+  "type": "module",
+  "version": "0.1.1",
+  "description": "Themes for Raxium",
+  "author": {
+    "name": "Hwacc",
+    "email": "mshcccck@gmail.com",
+    "url": "https://github.com/raxium-ui/raxium-ui"
+  },
+  "license": "MIT",
+  "keywords": [
+    "raxium",
+    "raxium-ui",
+    "themes",
+    "tailwind"
+  ],
+  "exports": {
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "import": "./dist/utils/index.js",
+      "default": "./dist/utils/index.js"
+    },
+    "./razer": {
+      "types": "./dist/razer/index.d.ts",
+      "import": "./dist/razer/index.js",
+      "default": "./dist/razer/index.js"
+    },
+    "./default": {
+      "types": "./dist/default/index.d.ts",
+      "import": "./dist/default/index.js",
+      "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",
+    "src"
+  ],
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.4.0",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss-animated": "^2.0.0",
+    "tailwindcss-motion": "^1.1.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/cli": "^4.1.18",
+    "tailwindcss": "^4.1.18"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "bun run build.ts",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  }
+}

package/src/css/animation-easing.css

@@ -0,0 +1,21 @@
+@theme {
+  /* tw default duration */
+  --tw-duration: var(--motion-duration);
+  --default-transition-duration: var(--motion-duration);
+  --transition-duration: var(--motion-duration);
+  --tw-timing: var(--motion-timing);
+  --default-transition-timing-function: var(--motion-timing);
+  --transition-timing-function: var(--motion-timing);
+}
+
+@property --motion-duration {
+  syntax: '<time>';
+  inherits: false;
+  initial-value: 200ms;
+}
+
+@property --motion-timing {
+  syntax: '*';
+  inherits: false;
+  initial-value: cubic-bezier(0, 0, 0.2, 1);
+}

package/src/css/animations.css

@@ -0,0 +1,252 @@
+@import './animation-easing.css';
+
+@plugin 'tailwindcss-motion';
+
+@theme {
+  --animate-accordion-down: accordion-down var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out);
+  --animate-accordion-up: accordion-up var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out);
+  --animate-collapsible-down: collapsible-down var(--tw-duration, 200ms)
+    var(--tw-timing, ease-in-out);
+  --animate-collapsible-up: collapsible-up var(--tw-duration, 200ms)
+    var(--tw-timing, ease-in-out);
+  --animate-quick-squeeze-x: squeeze-x var(--tw-duration, 200ms)
+    var(--tw-timing, ease-in-out);
+  --animate-rippling: rippling var(--tw-ripple-duration, 600ms) ease-out;
+  --animate-spin: spin 1s linear infinite;
+  --animate-fade-scale-in: fade-scale-in var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out);
+  --animate-fade-scale-out: fade-scale-out var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out);
+  --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)
+    var(--tw-timing, ease-out) forwards;
+
+  /* toast exit animations */
+  --animate-toast-exit-right: toast-exit-right var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out);
+  --animate-toast-exit-left: toast-exit-left var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out);
+  --animate-toast-exit-top: toast-exit-top var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out);
+  --animate-toast-exit-bottom: toast-exit-bottom var(--tw-duration, 200ms)
+    var(--tw-timing, ease-out);
+
+  /* Keyframes */
+  @keyframes accordion-down {
+    from {
+      height: 0px;
+    }
+
+    to {
+      height: var(--reka-accordion-content-height, 0px);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--reka-accordion-content-height, 0px);
+    }
+
+    to {
+      height: 0px;
+    }
+  }
+
+  @keyframes collapsible-down {
+    from {
+      height: var(--collapsed-height, 0px);
+    }
+
+    to {
+      height: var(--height, 0px);
+    }
+  }
+
+  @keyframes collapsible-up {
+    from {
+      height: var(--height, 0px);
+    }
+
+    to {
+      height: var(--collapsed-height, 0px);
+    }
+  }
+
+  @keyframes squeeze-x {
+    from {
+      transform: scaleX(1);
+    }
+
+    50% {
+      transform: scaleX(1.15);
+    }
+
+    to {
+      transform: scaleX(1);
+    }
+  }
+
+  @keyframes path-dash {
+    from {
+      stroke-dashoffset: var(--dash-offset-from, 0);
+    }
+    to {
+      stroke-dashoffset: var(--dash-offset-to, 0);
+    }
+  }
+
+  @keyframes fade-down-out {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translateY(-2rem);
+    }
+  }
+
+  @keyframes blur-in {
+    from {
+      filter: blur(1rem);
+    }
+
+    to {
+      filter: blur(0);
+    }
+  }
+
+  @keyframes rippling {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      transform: scale(2);
+      opacity: 0;
+    }
+  }
+
+  @keyframes toast-exit-right {
+    from {
+      opacity: 1;
+      transform: translate3d(var(--reka-toast-swipe-end-x, 0), 0, 0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translate3d(calc(100% + 24px), 0, 0);
+    }
+  }
+
+  @keyframes toast-exit-left {
+    from {
+      opacity: 1;
+      transform: translate3d(var(--reka-toast-swipe-end-x, 0), 0, 0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translate3d(calc(-100% - 24px), 0, 0);
+    }
+  }
+
+  @keyframes toast-exit-top {
+    from {
+      opacity: 1;
+      transform: translate3d(0, var(--reka-toast-swipe-end-y, 0), 0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translate3d(0, calc(-100% - 24px), 0);
+    }
+  }
+
+  @keyframes toast-exit-bottom {
+    from {
+      opacity: 1;
+      transform: translate3d(0, var(--reka-toast-swipe-end-y, 0), 0);
+    }
+
+    to {
+      opacity: 0;
+      transform: translate3d(0, calc(100% + 24px), 0);
+    }
+  }
+
+  @keyframes skeleton-wave {
+    to {
+      background-position-x: -200%;
+    }
+  }
+
+  @keyframes spin {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes fade-scale-in {
+    from {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes fade-scale-out {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+  }
+
+  @keyframes backdrop-blur-in {
+    from {
+      backdrop-filter: blur(0);
+    }
+    to {
+      backdrop-filter: blur(.3125rem);
+    }
+  }
+  @keyframes backdrop-blur-out {
+    from {
+      backdrop-filter: blur(.3125rem);
+    }
+    to {
+      backdrop-filter: blur(0);
+    }
+  }
+}
+
+@utility animate-check-dash {
+  --dash-offset-from: -50;
+  --dash-offset-to: 0;
+  stroke-dasharray: 50;
+  stroke-dashoffset: var(--dash-offset-from);
+  animation: path-dash var(--tw-duration, 150ms) var(--tw-timing, ease-out)
+    forwards;
+}
+
+@utility animate-indeterminate-dash {
+  --dash-offset-from: 50;
+  --dash-offset-to: 0;
+  stroke-dasharray: 50;
+  stroke-dashoffset: var(--dash-offset-from);
+  animation: path-dash var(--tw-duration, 150ms) linear forwards;
+}

package/src/css/index.css

@@ -0,0 +1,2 @@
+@import './animations.css';
+@import './static.css';

package/src/css/static.css

@@ -0,0 +1,31 @@
+@theme static {
+  /* z-indexes */
+  --z-base: 0;
+  --z-sticky: 10;
+  --z-dropdown: 50;
+  --z-tooltip: 100;
+  --z-fixed: 200;
+  --z-overlay: 900;
+  --z-modal: 1000;
+  --z-popover: 1100;
+  --z-toast: 1500;
+  --z-loading: 2000;
+  --z-devtools: 9999;
+  --z-max: 2147483647;
+}
+
+@utility overflow-anchor-none {
+  overflow-anchor: none;
+}
+
+@utility overflow-anchor-auto {
+  overflow-anchor: auto;
+}
+
+@utility scrollbar-none {
+  scrollbar-width: none; /* Firefox */
+  &::-webkit-scrollbar {
+    display: none; /* Chrome / Safari */
+  }
+}
+

package/src/default/crafts/badge.ts

@@ -0,0 +1,56 @@
+import type { VariantProps } from '../../utils'
+import { tv } from '../../utils'
+
+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 '../../utils'
+import { tv } from '../../utils'
+
+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 '../../utils'
+import { tv } from '../../utils'
+
+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>