@junwan666/remotion-design 4.0.448-zh.0

package/README.md

@@ -0,0 +1,18 @@
+# @remotion/design
+
+Design system
+
+[![NPM Downloads](https://img.shields.io/npm/dm/@remotion/design.svg?style=flat&color=black&label=Downloads)](https://npmcharts.com/compare/@remotion/design?minimal=true)
+
+## Installation
+
+```bash
+npm install @remotion/design --save-exact
+```
+
+When installing a Remotion package, make sure to align the version of all `remotion` and `@remotion/*` packages to the same version.
+Remove the `^` character from the version number to use the exact version.
+
+## Usage
+
+See the [documentation](https://www.remotion.dev/design) for more information.

package/bunfig.toml

@@ -0,0 +1,2 @@
+[serve.static]
+plugins = ["bun-plugin-tailwind"]

package/dist/Button.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+type CommonProps = {
+    readonly depth?: number;
+    readonly loading?: boolean;
+    readonly disabled?: boolean;
+};
+type ButtonAsButton = CommonProps & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'href' | 'disabled'> & {
+    readonly href?: undefined;
+};
+type ButtonAsAnchor = CommonProps & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'type'> & {
+    readonly href: string;
+};
+export type ButtonProps = ButtonAsButton | ButtonAsAnchor;
+export declare const Button: React.FC<ButtonProps>;
+export {};

package/dist/Button.js

@@ -0,0 +1,58 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { cn } from './helpers/cn';
+import { useHoverTransforms } from './helpers/hover-transforms';
+import { Outer } from './helpers/Outer';
+import { Spinner } from './Spinner';
+export const Button = ({ children, className, disabled, depth, loading, ...rest }) => {
+    const [dimensions, setDimensions] = useState(null);
+    const ref = useRef(null);
+    const { isActive, progress } = useHoverTransforms(ref, Boolean(disabled || loading));
+    const onPointerEnter = useCallback((e) => {
+        if (e.pointerType !== 'mouse') {
+            return;
+        }
+        setDimensions((prevDim) => {
+            if (!ref.current) {
+                throw new Error('Ref is not set');
+            }
+            const { childNodes } = ref.current;
+            if (childNodes.length === 0) {
+                throw new Error('No child nodes');
+            }
+            const childNode = childNodes[0];
+            if (!childNode) {
+                throw new Error('No child node');
+            }
+            const rect = childNode.getBoundingClientRect();
+            const { borderRadius } = getComputedStyle(childNode);
+            const cornerRadius = borderRadius.includes('e')
+                ? Infinity
+                : parseInt(borderRadius ?? '0', 10);
+            const newCornerRadius = Math.min(cornerRadius, rect.width / 2, rect.height / 2);
+            if (prevDim) {
+                return {
+                    width: rect.width,
+                    height: rect.height,
+                    borderRadius: prevDim.borderRadius,
+                };
+            }
+            return {
+                width: rect.width,
+                height: rect.height,
+                borderRadius: newCornerRadius,
+            };
+        });
+    }, []);
+    const isDisabled = disabled || loading;
+    const sharedClasses = cn('text-text', 'inline-flex', 'justify-center', 'bg-button-bg', 'items-center', 'font-brand', 'border-solid', 'text-[1em]', 'rounded-lg', 'border-black', 'border-2', 'border-b-4', 'cursor-pointer', 'px-4', 'h-12', 'flex-row', 'items-center', 'relative', 'overflow-hidden', isDisabled && 'cursor-default opacity-50', className);
+    const innerContent = (_jsxs(_Fragment, { children: [
+            _jsx("div", { className: cn(loading && 'invisible', 'inline-flex items-center'), children: children }), loading ? (_jsx("div", { className: cn('absolute w-full h-full flex inset-0 items-center justify-center text-inherit bg-inherit'), children: _jsx(Spinner, { size: 20, duration: 1 }) })) : null] }));
+    const isAnchor = 'href' in rest && rest.href !== undefined;
+    const content = isAnchor ? (_jsx("a", { ...rest, className: cn('no-underline text-inherit', sharedClasses), "aria-disabled": isDisabled || undefined, tabIndex: isDisabled ? -1 : undefined, onClick: isDisabled
+            ? (e) => {
+                e.preventDefault();
+            }
+            : rest.onClick, children: innerContent })) : (_jsx("button", { type: "button", disabled: isDisabled, className: sharedClasses, ...rest, children: innerContent }));
+    return (_jsx("div", { ref: ref, className: "contents", onPointerEnter: onPointerEnter, children: dimensions && (isActive || progress > 0) ? (_jsx(Outer, { parentRef: ref, width: dimensions.width, height: dimensions.height, cornerRadius: dimensions.borderRadius, hoverTransform: progress, depthFactor: depth ?? 1, children: content })) : (content) }));
+};

package/dist/Card.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Card: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/dist/Card.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from './helpers/cn';
+export const Card = React.forwardRef(({ children, className, ...rest }, ref) => {
+    return (_jsx("div", { ref: ref, className: cn('rounded-lg border-2 border-black bg-card-bg text-text border-b-4', className), ...rest, children: children }));
+});
+Card.displayName = 'Card';

package/dist/CheckIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CheckIcon: React.FC<React.SVGProps<SVGSVGElement>>;

package/dist/CheckIcon.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const d = 'M143.056 81.4934C147.25 77.2994 147.25 70.4506 143.056 66.2566C138.862 62.0627 132.013 62.0627 127.819 66.2566L86.1875 107.888L69.1809 90.8816C64.9869 86.6877 58.1381 86.6877 53.9441 90.8816C49.7502 95.0756 49.7502 101.924 53.9441 106.118L78.5691 130.743C82.7631 134.937 89.6119 134.937 93.8059 130.743L143.056 81.4934Z';
+export const CheckIcon = (props) => {
+    return (_jsx("svg", { ...props, viewBox: '50.79867500000001 63.11117499999997 95.40282500000015 70.77732499999999', fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: d, fill: "currentcolor" }) }));
+};

package/dist/Counter.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface CounterProps {
+    readonly count: number;
+    readonly setCount: (count: number) => void;
+    readonly minCount: number;
+    readonly step: number;
+    readonly incrementStep: number;
+}
+export declare const Counter: React.FC<CounterProps>;
+export {};

package/dist/Counter.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from './Card';
+import { cn } from './helpers/cn';
+const Triangle = ({ rotated }) => (_jsx("svg", { width: "12px", height: "7px", viewBox: "0 0 12 7", fill: "none", style: {
+        transform: rotated ? 'rotate(180deg)' : 'rotate(0deg)',
+    }, children: _jsx("path", { className: "fill-text", d: "M7.17096 0.475588C6.73198 0.0764969 6.01906 0.0764969 5.58007 0.475588L1.08483 4.56228C0.761737 4.85601 0.666915 5.29341 0.84251 5.67654C1.01811 6.05966 1.42549 6.3087 1.88203 6.3087H10.8725C11.3255 6.3087 11.7364 6.05966 11.912 5.67654C12.0876 5.29341 11.9893 4.85601 11.6697 4.56228L7.17448 0.475588H7.17096Z" }) }));
+const container = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+    height: 42,
+    flexShrink: 0,
+};
+const buttonContainer = {
+    display: 'flex',
+    width: 30,
+    height: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+};
+const MAX_COUNT = 9999999;
+export const Counter = ({ count, setCount, minCount, step, incrementStep, }) => {
+    const decrement = () => {
+        if (count > minCount) {
+            setCount(Math.max(minCount, count - incrementStep));
+        }
+    };
+    const increment = () => {
+        const nextValue = count + incrementStep;
+        const roundedValue = Math.round(nextValue / incrementStep) * incrementStep;
+        setCount(Math.min(MAX_COUNT, roundedValue));
+    };
+    const shrink = String(count).length > 6;
+    return (_jsxs(Card, { style: container, className: cn('w-[140px] flex flex-row overflow-hidden'), children: [
+            _jsx("input", { className: cn('fontbrand font-medium min-w-[80px] border-0 text-end outline-0 text-text overflow-hidden flex-1 px-0 py-0 pr-2 w-full h-full tabular-nums', shrink ? 'text-lg' : 'text-2xl'), type: "number", value: count, onClick: (e) => e.currentTarget.select(), onChange: (e) => {
+                    if (e.target.value.trim() === '') {
+                        setCount(step === 1 ? 1 : minCount);
+                        return;
+                    }
+                    const inputValue = parseInt(e.target.value, 10);
+                    const validValue = Math.min(MAX_COUNT, Math.max(inputValue, minCount));
+                    // For steps > 1, round to the nearest valid step
+                    if (step > 1) {
+                        const roundedValue = Math.round(validValue / step) * step;
+                        setCount(Math.max(roundedValue, minCount));
+                    }
+                    else {
+                        setCount(validValue);
+                    }
+                } }), _jsxs("div", { className: "flex flex-col  h-full", children: [
+                    _jsx("button", { type: "button", className: "border-0 flex-1 p-0 pt-[5px] bg-transparent", style: {
+                            ...buttonContainer,
+                        }, onClick: increment, children: _jsx(Triangle, { rotated: false }) }), _jsx("button", { type: "button", className: "border-0 flex-1 p-0 bg-transparent pb-[5px] pl-[1px]", style: {
+                            ...buttonContainer,
+                        }, onClick: decrement, children: _jsx(Triangle, { rotated: true }) })
+                ] })
+        ] }));
+};

package/dist/InlineCode.d.ts

@@ -0,0 +1,3 @@
+export declare const InlineCode: React.FC<{
+    readonly children: React.ReactNode;
+}>;

package/dist/InlineCode.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const InlineCode = ({ children }) => {
+    return _jsx("code", { className: "font-brand text-brand", children: children });
+};

package/dist/Input.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/dist/Input.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from './helpers/cn';
+export const Input = React.forwardRef(({ className, ...props }, ref) => {
+    return (_jsx("input", { ref: ref, className: cn('w-full bg-white dark:bg-[#121212] rounded-lg border-2 border-b-4 border-black outline-none h-14 px-3 fontbrand text-lg box-border', className), ...props }));
+});
+Input.displayName = 'Input';

package/dist/Link.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Link: React.FC<React.AnchorHTMLAttributes<HTMLAnchorElement>>;

package/dist/Link.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from './helpers/cn';
+export const Link = ({ className, ...props }) => {
+    return (_jsx("a", { ...props, className: cn(className, 'text-brand underline underline-offset-4'), children: props.children }));
+};

package/dist/PaperPlaneIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const PlanePaperIcon: React.FC<React.SVGProps<SVGSVGElement>>;

package/dist/PaperPlaneIcon.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PlanePaperIcon = (props) => {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", ...props, viewBox: "0 0 576 512", children: _jsx("path", { fill: "currentcolor", d: "M169.9 280L94.9 448.6 461.2 280 169.9 280zm291.3-48L94.9 63.4 169.9 232 461.2 232zM34.8 465.6L128 256 34.8 46.4C33 42.2 32 37.6 32 33 32 14.8 46.7 0 64.8 0 69.5 0 74.2 1 78.5 3L554.2 222c13.3 6.1 21.8 19.4 21.8 34s-8.5 27.9-21.8 34L78.5 509c-4.3 2-9 3-13.7 3-18.1 0-32.8-14.8-32.8-33 0-4.6 1-9.2 2.8-13.4z" }) }));
+};

package/dist/Select.d.ts

@@ -0,0 +1,13 @@
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as React from 'react';
+declare const Select: React.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React.RefAttributes<HTMLSpanElement>>;
+declare const SelectTrigger: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/Select.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Check, ChevronDown, ChevronUp } from 'lucide-react';
+import * as React from 'react';
+import { cn } from './helpers/cn';
+const Select = SelectPrimitive.Root;
+const SelectGroup = SelectPrimitive.Group;
+const SelectValue = SelectPrimitive.Value;
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn('flex h-10 w-full items-center justify-between rounded-md border-black border-2 border-b-4 bg-card-bg px-3 py-5 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 font-brand', className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })
+    ] })));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronUp, { className: "h-4 w-4" }) })));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn('flex cursor-default items-center justify-center py-1', className), ...props, children: _jsx(ChevronDown, { className: "h-4 w-4" }) })));
+SelectScrollDownButton.displayName =
+    SelectPrimitive.ScrollDownButton.displayName;
+const SelectContent = React.forwardRef(({ className, children, position = 'popper', ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, className: cn(' border-2 border-black relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md font-brand bg-card-bg text-text shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-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', position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1', className), position: position, ...props, children: [
+            _jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn('p-1', position === 'popper' &&
+                    'h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)'), children: children }), _jsx(SelectScrollDownButton, {})
+        ] }) })));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className), ...props })));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-slate-200 dark:focus:bg-white/10 data-disabled:pointer-events-none data-disabled:opacity-50 font-brand', className), ...props, children: [
+        _jsx("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })
+    ] })));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn('-mx-1 my-1 h-px bg-muted', className), ...props })));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/dist/Spinner.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Spinner: React.FC<{
+    readonly size: number;
+    readonly duration: number;
+}>;

package/dist/Spinner.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef } from 'react';
+const viewBox = 100;
+const lines = 8;
+// Generated from https://github.com/remotion-dev/template-next/commit/9282c93f7c51ada31a42e18a94680fa09a14eee3
+const translated = 'M 44 0 L 50 0 a 6 6 0 0 1 6 6 L 56 26 a 6 6 0 0 1 -6 6 L 50 32 a 6 6 0 0 1 -6 -6 L 44 6 a 6 6 0 0 1 6 -6 Z';
+export const Spinner = ({ size, duration }) => {
+    const style = useMemo(() => {
+        return {
+            width: size,
+            height: size,
+        };
+    }, [size]);
+    const pathsRef = useRef([]);
+    useEffect(() => {
+        const animate = () => {
+            const now = performance.now();
+            for (let index = 0; index < lines; index++) {
+                const path = pathsRef.current[index];
+                if (!path)
+                    continue;
+                // Calculate current opacity using the same animation as before
+                const progress = ((now / 1000 - index * (duration / lines)) % duration) / duration;
+                // Animation: opacity 1 → 0.15
+                const opacity = 1 - 0.85 * progress;
+                path.style.opacity = opacity.toString();
+            }
+            requestAnimationFrame(animate);
+        };
+        const id = requestAnimationFrame(animate);
+        return () => {
+            cancelAnimationFrame(id);
+        };
+    }, [duration]);
+    return (_jsx("svg", { style: style, viewBox: `0 0 ${viewBox} ${viewBox}`, children: new Array(lines).fill(true).map((_, index) => {
+            return (_jsx("path", { 
+                // @ts-expect-error
+                // eslint-disable-next-line no-return-assign
+                ref: (el) => (pathsRef.current[index] = el), style: {
+                    rotate: `${(index * Math.PI * 2) / lines}rad`,
+                    transformOrigin: 'center center',
+                    opacity: 1,
+                }, d: translated, fill: 'currentColor' }, index));
+        }) }));
+};

package/dist/Switch.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const Switch: React.FC<{
+    readonly active: boolean;
+    readonly onToggle: () => void;
+}>;

package/dist/Switch.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Switch = ({ active, onToggle }) => {
+    return (_jsx("div", { "data-active": active, className: "h-[34px] transition-all rounded-full w-[56px] border-2 border-b-4 bg-gray-200 p-[2px] cursor-pointer data-[active=true]:bg-brand border-black relative shrink-0", onClick: onToggle, children: _jsx("div", { "data-active": active, className: "h-[20px] w-[20px] left-[4px] top-[4px] transition-all rounded-full bg-white border-2 border-black absolute data-[active=true]:left-[calc(100%-24px)]" }) }));
+};

package/dist/Tabs.d.ts

@@ -0,0 +1,7 @@
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/Tabs.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as React from 'react';
+import { cn } from './helpers/cn';
+const Tabs = TabsPrimitive.Root;
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.List, { ref: ref, className: cn('inline-flex items-center justify-center bg-white p-1 border-2 border-black border-b-4 rounded-full', className), ...props })));
+TabsList.displayName = TabsPrimitive.List.displayName;
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Trigger, { ref: ref, className: cn('inline-flex items-center border-none font-brand bg-transparent justify-center whitespace-nowrap rounded-full px-3 py-1.5 text-sm ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-brand data-[state=active]:text-white data-[state=inactive]:hover:bg-gray-100', className), ...props })));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(TabsPrimitive.Content, { ref: ref, className: cn('mt-2 ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2', className), ...props })));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+export { Tabs, TabsContent, TabsList, TabsTrigger };

package/dist/Textarea.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/Textarea.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from './helpers/cn';
+export const Textarea = React.forwardRef(({ className, style, ...props }, ref) => {
+    return (_jsx("textarea", { ref: ref, className: cn('w-full bg-white dark:bg-[#121212] rounded-lg border-2 border-b-4 border-black outline-none px-3 py-3 fontbrand text-lg box-border field-sizing-content min-h-[90px]', className), style: {
+            ...style,
+        }, ...props }));
+});
+Textarea.displayName = 'Textarea';

package/dist/Triangle.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const Triangle: React.FC<React.SVGProps<SVGSVGElement>>;

package/dist/Triangle.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Triangle = (props) => {
+    return (_jsx("svg", { viewBox: "0 0 127 131", fill: "none", ...props, children: _jsx("path", { d: "M28.5644 0.011261C25.8196 0.159241 23.6077 0.591782 21.3786 1.43413C20.2669 1.84959 18.4446 2.75455 17.4418 3.38062C13.2472 5.993 10.0496 9.9201 8.38209 14.4903C8.04973 15.3953 7.15007 18.2809 6.5713 20.2672C2.71476 33.5453 0.525761 48.0643 0.0558711 63.4312C-0.0186237 65.8785 -0.0186237 71.7066 0.0558711 74.1141C0.371041 84.3018 1.35093 93.4992 3.12735 102.879C3.84937 106.675 5.00691 111.774 5.67736 114.091C7.04692 118.798 9.84334 122.805 13.8202 125.741C16.4848 127.711 19.5105 129.031 22.8627 129.68C24.4787 129.993 26.6104 130.135 28.1805 130.033C30.3523 129.89 34.6616 129.316 38.1628 128.695C53.9442 125.901 68.5223 120.898 81.7422 113.738C90.1143 109.202 97.2715 104.29 104.177 98.3312C111.059 92.4007 116.927 86.0206 122.09 78.8608C123.287 77.2045 123.889 76.237 124.491 75.019C126.038 71.8773 126.766 68.7527 126.76 65.2582C126.76 62.0027 126.141 59.1114 124.806 56.1518C124.164 54.7233 123.551 53.6988 122.176 51.7523C117.11 44.5868 111.489 38.3433 104.635 32.2762C94.011 22.8739 81.3927 15.1619 67.3017 9.45339C64.2474 8.21835 61.239 7.13128 57.6174 5.95315C49.9502 3.46598 40.4607 1.30891 32.4324 0.233231C31.1718 0.0624847 29.4584 -0.0342712 28.5644 0.011261Z", fill: "currentcolor" }) }));
+};

package/dist/helpers/Faces.d.ts

@@ -0,0 +1,5 @@
+import type { FaceType } from '@remotion/svg-3d-engine';
+import React from 'react';
+export declare const Faces: React.FC<{
+    readonly elements: FaceType[];
+}>;

package/dist/helpers/Faces.js

@@ -0,0 +1,7 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { threeDIntoSvgPath } from '@remotion/svg-3d-engine';
+export const Faces = ({ elements, ...svgProps }) => {
+    return (_jsx(_Fragment, { children: elements.map(({ points, color, crispEdges }, idx) => {
+            return (_jsx("path", { d: threeDIntoSvgPath(points), fill: color, shapeRendering: crispEdges ? 'crispEdges' : undefined, ...svgProps }, idx));
+        }) }));
+};

package/dist/helpers/Outer.d.ts

@@ -0,0 +1,9 @@
+export declare const Outer: React.FC<{
+    children: React.ReactNode;
+    width: number;
+    height: number;
+    cornerRadius: number;
+    hoverTransform: number;
+    parentRef: React.RefObject<HTMLDivElement | null>;
+    depthFactor: number;
+}>;

package/dist/helpers/Outer.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { parsePath, PathInternals, reduceInstructions } from '@remotion/paths';
+import { makeRect } from '@remotion/shapes';
+import { extrudeAndTransformElement, interpolateMatrix4d, makeMatrix3dTransform, reduceMatrices, rotateX, rotateY, scaled, translateX, translateY, translateZ, } from '@remotion/svg-3d-engine';
+import { interpolate } from 'remotion';
+import { Faces } from './Faces';
+import { useClickTransforms, useMousePosition } from './hover-transforms';
+export const Outer = ({ children, width, height, cornerRadius, hoverTransform, parentRef, depthFactor, }) => {
+    const clickTransform = useClickTransforms(parentRef);
+    const angle = useMousePosition(parentRef);
+    const appropriateScale = Math.min(1 + 0.1 * depthFactor, (20 + width) / width);
+    const transformationUnhovered = reduceMatrices([
+        rotateX(-Math.PI / 20),
+    ]);
+    const transformationHovered = reduceMatrices([
+        scaled(appropriateScale),
+        rotateX(-Math.PI / 16),
+        rotateX(Math.sin(angle) / 4),
+        rotateY(-Math.cos(angle) / 4),
+    ]);
+    const transformation = interpolateMatrix4d(hoverTransform, transformationUnhovered, transformationHovered);
+    const depthFromClick = clickTransform * 15 * depthFactor;
+    const depthFromHover = interpolate(hoverTransform, [0, 1], [10, 20]) * depthFactor;
+    const depth = depthFromHover;
+    const frontFace = reduceMatrices([
+        translateZ(-depth / 2 + depthFromClick),
+        translateZ(1.1),
+        transformation,
+    ]);
+    const centerOriented = reduceMatrices([
+        translateX(-width / 2),
+        translateY(-height / 2),
+        transformation,
+        translateX(width / 2),
+        translateY(height / 2),
+    ]);
+    const { path, instructions } = makeRect({ height, width, cornerRadius });
+    const { viewBox } = PathInternals.getBoundingBoxFromInstructions(reduceInstructions(instructions));
+    const inbetween = extrudeAndTransformElement({
+        sideColor: 'black',
+        crispEdges: false,
+        depth,
+        pressInDepth: depthFromClick,
+        points: parsePath(path),
+        description: 'rect',
+        transformations: centerOriented,
+    });
+    return (_jsxs("div", { className: "relative", style: { width, height }, children: [
+            _jsx("svg", { viewBox: viewBox, style: {
+                    overflow: 'visible',
+                    height,
+                    width,
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                }, pointerEvents: "none", children: _jsx(Faces, { elements: inbetween }) }), _jsx("div", { style: {
+                    transform: makeMatrix3dTransform(frontFace),
+                    width,
+                    height,
+                }, children: children })
+        ] }));
+};

package/dist/helpers/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/helpers/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/helpers/get-child-node-from.d.ts

@@ -0,0 +1 @@
+export declare const getChildNodeFrom: (htmlElement: HTMLDivElement | null) => HTMLElement | null;

package/dist/helpers/get-child-node-from.js

@@ -0,0 +1,14 @@
+export const getChildNodeFrom = (htmlElement) => {
+    if (!htmlElement) {
+        return null;
+    }
+    const { childNodes } = htmlElement;
+    if (childNodes.length === 0) {
+        return null;
+    }
+    const childNode = childNodes[0];
+    if (!childNode) {
+        return null;
+    }
+    return childNode;
+};

package/dist/helpers/hover-transforms.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+type State = {
+    progress: number;
+    isActive: boolean;
+};
+export declare const useHoverTransforms: (ref: React.RefObject<HTMLDivElement | null>, disabled: boolean) => State;
+export declare const useClickTransforms: (ref: React.RefObject<HTMLDivElement | null>) => number;
+export declare const useMousePosition: (ref: React.RefObject<HTMLDivElement | null>) => number;
+export {};

package/dist/helpers/hover-transforms.js

@@ -0,0 +1,177 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { getChildNodeFrom } from './get-child-node-from';
+export const useHoverTransforms = (ref, disabled) => {
+    const [state, setState] = React.useState({
+        progress: 0,
+        isActive: false,
+    });
+    const eventTarget = useMemo(() => new EventTarget(), []);
+    useEffect(() => {
+        if (disabled) {
+            eventTarget.dispatchEvent(new Event('disabled'));
+        }
+        else {
+            eventTarget.dispatchEvent(new Event('enabled'));
+        }
+    }, [disabled, eventTarget]);
+    React.useEffect(() => {
+        const element = ref.current;
+        if (!element)
+            return;
+        let animationFrame;
+        let start = null;
+        let isHovered = false;
+        let internalDisabled = disabled;
+        const getIsActive = () => {
+            return isHovered && !internalDisabled;
+        };
+        const animate = (timestamp) => {
+            if (start === null)
+                start = timestamp;
+            const progress = Math.min((timestamp - start) / 150, 1);
+            setState(() => ({
+                isActive: getIsActive(),
+                progress: getIsActive() ? progress : 1 - progress,
+            }));
+            if (progress < 1) {
+                animationFrame = requestAnimationFrame(animate);
+            }
+        };
+        const animateIn = () => {
+            start = null;
+            cancelAnimationFrame(animationFrame);
+            animationFrame = requestAnimationFrame(animate);
+        };
+        const handleMouseEnter = () => {
+            const prevIsActive = getIsActive();
+            isHovered = true;
+            if (prevIsActive === getIsActive()) {
+                return;
+            }
+            animateIn();
+        };
+        const handleMouseLeave = () => {
+            const prevIsActive = getIsActive();
+            isHovered = false;
+            if (prevIsActive === getIsActive()) {
+                return;
+            }
+            animateIn();
+        };
+        const handleDisabled = () => {
+            const prevIsActive = getIsActive();
+            internalDisabled = true;
+            if (prevIsActive === getIsActive()) {
+                return;
+            }
+            animateIn();
+        };
+        const handleEnabled = () => {
+            const prevIsActive = getIsActive();
+            internalDisabled = false;
+            if (prevIsActive === getIsActive()) {
+                return;
+            }
+            animateIn();
+        };
+        element.addEventListener('mouseenter', handleMouseEnter);
+        element.addEventListener('mouseleave', handleMouseLeave);
+        eventTarget.addEventListener('disabled', handleDisabled);
+        eventTarget.addEventListener('enabled', handleEnabled);
+        return () => {
+            element.removeEventListener('mouseenter', handleMouseEnter);
+            element.removeEventListener('mouseleave', handleMouseLeave);
+            eventTarget.removeEventListener('disabled', handleDisabled);
+            eventTarget.removeEventListener('enabled', handleEnabled);
+            cancelAnimationFrame(animationFrame);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [ref, eventTarget]);
+    return state;
+};
+export const useClickTransforms = (ref) => {
+    const [hoverProgress, setHoverProgress] = React.useState(0);
+    React.useEffect(() => {
+        const element = getChildNodeFrom(ref.current);
+        if (!element) {
+            return;
+        }
+        let animationFrame;
+        let start = null;
+        let isHovered = false;
+        const animate = (timestamp) => {
+            if (start === null)
+                start = timestamp;
+            const progress = Math.min((timestamp - start) / 150, 1);
+            setHoverProgress(isHovered ? progress : 1 - progress);
+            if (progress < 1) {
+                animationFrame = requestAnimationFrame(animate);
+            }
+        };
+        const handleMouseEnter = () => {
+            isHovered = true;
+            start = null;
+            cancelAnimationFrame(animationFrame);
+            animationFrame = requestAnimationFrame(animate);
+        };
+        const handleMouseLeave = () => {
+            isHovered = false;
+            start = null;
+            cancelAnimationFrame(animationFrame);
+            animationFrame = requestAnimationFrame(animate);
+        };
+        element.addEventListener('pointerdown', handleMouseEnter);
+        element.addEventListener('pointerup', handleMouseLeave);
+        return () => {
+            element.removeEventListener('pointerdown', handleMouseEnter);
+            element.removeEventListener('pointerup', handleMouseLeave);
+            cancelAnimationFrame(animationFrame);
+        };
+    }, [ref]);
+    return hoverProgress;
+};
+const getAngle = (ref, coordinates) => {
+    const element = getChildNodeFrom(ref);
+    if (!element) {
+        return 0;
+    }
+    if (coordinates === null) {
+        return 0;
+    }
+    const clientRect = element.getClientRects();
+    if (!clientRect) {
+        return 0;
+    }
+    if (clientRect.length === 0) {
+        return 0;
+    }
+    const center = {
+        x: clientRect[0].x + clientRect[0].width / 2,
+        y: clientRect[0].y + clientRect[0].height / 2,
+    };
+    const angle = Math.atan2(coordinates.y - center.y, coordinates.x - center.x);
+    return angle;
+};
+let lastCoordinates = null;
+export const useMousePosition = (ref) => {
+    const [angle, setAngle] = useState(getAngle(ref.current, lastCoordinates));
+    useEffect(() => {
+        const element = ref.current;
+        if (!element) {
+            return;
+        }
+        const onMouseMove = (e) => {
+            const clientRect = element.getClientRects();
+            if (!clientRect) {
+                return;
+            }
+            lastCoordinates = { y: e.clientY, x: e.clientX };
+            setAngle(getAngle(element, { y: e.clientY, x: e.clientX }));
+        };
+        window.addEventListener('mousemove', onMouseMove);
+        return () => {
+            window.removeEventListener('mousemove', onMouseMove);
+        };
+    }, [ref]);
+    return angle;
+};

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+export { Button } from './Button';
+export { Card } from './Card';
+export { CheckIcon } from './CheckIcon';
+export { Counter } from './Counter';
+export { InlineCode } from './InlineCode';
+export { Input } from './Input';
+export { Link } from './Link';
+export { PlanePaperIcon } from './PaperPlaneIcon';
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from './Select';
+export { Switch } from './Switch';
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs';
+export { Textarea } from './Textarea';
+export { Triangle } from './Triangle';

package/dist/index.js

@@ -0,0 +1,13 @@
+export { Button } from './Button';
+export { Card } from './Card';
+export { CheckIcon } from './CheckIcon';
+export { Counter } from './Counter';
+export { InlineCode } from './InlineCode';
+export { Input } from './Input';
+export { Link } from './Link';
+export { PlanePaperIcon } from './PaperPlaneIcon';
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from './Select';
+export { Switch } from './Switch';
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs';
+export { Textarea } from './Textarea';
+export { Triangle } from './Triangle';

package/index.css

@@ -0,0 +1,14 @@
+@source "./dist/esm/index.mjs";
+
+@theme {
+	--font-brand: 'GTPlanar', sans-serif;
+	--color-brand: #0b84f3;
+	--color-warn: #ff3232;
+	--color-text: black;
+	--color-button-bg: white;
+	--color-card-bg: white;
+}
+
+@theme inline {
+	--font-brand--font-feature-settings: 'ss03' 1;
+}

package/package.json

@@ -0,0 +1,64 @@
+{
+	"name": "@junwan666/remotion-design",
+	"version": "4.0.448-zh.0",
+	"main": "dist/index.js",
+	"types": "dist/index.d.ts",
+	"module": "dist/esm/index.mjs",
+	"repository": {
+		"url": "https://github.com/JunWan666/remotion-zh/tree/main/packages/design"
+	},
+	"sideEffects": false,
+	"author": "Jonny Burger <jonny@remotion.dev>",
+	"bugs": {
+		"url": "https://github.com/remotion-dev/remotion/issues"
+	},
+	"scripts": {
+		"formatting": "oxfmt src --check",
+		"format": "oxfmt src",
+		"lint": "eslint src",
+		"watch": "tsgo -w",
+		"make": "tsgo -d && bun --env-file=../.env.bundle bundle.ts"
+	},
+	"dependencies": {
+		"@remotion/paths": "npm:@junwan666/remotion-paths@4.0.448-zh.0",
+		"@remotion/shapes": "npm:@junwan666/remotion-shapes@4.0.448-zh.0",
+		"@remotion/svg-3d-engine": "npm:@junwan666/remotion-svg-3d-engine@4.0.448-zh.0",
+		"clsx": "^2.1.1",
+		"remotion": "npm:@junwan666/remotion@4.0.448-zh.0",
+		"@radix-ui/react-select": "2.1.1",
+		"@radix-ui/react-tabs": "^1.1.0",
+		"lucide-react": "0.439.0"
+	},
+	"peerDependencies": {
+		"react": ">=16.8.0",
+		"react-dom": ">=16.8.0"
+	},
+	"devDependencies": {
+		"@remotion/eslint-config-internal": "npm:@junwan666/remotion-eslint-config-internal@4.0.448-zh.0",
+		"eslint": "9.19.0",
+		"react": "19.2.3",
+		"react-dom": "19.2.3",
+		"tailwindcss": "4.2.0",
+		"@tailwindcss/cli": "4.2.0",
+		"tailwind-merge": "^2.6.0",
+		"bun-plugin-tailwind": "0.1.2",
+		"@typescript/native-preview": "7.0.0-dev.20260217.1"
+	},
+	"keywords": [],
+	"publishConfig": {
+		"access": "public"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"require": "./dist/index.js",
+			"module": "./dist/esm/index.mjs",
+			"import": "./dist/esm/index.mjs"
+		},
+		"./package.json": "./package.json",
+		"./register": "./index.css",
+		"./tailwind.css": "./dist/tailwind.css"
+	},
+	"description": "Design system",
+	"homepage": "https://www.remotion.dev/design"
+}