react-sxo 0.0.0

package/README.md

@@ -0,0 +1,15 @@
+# react-sxo
+
+SXO 设计系统的 React 适配器。
+
+## 安装
+
+```bash
+pnpm add react-sxo @sxo/ui @sxo/engine @sxo/design
+```
+
+## 功能
+
+- **React Hooks**: 提供易用的 Hooks 接口。
+- **性能优化**: 针对 React 渲染机制进行优化。
+- **类型安全**: 完整的 TS 支持。

package/dist/components/Accordion.d.ts

@@ -0,0 +1,15 @@
+import { AccordionOptions as UIProps } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface AccordionProps extends UIProps {
+    allowMultiple?: boolean;
+    defaultExpanded?: string[];
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Accordion: React.FC<AccordionProps>;
+export declare const AccordionItem: React.FC<{
+    value: string;
+    title: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}>;

package/dist/components/Alert.d.ts

@@ -0,0 +1,11 @@
+import { AlertOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface AlertProps extends AlertOptions, React.HTMLAttributes<HTMLDivElement> {
+    title?: string;
+    description?: string;
+    closable?: boolean;
+    showIcon?: boolean;
+    onClose?: (e: React.MouseEvent) => void;
+    icon?: React.ReactNode;
+}
+export declare const Alert: React.FC<AlertProps>;

package/dist/components/Avatar.d.ts

@@ -0,0 +1,9 @@
+import { AvatarOptions as UIProps } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface AvatarProps extends UIProps {
+    src?: string;
+    alt?: string;
+    fallback?: string;
+    className?: string;
+}
+export declare const Avatar: React.FC<AvatarProps>;

package/dist/components/BackTop.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface BackTopProps {
+    visibilityHeight?: number;
+    right?: number;
+    bottom?: number;
+    className?: string;
+    children?: React.ReactNode;
+}
+export declare const BackTop: React.FC<BackTopProps>;

package/dist/components/Badge.d.ts

@@ -0,0 +1,5 @@
+import { BadgeOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface BadgeProps extends BadgeOptions, React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare const Badge: React.FC<BadgeProps>;

package/dist/components/Box.d.ts

@@ -0,0 +1,23 @@
+import { default as React } from 'react';
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    as?: React.ElementType;
+    className?: string;
+    p?: string | number;
+    padding?: string | number;
+    m?: string | number;
+    margin?: string | number;
+    bg?: string;
+    text?: string;
+    rounded?: string;
+    shadow?: string;
+    w?: string | number;
+    h?: string | number;
+    display?: string;
+    flex?: string | number | boolean;
+    grid?: string | number | boolean;
+}
+/**
+ * Box 组件是 SXO 的原子组件
+ * 它允许你直接在 className 中使用 sxo-engine 的原子类
+ */
+export declare const Box: React.FC<BoxProps>;

package/dist/components/Breadcrumb.d.ts

@@ -0,0 +1,11 @@
+import { BreadcrumbOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface BreadcrumbItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    href?: string;
+    current?: boolean;
+}
+export declare const BreadcrumbItem: React.FC<BreadcrumbItemProps>;
+export interface BreadcrumbProps extends BreadcrumbOptions, React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+}
+export declare const Breadcrumb: React.FC<BreadcrumbProps>;

package/dist/components/Button.d.ts

@@ -0,0 +1,6 @@
+import { ButtonOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface ButtonProps extends ButtonOptions, React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+}
+export declare const Button: React.FC<ButtonProps>;

package/dist/components/Card.d.ts

@@ -0,0 +1,6 @@
+import { CardOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface CardProps extends CardOptions, React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export declare const Card: React.FC<CardProps>;

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,24 @@
+import { CheckboxOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface CheckboxGroupProps {
+    value?: any[];
+    defaultValue?: any[];
+    onChange?: (value: any[]) => void;
+    direction?: "row" | "col";
+    gap?: string | number;
+    size?: "sm" | "md" | "lg";
+    color?: "primary" | "success";
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const CheckboxGroup: React.FC<CheckboxGroupProps>;
+export interface CheckboxProps extends CheckboxOptions {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    value?: any;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;

package/dist/components/CommandPalette.d.ts

@@ -0,0 +1,8 @@
+import { Command } from '../../../../packages/design/src';
+import { default as React } from 'react';
+export interface CommandPaletteProps {
+    isOpen: boolean;
+    onClose: () => void;
+    commands?: Command[];
+}
+export declare const CommandPalette: React.FC<CommandPaletteProps>;

package/dist/components/Dialog.d.ts

@@ -0,0 +1,12 @@
+import { DialogStylesOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface DialogProps extends DialogStylesOptions {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    description?: string;
+    children?: React.ReactNode;
+    footer?: React.ReactNode;
+    isDraggable?: boolean;
+}
+export declare const Dialog: React.FC<DialogProps>;

package/dist/components/Divider.d.ts

@@ -0,0 +1,6 @@
+import { DividerOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface DividerProps extends DividerOptions, React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export declare const Divider: React.FC<DividerProps>;

package/dist/components/Dropdown.d.ts

@@ -0,0 +1,19 @@
+import { DropdownOptions as UIProps } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface DropdownItemProps {
+    disabled?: boolean;
+    active?: boolean;
+    divider?: boolean;
+    header?: string;
+    children?: React.ReactNode;
+    className?: string;
+    onClick?: (e: React.MouseEvent) => void;
+}
+export declare const DropdownItem: React.FC<DropdownItemProps>;
+export interface DropdownProps extends UIProps {
+    trigger?: 'click' | 'hover';
+    overlay: React.ReactNode;
+    children: React.ReactElement;
+    className?: string;
+}
+export declare const Dropdown: React.FC<DropdownProps>;

package/dist/components/Empty.d.ts

@@ -0,0 +1,8 @@
+import { EmptyOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface EmptyProps extends EmptyOptions, React.HTMLAttributes<HTMLDivElement> {
+    description?: React.ReactNode;
+    image?: React.ReactNode;
+    extra?: React.ReactNode;
+}
+export declare const Empty: React.FC<EmptyProps>;

package/dist/components/Form.d.ts

@@ -0,0 +1,15 @@
+import { ValidationRule } from '../../../../packages/design/src';
+import { default as React } from 'react';
+export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+    initialValues: Record<string, any>;
+    rules?: Record<string, ValidationRule[]>;
+    onSubmit?: (values: Record<string, any>) => void;
+}
+export declare const Form: React.FC<FormProps>;
+export interface FormItemProps {
+    name?: string;
+    label?: string;
+    children?: React.ReactNode;
+}
+export declare const FormItem: React.FC<FormItemProps>;
+export declare function useFormContext(): any;

package/dist/components/Icon.d.ts

@@ -0,0 +1,7 @@
+import { default as React } from 'react';
+import { IconProps as BaseIconProps } from '../../../../packages/component-icons/src';
+export interface IconProps extends Omit<BaseIconProps, 'className'> {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const Icon: React.FC<IconProps>;

package/dist/components/Input.d.ts

@@ -0,0 +1,5 @@
+import { InputOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface InputProps extends InputOptions, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+}
+export declare const Input: React.FC<InputProps>;

package/dist/components/Layout.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+export type Responsive<T> = T | {
+    base?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+    '2xl'?: T;
+};
+export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction?: Responsive<'row' | 'col'>;
+    gap?: Responsive<string | number>;
+    align?: Responsive<'start' | 'center' | 'end' | 'baseline' | 'stretch'>;
+    justify?: Responsive<'start' | 'center' | 'end' | 'between' | 'around' | 'evenly'>;
+    wrap?: Responsive<boolean>;
+}
+export declare const Stack: React.FC<StackProps>;
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+    cols?: Responsive<number>;
+    rows?: Responsive<number>;
+    gap?: Responsive<string | number>;
+    className?: string;
+}
+export declare const Grid: React.FC<GridProps>;
+export interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    center?: boolean;
+}
+export declare const Container: React.FC<ContainerProps>;

package/dist/components/Menu.d.ts

@@ -0,0 +1,13 @@
+import { MenuOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface MenuItem {
+    id: string;
+    label: string;
+    onClick?: () => void;
+}
+export interface MenuProps extends MenuOptions {
+    label: React.ReactNode;
+    items: MenuItem[];
+    className?: string;
+}
+export declare const Menu: React.FC<MenuProps>;

package/dist/components/Pagination.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { PaginationOptions } from '../../../../packages/ui/src';
+export interface PaginationProps extends PaginationOptions {
+    total: number;
+    pageSize: number;
+    current: number;
+    onChange?: (page: number) => void;
+    className?: string;
+    showTotal?: boolean;
+    showJumper?: boolean;
+}
+export declare const Pagination: React.FC<PaginationProps>;

package/dist/components/Radio.d.ts

@@ -0,0 +1,19 @@
+import { RadioOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface RadioGroupProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    name?: string;
+    size?: 'sm' | 'md' | 'lg';
+    color?: 'primary' | 'success';
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const RadioGroup: React.FC<RadioGroupProps>;
+export interface RadioProps extends RadioOptions {
+    value: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const Radio: React.FC<RadioProps>;

package/dist/components/Result.d.ts

@@ -0,0 +1,9 @@
+import { ResultOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface ResultProps extends ResultOptions, React.HTMLAttributes<HTMLDivElement> {
+    title?: React.ReactNode;
+    subTitle?: React.ReactNode;
+    extra?: React.ReactNode;
+    icon?: React.ReactNode;
+}
+export declare const Result: React.FC<ResultProps>;

package/dist/components/Search.d.ts

@@ -0,0 +1,10 @@
+import { SearchOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface SearchProps extends SearchOptions, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+    value?: string;
+    onChange?: (value: string) => void;
+    onSearch?: (value: string) => void;
+    onClear?: () => void;
+    loading?: boolean;
+}
+export declare const Search: React.FC<SearchProps>;

package/dist/components/Select.d.ts

@@ -0,0 +1,19 @@
+import { SelectOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface SelectProps extends SelectOptions {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Select: React.FC<SelectProps>;
+export interface SelectOptionProps {
+    value: string;
+    children: React.ReactNode;
+    onSelect?: (value: string) => void;
+    isSelected?: boolean;
+}
+export declare const SelectOption: React.FC<SelectOptionProps>;

package/dist/components/Slider.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+export interface SliderProps {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    onChange?: (value: number) => void;
+    className?: string;
+}
+export declare const Slider: React.FC<SliderProps>;

package/dist/components/Switch.d.ts

@@ -0,0 +1,10 @@
+import { SwitchOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface SwitchProps extends SwitchOptions {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    className?: string;
+}
+export declare const Switch: React.FC<SwitchProps>;

package/dist/components/Table.d.ts

@@ -0,0 +1,5 @@
+import { TableOptions } from '../../../../packages/component-table/src';
+export interface TableProps<T> extends TableOptions<T> {
+    className?: string;
+}
+export declare function Table<T>({ data, columns, onRowClick, className }: TableProps<T>): any;

package/dist/components/Tabs.d.ts

@@ -0,0 +1,24 @@
+import { TabsOptions as UIProps } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface TabsProps extends UIProps {
+    defaultValue?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    children: React.ReactNode;
+    className?: string;
+}
+export declare const Tabs: React.FC<TabsProps>;
+export declare const TabList: React.FC<{
+    children: React.ReactNode;
+    className?: string;
+}>;
+export declare const Tab: React.FC<{
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+}>;
+export declare const TabPanel: React.FC<{
+    value: string;
+    children: React.ReactNode;
+    className?: string;
+}>;

package/dist/components/Tag.d.ts

@@ -0,0 +1,7 @@
+import { TagOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface TagProps extends TagOptions, React.HTMLAttributes<HTMLSpanElement> {
+    children?: React.ReactNode;
+    onClose?: () => void;
+}
+export declare const Tag: React.FC<TagProps>;

package/dist/components/Timeline.d.ts

@@ -0,0 +1,13 @@
+import { TimelineOptions } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface TimelineItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    label?: React.ReactNode;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    color?: string;
+}
+export declare const TimelineItem: React.FC<TimelineItemProps>;
+export interface TimelineProps extends TimelineOptions, React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+}
+export declare const Timeline: React.FC<TimelineProps>;

package/dist/components/Toast.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+export declare const ToastProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+export declare function useToast(): any;

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,9 @@
+import { TooltipOptions as UIProps } from '../../../../packages/ui/src';
+import { default as React } from 'react';
+export interface TooltipProps extends UIProps {
+    content: React.ReactNode;
+    children: React.ReactElement;
+    delay?: number;
+    className?: string;
+}
+export declare const Tooltip: React.FC<TooltipProps>;

package/dist/components/VirtualList.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+export interface VirtualListProps<T> {
+    items: T[];
+    itemHeight: number;
+    containerHeight?: number;
+    overscan?: number;
+    children: (item: T, index: number) => React.ReactNode;
+}
+export declare function VirtualList<T>({ items, itemHeight, containerHeight, overscan, children, }: VirtualListProps<T>): any;

package/dist/context.d.ts

@@ -0,0 +1,8 @@
+import { DesignTokens } from '../../../packages/design/src';
+import { StyleEngine } from '../../../packages/engine/src';
+export interface SxoContextValue {
+    tokens: DesignTokens;
+    engine: StyleEngine;
+}
+export declare const SxoContext: any;
+export declare function useSxo(): any;

package/dist/hooks.d.ts

@@ -0,0 +1,13 @@
+import { TokenPath } from '../../../packages/design/src';
+/**
+ * 核心 Hook：解析类名并生成样式
+ */
+export declare function useStyle(classNames: string): string;
+/**
+ * 获取当前主题下的令牌值
+ */
+export declare function useToken(path: TokenPath): string | undefined;
+/**
+ * 响应式断点 Hook
+ */
+export declare function useBreakpoint(): any;

package/dist/index.cjs

@@ -0,0 +1,13 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("@sxo/design"),r=require("react/jsx-runtime"),j=require("@sxo/ui"),m=require("react"),O=require("@sxo/component-icons"),V=require("@sxo/component-table"),A=require("@sxo/engine"),I=m.createContext(void 0);function E(){const t=m.useContext(I);if(!t)throw new Error("useSxo must be used within a SxoProvider");return t}function b(t){const{engine:o}=E(),s=m.useMemo(()=>{const e=t.split(/\s+/).filter(Boolean);return o.generateSheet(e)},[t,o]);return m.useEffect(()=>{if(s){let e=document.getElementById("sxo-engine");e||(e=document.createElement("style"),e.id="sxo-engine",document.head.appendChild(e)),e.innerHTML.includes(s)||(e.innerHTML+=s)}},[s]),t}function D(t){const{tokens:o}=E();return m.useMemo(()=>w.resolveToken(o,t),[o,t])}function R(){const{tokens:t}=E(),[o,s]=m.useState("xs"),e=m.useCallback(()=>{const n=window.innerWidth,i=Object.entries(t.breakpoints).sort((l,u)=>parseInt(u[1])-parseInt(l[1]));for(const[l,u]of i)if(n>=parseInt(u)){s(l);return}s("xs")},[t.breakpoints]);return m.useEffect(()=>(e(),window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)),[e]),o}const B=m.createContext(null),G=({children:t,allowMultiple:o=!1,defaultExpanded:s=[],variant:e="bordered",className:n=""})=>{const[i,l]=m.useState(s),u=x=>{l(p=>p.includes(x)?p.filter(f=>f!==x):o?[...p,x]:[x])},{getItemProps:d}=w.useAccordion({allowMultiple:o,defaultExpanded:s}),a=j.getAccordionClasses({variant:e});return b([a.root,a.trigger,a.triggerText,a.panel,a.item(!0),a.item(!1),a.icon(!0),a.icon(!1),n].filter(Boolean).join(" ")),r.jsx(B.Provider,{value:{expandedItems:i,toggleItem:u,getItemProps:d,styles:a},children:r.jsx("div",{className:`${a.root} ${n}`.trim(),children:t})})},z=({value:t,title:o,children:s,className:e=""})=>{const n=m.useContext(B);if(!n)throw new Error("AccordionItem must be used within Accordion");const i=n.expandedItems.includes(t),{triggerProps:l,panelProps:u}=n.getItemProps(t,n.toggleItem);return r.jsxs("div",{className:`${n.styles.item(i)} ${e}`.trim(),children:[r.jsxs("button",{...l,className:n.styles.trigger,children:[r.jsx("span",{className:n.styles.triggerText,children:o}),r.jsx("svg",{className:n.styles.icon(i),width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:r.jsx("path",{d:"m6 9 6 6 6-6"})})]}),r.jsx("div",{...u,className:n.styles.panel,children:s})]})},q=({src:t,alt:o,fallback:s,size:e="md",shape:n="circle",className:i=""})=>{const l=j.getAvatarClasses({size:e,shape:n});return b([l.root,l.image,l.fallback,i].filter(Boolean).join(" ")),r.jsx("div",{className:`${l.root} ${i}`.trim(),children:t?r.jsx("img",{src:t,alt:o,className:l.image}):r.jsx("span",{className:l.fallback,children:s||(o==null?void 0:o.charAt(0))||"?"})})},H=({variant:t="primary",className:o="",children:s,...e})=>{const n=j.getBadgeClasses({variant:t}),i=b(`${n} ${o}`.trim());return r.jsx("span",{className:i,...e,children:s})},W=({as:t="div",className:o="",children:s,...e})=>{const n={p:"p",padding:"p",m:"m",margin:"m",bg:"bg",text:"text",rounded:"rounded",shadow:"shadow",w:"w",h:"h",display:"",flex:"flex",grid:"grid"},i=[o],l={};for(const[d,a]of Object.entries(e))if(d in n){const x=n[d];x?i.push(`${x}-${a}`):i.push(String(a))}else l[d]=a;const u=b(i.filter(Boolean).join(" "));return m.createElement(t,{className:u,...l},s)},X=({variant:t,size:o,disabled:s,rounded:e,className:n,children:i,...l})=>{const u=j.getButtonClasses({variant:t,size:o,disabled:s,rounded:e}),d=b(`${u} ${n||""}`);return m.createElement("button",{className:d,disabled:s,...l},i)},U=({variant:t,padding:o,interactive:s,rounded:e,className:n,children:i,...l})=>{const u=j.getCardClasses({variant:t,padding:o,interactive:s,rounded:e}),d=b(`${u} ${n||""}`);return m.createElement("div",{className:d,...l},i)},M=m.createContext(null),F=({value:t,defaultValue:o=[],onChange:s,direction:e="col",gap:n=2,size:i="md",color:l="primary",children:u,className:d=""})=>{const[a,x]=m.useState(o),p=t!==void 0,f=p?t:a,g=h=>{const c=f.includes(h)?f.filter(v=>v!==h):[...f,h];p||x(c),s==null||s(c)};return r.jsx(M.Provider,{value:{value:f,toggleValue:g,size:i,color:l},children:r.jsx("div",{className:`flex flex-${e} gap-${n} ${d}`.trim(),children:u})})},K=({checked:t,defaultChecked:o=!1,value:s,disabled:e=!1,onChange:n,size:i,color:l,children:u,className:d=""})=>{const a=m.useContext(M),[x,p]=m.useState(o),f=t!==void 0,g=a?a.value.includes(s):f?t:x,h=i||(a==null?void 0:a.size)||"md",c=l||(a==null?void 0:a.color)||"primary",{getInputProps:v,getLabelProps:k}=w.useCheckbox({defaultChecked:g,disabled:e}),y=j.getCheckboxClasses(g,{size:h,color:c,disabled:e});b([y.root,y.icon,d].filter(Boolean).join(" "));const $=()=>{if(e)return;const N=!g;a&&s!==void 0?a.toggleValue(s):f||p(N),n==null||n(N)};return r.jsxs("label",{...k(),className:`inline-flex items-center gap-2 cursor-pointer ${e?"opacity-50 cursor-not-allowed":""} ${d}`.trim(),children:[r.jsxs("div",{className:y.root,onClick:$,children:[r.jsx("input",{...v(),className:"sr-only",readOnly:!0}),r.jsx("svg",{className:y.icon,width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:r.jsx("polyline",{points:"2 6 5 9 10 3"})})]}),u&&r.jsx("span",{className:"text-sm select-none",children:u})]})},J=({isOpen:t,onClose:o,title:s,description:e,children:n,footer:i,size:l,isCentered:u,isDraggable:d=!1})=>{const[a,x]=m.useState({x:0,y:0}),{getDialogProps:p,getOverlayProps:f,getCloseButtonProps:g}=w.useDialog({isOpen:t,onClose:o}),{getDragProps:h}=w.useDraggable({onDrag:v=>{x({x:v.x,y:v.y})}}),c=j.getDialogClasses({size:l,isCentered:u});return b(Object.values(c).join(" ")),t?m.createElement("div",{className:c.container},[m.createElement("div",{key:"overlay",...f(),className:c.overlay}),m.createElement("div",{key:"content",...p(),className:c.content,style:{transform:`translate(${a.x}px, ${a.y}px)`}},[m.createElement("button",{key:"close",...g(),className:c.closeButton},"✕"),m.createElement("div",{key:"header",className:c.header,...d?h():{}},[s&&m.createElement("h2",{key:"title",className:c.title},s),e&&m.createElement("p",{key:"desc",className:c.description},e)]),m.createElement("div",{key:"body",className:"dialog-body"},n),i&&m.createElement("div",{key:"footer",className:c.footer},i)])]):null},Q=({disabled:t=!1,active:o=!1,divider:s=!1,header:e="",children:n,className:i="",onClick:l})=>{const u=j.getDropdownClasses();return s?r.jsx("div",{className:u.divider}):e?r.jsx("div",{className:u.header,children:e}):r.jsx("div",{className:[u.item,o&&u.itemActive,t&&u.itemDisabled,i].filter(Boolean).join(" "),onClick:d=>{t||l==null||l(d)},children:n})},Y=({trigger:t="click",placement:o="bottom-left",overlay:s,children:e,className:n=""})=>{const[i,l]=m.useState(!1),u=m.useRef(null),d=j.getDropdownClasses({placement:o});b([d.container,d.menu,d.item,d.itemActive,d.itemDisabled,d.divider,d.header,n].filter(Boolean).join(" "));const a=()=>l(g=>!g),x=()=>l(!0),p=()=>l(!1);m.useEffect(()=>{if(t==="click"){const g=h=>{u.current&&!u.current.contains(h.target)&&p()};return window.addEventListener("click",g),()=>window.removeEventListener("click",g)}},[t]);const f={};return t==="hover"?(f.onMouseEnter=x,f.onMouseLeave=p):f.onClick=g=>{g.stopPropagation(),a()},r.jsxs("div",{ref:u,className:`${d.container} ${n}`.trim(),...f,children:[e,i&&r.jsx("div",{className:d.menu,onClick:g=>g.stopPropagation(),children:s})]})},Z=({name:t,size:o="1em",color:s="currentColor",strokeWidth:e=2,className:n="",style:i})=>{const l=O.Icons[t];return b(n),r.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:o,height:o,viewBox:"0 0 24 24",fill:"none",stroke:s,strokeWidth:e,strokeLinecap:"round",strokeLinejoin:"round",className:n,style:{display:"inline-block",verticalAlign:"middle",...i},children:r.jsx("path",{d:l})})},_=({variant:t="outline",size:o="md",invalid:s=!1,className:e="",...n})=>{const i=j.getInputClasses({variant:t,size:o,invalid:s}),l=b(`${i} ${e}`.trim());return r.jsx("input",{className:l,...n})};function C(t,o){if(t===void 0)return[];if(typeof t!="object"||Array.isArray(t))return[`${o}-${t}`];const s=[],e=t;return e.base!==void 0&&s.push(`${o}-${e.base}`),e.sm!==void 0&&s.push(`sm:${o}-${e.sm}`),e.md!==void 0&&s.push(`md:${o}-${e.md}`),e.lg!==void 0&&s.push(`lg:${o}-${e.lg}`),e.xl!==void 0&&s.push(`xl:${o}-${e.xl}`),e["2xl"]!==void 0&&s.push(`2xl:${o}-${e["2xl"]}`),s}const ee=({direction:t="col",gap:o=4,align:s="stretch",justify:e="start",wrap:n=!1,className:i="",children:l,...u})=>{const d=["flex",...C(t,"flex"),...C(o,"gap"),...C(s,"items"),...C(e,"justify"),...typeof n=="boolean"?[n?"flex-wrap":"flex-nowrap"]:C(n,"flex").map(a=>a.includes("true")?a.replace("-true","-wrap"):a.replace("-false","-nowrap")),i].filter(Boolean).join(" ");return b(d),r.jsx("div",{className:d,...u,children:l})},se=({cols:t=1,rows:o,gap:s=4,className:e="",children:n,...i})=>{const l=["grid",...C(t,"grid-cols"),...C(o,"grid-rows"),...C(s,"gap"),e].filter(Boolean).join(" ");return b(l),r.jsx("div",{className:l,...i,children:n})},te=({center:t=!0,className:o="",children:s,...e})=>{const n=["container",t?"mx-auto":"",o].filter(Boolean).join(" ");return b(n),r.jsx("div",{className:n,...e,children:s})},ne=({label:t,items:o,variant:s="default",className:e=""})=>{const[n,i]=m.useState(!1),{getMenuProps:l,getItemProps:u,getButtonProps:d}=w.useMenu({isOpen:n,id:"sxo-menu"}),a=j.getMenuClasses({variant:s});b(`${Object.values(a).join(" ")} ${e}`);const x=()=>i(!n);return r.jsxs("div",{className:`${a.container} ${e}`.trim(),children:[r.jsx("button",{...d(),className:a.button,onClick:x,children:t}),n&&r.jsx("div",{...l(),className:a.items,children:r.jsx("div",{className:a.section,children:o.map(p=>r.jsx("button",{...u(p.id),className:a.item,onClick:()=>{var f;(f=p.onClick)==null||f.call(p),i(!1)},children:p.label},p.id))})})]})},oe=({total:t,pageSize:o,current:s,onChange:e,className:n="",size:i="md",variant:l="outline",rounded:u=!0,showTotal:d=!1,showJumper:a=!1})=>{const x=Math.ceil(t/o),p=j.getPaginationClasses({size:i,variant:l,rounded:u});b(`${p.container} ${p.item} ${p.active} ${p.disabled} ${p.ellipsis} ${n}`);const f=c=>{c<1||c>x||c===s||e==null||e(c)},g=c=>r.jsx("li",{className:`${p.item} ${s===c?p.active:""}`.trim(),onClick:()=>f(c),children:c},c),h=()=>{const c=[];if(c.push(r.jsx("li",{className:`${p.item} ${s===1?p.disabled:""}`.trim(),onClick:()=>f(s-1),children:"<"},"prev")),x<=7)for(let v=1;v<=x;v++)c.push(g(v));else{c.push(g(1)),s>4&&c.push(r.jsx("li",{className:p.ellipsis,children:"..."},"ellipsis-prev"));const v=Math.max(2,s-2),k=Math.min(x-1,s+2);for(let y=v;y<=k;y++)c.push(g(y));s<x-3&&c.push(r.jsx("li",{className:p.ellipsis,children:"..."},"ellipsis-next")),c.push(g(x))}return c.push(r.jsx("li",{className:`${p.item} ${s===x?p.disabled:""}`.trim(),onClick:()=>f(s+1),children:">"},"next")),c};return r.jsxs("nav",{className:`${p.container} ${n}`.trim(),children:[d&&r.jsxs("span",{className:p.total,children:["Total ",t]}),r.jsx("ul",{className:"flex items-center gap-1 list-none p-0 m-0",children:h()}),a&&r.jsxs("div",{className:p.jumper,children:["Go to",r.jsx("input",{className:"w-12 h-8 px-2 border rounded text-center outline-none focus:border-primary-500",type:"number",onKeyUp:c=>{if(c.key==="Enter"){const v=parseInt(c.target.value);isNaN(v)||f(v)}}})]})]})},L=m.createContext(null),re=({value:t,defaultValue:o="",onChange:s,name:e,size:n="md",color:i="primary",children:l,className:u=""})=>{const[d,a]=m.useState(o),x=t!==void 0,p=x?t:d,{value:f,setValue:g}=w.useRadioGroup({defaultValue:p,name:e}),h=c=>{x||a(c),s==null||s(c)};return r.jsx(L.Provider,{value:{value:p,onChange:h,name:e,size:n,color:i},children:r.jsx("div",{className:`flex flex-col gap-2 ${u}`.trim(),children:l})})},ie=({value:t,children:o,className:s="",...e})=>{const n=m.useContext(L);if(!n)throw new Error("Radio must be used within RadioGroup");const i=n.value===t,l=e.size||n.size||"md",u=e.color||n.color||"primary",d=j.getRadioClasses(i,{size:l,color:u});return b([d.root,d.inner,s].filter(Boolean).join(" ")),r.jsxs("label",{className:`inline-flex items-center gap-2 cursor-pointer ${s}`.trim(),children:[r.jsxs("div",{className:d.root,onClick:()=>n.onChange(t),children:[r.jsx("input",{type:"radio",name:n.name,value:t,checked:i,className:"sr-only",readOnly:!0}),r.jsx("div",{className:d.inner})]}),o&&r.jsx("span",{className:"text-sm select-none",children:o})]})},le=({value:t,defaultValue:o="",onChange:s,placeholder:e="Select an option",size:n="md",disabled:i=!1,children:l,className:u=""})=>{const[d,a]=m.useState(o),x=t!==void 0,p=x?t:d,{isOpen:f,value:g,setValue:h,getTriggerProps:c,getListboxProps:v}=w.useSelect({defaultValue:p,disabled:i}),k=j.getSelectClasses(f,{size:n,disabled:i});b(`${k.trigger} ${k.listbox} ${k.option} ${u}`);const y=$=>{i||(x||a($),h($),s==null||s($))};return r.jsxs("div",{className:`relative inline-block w-full ${u}`.trim(),children:[r.jsxs("div",{...c(),className:`${k.trigger} ${i?"opacity-50 cursor-not-allowed":"cursor-pointer"}`,children:[r.jsx("span",{className:p?"text-foreground":"text-neutral-400",children:p||e}),r.jsx("svg",{className:`transition-transform duration-200 ${f?"rotate-180":""}`,width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",children:r.jsx("polyline",{points:"6 9 12 15 18 9"})})]}),r.jsx("div",{...v(),className:k.listbox,children:m.Children.map(l,$=>m.isValidElement($)?m.cloneElement($,{onSelect:y,isSelected:p===$.props.value}):$)})]})},ae=({value:t,children:o,onSelect:s,isSelected:e})=>{const n=j.getSelectClasses(!1);return r.jsx("div",{className:`${n.option} ${e?"bg-primary/10 text-primary font-medium":""}`,onClick:()=>s==null?void 0:s(t),children:o})},ce=({value:t,defaultValue:o=0,min:s=0,max:e=100,step:n=1,disabled:i=!1,onChange:l,className:u=""})=>{const[d,a]=m.useState(o),x=t!==void 0,p=x?t:d,f=m.useRef(null),[g,h]=m.useState(!1),c=j.getSliderClasses({disabled:i});b(`${c.container} ${c.track} ${c.range} ${c.handle} ${u}`);const v=(p-s)/(e-s)*100,k=m.useCallback($=>{if(i||!f.current)return;const N=f.current.getBoundingClientRect();let T=($-N.left)/N.width;T=Math.max(0,Math.min(1,T));let P=s+T*(e-s);P=Math.round(P/n)*n,P=Math.max(s,Math.min(e,P)),x||a(P),l==null||l(P)},[i,s,e,n,x,l]),y=$=>{i||(h(!0),k($.clientX))};return m.useEffect(()=>{if(!g)return;const $=T=>{k(T.clientX)},N=()=>{h(!1)};return window.addEventListener("mousemove",$),window.addEventListener("mouseup",N),()=>{window.removeEventListener("mousemove",$),window.removeEventListener("mouseup",N)}},[g,k]),r.jsxs("div",{ref:f,className:`${c.container} ${u}`.trim(),onMouseDown:y,children:[r.jsx("div",{className:c.track,children:r.jsx("div",{className:c.range,style:{width:`${v}%`}})}),r.jsx("div",{className:c.handle,style:{left:`${v}%`,transform:"translateX(-50%)"}})]})},ue=({checked:t,defaultChecked:o=!1,disabled:s=!1,onChange:e,size:n="md",color:i="primary",className:l=""})=>{const[u,d]=m.useState(o),a=t!==void 0,x=a?t:u,{getToggleProps:p}=w.useToggle(x),f=j.getSwitchClasses(x,{size:n,color:i,disabled:s});b(`${f.track} ${f.thumb} ${l}`);const g=()=>{if(s)return;const h=!x;a||d(h),e==null||e(h)};return r.jsx("div",{...p(),className:`${f.track} ${s?"opacity-50 cursor-not-allowed":"cursor-pointer"} ${l}`.trim(),onClick:g,children:r.jsx("span",{className:f.thumb})})};function de({data:t,columns:o,onRowClick:s,className:e=""}){const{getTableProps:n,getHeaderProps:i,getBodyProps:l,getRowProps:u,getCellProps:d,getHeaderCellProps:a}=V.useTable({data:t,columns:o,onRowClick:s}),x=n(),p=i(),f=l(),g=a(),h=d(),c=[x.className,p.className,f.className,g.className,h.className,"sxo-table-row border-b border-neutral-100 hover:bg-neutral-50 transition-colors"].join(" ");return b(`${c} ${e}`),r.jsx("div",{className:"overflow-x-auto",children:r.jsxs("table",{...x,className:`${x.className} ${e}`.trim(),children:[r.jsx("thead",{...p,children:r.jsx("tr",{children:o.map(v=>r.jsx("th",{...g,children:v.header},v.key))})}),r.jsx("tbody",{...f,children:t.map((v,k)=>r.jsx("tr",{...u(v),children:o.map(y=>r.jsx("td",{...h,children:y.render?y.render(v):v[y.key]},y.key))},k))})]})})}const S=m.createContext(null),me=({children:t,defaultValue:o,value:s,onChange:e,variant:n="line",size:i="md",className:l=""})=>{const[u,d]=m.useState(o||""),a=s!==void 0,x=a?s:u,{getTabListProps:p,getTabProps:f,getTabPanelProps:g}=w.useTabs({value:x,onChange:c=>{a||d(c),e==null||e(c)}}),h=j.getTabsClasses({variant:n,size:i});return b(`${h.list} ${l}`),r.jsx(S.Provider,{value:{currentValue:x,selectTab:c=>{a||d(c),e==null||e(c)},getTabProps:f,getTabPanelProps:g,styles:h},children:r.jsx("div",{className:l,children:t})})},pe=({children:t,className:o=""})=>{const s=m.useContext(S);if(!s)throw new Error("TabList must be used within Tabs");return r.jsx("div",{role:"tablist",className:`${s.styles.list} ${o}`.trim(),children:t})},xe=({value:t,children:o,className:s=""})=>{const e=m.useContext(S);if(!e)throw new Error("Tab must be used within Tabs");const n=e.currentValue===t,i=e.getTabProps(t,e.selectTab);return r.jsx("div",{...i,className:`${e.styles.tab(n)} ${s}`.trim(),children:o})},fe=({value:t,children:o,className:s=""})=>{const e=m.useContext(S);if(!e)throw new Error("TabPanel must be used within Tabs");const n=e.getTabPanelProps(t);return r.jsx("div",{...n,className:`${e.styles.panel} ${s}`.trim(),children:o})},ge=({variant:t="solid",color:o="primary",rounded:s="sm",size:e="md",closable:n=!1,className:i="",children:l,onClose:u,...d})=>{const a=j.getTagClasses({variant:t,color:o,rounded:s,size:e,closable:n}),x=b(`${a.base} ${i}`.trim());return r.jsxs("span",{className:x,...d,children:[l,n&&r.jsx("span",{className:a.closeIcon,onClick:p=>{p.stopPropagation(),u==null||u()},children:"×"})]})},he=({content:t,children:o,delay:s=200,variant:e="dark",className:n=""})=>{const[i,l]=m.useState(!1),{getTriggerProps:u,getTooltipProps:d}=w.useTooltip({delay:s,defaultOpen:i}),a=j.getTooltipClasses({variant:e});b(`${a.content} ${n}`);const x=u(()=>l(!0),()=>l(!1));return r.jsxs("div",{className:"relative inline-block",children:[m.cloneElement(o,x),i&&r.jsx("div",{...d(),className:`${a.content} ${n} bottom-full left-1/2 -translate-x-1/2 mb-2`.trim(),children:t})]})},ve=({tokens:t=w.defaultTokens,mode:o="light",children:s})=>{const e=m.useMemo(()=>new A.StyleEngine(t),[t]);return m.useEffect(()=>{document.documentElement.setAttribute("data-sxo-mode",o)},[o]),m.useEffect(()=>{const n=e.generateTokenCssVars();let i=document.getElementById("sxo-tokens");if(i||(i=document.createElement("style"),i.id="sxo-tokens",document.head.appendChild(i)),i.innerHTML=n,!document.getElementById("sxo-engine")){const l=document.createElement("style");l.id="sxo-engine",document.head.appendChild(l)}},[e]),m.useEffect(()=>{let n=document.getElementById("sxo-reset");n||(n=document.createElement("style"),n.id="sxo-reset",document.head.appendChild(n),n.innerHTML=`
+				*, *::before, *::after { box-sizing: border-box; }
+				body { 
+					margin: 0; 
+					font-family: var(--sxo-typography-fontFamily-sans); 
+					-webkit-font-smoothing: antialiased;
+					background-color: var(--sxo-color-background-primary);
+					color: var(--sxo-color-neutral-900);
+					transition: background-color 0.3s ease, color 0.3s ease;
+				}
+				button, input, select, textarea { font-family: inherit; }
+				a { color: inherit; text-decoration: none; }
+			`)},[]),m.createElement(I.Provider,{value:{tokens:t,engine:e}},s)};exports.Accordion=G;exports.AccordionItem=z;exports.Avatar=q;exports.Badge=H;exports.Box=W;exports.Button=X;exports.Card=U;exports.Checkbox=K;exports.CheckboxGroup=F;exports.Container=te;exports.Dialog=J;exports.Dropdown=Y;exports.DropdownItem=Q;exports.Grid=se;exports.Icon=Z;exports.Input=_;exports.Menu=ne;exports.Pagination=oe;exports.Radio=ie;exports.RadioGroup=re;exports.Select=le;exports.SelectOption=ae;exports.Slider=ce;exports.Stack=ee;exports.Switch=ue;exports.SxoContext=I;exports.Tab=xe;exports.TabList=pe;exports.TabPanel=fe;exports.Table=de;exports.Tabs=me;exports.Tag=ge;exports.ThemeProvider=ve;exports.Tooltip=he;exports.useBreakpoint=R;exports.useStyle=b;exports.useSxo=E;exports.useToken=D;Object.keys(w).forEach(t=>{t!=="default"&&!Object.prototype.hasOwnProperty.call(exports,t)&&Object.defineProperty(exports,t,{enumerable:!0,get:()=>w[t]})});

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+export * from '../../../packages/design/src';
+export * from './components/Accordion.tsx';
+export * from './components/Avatar.tsx';
+export * from './components/Badge.tsx';
+export * from './components/Box.tsx';
+export * from './components/Button.tsx';
+export * from './components/Card.tsx';
+export * from './components/Checkbox.tsx';
+export * from './components/Dialog.tsx';
+export * from './components/Dropdown.tsx';
+export * from './components/Icon.tsx';
+export * from './components/Input.tsx';
+export * from './components/Layout.tsx';
+export * from './components/Menu.tsx';
+export * from './components/Pagination.tsx';
+export * from './components/Radio.tsx';
+export * from './components/Select.tsx';
+export * from './components/Slider.tsx';
+export * from './components/Switch.tsx';
+export * from './components/Table.tsx';
+export * from './components/Tabs.tsx';
+export * from './components/Tag.tsx';
+export * from './components/Tooltip.tsx';
+export * from './context.ts';
+export * from './hooks.ts';
+export * from './provider.tsx';