@glob-ui/button 0.1.0 → 0.2.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.
- package/dist/index.d.mts +1 -1
- package/dist/index.d.ts +1 -1
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -0
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -4
package/dist/index.d.mts
CHANGED
|
@@ -3,7 +3,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
|
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
|
|
5
5
|
declare const buttonVariants: (props?: ({
|
|
6
|
-
variant?: "primary" | "secondary" | "ghost" | "outline" | "link" | null | undefined;
|
|
6
|
+
variant?: "primary" | "secondary" | "danger" | "ghost" | "outline" | "link" | null | undefined;
|
|
7
7
|
size?: "sm" | "md" | "lg" | "icon" | null | undefined;
|
|
8
8
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
9
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ import * as class_variance_authority_types from 'class-variance-authority/types'
|
|
|
3
3
|
import { VariantProps } from 'class-variance-authority';
|
|
4
4
|
|
|
5
5
|
declare const buttonVariants: (props?: ({
|
|
6
|
-
variant?: "primary" | "secondary" | "ghost" | "outline" | "link" | null | undefined;
|
|
6
|
+
variant?: "primary" | "secondary" | "danger" | "ghost" | "outline" | "link" | null | undefined;
|
|
7
7
|
size?: "sm" | "md" | "lg" | "icon" | null | undefined;
|
|
8
8
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
9
9
|
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
package/dist/index.js
CHANGED
|
@@ -68,6 +68,7 @@ var buttonVariants = (0, import_class_variance_authority.cva)(
|
|
|
68
68
|
variant: {
|
|
69
69
|
primary: "bg-glob-primary text-glob-primary-foreground hover:bg-glob-primary-hover",
|
|
70
70
|
secondary: "bg-glob-text text-glob-surface hover:opacity-80",
|
|
71
|
+
danger: "bg-glob-danger text-glob-surface hover:opacity-90",
|
|
71
72
|
ghost: "text-glob-text hover:bg-glob-surface-hover",
|
|
72
73
|
outline: "border border-glob-border text-glob-text hover:bg-glob-surface-hover",
|
|
73
74
|
link: "text-glob-primary underline-offset-4 hover:underline"
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/button.tsx"],"sourcesContent":["export { Button, buttonVariants } from \"./button\"\nexport type { ButtonProps } from \"./button\"\n","import { forwardRef } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@glob-ui/utils\"\nimport { Spinner } from \"@glob-ui/spinner\"\nimport { Slot } from \"@glob-ui/slot\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 rounded-glob-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n {\n variants: {\n variant: {\n primary: \"bg-glob-primary text-glob-primary-foreground hover:bg-glob-primary-hover\",\n secondary: \"bg-glob-text text-glob-surface hover:opacity-80\",\n ghost: \"text-glob-text hover:bg-glob-surface-hover\",\n outline: \"border border-glob-border text-glob-text hover:bg-glob-surface-hover\",\n link: \"text-glob-primary underline-offset-4 hover:underline\",\n },\n size: {\n sm: \"h-8 px-3 text-xs\",\n md: \"h-10 px-4 text-sm\",\n lg: \"h-12 px-6 text-base\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"primary\",\n size: \"md\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** Render the single child (e.g. an <a>) with the button's styles and props instead of a <button>. */\n asChild?: boolean\n /**\n * Shows a spinner over the content, disables the button and sets aria-busy. Width stays the same.\n * With asChild only aria-busy/aria-disabled are set: the child is rendered as is.\n */\n loading?: boolean\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {\n if (asChild) {\n // Links and other elements have no disabled attribute; aria-disabled carries the state and style.\n return (\n <Slot\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n aria-disabled={disabled || loading || undefined}\n aria-busy={loading || undefined}\n {...props}\n >\n {children}\n </Slot>\n )\n }\n\n return (\n <button\n className={cn(buttonVariants({ variant, size, className }), loading && \"relative\")}\n ref={ref}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n {...props}\n >\n {loading ? (\n <>\n {/* opacity-0 (not invisible) keeps the width and keeps the label in the accessible name. */}\n <span className=\"inline-flex items-center gap-2 opacity-0\">{children}</span>\n <span className=\"absolute inset-0 flex items-center justify-center\">\n <Spinner size={size === \"lg\" ? \"md\" : \"sm\"} />\n </span>\n </>\n ) : (\n children\n )}\n </button>\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA2B;AAC3B,sCAAuC;AACvC,mBAAmB;AACnB,qBAAwB;AACxB,kBAAqB;
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/button.tsx"],"sourcesContent":["export { Button, buttonVariants } from \"./button\"\nexport type { ButtonProps } from \"./button\"\n","import { forwardRef } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@glob-ui/utils\"\nimport { Spinner } from \"@glob-ui/spinner\"\nimport { Slot } from \"@glob-ui/slot\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 rounded-glob-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n {\n variants: {\n variant: {\n primary: \"bg-glob-primary text-glob-primary-foreground hover:bg-glob-primary-hover\",\n secondary: \"bg-glob-text text-glob-surface hover:opacity-80\",\n danger: \"bg-glob-danger text-glob-surface hover:opacity-90\",\n ghost: \"text-glob-text hover:bg-glob-surface-hover\",\n outline: \"border border-glob-border text-glob-text hover:bg-glob-surface-hover\",\n link: \"text-glob-primary underline-offset-4 hover:underline\",\n },\n size: {\n sm: \"h-8 px-3 text-xs\",\n md: \"h-10 px-4 text-sm\",\n lg: \"h-12 px-6 text-base\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"primary\",\n size: \"md\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** Render the single child (e.g. an <a>) with the button's styles and props instead of a <button>. */\n asChild?: boolean\n /**\n * Shows a spinner over the content, disables the button and sets aria-busy. Width stays the same.\n * With asChild only aria-busy/aria-disabled are set: the child is rendered as is.\n */\n loading?: boolean\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {\n if (asChild) {\n // Links and other elements have no disabled attribute; aria-disabled carries the state and style.\n return (\n <Slot\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n aria-disabled={disabled || loading || undefined}\n aria-busy={loading || undefined}\n {...props}\n >\n {children}\n </Slot>\n )\n }\n\n return (\n <button\n className={cn(buttonVariants({ variant, size, className }), loading && \"relative\")}\n ref={ref}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n {...props}\n >\n {loading ? (\n <>\n {/* opacity-0 (not invisible) keeps the width and keeps the label in the accessible name. */}\n <span className=\"inline-flex items-center gap-2 opacity-0\">{children}</span>\n <span className=\"absolute inset-0 flex items-center justify-center\">\n <Spinner size={size === \"lg\" ? \"md\" : \"sm\"} />\n </span>\n </>\n ) : (\n children\n )}\n </button>\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,mBAA2B;AAC3B,sCAAuC;AACvC,mBAAmB;AACnB,qBAAwB;AACxB,kBAAqB;AA6Cb;AA3CR,IAAM,qBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAcA,IAAM,aAAS;AAAA,EACb,CAAC,IAA8F,QAAQ;AAAtG,iBAAE,aAAW,SAAS,MAAM,UAAU,OAAO,UAAU,OAAO,UAAU,SA7C3E,IA6CG,IAAqF,kBAArF,IAAqF,CAAnF,aAAW,WAAS,QAAM,WAAiB,WAAiB,YAAU;AACvE,QAAI,SAAS;AAEX,aACE;AAAA,QAAC;AAAA;AAAA,UACC,eAAW,iBAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,UAC1D;AAAA,UACA,iBAAe,YAAY,WAAW;AAAA,UACtC,aAAW,WAAW;AAAA,WAClB,QALL;AAAA,UAOE;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,iBAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,GAAG,WAAW,UAAU;AAAA,QACjF;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,aAAW,WAAW;AAAA,SAClB,QALL;AAAA,QAOE,oBACC,4EAEE;AAAA,sDAAC,UAAK,WAAU,4CAA4C,UAAS;AAAA,UACrE,4CAAC,UAAK,WAAU,qDACd,sDAAC,0BAAQ,MAAM,SAAS,OAAO,OAAO,MAAM,GAC9C;AAAA,WACF,IAEA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}
|
package/dist/index.mjs
CHANGED
|
@@ -44,6 +44,7 @@ var buttonVariants = cva(
|
|
|
44
44
|
variant: {
|
|
45
45
|
primary: "bg-glob-primary text-glob-primary-foreground hover:bg-glob-primary-hover",
|
|
46
46
|
secondary: "bg-glob-text text-glob-surface hover:opacity-80",
|
|
47
|
+
danger: "bg-glob-danger text-glob-surface hover:opacity-90",
|
|
47
48
|
ghost: "text-glob-text hover:bg-glob-surface-hover",
|
|
48
49
|
outline: "border border-glob-border text-glob-text hover:bg-glob-surface-hover",
|
|
49
50
|
link: "text-glob-primary underline-offset-4 hover:underline"
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/button.tsx"],"sourcesContent":["import { forwardRef } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@glob-ui/utils\"\nimport { Spinner } from \"@glob-ui/spinner\"\nimport { Slot } from \"@glob-ui/slot\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 rounded-glob-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n {\n variants: {\n variant: {\n primary: \"bg-glob-primary text-glob-primary-foreground hover:bg-glob-primary-hover\",\n secondary: \"bg-glob-text text-glob-surface hover:opacity-80\",\n ghost: \"text-glob-text hover:bg-glob-surface-hover\",\n outline: \"border border-glob-border text-glob-text hover:bg-glob-surface-hover\",\n link: \"text-glob-primary underline-offset-4 hover:underline\",\n },\n size: {\n sm: \"h-8 px-3 text-xs\",\n md: \"h-10 px-4 text-sm\",\n lg: \"h-12 px-6 text-base\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"primary\",\n size: \"md\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** Render the single child (e.g. an <a>) with the button's styles and props instead of a <button>. */\n asChild?: boolean\n /**\n * Shows a spinner over the content, disables the button and sets aria-busy. Width stays the same.\n * With asChild only aria-busy/aria-disabled are set: the child is rendered as is.\n */\n loading?: boolean\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {\n if (asChild) {\n // Links and other elements have no disabled attribute; aria-disabled carries the state and style.\n return (\n <Slot\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n aria-disabled={disabled || loading || undefined}\n aria-busy={loading || undefined}\n {...props}\n >\n {children}\n </Slot>\n )\n }\n\n return (\n <button\n className={cn(buttonVariants({ variant, size, className }), loading && \"relative\")}\n ref={ref}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n {...props}\n >\n {loading ? (\n <>\n {/* opacity-0 (not invisible) keeps the width and keeps the label in the accessible name. */}\n <span className=\"inline-flex items-center gap-2 opacity-0\">{children}</span>\n <span className=\"absolute inset-0 flex items-center justify-center\">\n <Spinner size={size === \"lg\" ? \"md\" : \"sm\"} />\n </span>\n </>\n ) : (\n children\n )}\n </button>\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,WAA8B;AACvC,SAAS,UAAU;AACnB,SAAS,eAAe;AACxB,SAAS,YAAY;
|
|
1
|
+
{"version":3,"sources":["../src/button.tsx"],"sourcesContent":["import { forwardRef } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { cn } from \"@glob-ui/utils\"\nimport { Spinner } from \"@glob-ui/spinner\"\nimport { Slot } from \"@glob-ui/slot\"\n\nconst buttonVariants = cva(\n \"inline-flex items-center justify-center gap-2 rounded-glob-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-glob-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50\",\n {\n variants: {\n variant: {\n primary: \"bg-glob-primary text-glob-primary-foreground hover:bg-glob-primary-hover\",\n secondary: \"bg-glob-text text-glob-surface hover:opacity-80\",\n danger: \"bg-glob-danger text-glob-surface hover:opacity-90\",\n ghost: \"text-glob-text hover:bg-glob-surface-hover\",\n outline: \"border border-glob-border text-glob-text hover:bg-glob-surface-hover\",\n link: \"text-glob-primary underline-offset-4 hover:underline\",\n },\n size: {\n sm: \"h-8 px-3 text-xs\",\n md: \"h-10 px-4 text-sm\",\n lg: \"h-12 px-6 text-base\",\n icon: \"h-10 w-10\",\n },\n },\n defaultVariants: {\n variant: \"primary\",\n size: \"md\",\n },\n }\n)\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** Render the single child (e.g. an <a>) with the button's styles and props instead of a <button>. */\n asChild?: boolean\n /**\n * Shows a spinner over the content, disables the button and sets aria-busy. Width stays the same.\n * With asChild only aria-busy/aria-disabled are set: the child is rendered as is.\n */\n loading?: boolean\n}\n\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n ({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) => {\n if (asChild) {\n // Links and other elements have no disabled attribute; aria-disabled carries the state and style.\n return (\n <Slot\n className={cn(buttonVariants({ variant, size, className }))}\n ref={ref}\n aria-disabled={disabled || loading || undefined}\n aria-busy={loading || undefined}\n {...props}\n >\n {children}\n </Slot>\n )\n }\n\n return (\n <button\n className={cn(buttonVariants({ variant, size, className }), loading && \"relative\")}\n ref={ref}\n disabled={disabled || loading}\n aria-busy={loading || undefined}\n {...props}\n >\n {loading ? (\n <>\n {/* opacity-0 (not invisible) keeps the width and keeps the label in the accessible name. */}\n <span className=\"inline-flex items-center gap-2 opacity-0\">{children}</span>\n <span className=\"absolute inset-0 flex items-center justify-center\">\n <Spinner size={size === \"lg\" ? \"md\" : \"sm\"} />\n </span>\n </>\n ) : (\n children\n )}\n </button>\n )\n }\n)\nButton.displayName = \"Button\"\n\nexport { Button, buttonVariants }\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAS,kBAAkB;AAC3B,SAAS,WAA8B;AACvC,SAAS,UAAU;AACnB,SAAS,eAAe;AACxB,SAAS,YAAY;AA6Cb,SAqBE,UArBF,KAqBE,YArBF;AA3CR,IAAM,iBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAW;AAAA,QACX,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MACR;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AAcA,IAAM,SAAS;AAAA,EACb,CAAC,IAA8F,QAAQ;AAAtG,iBAAE,aAAW,SAAS,MAAM,UAAU,OAAO,UAAU,OAAO,UAAU,SA7C3E,IA6CG,IAAqF,kBAArF,IAAqF,CAAnF,aAAW,WAAS,QAAM,WAAiB,WAAiB,YAAU;AACvE,QAAI,SAAS;AAEX,aACE;AAAA,QAAC;AAAA;AAAA,UACC,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,CAAC;AAAA,UAC1D;AAAA,UACA,iBAAe,YAAY,WAAW;AAAA,UACtC,aAAW,WAAW;AAAA,WAClB,QALL;AAAA,UAOE;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,WAAW,GAAG,eAAe,EAAE,SAAS,MAAM,UAAU,CAAC,GAAG,WAAW,UAAU;AAAA,QACjF;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,aAAW,WAAW;AAAA,SAClB,QALL;AAAA,QAOE,oBACC,iCAEE;AAAA,8BAAC,UAAK,WAAU,4CAA4C,UAAS;AAAA,UACrE,oBAAC,UAAK,WAAU,qDACd,8BAAC,WAAQ,MAAM,SAAS,OAAO,OAAO,MAAM,GAC9C;AAAA,WACF,IAEA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AACA,OAAO,cAAc;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@glob-ui/button",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"module": "./dist/index.mjs",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
"react": "^19"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@glob-ui/slot": "0.
|
|
30
|
-
"@glob-ui/spinner": "0.
|
|
31
|
-
"@glob-ui/utils": "0.
|
|
29
|
+
"@glob-ui/slot": "0.2.0",
|
|
30
|
+
"@glob-ui/spinner": "0.2.0",
|
|
31
|
+
"@glob-ui/utils": "0.2.0",
|
|
32
32
|
"class-variance-authority": "^0.7.1"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|