@walidsj/react-ui 0.1.1 → 0.1.4

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>
@@ -69,6 +70,7 @@ Renders a native `<input>` and forwards native input 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
@@ -76,8 +78,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/components/input/index.d.ts

@@ -1,2 +1,2 @@
-export type { InputProps } from './input';
+export type { InputProps, InputSize } from './input';
 export { Input } from './input';

package/dist/components/input/input.d.ts

@@ -1,5 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
 import { ComponentPropsWithoutRef } from 'react';
-export interface InputProps extends ComponentPropsWithoutRef<"input"> {
+declare const inputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type InputSize = NonNullable<VariantProps<typeof inputVariants>["size"]>;
+export interface InputProps extends Omit<ComponentPropsWithoutRef<"input">, "size"> {
     invalid?: boolean;
+    size?: InputSize;
 }
 export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/textarea/index.d.ts

@@ -0,0 +1 @@
+export { Textarea, type TextareaProps, type TextareaSize } from './textarea';

package/dist/components/textarea/textarea.d.ts

@@ -0,0 +1,13 @@
+import { VariantProps } from 'class-variance-authority';
+import { ComponentPropsWithoutRef } from 'react';
+declare const textareaVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type TextareaSize = NonNullable<VariantProps<typeof textareaVariants>["size"]>;
+export interface TextareaProps extends ComponentPropsWithoutRef<"textarea"> {
+    invalid?: boolean;
+    size?: TextareaSize;
+}
+export declare const Textarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
+export {};

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export type { ButtonProps, ButtonSize, ButtonVariant, } from './components/button';
 export { Button } from './components/button';
-export type { InputProps } from './components/input';
+export type { InputProps, InputSize } from './components/input';
 export { Input } from './components/input';
+export type { TextareaProps, TextareaSize } from './components/textarea';
+export { Textarea } from './components/textarea';

package/dist/index.js

@@ -1,9 +1,22 @@
 import { Button as Button$1 } from "@base-ui/react/button";
-import { clsx } from "clsx";
 import { forwardRef } from "react";
-import { twMerge } from "tailwind-merge";
+import { cn } from "cn";
 import { jsx } from "react/jsx-runtime";
 import { Input as Input$1 } from "@base-ui/react/input";
+// 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.
@@ -56,18 +69,14 @@ var cva = (base, config) => (props) => {
 		] : acc;
 	}, []), props === null || props === void 0 ? void 0 : props.class, props === null || props === void 0 ? void 0 : props.className);
 };
-// src/lib/cn.ts
-function cn(...inputs) {
-	return twMerge(clsx(inputs));
-}
 // src/components/button/button.tsx
-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", {
+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-border bg-transparent text-foreground hover:bg-muted active:bg-muted/70",
-			ghost: "bg-transparent text-foreground hover:bg-muted active:bg-muted/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: {
@@ -93,14 +102,63 @@ var Button = forwardRef(function Button({ className, variant = "primary", size =
 	});
 });
 // src/components/input/input.tsx
-var Input = forwardRef(function Input({ className, invalid = false, "aria-invalid": ariaInvalid, ...props }, ref) {
+var inputVariants = cva("rounded-ui-md border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/30 flex w-full border py-2 shadow-sm transition-colors outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50", {
+	variants: {
+		size: {
+			sm: "h-8 px-2.5 text-sm",
+			md: "h-10 px-3 text-sm",
+			lg: "h-12 px-4 text-base"
+		},
+		invalid: {
+			true: "border-danger focus-visible:ring-danger/30",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		invalid: false
+	}
+});
+var Input = forwardRef(function Input({ className, invalid = false, size = "md", "aria-invalid": ariaInvalid, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Input$1, {
 		...props,
 		ref,
 		"aria-invalid": invalid || ariaInvalid,
-		className: cn("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", className)
+		className: cn(inputVariants({
+			size,
+			invalid
+		}), className)
+	});
+});
+// src/components/textarea/textarea.tsx
+var textareaVariants = cva("rounded-ui-md border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/30 flex w-full resize-y border py-2 shadow-sm transition-colors outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50", {
+	variants: {
+		size: {
+			sm: "min-h-16 px-2.5 text-sm",
+			md: "min-h-20 px-3 text-sm",
+			lg: "min-h-28 px-4 text-base"
+		},
+		invalid: {
+			true: "border-danger focus-visible:ring-danger/30",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "md",
+		invalid: false
+	}
+});
+var Textarea = forwardRef(function Textarea({ className, invalid = false, size = "md", "aria-invalid": ariaInvalid, ...props }, ref) {
+	return /* @__PURE__ */ jsx("textarea", {
+		...props,
+		ref,
+		"aria-invalid": invalid || ariaInvalid,
+		className: cn(textareaVariants({
+			size,
+			invalid
+		}), className)
 	});
 });
-export { Button, Input };
+export { Button, Input, Textarea };
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +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"}
+{"version":3,"file":"index.js","names":["BaseButton","BaseInput"],"sources":["../node_modules/clsx/dist/clsx.mjs","../node_modules/class-variance-authority/dist/index.mjs","../src/components/button/button.tsx","../src/components/input/input.tsx","../src/components/textarea/textarea.tsx"],"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","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","import { Input as BaseInput } from \"@base-ui/react/input\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { type ComponentPropsWithoutRef, forwardRef, type Ref } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nconst inputVariants = cva(\n  \"rounded-ui-md border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/30 flex w-full border py-2 shadow-sm transition-colors outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50\",\n  {\n    variants: {\n      size: {\n        sm: \"h-8 px-2.5 text-sm\",\n        md: \"h-10 px-3 text-sm\",\n        lg: \"h-12 px-4 text-base\",\n      },\n      invalid: {\n        true: \"border-danger focus-visible:ring-danger/30\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      invalid: false,\n    },\n  },\n);\n\nexport type InputSize = NonNullable<VariantProps<typeof inputVariants>[\"size\"]>;\n\nexport interface InputProps\n  extends Omit<ComponentPropsWithoutRef<\"input\">, \"size\"> {\n  invalid?: boolean;\n  size?: InputSize;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    className,\n    invalid = false,\n    size = \"md\",\n    \"aria-invalid\": ariaInvalid,\n    ...props\n  },\n  ref,\n) {\n  return (\n    <BaseInput\n      {...props}\n      ref={ref as Ref<HTMLElement>}\n      aria-invalid={invalid || ariaInvalid}\n      className={cn(inputVariants({ size, invalid }), className)}\n    />\n  );\n});\n","import { cva, type VariantProps } from \"class-variance-authority\";\nimport { type ComponentPropsWithoutRef, forwardRef } from \"react\";\nimport { cn } from \"../../lib/cn\";\n\nconst textareaVariants = cva(\n  \"rounded-ui-md border-border bg-background text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/30 flex w-full resize-y border py-2 shadow-sm transition-colors outline-none focus-visible:ring-2 disabled:cursor-not-allowed disabled:opacity-50\",\n  {\n    variants: {\n      size: {\n        sm: \"min-h-16 px-2.5 text-sm\",\n        md: \"min-h-20 px-3 text-sm\",\n        lg: \"min-h-28 px-4 text-base\",\n      },\n      invalid: {\n        true: \"border-danger focus-visible:ring-danger/30\",\n        false: \"\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n      invalid: false,\n    },\n  },\n);\n\nexport type TextareaSize = NonNullable<\n  VariantProps<typeof textareaVariants>[\"size\"]\n>;\n\nexport interface TextareaProps extends ComponentPropsWithoutRef<\"textarea\"> {\n  invalid?: boolean;\n  size?: TextareaSize;\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  function Textarea(\n    {\n      className,\n      invalid = false,\n      size = \"md\",\n      \"aria-invalid\": ariaInvalid,\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <textarea\n        {...props}\n        ref={ref}\n        aria-invalid={invalid || ariaInvalid}\n        className={cn(textareaVariants({ size, invalid }), className)}\n      />\n    );\n  },\n);\n"],"ignoreList":[0,1],"mappings":"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"}

package/dist/lib/cn.d.ts

@@ -1,2 +1 @@
-import { ClassValue } from 'clsx';
-export declare function cn(...inputs: ClassValue[]): string;
+export { cn } from 'cn';

package/dist/style.css

@@ -57,10 +57,26 @@
     height: calc(var(--spacing) * 12);
   }
 
+  .min-h-16 {
+    min-height: calc(var(--spacing) * 16);
+  }
+
+  .min-h-20 {
+    min-height: calc(var(--spacing) * 20);
+  }
+
+  .min-h-28 {
+    min-height: calc(var(--spacing) * 28);
+  }
+
   .w-full {
     width: 100%;
   }
 
+  .resize-y {
+    resize: vertical;
+  }
+
   .items-center {
     align-items: center;
   }
@@ -94,6 +110,10 @@
     border-color: var(--ui-border);
   }
 
+  .border-danger {
+    border-color: var(--ui-danger);
+  }
+
   .bg-background {
     background-color: var(--ui-background);
   }
@@ -114,6 +134,10 @@
     background-color: #0000;
   }
 
+  .px-2\.5 {
+    padding-inline: calc(var(--spacing) * 2.5);
+  }
+
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -240,6 +264,16 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .focus-visible\:ring-danger\/30:focus-visible {
+    --tw-ring-color: var(--ui-danger);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .focus-visible\:ring-danger\/30:focus-visible {
+      --tw-ring-color: color-mix(in oklab, var(--ui-danger) 30%, transparent);
+    }
+  }
+
   .focus-visible\:ring-ring:focus-visible, .focus-visible\:ring-ring\/30:focus-visible {
     --tw-ring-color: var(--ui-ring);
   }
@@ -310,20 +344,6 @@
   .disabled\:opacity-50:disabled {
     opacity: .5;
   }
-
-  .aria-\[invalid\=true\]\:border-danger[aria-invalid="true"] {
-    border-color: var(--ui-danger);
-  }
-
-  .aria-\[invalid\=true\]\:focus-visible\:ring-danger\/30[aria-invalid="true"]:focus-visible {
-    --tw-ring-color: var(--ui-danger);
-  }
-
-  @supports (color: color-mix(in lab, red, red)) {
-    .aria-\[invalid\=true\]\:focus-visible\:ring-danger\/30[aria-invalid="true"]:focus-visible {
-      --tw-ring-color: color-mix(in oklab, var(--ui-danger) 30%, transparent);
-    }
-  }
 }
 
 :root {

package/package.json

@@ -1,22 +1,29 @@
 {
   "name": "@walidsj/react-ui",
-  "version": "0.1.1",
+  "version": "0.1.4",
   "description": "Accessible React components styled with Tailwind CSS v4 and built on Base UI primitives.",
-  "license": "MIT",
-  "author": "walidsj (https://github.com/walidsj)",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/walidsj/walid-ui.git"
-  },
+  "keywords": [
+    "react",
+    "design-system",
+    "component-library",
+    "tailwindcss",
+    "base-ui",
+    "typescript"
+  ],
   "homepage": "https://github.com/walidsj/walid-ui#readme",
   "bugs": {
     "url": "https://github.com/walidsj/walid-ui/issues"
   },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/walidsj/walid-ui.git"
+  },
+  "license": "MIT",
+  "author": "walidsj (https://github.com/walidsj)",
+  "sideEffects": [
+    "**/*.css"
+  ],
   "type": "module",
-  "packageManager": "bun@1.4.4",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -25,47 +32,28 @@
     "./style.css": "./dist/style.css",
     "./package.json": "./package.json"
   },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "files": [
     "dist"
   ],
-  "sideEffects": [
-    "**/*.css"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "engines": {
-    "node": ">=20.19.0"
-  },
-  "keywords": [
-    "react",
-    "design-system",
-    "component-library",
-    "tailwindcss",
-    "base-ui",
-    "typescript"
-  ],
   "scripts": {
-    "dev": "vite build --watch",
     "build": "vite build",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "lint": "biome check .",
+    "clean": "rm -rf dist coverage",
+    "dev": "vite build --watch",
     "format": "biome format --write .",
     "format:check": "biome format .",
-    "clean": "rm -rf dist coverage",
-    "prepublishOnly": "bun run clean && bun run lint && bun run typecheck && bun run test && bun run build"
-  },
-  "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "lint": "biome check .",
+    "prepublishOnly": "bun run clean && bun run lint && bun run typecheck && bun run test && bun run build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
   },
   "dependencies": {
     "@base-ui/react": "^1.9.0",
     "class-variance-authority": "^0.7.1",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^3.7.0"
+    "cn": "^0.5.0"
   },
   "devDependencies": {
     "@biomejs/biome": "2.6.3",
@@ -86,5 +74,16 @@
     "vite": "8.3.5",
     "vite-plugin-dts": "5.1.2",
     "vitest": "5.0.5"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "packageManager": "bun@1.4.4",
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }