canvas-ui-sdk 0.3.0 → 0.3.1
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.
- package/dist/index.d.ts +10 -1
- package/dist/index.js +157 -104
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/registry/ui/button.json +1 -1
package/package.json
CHANGED
package/registry/ui/button.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
{
|
|
7
7
|
"path": "components/ui/button.tsx",
|
|
8
8
|
"type": "registry:ui",
|
|
9
|
-
"content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\n\n// Base button styles (layout and structure only, colors applied via CSS variables)\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n {\n variants: {\n variant: {\n // Custom Canvas variants (styled via CSS variables in component)\n primary: \"\",\n \"primary-outline\": \"border\",\n \"primary-neutral\": \"\",\n neutral: \"border\",\n \"neutral-delete\": \"border\",\n delete: \"\",\n // Legacy shadcn variants (for backwards compatibility)\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive: \"bg-destructive text-white hover:bg-destructive/90\",\n outline: \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n // Custom Canvas sizes (styled via CSS variables in component)\n mini: \"\",\n sm: \"\",\n default: \"\",\n lg: \"\",\n // Legacy shadcn sizes\n icon: \"size-9\",\n \"icon-sm\": \"size-8\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\n// CSS variable mappings for Canvas design system variants\nconst variantStyles: Record<string, React.CSSProperties> = {\n primary: {\n backgroundColor: \"var(--btn-primary-bg)\",\n color: \"var(--btn-primary-text)\",\n borderColor: \"var(--btn-primary-border)\",\n },\n \"primary-outline\": {\n backgroundColor: \"var(--btn-primary-outline-bg)\",\n color: \"var(--btn-primary-outline-text)\",\n borderColor: \"var(--btn-primary-outline-border)\",\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n },\n \"primary-neutral\": {\n backgroundColor: \"var(--btn-primary-neutral-bg)\",\n color: \"var(--btn-primary-neutral-text)\",\n borderColor: \"var(--btn-primary-neutral-border)\",\n },\n neutral: {\n backgroundColor: \"var(--btn-neutral-bg)\",\n color: \"var(--btn-neutral-text)\",\n borderColor: \"var(--btn-neutral-border)\",\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n },\n \"neutral-delete\": {\n backgroundColor: \"var(--btn-neutral-delete-bg)\",\n color: \"var(--btn-neutral-delete-text)\",\n borderColor: \"var(--btn-neutral-delete-border)\",\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n },\n delete: {\n backgroundColor: \"var(--btn-delete-bg)\",\n color: \"var(--btn-delete-text)\",\n borderColor: \"var(--btn-delete-border)\",\n },\n}\n\n// CSS variable mappings for Canvas design system sizes\nconst sizeStyles: Record<string, React.CSSProperties> = {\n mini: {\n height: \"var(--btn-mini-height)\",\n paddingLeft: \"var(--btn-mini-px)\",\n paddingRight: \"var(--btn-mini-px)\",\n fontSize: \"var(--btn-mini-font-size)\",\n borderRadius: \"var(--btn-mini-radius)\",\n fontWeight: \"var(--btn-mini-font-weight)\" as React.CSSProperties[\"fontWeight\"],\n letterSpacing: \"var(--btn-mini-letter-spacing)\",\n },\n sm: {\n height: \"var(--btn-small-height)\",\n paddingLeft: \"var(--btn-small-px)\",\n paddingRight: \"var(--btn-small-px)\",\n fontSize: \"var(--btn-small-font-size)\",\n borderRadius: \"var(--btn-small-radius)\",\n fontWeight: \"var(--btn-small-font-weight)\" as React.CSSProperties[\"fontWeight\"],\n letterSpacing: \"var(--btn-small-letter-spacing)\",\n },\n default: {\n height: \"var(--btn-standard-height)\",\n paddingLeft: \"var(--btn-standard-px)\",\n paddingRight: \"var(--btn-standard-px)\",\n fontSize: \"var(--btn-standard-font-size)\",\n borderRadius: \"var(--btn-standard-radius)\",\n fontWeight: \"var(--btn-standard-font-weight)\" as React.CSSProperties[\"fontWeight\"],\n letterSpacing: \"var(--btn-standard-letter-spacing)\",\n },\n lg: {\n height: \"var(--btn-large-height)\",\n paddingLeft: \"var(--btn-large-px)\",\n paddingRight: \"var(--btn-large-px)\",\n fontSize: \"var(--btn-large-font-size)\",\n borderRadius: \"var(--btn-large-radius)\",\n fontWeight: \"var(--btn-large-font-weight)\" as React.CSSProperties[\"fontWeight\"],\n letterSpacing: \"var(--btn-large-letter-spacing)\",\n },\n}\n\n// Custom Canvas variants that use CSS variables\nconst canvasVariants = [\"primary\", \"primary-outline\", \"primary-neutral\", \"neutral\", \"neutral-delete\", \"delete\"]\nconst canvasSizes = [\"mini\", \"sm\", \"default\", \"lg\"]\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n style,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot : \"button\"\n\n // Build style object with CSS variables for Canvas variants/sizes\n const computedStyle: React.CSSProperties = { ...style }\n \n if (variant && canvasVariants.includes(variant)) {\n Object.assign(computedStyle, variantStyles[variant])\n }\n \n if (size && canvasSizes.includes(size)) {\n Object.assign(computedStyle, sizeStyles[size])\n }\n\n return (\n <Comp\n data-slot=\"button\"\n data-variant={variant}\n data-size={size}\n className={cn(buttonVariants({ variant, size, className }))}\n style={Object.keys(computedStyle).length > 0 ? computedStyle : undefined}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n"
|
|
9
|
+
"content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"../../lib/utils\"\n\n// Base button styles (layout and structure only, colors applied via CSS variables)\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]\",\n {\n variants: {\n variant: {\n // Custom Canvas variants (styled via CSS variables in component)\n primary: \"\",\n \"primary-outline\": \"border\",\n \"primary-neutral\": \"\",\n neutral: \"border\",\n \"neutral-delete\": \"border\",\n delete: \"\",\n // Legacy shadcn variants (for backwards compatibility)\n default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n destructive: \"bg-destructive text-white hover:bg-destructive/90\",\n outline: \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground\",\n secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80\",\n ghost: \"hover:bg-accent hover:text-accent-foreground\",\n link: \"text-primary underline-offset-4 hover:underline\",\n },\n size: {\n // Custom Canvas sizes (styled via CSS variables in component)\n mini: \"\",\n sm: \"\",\n default: \"\",\n lg: \"\",\n // Legacy shadcn sizes\n icon: \"size-9\",\n \"icon-sm\": \"size-8\",\n \"icon-lg\": \"size-10\",\n },\n },\n defaultVariants: {\n variant: \"default\",\n size: \"default\",\n },\n }\n)\n\n// CSS variable mappings for Canvas design system variants\nconst variantStyles: Record<string, React.CSSProperties> = {\n primary: {\n backgroundColor: \"var(--btn-primary-bg)\",\n color: \"var(--btn-primary-text)\",\n borderColor: \"var(--btn-primary-border)\",\n },\n \"primary-outline\": {\n backgroundColor: \"var(--btn-primary-outline-bg)\",\n color: \"var(--btn-primary-outline-text)\",\n borderColor: \"var(--btn-primary-outline-border)\",\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n },\n \"primary-neutral\": {\n backgroundColor: \"var(--btn-primary-neutral-bg)\",\n color: \"var(--btn-primary-neutral-text)\",\n borderColor: \"var(--btn-primary-neutral-border)\",\n },\n neutral: {\n backgroundColor: \"var(--btn-neutral-bg)\",\n color: \"var(--btn-neutral-text)\",\n borderColor: \"var(--btn-neutral-border)\",\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n },\n \"neutral-delete\": {\n backgroundColor: \"var(--btn-neutral-delete-bg)\",\n color: \"var(--btn-neutral-delete-text)\",\n borderColor: \"var(--btn-neutral-delete-border)\",\n borderWidth: \"1px\",\n borderStyle: \"solid\",\n },\n delete: {\n backgroundColor: \"var(--btn-delete-bg)\",\n color: \"var(--btn-delete-text)\",\n borderColor: \"var(--btn-delete-border)\",\n },\n}\n\n// CSS variable mappings for Canvas design system sizes\nconst sizeStyles: Record<string, React.CSSProperties> = {\n mini: {\n height: \"var(--btn-mini-height)\",\n paddingLeft: \"var(--btn-mini-px)\",\n paddingRight: \"var(--btn-mini-px)\",\n fontSize: \"var(--btn-mini-font-size)\",\n borderRadius: \"var(--btn-mini-radius)\",\n fontWeight: \"var(--btn-mini-font-weight)\" as React.CSSProperties[\"fontWeight\"],\n letterSpacing: \"var(--btn-mini-letter-spacing)\",\n fontFamily: \"var(--btn-mini-font-family, var(--typo-button-font, var(--typo-global-font)))\",\n },\n sm: {\n height: \"var(--btn-small-height)\",\n paddingLeft: \"var(--btn-small-px)\",\n paddingRight: \"var(--btn-small-px)\",\n fontSize: \"var(--btn-small-font-size)\",\n borderRadius: \"var(--btn-small-radius)\",\n fontWeight: \"var(--btn-small-font-weight)\" as React.CSSProperties[\"fontWeight\"],\n letterSpacing: \"var(--btn-small-letter-spacing)\",\n fontFamily: \"var(--btn-small-font-family, var(--typo-button-font, var(--typo-global-font)))\",\n },\n default: {\n height: \"var(--btn-standard-height)\",\n paddingLeft: \"var(--btn-standard-px)\",\n paddingRight: \"var(--btn-standard-px)\",\n fontSize: \"var(--btn-standard-font-size)\",\n borderRadius: \"var(--btn-standard-radius)\",\n fontWeight: \"var(--btn-standard-font-weight)\" as React.CSSProperties[\"fontWeight\"],\n letterSpacing: \"var(--btn-standard-letter-spacing)\",\n fontFamily: \"var(--btn-standard-font-family, var(--typo-button-font, var(--typo-global-font)))\",\n },\n lg: {\n height: \"var(--btn-large-height)\",\n paddingLeft: \"var(--btn-large-px)\",\n paddingRight: \"var(--btn-large-px)\",\n fontSize: \"var(--btn-large-font-size)\",\n borderRadius: \"var(--btn-large-radius)\",\n fontWeight: \"var(--btn-large-font-weight)\" as React.CSSProperties[\"fontWeight\"],\n letterSpacing: \"var(--btn-large-letter-spacing)\",\n fontFamily: \"var(--btn-large-font-family, var(--typo-button-font, var(--typo-global-font)))\",\n },\n}\n\n// Custom Canvas variants that use CSS variables\nconst canvasVariants = [\"primary\", \"primary-outline\", \"primary-neutral\", \"neutral\", \"neutral-delete\", \"delete\"]\nconst canvasSizes = [\"mini\", \"sm\", \"default\", \"lg\"]\n\nfunction Button({\n className,\n variant = \"default\",\n size = \"default\",\n asChild = false,\n style,\n ...props\n}: React.ComponentProps<\"button\"> &\n VariantProps<typeof buttonVariants> & {\n asChild?: boolean\n }) {\n const Comp = asChild ? Slot : \"button\"\n\n // Build style object with CSS variables for Canvas variants/sizes\n const computedStyle: React.CSSProperties = { ...style }\n \n if (variant && canvasVariants.includes(variant)) {\n Object.assign(computedStyle, variantStyles[variant])\n }\n \n if (size && canvasSizes.includes(size)) {\n Object.assign(computedStyle, sizeStyles[size])\n }\n\n return (\n <Comp\n data-slot=\"button\"\n data-variant={variant}\n data-size={size}\n className={cn(buttonVariants({ variant, size, className }))}\n style={Object.keys(computedStyle).length > 0 ? computedStyle : undefined}\n {...props}\n />\n )\n}\n\nexport { Button, buttonVariants }\n"
|
|
10
10
|
}
|
|
11
11
|
],
|
|
12
12
|
"dependencies": [
|