{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "button", "type": "registry:block", "title": "Button", "description": "A dependable action primitive for every app flow.", "author": "Wensity ", "dependencies": [ "@base-ui/react", "clsx", "tailwind-merge" ], "registryDependencies": [], "files": [ { "path": "registry/wensity/lib/utils.ts", "type": "registry:lib", "target": "@lib/utils.ts", "content": "import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n" }, { "path": "registry/wensity/button.tsx", "type": "registry:component", "target": "@components/wensity/button.tsx", "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Button as BaseButton } from \"@base-ui/react/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport type ButtonVariant =\n | \"default\"\n | \"secondary\"\n | \"outline\"\n | \"ghost\"\n | \"white\"\n | \"destructive\"\n | \"link\";\n\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\" | \"icon\";\n\nexport interface ButtonProps\n extends Omit, \"disabled\"> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n asChild?: boolean;\n loading?: boolean;\n disabled?: boolean;\n /** Keep the button focusable while disabled (Base UI behavior). */\n focusableWhenDisabled?: boolean;\n leftIcon?: React.ReactNode;\n rightIcon?: React.ReactNode;\n /** Animate the left icon on hover. */\n leftIconMotion?: \"trash\" | \"mail\";\n /** Animate the right icon on hover. */\n rightIconMotion?: \"arrow\" | \"download\";\n}\n\nconst base =\n \"wensity-button relative inline-flex shrink-0 transform-gpu items-center justify-center gap-2 whitespace-nowrap rounded-[var(--primitive-radius-control)] shadow-none \" +\n \"text-sm font-medium select-none touch-manipulation \" +\n \"transition-[background-color,border-color,color,opacity,transform] duration-180 ease-[var(--primitive-ease,cubic-bezier(0.23,1,0.32,1))] motion-reduce:transition-[background-color,border-color,color,opacity] \" +\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--primitive-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--background)] \" +\n \"disabled:pointer-events-none disabled:opacity-45 data-disabled:pointer-events-none data-disabled:opacity-45 \" +\n \"[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0\";\n\nconst pressable =\n \"active:scale-[0.97] active:duration-100 motion-reduce:active:scale-100 disabled:active:scale-100 data-disabled:active:scale-100\";\n\nconst variants: Record = {\n default: cn(\n pressable,\n \"border border-[color-mix(in_srgb,var(--primitive-control-solid)_88%,var(--background))] bg-[var(--primitive-control-solid)] text-[var(--primitive-control-solid-foreground)] \" +\n \"hover:border-[color-mix(in_srgb,var(--primitive-control-solid-hover)_82%,var(--background))] hover:bg-[var(--primitive-control-solid-hover)] \" +\n \"active:border-[color-mix(in_srgb,var(--primitive-control-solid-active)_92%,var(--background))] active:bg-[var(--primitive-control-solid-active)]\",\n ),\n secondary: cn(\n pressable,\n \"border border-[var(--border)] bg-[var(--muted)] text-[var(--foreground)] \" +\n \"hover:border-[var(--border-strong)] hover:bg-[var(--primitive-surface-hover)] \" +\n \"active:border-[var(--border-strong)] active:bg-[var(--primitive-surface-active)]\",\n ),\n outline: cn(\n pressable,\n \"border border-[var(--border-strong)] bg-transparent text-[var(--foreground)] \" +\n \"hover:border-[color-mix(in_srgb,var(--foreground)_20%,var(--background))] hover:bg-[var(--primitive-surface-hover)] \" +\n \"active:border-[color-mix(in_srgb,var(--foreground)_26%,var(--background))] active:bg-[var(--primitive-surface-active)]\",\n ),\n ghost: cn(\n pressable,\n \"border border-transparent bg-transparent text-[var(--muted-foreground)] \" +\n \"hover:border-[color-mix(in_srgb,var(--foreground)_10%,transparent)] hover:bg-[var(--primitive-surface-hover)] hover:text-[var(--foreground)] \" +\n \"active:border-[color-mix(in_srgb,var(--foreground)_14%,transparent)] active:bg-[var(--primitive-surface-active)]\",\n ),\n // Light: elevated surface; dark: shares control-solid with default (plan note).\n white: cn(\n pressable,\n \"border border-[color-mix(in_srgb,var(--foreground)_10%,var(--background))] bg-[var(--primitive-surface-elevated)] text-[var(--foreground)] \" +\n \"hover:border-[color-mix(in_srgb,var(--foreground)_14%,var(--background))] hover:bg-[var(--primitive-surface-hover)] \" +\n \"active:border-[color-mix(in_srgb,var(--foreground)_18%,var(--background))] active:bg-[var(--primitive-surface-active)] \" +\n \"dark:border-[color-mix(in_srgb,var(--primitive-control-solid)_88%,var(--background))] dark:bg-[var(--primitive-control-solid)] dark:text-[var(--primitive-control-solid-foreground)] \" +\n \"dark:hover:border-[color-mix(in_srgb,var(--primitive-control-solid-hover)_82%,var(--background))] dark:hover:bg-[var(--primitive-control-solid-hover)] \" +\n \"dark:active:border-[color-mix(in_srgb,var(--primitive-control-solid-active)_92%,var(--background))] dark:active:bg-[var(--primitive-control-solid-active)]\",\n ),\n destructive: cn(\n pressable,\n \"border border-[color-mix(in_srgb,var(--primitive-destructive)_78%,var(--foreground))] bg-[var(--primitive-destructive)] text-[var(--primitive-destructive-foreground)] \" +\n \"hover:border-[color-mix(in_srgb,var(--primitive-destructive-hover)_82%,var(--background))] hover:bg-[var(--primitive-destructive-hover)] \" +\n \"active:border-[color-mix(in_srgb,var(--primitive-destructive-active)_92%,var(--background))] active:bg-[var(--primitive-destructive-active)]\",\n ),\n link:\n \"h-auto border border-transparent bg-transparent px-0 font-medium text-[var(--foreground)] underline-offset-4 \" +\n \"hover:text-[var(--muted-foreground)] hover:underline hover:decoration-[color-mix(in_srgb,var(--foreground)_35%,transparent)] \" +\n \"active:scale-100 active:text-[var(--foreground)]\",\n};\n\nconst sizes: Record = {\n sm: \"h-[var(--primitive-control-height-sm)] gap-1.5 px-3.5 text-xs\",\n md: \"h-[var(--primitive-control-height-md)] gap-2 px-4\",\n lg: \"h-[var(--primitive-control-height-lg)] gap-2 px-5 text-[15px]\",\n icon: \"h-9 w-9 gap-0 p-0\",\n};\n\nconst ICON_SHELL = \"relative z-10 inline-flex shrink-0\";\n\nconst ICON_MOTION_SHELL =\n \"btn-icon-motion inline-flex shrink-0 origin-center transform-gpu\";\n\nconst leftIconMotionClass = {\n trash: cn(ICON_MOTION_SHELL, \"btn-icon-motion--trash\"),\n mail: cn(ICON_MOTION_SHELL, \"btn-icon-motion--mail\"),\n} as const;\n\nconst rightIconMotionClass = {\n arrow: cn(ICON_MOTION_SHELL, \"btn-icon-motion--arrow\"),\n download: cn(ICON_MOTION_SHELL, \"btn-icon-motion--download\"),\n} as const;\n\nconst BUTTON_ICON_KEYFRAMES_ID = \"button-icon-keyframes\";\n\nfunction ensureButtonIconKeyframes() {\n if (typeof document === \"undefined\") return;\n if (document.getElementById(BUTTON_ICON_KEYFRAMES_ID)) return;\n\n const style = document.createElement(\"style\");\n style.id = BUTTON_ICON_KEYFRAMES_ID;\n style.textContent = `\n @keyframes button-trash-shake {\n 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }\n 24% { transform: translate3d(-0.5px, -1px, 0) rotate(-4deg); }\n 48% { transform: translate3d(0.5px, -1px, 0) rotate(3deg); }\n 72% { transform: translate3d(-0.25px, -0.5px, 0) rotate(-1.5deg); }\n }\n @keyframes button-mail-lift {\n 0% { transform: translate3d(0, 0, 0) rotate(0deg); }\n 46% { transform: translate3d(2px, -2px, 0) rotate(-5deg); }\n 100% { transform: translate3d(0, 0, 0) rotate(0deg); }\n }\n @keyframes button-download-tick {\n 0%, 100% { transform: translate3d(0, 0, 0); }\n 46% { transform: translate3d(0, 2.5px, 0); }\n }\n .btn-icon-motion--arrow {\n transition: transform 160ms var(--primitive-ease, cubic-bezier(0.23, 1, 0.32, 1));\n }\n @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {\n .wensity-button:hover .btn-icon-motion--trash {\n animation: button-trash-shake 340ms var(--primitive-ease, cubic-bezier(0.23, 1, 0.32, 1)) both;\n }\n .wensity-button:hover .btn-icon-motion--mail {\n animation: button-mail-lift 320ms var(--primitive-ease, cubic-bezier(0.23, 1, 0.32, 1)) both;\n }\n .wensity-button:hover .btn-icon-motion--arrow {\n transform: translate3d(2px, 0, 0);\n }\n .wensity-button:active .btn-icon-motion--arrow {\n transform: translate3d(1px, 0, 0);\n }\n .wensity-button:hover .btn-icon-motion--download {\n animation: button-download-tick 300ms var(--primitive-ease, cubic-bezier(0.23, 1, 0.32, 1)) both;\n }\n }\n @media (prefers-reduced-motion: reduce) {\n .btn-icon-motion {\n animation: none !important;\n transition: none !important;\n transform: none !important;\n }\n }\n `;\n document.head.appendChild(style);\n}\n\nexport function buttonVariants({\n variant = \"default\",\n size = \"md\",\n className,\n}: {\n variant?: ButtonVariant;\n size?: ButtonSize;\n className?: string;\n} = {}) {\n return cn(base, variants[variant], sizes[size], className);\n}\n\nexport const Button = React.forwardRef(\n (\n {\n className,\n variant = \"default\",\n size = \"md\",\n asChild = false,\n loading = false,\n disabled = false,\n focusableWhenDisabled,\n leftIcon,\n rightIcon,\n leftIconMotion,\n rightIconMotion,\n children,\n type,\n ...props\n },\n ref,\n ) => {\n const isDisabled = disabled || loading;\n const hasIconMotion = Boolean(leftIconMotion || rightIconMotion);\n\n React.useLayoutEffect(() => {\n if (hasIconMotion) ensureButtonIconKeyframes();\n }, [hasIconMotion]);\n\n const composedClassName = buttonVariants({\n variant,\n size,\n className: cn(hasIconMotion && \"group\", className),\n });\n\n const content = (\n <>\n {loading ? : null}\n {!loading && leftIcon ? (\n \n {leftIcon}\n \n ) : null}\n {size === \"icon\" && !loading && !leftIcon && !rightIcon ? (\n \n {children}\n \n ) : (\n \n {children}\n \n )}\n {!loading && rightIcon ? (\n \n {rightIcon}\n \n ) : null}\n \n );\n\n if (asChild && React.isValidElement(children)) {\n // Compose Base UI Button props onto the provided child element (e.g. ).\n // The child owns the DOM tag; wrapped content still renders through its children.\n return (\n }\n disabled={isDisabled}\n focusableWhenDisabled={focusableWhenDisabled}\n nativeButton={false}\n className={composedClassName}\n aria-busy={loading ? true : undefined}\n data-loading={loading ? \"\" : undefined}\n render={children as React.ReactElement}\n {...props}\n />\n );\n }\n\n return (\n \n {content}\n \n );\n },\n);\n\nButton.displayName = \"Button\";\n\nfunction ButtonSpinner() {\n return (\n \n );\n}\n" } ], "cssVars": { "theme": { "font-sans": "var(--font-satoshi, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif)", "font-display": "var(--font-cabinet, ui-sans-serif, system-ui, sans-serif)", "color-background": "var(--background)", "color-foreground": "var(--foreground)", "color-surface": "var(--surface)", "color-surface-muted": "var(--surface-muted)", "color-border": "var(--border)", "color-border-strong": "var(--border-strong)", "color-muted": "var(--muted)", "color-muted-foreground": "var(--muted-foreground)", "color-ring": "var(--ring)", "color-chili-50": "#fff1ee", "color-chili-100": "#ffe2db", "color-chili-200": "#ffa896", "color-chili-300": "#ff8a73", "color-chili-400": "#f15a45", "color-chili-500": "#cd1c18", "color-chili-600": "#b31614", "color-chili-700": "#9b1313", "color-chili-800": "#6a0d0e", "color-chili-900": "#38000a", "color-chili-950": "#1f0006", "color-primitive-surface-elevated": "var(--primitive-surface-elevated)", "color-primitive-surface-overlay": "var(--primitive-surface-overlay)", "color-primitive-surface-hover": "var(--primitive-surface-hover)", "color-primitive-surface-active": "var(--primitive-surface-active)", "color-primitive-surface-selected": "var(--primitive-surface-selected)", "color-primitive-border-subtle": "var(--primitive-border-subtle)", "color-primitive-ring": "var(--primitive-ring)", "color-primitive-text-secondary": "var(--primitive-text-secondary)", "color-primitive-text-placeholder": "var(--primitive-text-placeholder)", "color-primitive-text-inverse": "var(--primitive-text-inverse)", "color-primitive-destructive": "var(--primitive-destructive)", "color-primitive-destructive-hover": "var(--primitive-destructive-hover)", "color-primitive-destructive-active": "var(--primitive-destructive-active)", "color-primitive-destructive-foreground": "var(--primitive-destructive-foreground)", "color-primitive-destructive-surface": "var(--primitive-destructive-surface)", "color-primitive-destructive-border": "var(--primitive-destructive-border)", "color-primitive-success": "var(--primitive-success)", "color-primitive-warning": "var(--primitive-warning)", "color-primitive-info": "var(--primitive-info)", "color-primitive-control-solid": "var(--primitive-control-solid)", "color-primitive-control-solid-hover": "var(--primitive-control-solid-hover)", "color-primitive-control-solid-active": "var(--primitive-control-solid-active)", "color-primitive-control-solid-foreground": "var(--primitive-control-solid-foreground)", "color-primitive-chart-1": "var(--primitive-chart-1)", "color-primitive-chart-2": "var(--primitive-chart-2)", "color-primitive-chart-3": "var(--primitive-chart-3)", "color-primitive-chart-4": "var(--primitive-chart-4)", "color-primitive-chart-5": "var(--primitive-chart-5)", "color-primitive-chart-6": "var(--primitive-chart-6)", "radius-primitive": "var(--primitive-radius)", "radius-primitive-control": "var(--primitive-radius-control)", "radius-primitive-control-sm": "var(--primitive-radius-control-sm)", "radius-primitive-surface": "var(--primitive-radius-surface)", "radius-primitive-item": "var(--primitive-radius-item)", "font-primitive-sans": "var(--primitive-font-sans)", "font-primitive-display": "var(--primitive-font-display)", "font-primitive-mono": "var(--primitive-font-mono)", "spacing-primitive-control-height-sm": "var(--primitive-control-height-sm)", "spacing-primitive-control-height-md": "var(--primitive-control-height-md)", "spacing-primitive-control-height-lg": "var(--primitive-control-height-lg)" }, "light": { "background": "#fafafa", "foreground": "#0a0a0a", "surface": "#ffffff", "surface-muted": "#f4f4f5", "border": "rgba(10, 10, 10, 0.08)", "border-strong": "rgba(10, 10, 10, 0.16)", "muted": "#f4f4f5", "muted-foreground": "#52525b", "ring": "#cd1c18", "pattern-fg": "rgba(10, 10, 10, 0.07)", "llb-primary": "#18181b", "llb-primary-fg": "#ffffff", "llb-success": "#1f883d", "llb-error": "#cf222e", "primitive-surface-elevated": "#ffffff", "primitive-surface-overlay": "#ffffff", "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 4%, transparent)", "primitive-surface-active": "color-mix(in srgb, var(--foreground) 7%, transparent)", "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 6%, transparent)", "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)", "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)", "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)", "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)", "primitive-radius": "0.875rem", "primitive-font-sans": "var(--font-sans)", "primitive-font-display": "var(--font-display)", "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", "primitive-control-solid": "#24292d", "primitive-control-solid-hover": "#2c3237", "primitive-control-solid-active": "#1e2326", "primitive-control-solid-foreground": "#ffffff", "primitive-chart-1": "#2a78d6", "primitive-chart-2": "#1baf7a", "primitive-chart-3": "#eda100", "primitive-chart-4": "#008300", "primitive-chart-5": "#4a3aa7", "primitive-chart-6": "#e34948", "primitive-text-inverse": "#ffffff", "primitive-text-hint": "0.6875rem", "primitive-destructive": "#dc2626", "primitive-destructive-hover": "#b91c1c", "primitive-destructive-active": "#991b1b", "primitive-destructive-foreground": "#ffffff", "primitive-destructive-surface": "rgba(220, 38, 38, 0.10)", "primitive-destructive-border": "rgba(220, 38, 38, 0.45)", "primitive-success": "#047857", "primitive-success-surface": "rgba(4, 120, 87, 0.10)", "primitive-success-border": "rgba(4, 120, 87, 0.45)", "primitive-warning": "#b45309", "primitive-warning-surface": "rgba(180, 83, 9, 0.10)", "primitive-warning-border": "rgba(180, 83, 9, 0.45)", "primitive-info": "#0369a1", "primitive-info-surface": "rgba(3, 105, 161, 0.10)", "primitive-info-border": "rgba(3, 105, 161, 0.45)", "primitive-radius-control": "var(--primitive-radius)", "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))", "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))", "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))", "primitive-control-height-sm": "2rem", "primitive-control-height-md": "2.25rem", "primitive-control-height-lg": "2.5rem", "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.06), 0 8px 24px -12px rgba(0, 0, 0, 0.08)", "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.06), 0 18px 48px -24px rgba(0, 0, 0, 0.35)", "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.08), 0 24px 64px -28px rgba(0, 0, 0, 0.42)", "primitive-z-overlay": "100", "primitive-z-popover": "130", "primitive-z-toast": "140", "primitive-backdrop": "rgba(0, 0, 0, 0.6)", "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)" }, "dark": { "background": "#0a0a0b", "foreground": "#f5f5f6", "surface": "#111113", "surface-muted": "#18181b", "border": "rgba(255, 255, 255, 0.08)", "border-strong": "rgba(255, 255, 255, 0.14)", "muted": "#1c1c1f", "muted-foreground": "#a1a1aa", "ring": "#cd1c18", "pattern-fg": "rgba(255, 255, 255, 0.06)", "llb-primary": "#f5f5f6", "llb-primary-fg": "#0a0a0b", "llb-success": "#2da44e", "llb-error": "#f85149", "primitive-surface-elevated": "#0f0f10", "primitive-surface-overlay": "#141415", "primitive-surface-hover": "color-mix(in srgb, var(--foreground) 5%, transparent)", "primitive-surface-active": "color-mix(in srgb, var(--foreground) 10%, transparent)", "primitive-surface-selected": "color-mix(in srgb, var(--foreground) 8%, transparent)", "primitive-border-subtle": "color-mix(in srgb, var(--border) 60%, transparent)", "primitive-ring": "color-mix(in srgb, var(--foreground) 45%, transparent)", "primitive-text-secondary": "color-mix(in srgb, var(--foreground) 72%, transparent)", "primitive-text-placeholder": "color-mix(in srgb, var(--muted-foreground) 85%, transparent)", "primitive-radius": "0.875rem", "primitive-font-sans": "var(--font-sans)", "primitive-font-display": "var(--font-display)", "primitive-font-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace", "primitive-control-solid": "#f5f3ee", "primitive-control-solid-hover": "#ffffff", "primitive-control-solid-active": "#e8e4da", "primitive-control-solid-foreground": "#151719", "primitive-chart-1": "#3987e5", "primitive-chart-2": "#199e70", "primitive-chart-3": "#c98500", "primitive-chart-4": "#008300", "primitive-chart-5": "#9085e9", "primitive-chart-6": "#e66767", "primitive-text-inverse": "#151719", "primitive-text-hint": "0.6875rem", "primitive-destructive": "#e11d2e", "primitive-destructive-hover": "#c1121f", "primitive-destructive-active": "#a4161a", "primitive-destructive-foreground": "#ffffff", "primitive-destructive-surface": "rgba(225, 29, 46, 0.12)", "primitive-destructive-border": "rgba(225, 29, 46, 0.52)", "primitive-success": "#34d399", "primitive-success-surface": "rgba(52, 211, 153, 0.12)", "primitive-success-border": "rgba(52, 211, 153, 0.45)", "primitive-warning": "#fbbf24", "primitive-warning-surface": "rgba(251, 191, 36, 0.12)", "primitive-warning-border": "rgba(251, 191, 36, 0.45)", "primitive-info": "#38bdf8", "primitive-info-surface": "rgba(56, 189, 248, 0.12)", "primitive-info-border": "rgba(56, 189, 248, 0.45)", "primitive-radius-control": "var(--primitive-radius)", "primitive-radius-control-sm": "max(0px, calc(var(--primitive-radius) - 4px))", "primitive-radius-surface": "calc(var(--primitive-radius) + min(2px, var(--primitive-radius)))", "primitive-radius-item": "max(0px, calc(var(--primitive-radius-surface) - 6px))", "primitive-control-height-sm": "2rem", "primitive-control-height-md": "2.25rem", "primitive-control-height-lg": "2.5rem", "primitive-shadow-raised": "0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6)", "primitive-shadow-overlay": "0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 56px -28px rgba(0, 0, 0, 0.72)", "primitive-shadow-modal": "0 1px 2px rgba(0, 0, 0, 0.45), 0 28px 72px -32px rgba(0, 0, 0, 0.8)", "primitive-z-overlay": "100", "primitive-z-popover": "130", "primitive-z-toast": "140", "primitive-backdrop": "rgba(0, 0, 0, 0.6)", "primitive-ease": "cubic-bezier(0.23, 1, 0.32, 1)" } }, "css": { "@layer base": { ":where([data-wensity-primitive])": { "font-family": "var(--primitive-font-sans)" } }, "@utility scrollbar-hidden": { "scrollbar-width": "none", "-ms-overflow-style": "none", "&::-webkit-scrollbar": { "display": "none" } }, "@keyframes wensity-marquee-x": { "from": { "transform": "translate3d(0, 0, 0)" }, "to": { "transform": "translate3d(-50%, 0, 0)" } }, "@keyframes wensity-marquee-x-reverse": { "from": { "transform": "translate3d(-50%, 0, 0)" }, "to": { "transform": "translate3d(0, 0, 0)" } }, "@keyframes wensity-morph-rot-cw": { "from": { "transform": "rotate(0deg)" }, "to": { "transform": "rotate(360deg)" } }, "@keyframes wensity-morph-rot-ccw": { "from": { "transform": "rotate(0deg)" }, "to": { "transform": "rotate(-360deg)" } } }, "docs": "Free Wensity component. Installs to @components/wensity/button.tsx. For Pro components and updates, use pnpm dlx wensity@latest add button.", "categories": [ "UI Primitives", "wensity", "free" ], "meta": { "wensity": { "slug": "button", "access": "free", "category": "UI Primitives", "kind": "component", "componentUrl": "https://ui.wensity.com/primitives/button", "shadcnUrl": "https://ui.wensity.com/r/button", "cliInstall": "pnpm dlx wensity@latest add button" } } }