@walidsj/react-ui 0.1.0 → 0.1.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/components/button/button.d.ts +8 -2
- package/dist/index.js +77 -15
- package/dist/index.js.map +1 -1
- package/package.json +2 -1
|
@@ -1,8 +1,14 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
1
2
|
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
-
|
|
3
|
-
|
|
3
|
+
declare const buttonVariants: (props?: ({
|
|
4
|
+
variant?: "primary" | "secondary" | "outline" | "ghost" | "danger" | null | undefined;
|
|
5
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
6
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
7
|
+
export type ButtonVariant = NonNullable<VariantProps<typeof buttonVariants>["variant"]>;
|
|
8
|
+
export type ButtonSize = NonNullable<VariantProps<typeof buttonVariants>["size"]>;
|
|
4
9
|
export interface ButtonProps extends ComponentPropsWithoutRef<"button"> {
|
|
5
10
|
variant?: ButtonVariant;
|
|
6
11
|
size?: ButtonSize;
|
|
7
12
|
}
|
|
8
13
|
export declare const Button: import('react').ForwardRefExoticComponent<ButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
|
|
14
|
+
export {};
|
package/dist/index.js
CHANGED
|
@@ -1,33 +1,95 @@
|
|
|
1
1
|
import { Button as Button$1 } from "@base-ui/react/button";
|
|
2
|
-
import { forwardRef } from "react";
|
|
3
2
|
import { clsx } from "clsx";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
4
|
import { twMerge } from "tailwind-merge";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
import { Input as Input$1 } from "@base-ui/react/input";
|
|
7
|
+
// node_modules/class-variance-authority/dist/index.mjs
|
|
8
|
+
/**
|
|
9
|
+
* Copyright 2022 Joe Bell. All rights reserved.
|
|
10
|
+
*
|
|
11
|
+
* This file is licensed to you under the Apache License, Version 2.0
|
|
12
|
+
* (the "License"); you may not use this file except in compliance with the
|
|
13
|
+
* License. You may obtain a copy of the License at
|
|
14
|
+
*
|
|
15
|
+
* http://www.apache.org/licenses/LICENSE-2.0
|
|
16
|
+
*
|
|
17
|
+
* Unless required by applicable law or agreed to in writing, software
|
|
18
|
+
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
19
|
+
* WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the
|
|
20
|
+
* License for the specific language governing permissions and limitations under
|
|
21
|
+
* the License.
|
|
22
|
+
*/ var falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
|
|
23
|
+
var cx = clsx;
|
|
24
|
+
var cva = (base, config) => (props) => {
|
|
25
|
+
var _config_compoundVariants;
|
|
26
|
+
if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
|
|
27
|
+
const { variants, defaultVariants } = config;
|
|
28
|
+
const getVariantClassNames = Object.keys(variants).map((variant) => {
|
|
29
|
+
const variantProp = props === null || props === void 0 ? void 0 : props[variant];
|
|
30
|
+
const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
|
|
31
|
+
if (variantProp === null) return null;
|
|
32
|
+
const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
|
|
33
|
+
return variants[variant][variantKey];
|
|
34
|
+
});
|
|
35
|
+
const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
|
|
36
|
+
let [key, value] = param;
|
|
37
|
+
if (value === void 0) return acc;
|
|
38
|
+
acc[key] = value;
|
|
39
|
+
return acc;
|
|
40
|
+
}, {});
|
|
41
|
+
return cx(base, getVariantClassNames, config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param) => {
|
|
42
|
+
let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
|
|
43
|
+
return Object.entries(compoundVariantOptions).every((param) => {
|
|
44
|
+
let [key, value] = param;
|
|
45
|
+
return Array.isArray(value) ? value.includes({
|
|
46
|
+
...defaultVariants,
|
|
47
|
+
...propsWithoutUndefined
|
|
48
|
+
}[key]) : {
|
|
49
|
+
...defaultVariants,
|
|
50
|
+
...propsWithoutUndefined
|
|
51
|
+
}[key] === value;
|
|
52
|
+
}) ? [
|
|
53
|
+
...acc,
|
|
54
|
+
cvClass,
|
|
55
|
+
cvClassName
|
|
56
|
+
] : acc;
|
|
57
|
+
}, []), props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
|
|
58
|
+
};
|
|
7
59
|
// src/lib/cn.ts
|
|
8
60
|
function cn(...inputs) {
|
|
9
61
|
return twMerge(clsx(inputs));
|
|
10
62
|
}
|
|
11
63
|
// src/components/button/button.tsx
|
|
12
|
-
var
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
64
|
+
var buttonVariants = cva("inline-flex select-none items-center justify-center whitespace-nowrap rounded-ui-md font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50", {
|
|
65
|
+
variants: {
|
|
66
|
+
variant: {
|
|
67
|
+
primary: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
|
|
68
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70",
|
|
69
|
+
outline: "border border-border bg-transparent text-foreground hover:bg-muted active:bg-muted/70",
|
|
70
|
+
ghost: "bg-transparent text-foreground hover:bg-muted active:bg-muted/70",
|
|
71
|
+
danger: "bg-danger text-danger-foreground hover:bg-danger/90 active:bg-danger/80"
|
|
72
|
+
},
|
|
73
|
+
size: {
|
|
74
|
+
sm: "h-8 gap-1.5 px-3 text-sm",
|
|
75
|
+
md: "h-10 gap-2 px-4 text-sm",
|
|
76
|
+
lg: "h-12 gap-2.5 px-6 text-base"
|
|
77
|
+
}
|
|
78
|
+
},
|
|
79
|
+
defaultVariants: {
|
|
80
|
+
variant: "primary",
|
|
81
|
+
size: "md"
|
|
82
|
+
}
|
|
83
|
+
});
|
|
25
84
|
var Button = forwardRef(function Button({ className, variant = "primary", size = "md", type = "button", ...props }, ref) {
|
|
26
85
|
return /* @__PURE__ */ jsx(Button$1, {
|
|
27
86
|
...props,
|
|
28
87
|
ref,
|
|
29
88
|
type,
|
|
30
|
-
className: cn(
|
|
89
|
+
className: cn(buttonVariants({
|
|
90
|
+
variant,
|
|
91
|
+
size
|
|
92
|
+
}), className)
|
|
31
93
|
});
|
|
32
94
|
});
|
|
33
95
|
// src/components/input/input.tsx
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["BaseButton","BaseInput"],"sources":["../src/lib/cn.ts","../src/components/button/button.tsx","../src/components/input/input.tsx"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { Button as BaseButton } from \"@base-ui/react/button\";\nimport { type ComponentPropsWithoutRef, forwardRef, type Ref } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\
|
|
1
|
+
{"version":3,"file":"index.js","names":["BaseButton","BaseInput"],"sources":["../node_modules/class-variance-authority/dist/index.mjs","../src/lib/cn.ts","../src/components/button/button.tsx","../src/components/input/input.tsx"],"sourcesContent":["/**\n * Copyright 2022 Joe Bell. All rights reserved.\n *\n * This file is licensed to you under the Apache License, Version 2.0\n * (the \"License\"); you may not use this file except in compliance with the\n * License. You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS, WITHOUT\n * WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the\n * License for the specific language governing permissions and limitations under\n * the License.\n */ import { clsx } from \"clsx\";\nconst falsyToString = (value)=>typeof value === \"boolean\" ? `${value}` : value === 0 ? \"0\" : value;\nexport const cx = clsx;\nexport const cva = (base, config)=>(props)=>{\n var _config_compoundVariants;\n if ((config === null || config === void 0 ? void 0 : config.variants) == null) return cx(base, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);\n const { variants, defaultVariants } = config;\n const getVariantClassNames = Object.keys(variants).map((variant)=>{\n const variantProp = props === null || props === void 0 ? void 0 : props[variant];\n const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];\n if (variantProp === null) return null;\n const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);\n return variants[variant][variantKey];\n });\n const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param)=>{\n let [key, value] = param;\n if (value === undefined) {\n return acc;\n }\n acc[key] = value;\n return acc;\n }, {});\n const getCompoundVariantClassNames = config === null || config === void 0 ? void 0 : (_config_compoundVariants = config.compoundVariants) === null || _config_compoundVariants === void 0 ? void 0 : _config_compoundVariants.reduce((acc, param)=>{\n let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;\n return Object.entries(compoundVariantOptions).every((param)=>{\n let [key, value] = param;\n return Array.isArray(value) ? value.includes({\n ...defaultVariants,\n ...propsWithoutUndefined\n }[key]) : ({\n ...defaultVariants,\n ...propsWithoutUndefined\n })[key] === value;\n }) ? [\n ...acc,\n cvClass,\n cvClassName\n ] : acc;\n }, []);\n return cx(base, getVariantClassNames, getCompoundVariantClassNames, props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);\n };\n\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n","import { Button as BaseButton } from \"@base-ui/react/button\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { type ComponentPropsWithoutRef, forwardRef, type Ref } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nconst buttonVariants = cva(\n \"inline-flex select-none items-center justify-center whitespace-nowrap rounded-ui-md font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50\",\n {\n variants: {\n variant: {\n primary:\n \"bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80\",\n secondary:\n \"bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70\",\n outline:\n \"border border-border bg-transparent text-foreground hover:bg-muted active:bg-muted/70\",\n ghost:\n \"bg-transparent text-foreground hover:bg-muted active:bg-muted/70\",\n danger:\n \"bg-danger text-danger-foreground hover:bg-danger/90 active:bg-danger/80\",\n },\n size: {\n sm: \"h-8 gap-1.5 px-3 text-sm\",\n md: \"h-10 gap-2 px-4 text-sm\",\n lg: \"h-12 gap-2.5 px-6 text-base\",\n },\n },\n defaultVariants: {\n variant: \"primary\",\n size: \"md\",\n },\n },\n);\n\nexport type ButtonVariant = NonNullable<\n VariantProps<typeof buttonVariants>[\"variant\"]\n>;\nexport type ButtonSize = NonNullable<\n VariantProps<typeof buttonVariants>[\"size\"]\n>;\n\nexport interface ButtonProps extends ComponentPropsWithoutRef<\"button\"> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n}\n\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n function Button(\n { className, variant = \"primary\", size = \"md\", type = \"button\", ...props },\n ref,\n ) {\n return (\n <BaseButton\n {...props}\n ref={ref as Ref<HTMLElement>}\n type={type}\n className={cn(buttonVariants({ variant, size }), className)}\n />\n );\n },\n);\n","import { Input as BaseInput } from \"@base-ui/react/input\";\nimport { type ComponentPropsWithoutRef, forwardRef, type Ref } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nexport interface InputProps extends ComponentPropsWithoutRef<\"input\"> {\n invalid?: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n { className, invalid = false, \"aria-invalid\": ariaInvalid, ...props },\n ref,\n) {\n return (\n <BaseInput\n {...props}\n ref={ref as Ref<HTMLElement>}\n aria-invalid={invalid || ariaInvalid}\n className={cn(\n \"flex h-10 w-full rounded-ui-md border border-border bg-background px-3 py-2 text-sm text-foreground shadow-sm outline-none transition-colors placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-danger aria-[invalid=true]:focus-visible:ring-danger/30\",\n className,\n )}\n />\n );\n});\n"],"ignoreList":[0],"mappings":";;;;;;;;;;;;;;;;;;;;;GAeA,IAAM,iBAAiB,UAAQ,OAAO,UAAU,YAAY,GAAG,UAAU,UAAU,IAAI,MAAM;AAC7F,IAAa,KAAK;AAClB,IAAa,OAAO,MAAM,YAAU,UAAQ;CACpC,IAAI;CACJ,KAAK,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,IAAI,OAAO,aAAa,MAAM,OAAO,GAAG,MAAM,UAAU,QAAQ,UAAU,KAAK,IAAI,KAAK,IAAI,MAAM,OAAO,UAAU,QAAQ,UAAU,KAAK,IAAI,KAAK,IAAI,MAAM,SAAS;CACvN,MAAM,EAAE,UAAU,oBAAoB;CACtC,MAAM,uBAAuB,OAAO,KAAK,QAAQ,CAAC,CAAC,KAAK,YAAU;EAC9D,MAAM,cAAc,UAAU,QAAQ,UAAU,KAAK,IAAI,KAAK,IAAI,MAAM;EACxE,MAAM,qBAAqB,oBAAoB,QAAQ,oBAAoB,KAAK,IAAI,KAAK,IAAI,gBAAgB;EAC7G,IAAI,gBAAgB,MAAM,OAAO;EACjC,MAAM,aAAa,cAAc,WAAW,KAAK,cAAc,kBAAkB;EACjF,OAAO,SAAS,QAAQ,CAAC;CAC7B,CAAC;CACD,MAAM,wBAAwB,SAAS,OAAO,QAAQ,KAAK,CAAC,CAAC,QAAQ,KAAK,UAAQ;EAC9E,IAAI,CAAC,KAAK,SAAS;EACnB,IAAI,UAAU,KAAA,GACV,OAAO;EAEX,IAAI,OAAO;EACX,OAAO;CACX,GAAG,CAAC,CAAC;CAkBL,OAAO,GAAG,MAAM,sBAjBqB,WAAW,QAAQ,WAAW,KAAK,IAAI,KAAK,KAAK,2BAA2B,OAAO,sBAAsB,QAAQ,6BAA6B,KAAK,IAAI,KAAK,IAAI,yBAAyB,QAAQ,KAAK,UAAQ;EAC/O,IAAI,EAAE,OAAO,SAAS,WAAW,aAAa,GAAG,2BAA2B;EAC5E,OAAO,OAAO,QAAQ,sBAAsB,CAAC,CAAC,OAAO,UAAQ;GACzD,IAAI,CAAC,KAAK,SAAS;GACnB,OAAO,MAAM,QAAQ,KAAK,IAAI,MAAM,SAAS;IACzC,GAAG;IACH,GAAG;GACP,EAAE,IAAI,IAAK;IACP,GAAG;IACH,GAAG;GACP,EAAG,SAAS;EAChB,CAAC,IAAI;GACD,GAAG;GACH;GACA;EACJ,IAAI;CACR,GAAG,CAAC,CAAC,GAC+D,UAAU,QAAQ,UAAU,KAAK,IAAI,KAAK,IAAI,MAAM,OAAO,UAAU,QAAQ,UAAU,KAAK,IAAI,KAAK,IAAI,MAAM,SAAS;AAChM;;ACnDJ,SAAgB,GAAG,GAAG,QAAsB;CAC1C,OAAO,QAAQ,KAAK,MAAM,CAAC;AAC7B;;ACAA,IAAM,iBAAiB,IACrB,iSACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,WACE;GACF,SACE;GACF,OACE;GACF,QACE;EACJ;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;CACF;CACA,iBAAiB;EACf,SAAS;EACT,MAAM;CACR;AACF,CACF;AAcA,IAAa,SAAS,WACpB,SAAS,OACP,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,OAAO,UAAU,GAAG,SACnE,KACA;CACA,OACE,oBAACA,UAAD;EACE,GAAI;EACC;EACC;EACN,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;CAC3D,CAAA;AAEL,CACF;;ACpDA,IAAa,QAAQ,WAAyC,SAAS,MACrE,EAAE,WAAW,UAAU,OAAO,gBAAgB,aAAa,GAAG,SAC9D,KACA;CACA,OACE,oBAACC,SAAD;EACE,GAAI;EACC;EACL,gBAAc,WAAW;EACzB,WAAW,GACT,+XACA,SACF;CACD,CAAA;AAEL,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@walidsj/react-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Accessible React components styled with Tailwind CSS v4 and built on Base UI primitives.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "walidsj (https://github.com/walidsj)",
|
|
@@ -63,6 +63,7 @@
|
|
|
63
63
|
},
|
|
64
64
|
"dependencies": {
|
|
65
65
|
"@base-ui/react": "^1.9.0",
|
|
66
|
+
"class-variance-authority": "^0.7.1",
|
|
66
67
|
"clsx": "^2.1.1",
|
|
67
68
|
"tailwind-merge": "^3.7.0"
|
|
68
69
|
},
|