npm - @ptengine/design-components - Versions diffs - 0.3.0 - Mend

@ptengine/design-components 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (197) hide show

package/README.md +309 -0
package/components.json +21 -0
package/dist/components/ui/accordion.d.ts +8 -0
package/dist/components/ui/accordion.d.ts.map +1 -0
package/dist/components/ui/alert-dialog.d.ts +21 -0
package/dist/components/ui/alert-dialog.d.ts.map +1 -0
package/dist/components/ui/alert.d.ts +9 -0
package/dist/components/ui/alert.d.ts.map +1 -0
package/dist/components/ui/aspect-ratio.d.ts +4 -0
package/dist/components/ui/aspect-ratio.d.ts.map +1 -0
package/dist/components/ui/attachment.d.ts +26 -0
package/dist/components/ui/attachment.d.ts.map +1 -0
package/dist/components/ui/avatar.d.ts +10 -0
package/dist/components/ui/avatar.d.ts.map +1 -0
package/dist/components/ui/badge.d.ts +10 -0
package/dist/components/ui/badge.d.ts.map +1 -0
package/dist/components/ui/breadcrumb.d.ts +22 -0
package/dist/components/ui/breadcrumb.d.ts.map +1 -0
package/dist/components/ui/bubble.d.ts +19 -0
package/dist/components/ui/bubble.d.ts.map +1 -0
package/dist/components/ui/button-group.d.ts +13 -0
package/dist/components/ui/button-group.d.ts.map +1 -0
package/dist/components/ui/button.d.ts +13 -0
package/dist/components/ui/button.d.ts.map +1 -0
package/dist/components/ui/calendar.d.ts +9 -0
package/dist/components/ui/calendar.d.ts.map +1 -0
package/dist/components/ui/card.d.ts +9 -0
package/dist/components/ui/card.d.ts.map +1 -0
package/dist/components/ui/carousel.d.ts +23 -0
package/dist/components/ui/carousel.d.ts.map +1 -0
package/dist/components/ui/chart.d.ts +63 -0
package/dist/components/ui/chart.d.ts.map +1 -0
package/dist/components/ui/checkbox.d.ts +5 -0
package/dist/components/ui/checkbox.d.ts.map +1 -0
package/dist/components/ui/collapsible.d.ts +6 -0
package/dist/components/ui/collapsible.d.ts.map +1 -0
package/dist/components/ui/command.d.ts +81 -0
package/dist/components/ui/command.d.ts.map +1 -0
package/dist/components/ui/context-menu.d.ts +28 -0
package/dist/components/ui/context-menu.d.ts.map +1 -0
package/dist/components/ui/dialog.d.ts +22 -0
package/dist/components/ui/dialog.d.ts.map +1 -0
package/dist/components/ui/direction.d.ts +8 -0
package/dist/components/ui/direction.d.ts.map +1 -0
package/dist/components/ui/drawer.d.ts +23 -0
package/dist/components/ui/drawer.d.ts.map +1 -0
package/dist/components/ui/dropdown-menu.d.ts +28 -0
package/dist/components/ui/dropdown-menu.d.ts.map +1 -0
package/dist/components/ui/empty.d.ts +13 -0
package/dist/components/ui/empty.d.ts.map +1 -0
package/dist/components/ui/field.d.ts +25 -0
package/dist/components/ui/field.d.ts.map +1 -0
package/dist/components/ui/hover-card.d.ts +7 -0
package/dist/components/ui/hover-card.d.ts.map +1 -0
package/dist/components/ui/input-group.d.ts +13 -0
package/dist/components/ui/input-group.d.ts.map +1 -0
package/dist/components/ui/input-otp.d.ts +35 -0
package/dist/components/ui/input-otp.d.ts.map +1 -0
package/dist/components/ui/input.d.ts +5 -0
package/dist/components/ui/input.d.ts.map +1 -0
package/dist/components/ui/item.d.ts +24 -0
package/dist/components/ui/item.d.ts.map +1 -0
package/dist/components/ui/kbd.d.ts +5 -0
package/dist/components/ui/kbd.d.ts.map +1 -0
package/dist/components/ui/label.d.ts +6 -0
package/dist/components/ui/label.d.ts.map +1 -0
package/dist/components/ui/marker.d.ts +13 -0
package/dist/components/ui/marker.d.ts.map +1 -0
package/dist/components/ui/menubar.d.ts +29 -0
package/dist/components/ui/menubar.d.ts.map +1 -0
package/dist/components/ui/message-scroller.d.ts +26 -0
package/dist/components/ui/message-scroller.d.ts.map +1 -0
package/dist/components/ui/message.d.ts +11 -0
package/dist/components/ui/message.d.ts.map +1 -0
package/dist/components/ui/native-select.d.ts +4 -0
package/dist/components/ui/native-select.d.ts.map +1 -0
package/dist/components/ui/navigation-menu.d.ts +13 -0
package/dist/components/ui/navigation-menu.d.ts.map +1 -0
package/dist/components/ui/pagination.d.ts +35 -0
package/dist/components/ui/pagination.d.ts.map +1 -0
package/dist/components/ui/popover.d.ts +8 -0
package/dist/components/ui/popover.d.ts.map +1 -0
package/dist/components/ui/progress.d.ts +5 -0
package/dist/components/ui/progress.d.ts.map +1 -0
package/dist/components/ui/radio-group.d.ts +6 -0
package/dist/components/ui/radio-group.d.ts.map +1 -0
package/dist/components/ui/resizable.d.ts +24 -0
package/dist/components/ui/resizable.d.ts.map +1 -0
package/dist/components/ui/scroll-area.d.ts +6 -0
package/dist/components/ui/scroll-area.d.ts.map +1 -0
package/dist/components/ui/search-input.d.ts +23 -0
package/dist/components/ui/search-input.d.ts.map +1 -0
package/dist/components/ui/select.d.ts +14 -0
package/dist/components/ui/select.d.ts.map +1 -0
package/dist/components/ui/separator.d.ts +5 -0
package/dist/components/ui/separator.d.ts.map +1 -0
package/dist/components/ui/sheet.d.ts +28 -0
package/dist/components/ui/sheet.d.ts.map +1 -0
package/dist/components/ui/sidebar.d.ts +70 -0
package/dist/components/ui/sidebar.d.ts.map +1 -0
package/dist/components/ui/skeleton.d.ts +4 -0
package/dist/components/ui/skeleton.d.ts.map +1 -0
package/dist/components/ui/slider.d.ts +5 -0
package/dist/components/ui/slider.d.ts.map +1 -0
package/dist/components/ui/sonner.d.ts +6 -0
package/dist/components/ui/sonner.d.ts.map +1 -0
package/dist/components/ui/spinner.d.ts +7 -0
package/dist/components/ui/spinner.d.ts.map +1 -0
package/dist/components/ui/switch.d.ts +5 -0
package/dist/components/ui/switch.d.ts.map +1 -0
package/dist/components/ui/table.d.ts +11 -0
package/dist/components/ui/table.d.ts.map +1 -0
package/dist/components/ui/tabs.d.ts +13 -0
package/dist/components/ui/tabs.d.ts.map +1 -0
package/dist/components/ui/textarea.d.ts +5 -0
package/dist/components/ui/textarea.d.ts.map +1 -0
package/dist/components/ui/toggle-group.d.ts +13 -0
package/dist/components/ui/toggle-group.d.ts.map +1 -0
package/dist/components/ui/toggle.d.ts +13 -0
package/dist/components/ui/toggle.d.ts.map +1 -0
package/dist/components/ui/tooltip.d.ts +8 -0
package/dist/components/ui/tooltip.d.ts.map +1 -0
package/dist/hooks/use-mobile.d.ts +2 -0
package/dist/hooks/use-mobile.d.ts.map +1 -0
package/dist/index.cjs +82 -0
package/dist/index.d.ts +71 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +20969 -0
package/dist/lib/utils.d.ts +4 -0
package/dist/lib/utils.d.ts.map +1 -0
package/llms.txt +173 -0
package/package.json +125 -0
package/src/components/ui/accordion.tsx +51 -0
package/src/components/ui/alert-dialog.tsx +115 -0
package/src/components/ui/alert.tsx +48 -0
package/src/components/ui/aspect-ratio.tsx +5 -0
package/src/components/ui/attachment.tsx +186 -0
package/src/components/ui/avatar.tsx +57 -0
package/src/components/ui/badge.tsx +40 -0
package/src/components/ui/breadcrumb.tsx +101 -0
package/src/components/ui/bubble.tsx +123 -0
package/src/components/ui/button-group.tsx +74 -0
package/src/components/ui/button.tsx +64 -0
package/src/components/ui/calendar.tsx +63 -0
package/src/components/ui/card.tsx +55 -0
package/src/components/ui/carousel.tsx +252 -0
package/src/components/ui/chart.tsx +323 -0
package/src/components/ui/checkbox.tsx +26 -0
package/src/components/ui/collapsible.tsx +9 -0
package/src/components/ui/command.tsx +136 -0
package/src/components/ui/context-menu.tsx +187 -0
package/src/components/ui/dialog.tsx +103 -0
package/src/components/ui/direction.tsx +15 -0
package/src/components/ui/drawer.tsx +98 -0
package/src/components/ui/dropdown-menu.tsx +186 -0
package/src/components/ui/empty.tsx +75 -0
package/src/components/ui/field.tsx +175 -0
package/src/components/ui/hover-card.tsx +27 -0
package/src/components/ui/input-group.tsx +80 -0
package/src/components/ui/input-otp.tsx +67 -0
package/src/components/ui/input.tsx +24 -0
package/src/components/ui/item.tsx +118 -0
package/src/components/ui/kbd.tsx +21 -0
package/src/components/ui/label.tsx +19 -0
package/src/components/ui/marker.tsx +67 -0
package/src/components/ui/menubar.tsx +218 -0
package/src/components/ui/message-scroller.tsx +206 -0
package/src/components/ui/message.tsx +85 -0
package/src/components/ui/native-select.tsx +29 -0
package/src/components/ui/navigation-menu.tsx +120 -0
package/src/components/ui/pagination.tsx +108 -0
package/src/components/ui/popover.tsx +31 -0
package/src/components/ui/progress.tsx +23 -0
package/src/components/ui/radio-group.tsx +36 -0
package/src/components/ui/resizable.tsx +40 -0
package/src/components/ui/scroll-area.tsx +44 -0
package/src/components/ui/search-input.tsx +97 -0
package/src/components/ui/select.tsx +151 -0
package/src/components/ui/separator.tsx +24 -0
package/src/components/ui/sheet.tsx +124 -0
package/src/components/ui/sidebar.tsx +704 -0
package/src/components/ui/skeleton.tsx +9 -0
package/src/components/ui/slider.tsx +41 -0
package/src/components/ui/sonner.tsx +45 -0
package/src/components/ui/spinner.tsx +21 -0
package/src/components/ui/switch.tsx +27 -0
package/src/components/ui/table.tsx +95 -0
package/src/components/ui/tabs.tsx +119 -0
package/src/components/ui/textarea.tsx +23 -0
package/src/components/ui/toggle-group.tsx +55 -0
package/src/components/ui/toggle.tsx +40 -0
package/src/components/ui/tooltip.tsx +30 -0
package/src/hooks/use-mobile.ts +19 -0
package/src/index.ts +414 -0
package/src/lib/utils.ts +7 -0
package/src/styles/tokens.css +360 -0
package/tailwind.preset.js +235 -0

package/src/components/ui/skeleton.tsx ADDED Viewed

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+    return <div className={cn('animate-pulse rounded-[var(--pt-radius-md)] bg-muted', className)} {...props} />;
+}
+export { Skeleton };

package/src/components/ui/slider.tsx ADDED Viewed

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import { cn } from '../../lib/utils';
+const Slider = React.forwardRef<
+    React.ElementRef<typeof SliderPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, defaultValue, value, min = 0, ...props }, ref) => {
+    const values = React.useMemo(
+        () => (Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min]),
+        [value, defaultValue, min]
+    );
+    return (
+        <SliderPrimitive.Root
+            ref={ref}
+            defaultValue={defaultValue}
+            value={value}
+            min={min}
+            className={cn(
+                'relative flex w-full touch-none select-none items-center data-[disabled]:cursor-not-allowed',
+                className
+            )}
+            {...props}
+        >
+            <SliderPrimitive.Track className="relative h-[6px] w-full grow overflow-hidden rounded-full bg-secondary">
+                <SliderPrimitive.Range className="absolute h-full bg-primary" />
+            </SliderPrimitive.Track>
+            {values.map((_, index) => (
+                <SliderPrimitive.Thumb
+                    key={index}
+                    className="block h-[16px] w-[16px] shrink-0 rounded-full border border-neutral bg-background transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring data-[disabled]:opacity-50"
+                />
+            ))}
+        </SliderPrimitive.Root>
+    );
+});
+Slider.displayName = SliderPrimitive.Root.displayName;
+export { Slider };

package/src/components/ui/sonner.tsx ADDED Viewed

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { Toaster as Sonner, toast } from 'sonner';
+type ToasterProps = React.ComponentProps<typeof Sonner>;
+/** Reads the current theme from the `dark` class on <html> (no next-themes dependency). */
+function useDocumentTheme(): 'light' | 'dark' {
+    const [theme, setTheme] = React.useState<'light' | 'dark'>(() =>
+        typeof document !== 'undefined' && document.documentElement.classList.contains('dark')
+            ? 'dark'
+            : 'light'
+    );
+    React.useEffect(() => {
+        const observer = new MutationObserver(() =>
+            setTheme(document.documentElement.classList.contains('dark') ? 'dark' : 'light')
+        );
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['class']
+        });
+        return () => observer.disconnect();
+    }, []);
+    return theme;
+}
+const Toaster = ({ ...props }: ToasterProps) => {
+    const theme = useDocumentTheme();
+    return (
+        <Sonner
+            theme={theme}
+            className="toaster group"
+            toastOptions={{
+                classNames: {
+                    toast: 'group toast group-[.toaster]:bg-popover group-[.toaster]:text-popover-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg',
+                    description: 'group-[.toast]:text-muted-foreground',
+                    actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
+                    cancelButton: 'group-[.toast]:bg-secondary group-[.toast]:text-secondary-foreground'
+                }
+            }}
+            {...props}
+        />
+    );
+};
+export { Toaster, toast };

package/src/components/ui/spinner.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { Loader2 } from 'lucide-react';
+import { cn } from '../../lib/utils';
+function Spinner({
+    className,
+    label = 'Loading',
+    ...props
+}: React.ComponentProps<typeof Loader2> & { label?: string }) {
+    return (
+        <Loader2
+            role="status"
+            aria-label={label}
+            className={cn('size-[16px] animate-spin text-foreground', className)}
+            {...props}
+        />
+    );
+}
+export { Spinner };

package/src/components/ui/switch.tsx ADDED Viewed

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import { cn } from '../../lib/utils';
+const Switch = React.forwardRef<
+    React.ElementRef<typeof SwitchPrimitives.Root>,
+    React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+    <SwitchPrimitives.Root
+        className={cn(
+            'peer state-layer inline-flex h-[20px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input [--pt-state-layer-border:2px]',
+            className
+        )}
+        {...props}
+        ref={ref}
+    >
+        <SwitchPrimitives.Thumb
+            className={cn(
+                'pointer-events-none block h-[16px] w-[16px] rounded-full border border-neutral bg-background ring-0 transition-transform data-[state=checked]:translate-x-[16px] data-[state=unchecked]:translate-x-0'
+            )}
+        />
+    </SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+export { Switch };

package/src/components/ui/table.tsx ADDED Viewed

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+    ({ className, ...props }, ref) => (
+        <div className="relative w-full overflow-auto">
+            <table
+                ref={ref}
+                className={cn('w-full caption-bottom text-[14px] leading-[20px] text-foreground', className)}
+                {...props}
+            />
+        </div>
+    )
+);
+Table.displayName = 'Table';
+const TableHeader = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+));
+TableHeader.displayName = 'TableHeader';
+const TableBody = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
+));
+TableBody.displayName = 'TableBody';
+const TableFooter = React.forwardRef<
+    HTMLTableSectionElement,
+    React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+    <tfoot
+        ref={ref}
+        className={cn('border-t bg-secondary font-medium [&>tr]:last:border-b-0', className)}
+        {...props}
+    />
+));
+TableFooter.displayName = 'TableFooter';
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+    ({ className, ...props }, ref) => (
+        <tr
+            ref={ref}
+            className={cn(
+                'state-layer border-b transition-colors data-[state=selected]:bg-selected',
+                className
+            )}
+            {...props}
+        />
+    )
+);
+TableRow.displayName = 'TableRow';
+const TableHead = React.forwardRef<
+    HTMLTableCellElement,
+    React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <th
+        ref={ref}
+        className={cn(
+            'h-[40px] px-[12px] text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
+            className
+        )}
+        {...props}
+    />
+));
+TableHead.displayName = 'TableHead';
+const TableCell = React.forwardRef<
+    HTMLTableCellElement,
+    React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+    <td
+        ref={ref}
+        className={cn('p-[12px] align-middle [&:has([role=checkbox])]:pr-0', className)}
+        {...props}
+    />
+));
+TableCell.displayName = 'TableCell';
+const TableCaption = React.forwardRef<
+    HTMLTableCaptionElement,
+    React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+    <caption ref={ref} className={cn('mt-[16px] text-[14px] leading-[20px] text-muted-foreground', className)} {...props} />
+));
+TableCaption.displayName = 'TableCaption';
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/src/components/ui/tabs.tsx ADDED Viewed

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import { cn } from '../../lib/utils';
+/* Tabs 两种形态,用来表达层级:
+ *   line      —— 下划线,分量重,给「页面级」主标签(概览 / 报表 / 设置)
+ *   segmented —— 灰底胶囊,分量轻,给「区块内」切换视图(日 / 周 / 月)
+ * 嵌套时外层用 line、内层用 segmented,层级一眼可辨。
+ *
+ * 尺寸接三档刻度:sm 24(字12)· default 32(字13)· lg 40(字14)。
+ * variant / size 写在 <Tabs> 上一次,List 与 Trigger 通过 context 取。 */
+type TabsVariant = 'segmented' | 'line';
+type TabsSize = 'sm' | 'default' | 'lg';
+const TabsContext = React.createContext<{ variant: TabsVariant; size: TabsSize }>({
+    variant: 'segmented',
+    size: 'default'
+});
+const LIST_SIZE: Record<TabsVariant, Record<TabsSize, string>> = {
+    segmented: {
+        sm: 'h-[24px] p-[2px]',
+        default: 'h-[32px] p-[4px]',
+        lg: 'h-[40px] p-[4px]'
+    },
+    line: {
+        sm: 'h-[24px] gap-[12px]',
+        default: 'h-[32px] gap-[16px]',
+        lg: 'h-[40px] gap-[20px]'
+    }
+};
+const TRIGGER_TEXT: Record<TabsSize, string> = {
+    sm: 'text-[12px] leading-[16px]',
+    default: 'text-[13px] leading-[20px]',
+    lg: 'text-[14px] leading-[20px]'
+};
+const Tabs = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
+        variant?: TabsVariant;
+        size?: TabsSize;
+    }
+>(({ variant = 'segmented', size = 'default', ...props }, ref) => {
+    const ctx = React.useMemo(() => ({ variant, size }), [variant, size]);
+    return (
+        <TabsContext.Provider value={ctx}>
+            <TabsPrimitive.Root ref={ref} {...props} />
+        </TabsContext.Provider>
+    );
+});
+Tabs.displayName = TabsPrimitive.Root.displayName;
+const TabsList = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.List>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => {
+    const { variant, size } = React.useContext(TabsContext);
+    return (
+        <TabsPrimitive.List
+            ref={ref}
+            className={cn(
+                'inline-flex items-center text-muted-foreground',
+                variant === 'segmented' && 'justify-center rounded-[var(--pt-radius)] bg-muted',
+                /* line:整宽 + 底部分隔线,标签左对齐 */
+                variant === 'line' && 'w-full justify-start border-b border-border',
+                LIST_SIZE[variant][size],
+                className
+            )}
+            {...props}
+        />
+    );
+});
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => {
+    const { variant, size } = React.useContext(TabsContext);
+    return (
+        <TabsPrimitive.Trigger
+            ref={ref}
+            className={cn(
+                'inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+                TRIGGER_TEXT[size],
+                /* segmented:选中项白底浮起。按设计铁律不加阴影——白底与灰底容器的
+                   明度差已足够表达选中,阴影在暗色模式下还会失效。 */
+                variant === 'segmented' &&
+                    'h-full rounded-[var(--pt-radius-sm)] px-[12px] data-[state=active]:bg-background data-[state=active]:text-foreground',
+                /* line:选中项底部 2px 实线,-mb-px 让它压住 List 的分隔线 */
+                variant === 'line' &&
+                    '-mb-px h-full border-b-2 border-transparent px-[2px] data-[state=active]:border-foreground data-[state=active]:text-foreground',
+                className
+            )}
+            {...props}
+        />
+    );
+});
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef<
+    React.ElementRef<typeof TabsPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+    <TabsPrimitive.Content
+        ref={ref}
+        className={cn(
+            'mt-[8px] ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+            className
+        )}
+        {...props}
+    />
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/components/ui/textarea.tsx ADDED Viewed

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+    ({ className, ...props }, ref) => {
+        return (
+            <textarea
+                className={cn(
+                    'flex min-h-[60px] w-full rounded-[var(--pt-radius-md)] border border-input bg-transparent px-[12px] py-[8px] text-[14px] leading-[20px] placeholder:text-muted-foreground transition-colors enabled:hover:border-neutral focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:enabled:hover:border-destructive aria-[invalid=true]:focus-visible:ring-destructive/30',
+                    className
+                )}
+                ref={ref}
+                {...props}
+            />
+        );
+    }
+);
+Textarea.displayName = 'Textarea';
+export { Textarea };

package/src/components/ui/toggle-group.tsx ADDED Viewed

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
+import { type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+import { toggleVariants } from './toggle';
+const ToggleGroupContext = React.createContext<VariantProps<typeof toggleVariants>>({
+    size: 'default',
+    variant: 'default'
+});
+const ToggleGroup = React.forwardRef<
+    React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+        VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+    <ToggleGroupPrimitive.Root
+        ref={ref}
+        className={cn('flex items-center justify-center gap-[4px]', className)}
+        {...props}
+    >
+        <ToggleGroupContext.Provider value={{ variant, size }}>
+            {children}
+        </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+));
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
+const ToggleGroupItem = React.forwardRef<
+    React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+        VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+    const context = React.useContext(ToggleGroupContext);
+    return (
+        <ToggleGroupPrimitive.Item
+            ref={ref}
+            className={cn(
+                toggleVariants({
+                    variant: context.variant || variant,
+                    size: context.size || size
+                }),
+                className
+            )}
+            {...props}
+        >
+            {children}
+        </ToggleGroupPrimitive.Item>
+    );
+});
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
+export { ToggleGroup, ToggleGroupItem };

package/src/components/ui/toggle.tsx ADDED Viewed

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+const toggleVariants = cva(
+    'state-layer inline-flex items-center justify-center gap-[8px] rounded-[var(--pt-radius-md)] text-[14px] leading-[20px] font-medium text-foreground transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=on]:bg-selected data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-[16px] [&_svg]:shrink-0',
+    {
+        variants: {
+            variant: {
+                default: 'bg-transparent',
+                outline: 'border border-input bg-transparent [--pt-state-layer-border:1px]'
+            },
+            size: {
+                default: 'h-[32px] min-w-[36px] px-[8px] text-[13px] leading-[20px]',
+                sm: 'h-[24px] min-w-[32px] rounded-[var(--pt-radius-sm)] px-[6px] text-[12px] leading-[16px]',
+                lg: 'h-[40px] min-w-[40px] px-[10px] text-[14px] leading-[20px] [&_svg]:size-[20px]'
+            }
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default'
+        }
+    }
+);
+const Toggle = React.forwardRef<
+    React.ElementRef<typeof TogglePrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+    <TogglePrimitive.Root
+        ref={ref}
+        className={cn(toggleVariants({ variant, size, className }))}
+        {...props}
+    />
+));
+Toggle.displayName = TogglePrimitive.Root.displayName;
+export { Toggle, toggleVariants };

package/src/components/ui/tooltip.tsx ADDED Viewed

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import { cn } from '../../lib/utils';
+const TooltipProvider = TooltipPrimitive.Provider;
+const Tooltip = TooltipPrimitive.Root;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipContent = React.forwardRef<
+    React.ElementRef<typeof TooltipPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+    <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Content
+            ref={ref}
+            sideOffset={sideOffset}
+            className={cn(
+                'z-[var(--pt-z-tooltip,50)] overflow-hidden rounded-[var(--pt-radius-md)] bg-primary px-[12px] py-[6px] text-[13px] leading-[20px] text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                className
+            )}
+            {...props}
+        />
+    </TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/hooks/use-mobile.ts ADDED Viewed

@@ -0,0 +1,19 @@
+import * as React from 'react';
+const MOBILE_BREAKPOINT = 768;
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+    React.useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+        mql.addEventListener('change', onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+    return !!isMobile;
+}