@walidsj/react-ui 0.1.3 → 0.1.5

package/README.md

@@ -29,13 +29,14 @@ Import the compiled stylesheet once, then use components from the package
 root:
 
 ``` tsx
-import { Button, Input } from "@walidsj/react-ui";
+import { Button, Input, Textarea } from "@walidsj/react-ui";
 import "@walidsj/react-ui/style.css";
 
 export function Example() {
   return (
     <div style={{ display: "grid", gap: "1rem", maxWidth: "24rem" }}>
       <Input aria-label="Full name" placeholder="Full name" />
+      <Textarea aria-label="Notes" placeholder="Notes" size="lg" />
       <Button variant="primary" size="md">
         Save changes
       </Button>
@@ -44,6 +45,14 @@ export function Example() {
 }
 ```
 
+Components can also be imported individually:
+
+``` tsx
+import { Button } from "@walidsj/react-ui/components/button";
+import { Input } from "@walidsj/react-ui/components/input";
+import { Textarea } from "@walidsj/react-ui/components/textarea";
+```
+
 ## Components
 
 ### Button
@@ -77,8 +86,34 @@ consumer-provided `aria-invalid` value is preserved when `invalid` is
 not set. Labels, descriptions, and error messages are composed by the
 consumer.
 
-Both components merge `className` with their internal classes. Conflicting
-Tailwind utilities are resolved with `tailwind-merge`.
+`size` controls the input height and horizontal padding:
+
+- `sm`: compact control (`h-8`)
+- `md`: default control (`h-10`)
+- `lg`: larger control (`h-12`)
+
+### Textarea
+
+Renders a native `<textarea>` and forwards native textarea props and refs.
+
+| Prop        | Type             | Default |
+| ----------- | ---------------- | ------- |
+| `invalid`   | `boolean`        | `false` |
+| `size`      | `sm \| md \| lg` | `md`    |
+| `className` | `string`         | —       |
+
+`invalid` sets `aria-invalid="true"` and applies error styling. A
+consumer-provided `aria-invalid` value is preserved when `invalid` is not set.
+Labels, descriptions, and error messages are composed by the consumer.
+
+`size` controls the minimum height and horizontal padding:
+
+- `sm`: compact textarea (`min-h-16`)
+- `md`: default textarea (`min-h-20`)
+- `lg`: larger textarea (`min-h-28`)
+
+Both form controls merge `className` with their internal classes using the
+`cn` package. Consumers do not need to install `clsx` or `tailwind-merge`.
 
 ## Styling
 

package/dist/button-CYdt-JvA.js

@@ -0,0 +1,39 @@
+import { n as cva, t as cn } from "./cn-BtC0eFBk.js";
+import { Button } from "@base-ui/react/button";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/button/button.tsx
+var buttonVariants = cva("rounded-ui-md focus-visible:ring-ring focus-visible:ring-offset-background inline-flex items-center justify-center font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", {
+	variants: {
+		variant: {
+			primary: "bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80",
+			secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70",
+			outline: "border-border text-foreground hover:bg-muted active:bg-muted/70 border bg-transparent",
+			ghost: "text-foreground hover:bg-muted active:bg-muted/70 bg-transparent",
+			danger: "bg-danger text-danger-foreground hover:bg-danger/90 active:bg-danger/80"
+		},
+		size: {
+			sm: "h-8 gap-1.5 px-3 text-sm",
+			md: "h-10 gap-2 px-4 text-sm",
+			lg: "h-12 gap-2.5 px-6 text-base"
+		}
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "md"
+	}
+});
+var Button$1 = forwardRef(function Button$2({ className, variant = "primary", size = "md", type = "button", ...props }, ref) {
+	return /* @__PURE__ */ jsx(Button, {
+		...props,
+		ref,
+		type,
+		className: cn(buttonVariants({
+			variant,
+			size
+		}), className)
+	});
+});
+export { Button$1 as t };
+
+//# sourceMappingURL=button-CYdt-JvA.js.map

package/dist/button-CYdt-JvA.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button-CYdt-JvA.js","names":["Button","BaseButton"],"sources":["../src/components/button/button.tsx"],"sourcesContent":["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  \"rounded-ui-md focus-visible:ring-ring focus-visible:ring-offset-background inline-flex items-center justify-center font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-2 focus-visible:ring-offset-2 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 text-foreground hover:bg-muted active:bg-muted/70 border bg-transparent\",\n        ghost:\n          \"text-foreground hover:bg-muted active:bg-muted/70 bg-transparent\",\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"],"mappings":";;;;;AAKA,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,IAAaA,WAAS,WACpB,SAASA,SACP,EAAE,WAAW,UAAU,WAAW,OAAO,MAAM,OAAO,UAAU,GAAG,SACnE,KACA;CACA,OACE,oBAACC,QAAD;EACE,GAAI;EACC;EACC;EACN,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;CAC3D,CAAA;AAEL,CACF"}

package/dist/cn-BtC0eFBk.js

@@ -0,0 +1,70 @@
+import { cn } from "cn";
+// node_modules/clsx/dist/clsx.mjs
+function r(e) {
+	var t, f, n = "";
+	if ("string" == typeof e || "number" == typeof e) n += e;
+	else if ("object" == typeof e) if (Array.isArray(e)) {
+		var o = e.length;
+		for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+	} else for (f in e) e[f] && (n && (n += " "), n += f);
+	return n;
+}
+function clsx() {
+	for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+	return n;
+}
+// node_modules/class-variance-authority/dist/index.mjs
+/**
+* Copyright 2022 Joe Bell. All rights reserved.
+*
+* This file is licensed to you under the Apache License, Version 2.0
+* (the "License"); you may not use this file except in compliance with the
+* License. You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+* WARRANTIES OR REPRESENTATIONS OF ANY KIND, either express or implied. See the
+* License for the specific language governing permissions and limitations under
+* the License.
+*/ var falsyToString = (value) => typeof value === "boolean" ? `${value}` : value === 0 ? "0" : value;
+var cx = clsx;
+var cva = (base, config) => (props) => {
+	var _config_compoundVariants;
+	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);
+	const { variants, defaultVariants } = config;
+	const getVariantClassNames = Object.keys(variants).map((variant) => {
+		const variantProp = props === null || props === void 0 ? void 0 : props[variant];
+		const defaultVariantProp = defaultVariants === null || defaultVariants === void 0 ? void 0 : defaultVariants[variant];
+		if (variantProp === null) return null;
+		const variantKey = falsyToString(variantProp) || falsyToString(defaultVariantProp);
+		return variants[variant][variantKey];
+	});
+	const propsWithoutUndefined = props && Object.entries(props).reduce((acc, param) => {
+		let [key, value] = param;
+		if (value === void 0) return acc;
+		acc[key] = value;
+		return acc;
+	}, {});
+	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) => {
+		let { class: cvClass, className: cvClassName, ...compoundVariantOptions } = param;
+		return Object.entries(compoundVariantOptions).every((param) => {
+			let [key, value] = param;
+			return Array.isArray(value) ? value.includes({
+				...defaultVariants,
+				...propsWithoutUndefined
+			}[key]) : {
+				...defaultVariants,
+				...propsWithoutUndefined
+			}[key] === value;
+		}) ? [
+			...acc,
+			cvClass,
+			cvClassName
+		] : acc;
+	}, []), props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
+};
+export { cva as n, cn as t };
+
+//# sourceMappingURL=cn-BtC0eFBk.js.map

package/dist/cn-BtC0eFBk.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cn-BtC0eFBk.js","names":[],"sources":["../node_modules/clsx/dist/clsx.mjs","../node_modules/class-variance-authority/dist/index.mjs"],"sourcesContent":["function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","/**\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"],"ignoreList":[0,1],"mappings":";;AAAA,SAAS,EAAE,GAAE;CAAC,IAAI,GAAE,GAAE,IAAE;CAAG,IAAG,YAAU,OAAO,KAAG,YAAU,OAAO,GAAE,KAAG;MAAO,IAAG,YAAU,OAAO,GAAE,IAAG,MAAM,QAAQ,CAAC,GAAE;EAAC,IAAI,IAAE,EAAE;EAAO,KAAI,IAAE,GAAE,IAAE,GAAE,KAAI,EAAE,OAAK,IAAE,EAAE,EAAE,EAAE,OAAK,MAAI,KAAG,MAAK,KAAG;CAAE,OAAM,KAAI,KAAK,GAAE,EAAE,OAAK,MAAI,KAAG,MAAK,KAAG;CAAG,OAAO;AAAC;AAAC,SAAgB,OAAM;CAAC,KAAI,IAAI,GAAE,GAAE,IAAE,GAAE,IAAE,IAAG,IAAE,UAAU,QAAO,IAAE,GAAE,KAAI,CAAC,IAAE,UAAU,QAAM,IAAE,EAAE,CAAC,OAAK,MAAI,KAAG,MAAK,KAAG;CAAG,OAAO;AAAC;;;;;;;;;;;;;;;;GCe/W,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"}

package/dist/components/button/index.js

@@ -0,0 +1 @@
+export { t as Button } from "../../button-CYdt-JvA.js";

package/dist/components/input/index.js

@@ -0,0 +1 @@
+export { t as Input } from "../../input-CAZTJfrq.js";

package/dist/components/textarea/index.js

@@ -0,0 +1 @@
+export { t as Textarea } from "../../textarea-BrjTLlfm.js";