@jerry-fd/ui 0.2.0 → 0.3.1

package/index.d.ts

@@ -1,11 +1,24 @@
-import React from 'react';
+import React$1 from 'react';
+import * as tailwind_variants from 'tailwind-variants';
+import { VariantProps } from 'tailwind-variants';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { B as Button, b as baseButtonStyle, a as buttonVariants } from './button-nn_s6In3.js';
+import { I as IconType } from './icon-Byr-7UQX.js';
+import { DropdownMenu as DropdownMenu$2 } from 'radix-ui';
+import * as tailwind_merge from 'tailwind-merge';
+import { Command as Command$1 } from 'cmdk';
 
 type UILocale = (typeof SUPPORTED_LOCALES)[number];
 declare const SUPPORTED_LOCALES: readonly ["en-US", "zh-CN"];
 
-declare const UIProvider: React.FC<React.PropsWithChildren & {
+interface UIState {
+    tableUiStorageKey?: string;
+}
+type UIProviderProps = React$1.PropsWithChildren<UIState & {
     locale?: UILocale;
+    onChange?: (state: UIState) => void;
 }>;
+declare const UIProvider: React$1.FC<UIProviderProps>;
 
 declare const dateUtils: {
     readonly presets: {
@@ -28,4 +41,309 @@ declare const dateUtils: {
     };
 };
 
-export { UIProvider, dateUtils };
+type InputValue = number | bigint | Intl.StringNumericLiteral;
+/**
+ * 格式化整数，添加千位分隔符
+ * @example formatNumber(12345678) => "12,345,678"
+ */
+declare function formatNumber(value: InputValue, options?: Intl.NumberFormatOptions, locale?: string): string;
+/**
+ * 格式化货币
+ * @example formatCurrency(1234.5, { currency: 'CNY' }) => "¥1,234.50"
+ * @example formatCurrency(1234.5, { currency: 'USD' }, 'en-US') => "$1,234.50"
+ */
+declare function formatCurrency(value: InputValue, options?: Omit<Intl.NumberFormatOptions, 'style'>, locale?: string): string;
+/**
+ * 格式化整数为紧凑形式（K/M 后缀）
+ * @example formatIntegerCompact(1234) => "1,2K"
+ * @example formatIntegerCompact(1234567) => "1,2M"
+ */
+declare function formatIntegerCompact(value: InputValue, locale?: string): string;
+/**
+ * 获取短语的首字母缩写
+ * @example getFirstLetters("Hello World") => "HW"
+ * @example getFirstLetters("GitHub Copilot", 2) => "GC"
+ */
+declare const getFirstLetters: (phrase: string, count?: number) => string;
+
+declare const twMergeConfig: {
+    extend: {
+        classGroups: {
+            'font-size': {
+                text: string[];
+            }[];
+            'ui-badge': {
+                ui: string[];
+            }[];
+        };
+        conflictingClassGroups: {
+            'ui-badge': readonly ["bg-color", "text-color", "border-color"];
+        };
+    };
+};
+declare const tv: tailwind_variants.TV;
+declare const cn: (...classes: ClassNameArray) => string;
+
+declare const cardVariants: tailwind_variants.TVReturnType<{
+    variant: {
+        default: string;
+        accent: string;
+    };
+}, undefined, "flex flex-col items-stretch rounded-xl text-paragraph-sm", {
+    variant: {
+        default: string;
+        accent: string;
+    };
+}, undefined, tailwind_variants.TVReturnType<{
+    variant: {
+        default: string;
+        accent: string;
+    };
+}, undefined, "flex flex-col items-stretch rounded-xl text-paragraph-sm", unknown, unknown, undefined>>;
+declare function Card({ className, variant, ...props }: React$1.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function CardContent({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function CardExtra({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function CardTable({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function CardFooter({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function CardHeading({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function CardToolbar({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ className, ...props }: React$1.HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+declare function CardIcon({ className, ...props }: React$1.HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+
+type IValue = string | number;
+interface IOptionItem {
+    key?: React.Key;
+    label: string;
+    icon?: React.ReactNode;
+    value: IValue;
+    disabled?: boolean;
+}
+
+declare const DropdownMenu$1: React$1.FC<DropdownMenu$2.DropdownMenuProps>;
+declare const DropdownMenuContent: React$1.FC<React$1.ComponentPropsWithRef<typeof DropdownMenu$2.Content>>;
+
+type DropdownMenuContentProps = React$1.ComponentProps<typeof DropdownMenuContent>;
+type DropdownMenuPrimitiveProps = React$1.ComponentProps<typeof DropdownMenu$1>;
+type SetValue<T> = React$1.Dispatch<React$1.SetStateAction<T>> | ((data: T) => void);
+interface BaseMenuItem {
+    key?: React$1.Key;
+    label?: string | React$1.ReactNode;
+    icon?: IconType;
+    to?: string;
+    separator?: boolean;
+    className?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    inset?: boolean;
+    destructive?: boolean;
+    items?: DropdownMenuItemProps[];
+}
+interface RadioMenuItem extends BaseMenuItem {
+    groupType: 'radio';
+    value?: IValue;
+    options: IOptionItem[];
+    items?: never;
+    onValueChange?: SetValue<IValue>;
+}
+interface CheckboxMenuItem extends BaseMenuItem {
+    groupType: 'checkbox';
+    value?: IValue[];
+    options: IOptionItem[];
+    items?: never;
+    onValueChange?: SetValue<IValue[]>;
+}
+interface NormalMenuItem extends BaseMenuItem {
+    groupType?: 'item' | undefined;
+    value?: never;
+    onValueChange?: never;
+}
+type DropdownMenuItemProps = RadioMenuItem | CheckboxMenuItem | NormalMenuItem;
+interface MenuPropBase {
+    menuLabel?: React$1.ReactNode;
+    items?: DropdownMenuItemProps[];
+    disabled?: boolean;
+    className?: string;
+    renderItem?: (item: DropdownMenuItemProps, index: number, onAction: MenuPropBase['onAction']) => React$1.ReactNode;
+    onAction?: (item: DropdownMenuItemProps, event: React$1.MouseEvent<HTMLDivElement>) => void;
+}
+interface DropdownMenuProps extends DropdownMenuPrimitiveProps, DropdownMenuContentProps, MenuPropBase {
+}
+declare const DropdownMenu: React$1.FC<DropdownMenuProps>;
+
+declare const menu: tailwind_variants.TVReturnType<{
+    inset: {
+        true: {
+            trigger: string;
+            item: string;
+            label: string;
+        };
+    };
+    destructive: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    content: string[];
+    trigger: string[];
+    item: string[];
+    checkbox: string[];
+    label: string;
+    separator: string;
+    shortcut: string;
+    arrow: string;
+    icon: string;
+    check: string;
+}, undefined, {
+    inset: {
+        true: {
+            trigger: string;
+            item: string;
+            label: string;
+        };
+    };
+    destructive: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    content: string[];
+    trigger: string[];
+    item: string[];
+    checkbox: string[];
+    label: string;
+    separator: string;
+    shortcut: string;
+    arrow: string;
+    icon: string;
+    check: string;
+}, tailwind_variants.TVReturnType<{
+    inset: {
+        true: {
+            trigger: string;
+            item: string;
+            label: string;
+        };
+    };
+    destructive: {
+        true: {
+            item: string;
+        };
+    };
+}, {
+    content: string[];
+    trigger: string[];
+    item: string[];
+    checkbox: string[];
+    label: string;
+    separator: string;
+    shortcut: string;
+    arrow: string;
+    icon: string;
+    check: string;
+}, undefined, unknown, unknown, undefined>>;
+declare const dropdownMenuStyles: {
+    content: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    trigger: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    item: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    checkbox: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    label: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    separator: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    shortcut: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    arrow: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    icon: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    check: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+} & {
+    content: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    trigger: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    item: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    checkbox: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    label: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    separator: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    shortcut: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    arrow: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    icon: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+    check: (slotProps?: ({
+        inset?: boolean | undefined;
+        destructive?: boolean | undefined;
+    } & tailwind_variants.ClassProp<tailwind_merge.ClassNameValue>) | undefined) => string;
+} & {};
+type DropdownMenuVariants = VariantProps<typeof menu>;
+
+declare function Command({ className, ...props }: React$1.ComponentProps<typeof Command$1>): react_jsx_runtime.JSX.Element;
+declare function CommandInput({ className, ...props }: React$1.ComponentProps<typeof Command$1.Input>): react_jsx_runtime.JSX.Element;
+declare function CommandList({ className, ...props }: React$1.ComponentProps<typeof Command$1.List>): react_jsx_runtime.JSX.Element;
+declare function CommandEmpty({ ...props }: React$1.ComponentProps<typeof Command$1.Empty>): react_jsx_runtime.JSX.Element;
+declare function CommandGroup({ className, ...props }: React$1.ComponentProps<typeof Command$1.Group>): react_jsx_runtime.JSX.Element;
+declare function CommandSeparator({ className, ...props }: React$1.ComponentProps<typeof Command$1.Separator>): react_jsx_runtime.JSX.Element;
+declare function CommandItem({ className, ...props }: React$1.ComponentProps<typeof Command$1.Item>): react_jsx_runtime.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
+
+type Variant = 'slate' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose';
+type ColorPanelProps = React$1.ComponentProps<'div'> & {
+    asChild?: boolean;
+    variant?: Variant;
+};
+declare function ColorPanel({ asChild, children, className, variant, ...props }: ColorPanelProps): react_jsx_runtime.JSX.Element;
+
+export { Card, CardContent, CardDescription, CardExtra, CardFooter, CardHeader, CardHeading, CardIcon, CardTable, CardTitle, CardToolbar, ColorPanel, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DropdownMenu, type DropdownMenuItemProps, type DropdownMenuProps, type DropdownMenuVariants, type MenuPropBase, Card as Root, UIProvider, cn, dateUtils, dropdownMenuStyles, formatCurrency, formatIntegerCompact, formatNumber, getFirstLetters, tv, twMergeConfig };

package/index.js

@@ -1 +1 @@
-import {a}from'./chunk-75LTHX75.js';export{c as dateUtils}from'./chunk-75LTHX75.js';import {LazyMotion}from'motion/react';import {jsx}from'react/jsx-runtime';var c=()=>import('./motion-features-PPUUMXEA.js').then(o=>o.default),t=({children:o,locale:a$1="zh-CN"})=>jsx(LazyMotion,{features:c,strict:true,children:jsx(a,{locale:a$1,children:o})});t.displayName="UIProvider";export{t as UIProvider};
+export{b as DropdownMenu,a as dropdownMenuStyles}from'./chunk-TQSM6RF4.js';import {a,f}from'./chunk-TYGCMNMU.js';export{t as Button,g as Card,i as CardContent,q as CardDescription,j as CardExtra,l as CardFooter,h as CardHeader,m as CardHeading,p as CardIcon,k as CardTable,o as CardTitle,n as CardToolbar,B as Command,E as CommandEmpty,F as CommandGroup,C as CommandInput,H as CommandItem,D as CommandList,G as CommandSeparator,I as CommandShortcut,g as Root,r as baseButtonStyle,s as buttonVariants,f as cn,c as dateUtils,e as tv,d as twMergeConfig}from'./chunk-TYGCMNMU.js';import {LazyMotion}from'motion/react';import i from'react';import {jsx}from'react/jsx-runtime';import {Slot}from'radix-ui';var v=()=>import('./motion-features-PPUUMXEA.js').then(t=>t.default),c=Symbol.for("@@jerry-fe/ui/UIProviderContext");function P(){if(!globalThis[c]){let t=i.createContext(null);globalThis[c]=t;}return globalThis[c]}var S=P(),x=({children:t,locale:r="zh-CN",tableUiStorageKey:e="APP_UI_TABLE_CONFIG",onChange:n})=>{let[o,a$1]=i.useState(()=>({tableUiStorageKey:e})),l=i.useCallback(s=>{a$1(U=>{let u=typeof s=="function"?s(U):s;return n?.(u),u});},[n]);i.useEffect(()=>{a$1({tableUiStorageKey:e});},[e]);let d=i.useMemo(()=>({state:o,setState:l}),[o,l]);return jsx(LazyMotion,{features:v,strict:true,children:jsx(S.Provider,{value:d,children:jsx(a,{locale:r,children:t})})})};x.displayName="UIProvider";var C=new WeakMap;function I(t){return((...r)=>{let e=C.get(t),n=r.map(String).join("_");if(e){let a=e.get(n);if(a)return a}else e=new Map,C.set(t,e);let o=t(...r);return e.set(n,o),o})}function at(t,r,e="zh-CN"){return new Intl.NumberFormat(e,r).format(t)}function it(t,r,e="zh-CN"){return new Intl.NumberFormat(e,{style:"currency",...r}).format(t)}function st(t,r="en-US"){return new Intl.NumberFormat(r,{notation:"compact",compactDisplay:"short"}).format(t)}var ct=I((t,r=2)=>t.replace(/[.,!@#$%^&*()_+=\-`~[\]/\\{}:"|<>?]+/gi,"").trim().split(/\s+/).slice(0,r).map(e=>{if(!e.length)return "";if(/\s+/.test(t))return e.match(/./u)?.[0].toUpperCase();let n=new RegExp(".".repeat(r),"u"),o=e.match(n)?.[0];return o?o.charAt(0).toUpperCase()+o.slice(1):t.charAt(0).toUpperCase()+t.slice(1,2)}).join(""));function xt({asChild:t,children:r,className:e,variant:n="slate",...o}){let a=t?Slot.Root:"div";return jsx(a,{className:f(`flex shrink-0 items-center justify-center rounded-xl border ui-badge-${n}`,e),...o,children:r})}export{xt as ColorPanel,x as UIProvider,it as formatCurrency,st as formatIntegerCompact,at as formatNumber,ct as getFirstLetters};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jerry-fd/ui",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "UI component library based on Ant Design (Client-side only)",
   "type": "module",
   "sideEffects": ["index.js", "*.css"],
@@ -18,9 +18,14 @@
     "./antd-data-table": {
       "types": "./antd-data-table.d.ts",
       "import": "./antd-data-table.js"
-    }
+    },
+    "./theme": "./theme/index.css",
+    "./theme/colors": "./theme/colors.css",
+    "./theme/typography": "./theme/typography.css",
+    "./theme/shadows": "./theme/shadows.css",
+    "./theme/badge": "./theme/badge.css"
   },
-  "files": ["*.js", "*.d.ts", "*.d.cts", "*.css"],
+  "files": ["*.js", "*.d.ts", "*.d.cts", "*.css", "theme/**/*.css"],
   "keywords": ["react", "antd", "filter", "data-filter", "table-filter", "client-side"],
   "author": "jerry.fd",
   "license": "MIT",
@@ -29,7 +34,10 @@
     "react-dom": ">=18",
     "antd": ">=5.0.0",
     "dayjs": ">=1.11.0",
-    "tailwindcss": ">=4.1.18"
+    "tailwindcss": ">=4.1.18",
+    "zustand": "^5.0.11",
+    "lucide-react": "^0.563.0",
+    "immer": "^11.1.3"
   },
   "dependencies": {
     "cmdk": "^1.1.1",
@@ -37,6 +45,7 @@
     "radix-ui": "^1.4.3",
     "react-use-measure": "^2.1.7",
     "tailwind-merge": "^3.4.0",
-    "tailwind-variants": "^3.2.2"
+    "tailwind-variants": "^3.2.2",
+    "tw-animate-css": "^1.4.0"
   }
 }

package/theme/badge.css

@@ -0,0 +1,215 @@
+/**
+ * Badge Color Preset
+ *
+ * Usage:
+ *   @import '@jerry-fd/ui/preset/badge';
+ *
+ * Naming convention:
+ * - Variables: --badge-{color}-bg, --badge-{color}-border, --badge-{color}-text
+ * - Utilities: ui-badge-{color}
+ *
+ * Color mapping (from shadcn/ui):
+ * - background: {color}-50
+ * - border: {color}-200
+ * - text: {color}-500
+ */
+
+@theme {
+    /* Slate Badge */
+    --badge-slate-bg: hsl(210deg, 40%, 98%);
+    --badge-slate-border: hsl(214.3deg, 31.8%, 91.4%);
+    --badge-slate-text: hsl(215.4deg, 16.3%, 46.9%);
+
+    /* Red Badge */
+    --badge-red-bg: hsl(0deg, 85.7%, 97.3%);
+    --badge-red-border: hsl(0deg, 96.3%, 89.4%);
+    --badge-red-text: hsl(0deg, 84.2%, 60.2%);
+
+    /* Orange Badge */
+    --badge-orange-bg: hsl(33.3deg, 100%, 96.5%);
+    --badge-orange-border: hsl(32.1deg, 97.7%, 83.1%);
+    --badge-orange-text: hsl(24.6deg, 95%, 53.1%);
+
+    /* Amber Badge */
+    --badge-amber-bg: hsl(48deg, 100%, 96.1%);
+    --badge-amber-border: hsl(48deg, 96.6%, 76.7%);
+    --badge-amber-text: hsl(37.7deg, 92.1%, 50.2%);
+
+    /* Yellow Badge */
+    --badge-yellow-bg: hsl(54.5deg, 91.7%, 95.3%);
+    --badge-yellow-border: hsl(52.8deg, 98.3%, 76.9%);
+    --badge-yellow-text: hsl(45.4deg, 93.4%, 47.5%);
+
+    /* Lime Badge */
+    --badge-lime-bg: hsl(78.3deg, 92%, 95.1%);
+    --badge-lime-border: hsl(80.9deg, 88.5%, 79.6%);
+    --badge-lime-text: hsl(83.7deg, 80.5%, 44.3%);
+
+    /* Green Badge */
+    --badge-green-bg: hsl(138.5deg, 76.5%, 96.7%);
+    --badge-green-border: hsl(141deg, 78.9%, 85.1%);
+    --badge-green-text: hsl(142.1deg, 70.6%, 45.3%);
+
+    /* Emerald Badge */
+    --badge-emerald-bg: hsl(151.8deg, 81%, 95.9%);
+    --badge-emerald-border: hsl(152.4deg, 76%, 80.4%);
+    --badge-emerald-text: hsl(160.1deg, 84.1%, 39.4%);
+
+    /* Teal Badge */
+    --badge-teal-bg: hsl(166.2deg, 76.5%, 96.7%);
+    --badge-teal-border: hsl(168.4deg, 83.8%, 78.2%);
+    --badge-teal-text: hsl(173.4deg, 80.4%, 40%);
+
+    /* Cyan Badge */
+    --badge-cyan-bg: hsl(183.2deg, 100%, 96.3%);
+    --badge-cyan-border: hsl(186.2deg, 93.5%, 81.8%);
+    --badge-cyan-text: hsl(188.7deg, 94.5%, 42.7%);
+
+    /* Sky Badge */
+    --badge-sky-bg: hsl(204deg, 100%, 97.1%);
+    --badge-sky-border: hsl(200.6deg, 94.4%, 86.1%);
+    --badge-sky-text: hsl(198.6deg, 88.7%, 48.4%);
+
+    /* Blue Badge */
+    --badge-blue-bg: hsl(213.8deg, 100%, 96.9%);
+    --badge-blue-border: hsl(213.3deg, 96.9%, 87.3%);
+    --badge-blue-text: hsl(217.2deg, 91.2%, 59.8%);
+
+    /* Indigo Badge */
+    --badge-indigo-bg: hsl(225.9deg, 100%, 96.7%);
+    --badge-indigo-border: hsl(228deg, 96.5%, 88.8%);
+    --badge-indigo-text: hsl(238.7deg, 83.5%, 66.7%);
+
+    /* Violet Badge */
+    --badge-violet-bg: hsl(250deg, 100%, 97.6%);
+    --badge-violet-border: hsl(250.5deg, 95.2%, 91.8%);
+    --badge-violet-text: hsl(258.3deg, 89.5%, 66.3%);
+
+    /* Purple Badge */
+    --badge-purple-bg: hsl(270deg, 100%, 98%);
+    --badge-purple-border: hsl(268.6deg, 100%, 91.8%);
+    --badge-purple-text: hsl(270.7deg, 91%, 65.1%);
+
+    /* Fuchsia Badge */
+    --badge-fuchsia-bg: hsl(289.1deg, 100%, 97.8%);
+    --badge-fuchsia-border: hsl(288.3deg, 95.8%, 90.6%);
+    --badge-fuchsia-text: hsl(292.2deg, 84.1%, 60.6%);
+
+    /* Pink Badge */
+    --badge-pink-bg: hsl(327.3deg, 73.3%, 97.1%);
+    --badge-pink-border: hsl(325.9deg, 84.6%, 89.8%);
+    --badge-pink-text: hsl(330.4deg, 81.2%, 60.4%);
+
+    /* Rose Badge */
+    --badge-rose-bg: hsl(355.7deg, 100%, 97.3%);
+    --badge-rose-border: hsl(352.7deg, 96.1%, 90%);
+    --badge-rose-text: hsl(349.7deg, 89.2%, 60.2%);
+}
+
+@utility ui-badge-slate {
+    color: var(--badge-slate-text);
+    border-color: var(--badge-slate-border);
+    background-color: var(--badge-slate-bg);
+}
+
+@utility ui-badge-red {
+    color: var(--badge-red-text);
+    border-color: var(--badge-red-border);
+    background-color: var(--badge-red-bg);
+}
+
+@utility ui-badge-orange {
+    color: var(--badge-orange-text);
+    border-color: var(--badge-orange-border);
+    background-color: var(--badge-orange-bg);
+}
+
+@utility ui-badge-amber {
+    color: var(--badge-amber-text);
+    border-color: var(--badge-amber-border);
+    background-color: var(--badge-amber-bg);
+}
+
+@utility ui-badge-yellow {
+    color: var(--badge-yellow-text);
+    border-color: var(--badge-yellow-border);
+    background-color: var(--badge-yellow-bg);
+}
+
+@utility ui-badge-lime {
+    color: var(--badge-lime-text);
+    border-color: var(--badge-lime-border);
+    background-color: var(--badge-lime-bg);
+}
+
+@utility ui-badge-green {
+    color: var(--badge-green-text);
+    border-color: var(--badge-green-border);
+    background-color: var(--badge-green-bg);
+}
+
+@utility ui-badge-emerald {
+    color: var(--badge-emerald-text);
+    border-color: var(--badge-emerald-border);
+    background-color: var(--badge-emerald-bg);
+}
+
+@utility ui-badge-teal {
+    color: var(--badge-teal-text);
+    border-color: var(--badge-teal-border);
+    background-color: var(--badge-teal-bg);
+}
+
+@utility ui-badge-cyan {
+    color: var(--badge-cyan-text);
+    border-color: var(--badge-cyan-border);
+    background-color: var(--badge-cyan-bg);
+}
+
+@utility ui-badge-sky {
+    color: var(--badge-sky-text);
+    border-color: var(--badge-sky-border);
+    background-color: var(--badge-sky-bg);
+}
+
+@utility ui-badge-blue {
+    color: var(--badge-blue-text);
+    border-color: var(--badge-blue-border);
+    background-color: var(--badge-blue-bg);
+}
+
+@utility ui-badge-indigo {
+    color: var(--badge-indigo-text);
+    border-color: var(--badge-indigo-border);
+    background-color: var(--badge-indigo-bg);
+}
+
+@utility ui-badge-violet {
+    color: var(--badge-violet-text);
+    border-color: var(--badge-violet-border);
+    background-color: var(--badge-violet-bg);
+}
+
+@utility ui-badge-purple {
+    color: var(--badge-purple-text);
+    border-color: var(--badge-purple-border);
+    background-color: var(--badge-purple-bg);
+}
+
+@utility ui-badge-fuchsia {
+    color: var(--badge-fuchsia-text);
+    border-color: var(--badge-fuchsia-border);
+    background-color: var(--badge-fuchsia-bg);
+}
+
+@utility ui-badge-pink {
+    color: var(--badge-pink-text);
+    border-color: var(--badge-pink-border);
+    background-color: var(--badge-pink-bg);
+}
+
+@utility ui-badge-rose {
+    color: var(--badge-rose-text);
+    border-color: var(--badge-rose-border);
+    background-color: var(--badge-rose-bg);
+}