@madecki/ui 1.4.0 → 2.0.0

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, createElement, useId, useMemo, useRef, useCallback, useEffect } from 'react';
+import { useId, useState, createElement, useMemo, useRef, useCallback, useEffect } from 'react';
 
 // src/components/Tag/tagSurfaceClassNames.ts
 function getTagSurfaceClassNames({
@@ -99,7 +99,9 @@ var Button = ({
   label,
   disabled,
   className = "",
-  type = "button"
+  type = "button",
+  role,
+  ariaChecked
 }) => {
   if (typeof isActive === "boolean" && id === void 0) {
     throw Error("If button has isActive props, it must have id props too");
@@ -116,6 +118,8 @@ var Button = ({
     "button",
     {
       type,
+      role,
+      "aria-checked": ariaChecked,
       className: surfaceClassName,
       onClick: () => {
         if (isActive === true) {
@@ -252,27 +256,106 @@ var GradientButton = ({
     }
   );
 };
+var sizeStyles = {
+  xs: "text-xs",
+  sm: "text-sm",
+  md: "text-md",
+  lg: "text-lg"
+};
+var weightStyles = {
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var colorStyles = {
+  default: "text-white dark:text-white",
+  muted: "text-lightgray dark:text-lightgray",
+  primary: "text-primary dark:text-white",
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-danger"
+};
+var Text = ({
+  children,
+  id,
+  size = "md",
+  weight = "normal",
+  color = "default",
+  as: Tag2 = "p",
+  className = ""
+}) => {
+  return /* @__PURE__ */ jsx(
+    Tag2,
+    {
+      id,
+      className: `${sizeStyles[size]} ${weightStyles[weight]} ${colorStyles[color]} ${className}`,
+      children
+    }
+  );
+};
+function FormFieldLabel({
+  label,
+  labelVisibility,
+  id
+}) {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      as: "span",
+      id,
+      size: "sm",
+      weight: "medium",
+      color: "muted",
+      className: labelVisibility === "sr-only" ? "sr-only" : "mb-2 block",
+      children: label
+    }
+  );
+}
 var RadioButtons = ({
+  label,
+  labelVisibility = "visible",
   items,
   onChange,
   size = "md",
   className = ""
 }) => {
+  const labelId = useId();
   const [selectedButton, setSelectedButton] = useState();
   const onButtonClick = (id) => {
     setSelectedButton(id);
     onChange(id ?? "");
   };
-  return /* @__PURE__ */ jsx("div", { className: `flex flex-wrap gap-2 ${className}`, children: items.map((item) => /* @__PURE__ */ createElement(
-    Button,
-    {
-      ...item,
-      size,
-      key: item.id,
-      isActive: selectedButton === item.id,
-      onClick: onButtonClick
-    }
-  )) });
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    /* @__PURE__ */ jsx(
+      FormFieldLabel,
+      {
+        id: labelId,
+        label,
+        labelVisibility
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "radiogroup",
+        "aria-labelledby": labelId,
+        className: "flex flex-wrap gap-2",
+        children: items.map((item) => /* @__PURE__ */ createElement(
+          Button,
+          {
+            ...item,
+            size,
+            key: item.id,
+            role: "radio",
+            ariaChecked: selectedButton === item.id,
+            isActive: selectedButton === item.id,
+            onClick: onButtonClick
+          }
+        ))
+      }
+    )
+  ] });
 };
 var Tag = ({
   variant,
@@ -300,11 +383,14 @@ var Tag = ({
 var Input = ({
   name,
   onChange,
+  value: valueProp,
   defaultValue,
   placeholder,
   label,
+  labelVisibility = "visible",
   variant = "primary",
   type = "text",
+  maxLength,
   required = false,
   pattern,
   title,
@@ -312,38 +398,54 @@ var Input = ({
   spellCheck,
   disabled = false,
   className = "",
-  icon
+  icon,
+  testId
 }) => {
-  const [value, setValue] = useState(defaultValue);
+  const labelId = useId();
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = useState(() => defaultValue ?? "");
   const [isFocused, setIsFocused] = useState(false);
+  const value = isControlled ? valueProp : internalValue;
   const inputClassNames = ["rounded-sm font-sans z-10 w-full"];
   const spacings = "py-4 px-5";
   const outline = "outline-hidden";
   inputClassNames.push(spacings, outline);
   const inputWrapperClassNames = ["flex rounded-smb p-px w-full"];
-  if (isFocused) inputWrapperClassNames.push("bg-gradient");
+  if (isFocused) {
+    inputWrapperClassNames.push("bg-gradient");
+  } else if (variant === "primary" || variant === "tertiary") {
+    inputWrapperClassNames.push("bg-lightgray");
+  }
   switch (variant) {
     case "primary":
       inputClassNames.push("text-primary bg-neutral");
-      inputWrapperClassNames.push("bg-lightgray");
       break;
     case "secondary":
       inputClassNames.push("text-neutral bg-neutral dark:bg-gray");
       break;
     case "tertiary":
       inputClassNames.push("text-neutral bg-neutral dark:bg-primary");
-      inputWrapperClassNames.push("bg-lightgray");
       break;
   }
   if (disabled) {
     inputClassNames.push("cursor-not-allowed opacity-50");
   }
   const onInputChange = (event) => {
-    setValue(event.target.value);
-    onChange?.(event.target.value);
+    const next = event.target.value;
+    if (!isControlled) {
+      setInternalValue(next);
+    }
+    onChange?.(next);
   };
-  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs("label", { htmlFor: name, children: [
-    /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs("label", { htmlFor: name, className: "block", children: [
+    /* @__PURE__ */ jsx(
+      FormFieldLabel,
+      {
+        id: labelId,
+        label,
+        labelVisibility
+      }
+    ),
     /* @__PURE__ */ jsxs("div", { className: inputWrapperClassNames.join(" "), children: [
       icon && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center pl-4", children: icon }),
       /* @__PURE__ */ jsx(
@@ -352,24 +454,114 @@ var Input = ({
           id: name,
           name,
           placeholder,
-          value: value || "",
+          value,
           className: inputClassNames.join(" "),
           autoComplete: "off",
           onChange: onInputChange,
           onFocus: () => setIsFocused(true),
           onBlur: () => setIsFocused(false),
           type,
+          maxLength,
           required,
           pattern,
           title,
-          "aria-label": ariaLabel || label || name,
+          "aria-label": ariaLabel,
           spellCheck,
-          disabled
+          disabled,
+          "data-testid": testId
         }
       )
     ] })
   ] }) });
 };
+var Textarea = ({
+  name,
+  onChange,
+  value: valueProp,
+  defaultValue,
+  placeholder,
+  label,
+  labelVisibility = "visible",
+  variant = "primary",
+  rows = 4,
+  maxLength,
+  required = false,
+  ariaLabel,
+  spellCheck,
+  disabled = false,
+  className = "",
+  testId
+}) => {
+  const labelId = useId();
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = useState(() => defaultValue ?? "");
+  const [isFocused, setIsFocused] = useState(false);
+  const value = isControlled ? valueProp : internalValue;
+  const fieldClassNames = [
+    "min-h-[6rem] resize-y rounded-sm font-sans z-10 w-full"
+  ];
+  const spacings = "py-4 px-5";
+  const outline = "outline-hidden";
+  fieldClassNames.push(spacings, outline);
+  const inputWrapperClassNames = ["rounded-smb p-px w-full"];
+  if (isFocused) {
+    inputWrapperClassNames.push("bg-gradient");
+  } else if (variant === "primary" || variant === "tertiary") {
+    inputWrapperClassNames.push("bg-lightgray");
+  }
+  switch (variant) {
+    case "primary":
+      fieldClassNames.push("text-primary bg-neutral");
+      break;
+    case "secondary":
+      fieldClassNames.push("text-neutral bg-neutral dark:bg-gray");
+      break;
+    case "tertiary":
+      fieldClassNames.push("text-neutral bg-neutral dark:bg-primary");
+      break;
+  }
+  if (disabled) {
+    fieldClassNames.push("cursor-not-allowed opacity-50");
+  }
+  const onFieldChange = (event) => {
+    const next = event.target.value;
+    if (!isControlled) {
+      setInternalValue(next);
+    }
+    onChange?.(next);
+  };
+  return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsxs("label", { htmlFor: name, className: "block", children: [
+    /* @__PURE__ */ jsx(
+      FormFieldLabel,
+      {
+        id: labelId,
+        label,
+        labelVisibility
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: inputWrapperClassNames.join(" "), children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        id: name,
+        name,
+        rows,
+        placeholder,
+        value,
+        className: fieldClassNames.join(" "),
+        autoComplete: "off",
+        onChange: onFieldChange,
+        onFocus: () => setIsFocused(true),
+        onBlur: () => setIsFocused(false),
+        maxLength,
+        required,
+        "aria-label": ariaLabel,
+        spellCheck,
+        disabled,
+        "data-testid": testId
+      }
+    ) })
+  ] }) });
+};
 function optionTestSlug(value) {
   return value.replace(/[^a-zA-Z0-9_-]/g, "_");
 }
@@ -454,6 +646,7 @@ function Select(props) {
   const {
     name,
     label,
+    labelVisibility = "visible",
     options,
     placeholder = "Select\u2026",
     variant = "primary",
@@ -461,6 +654,7 @@ function Select(props) {
     className = "",
     testId: testIdProp
   } = props;
+  const labelId = useId();
   const isMulti = props.multi === true;
   const singleValueProp = !isMulti ? props.value : void 0;
   const multiValueProp = isMulti ? props.value : void 0;
@@ -656,8 +850,15 @@ function Select(props) {
   const activeDescendant = open && filteredOptions[highlightIndex] ? `${name}-option-${optionTestSlug(filteredOptions[highlightIndex].value)}` : void 0;
   const listboxClass = "absolute left-0 right-0 top-full z-50 mt-1 max-h-60 overflow-auto rounded-sm border border-lightgray bg-neutral py-1 shadow-lg dark:border-gray dark:bg-gray dark:text-white";
   return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: `relative ${className}`.trim(), children: [
-    /* @__PURE__ */ jsxs("label", { htmlFor: name, children: [
-      /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+    /* @__PURE__ */ jsxs("label", { htmlFor: name, className: "block", children: [
+      /* @__PURE__ */ jsx(
+        FormFieldLabel,
+        {
+          id: labelId,
+          label,
+          labelVisibility
+        }
+      ),
       /* @__PURE__ */ jsx("div", { className: inputWrapperClassNames.join(" "), children: /* @__PURE__ */ jsxs("div", { className: innerFieldClassNames.join(" "), children: [
         /* @__PURE__ */ jsx(
           "input",
@@ -671,7 +872,6 @@ function Select(props) {
             disabled,
             placeholder,
             value: inputValue,
-            "aria-label": label,
             "aria-expanded": open,
             "aria-haspopup": "listbox",
             "aria-controls": listboxId,
@@ -696,7 +896,7 @@ function Select(props) {
         id: listboxId,
         role: "listbox",
         "aria-multiselectable": isMulti,
-        "aria-label": label,
+        "aria-labelledby": labelId,
         "data-testid": `${baseTestId}-listbox`,
         tabIndex: -1,
         className: listboxClass,
@@ -848,7 +1048,7 @@ var ContentBox = ({
     }
   );
 };
-var sizeStyles = {
+var sizeStyles2 = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
   lg: "max-w-screen-lg",
@@ -865,7 +1065,7 @@ var Container = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: `w-full px-5 ${sizeStyles[size]} ${centeredClass} ${className}`,
+      className: `w-full px-5 ${sizeStyles2[size]} ${centeredClass} ${className}`,
       children
     }
   );
@@ -960,7 +1160,7 @@ var GridItem = ({
 }) => {
   return /* @__PURE__ */ jsx("div", { className: `${colSpanStyles[colSpan]} ${className}`, children });
 };
-var sizeStyles2 = {
+var sizeStyles3 = {
   xs: "text-xs",
   sm: "text-sm",
   md: "text-md",
@@ -970,13 +1170,13 @@ var sizeStyles2 = {
   "3xl": "text-3xl",
   "4xl": "text-4xl"
 };
-var weightStyles = {
+var weightStyles2 = {
   normal: "font-normal",
   medium: "font-medium",
   semibold: "font-semibold",
   bold: "font-bold"
 };
-var colorStyles = {
+var colorStyles2 = {
   default: "text-white dark:text-white",
   muted: "text-lightgray dark:text-lightgray",
   primary: "text-primary dark:text-white",
@@ -1005,47 +1205,11 @@ var Heading = ({
   return createElement(
     tag,
     {
-      className: `${sizeStyles2[resolvedSize]} ${weightStyles[weight]} ${colorStyles[color]} ${className}`
+      className: `${sizeStyles3[resolvedSize]} ${weightStyles2[weight]} ${colorStyles2[color]} ${className}`
     },
     children
   );
 };
-var sizeStyles3 = {
-  xs: "text-xs",
-  sm: "text-sm",
-  md: "text-md",
-  lg: "text-lg"
-};
-var weightStyles2 = {
-  normal: "font-normal",
-  medium: "font-medium",
-  semibold: "font-semibold",
-  bold: "font-bold"
-};
-var colorStyles2 = {
-  default: "text-white dark:text-white",
-  muted: "text-lightgray dark:text-lightgray",
-  primary: "text-primary dark:text-white",
-  success: "text-success",
-  warning: "text-warning",
-  danger: "text-danger"
-};
-var Text = ({
-  children,
-  size = "md",
-  weight = "normal",
-  color = "default",
-  as: Tag2 = "p",
-  className = ""
-}) => {
-  return /* @__PURE__ */ jsx(
-    Tag2,
-    {
-      className: `${sizeStyles3[size]} ${weightStyles2[weight]} ${colorStyles2[color]} ${className}`,
-      children
-    }
-  );
-};
 var Heart = ({
   variant = "outline",
   className = "",
@@ -1416,6 +1580,6 @@ var InstagramIcon = ({
   return icon;
 };
 
-export { BlockQuote, Button, ButtonTransparent, Container, ContentBox, GradientButton, Grid, GridItem, Heading, Heart, Hr, Info, Input, InstagramIcon, LinkedInIcon, RadioButtons, Search, Select, Share, Spinner, SpinnerOverlay, Stack, Tabs, Tag, Text, TwitterIcon, Warning };
+export { BlockQuote, Button, ButtonTransparent, Container, ContentBox, GradientButton, Grid, GridItem, Heading, Heart, Hr, Info, Input, InstagramIcon, LinkedInIcon, RadioButtons, Search, Select, Share, Spinner, SpinnerOverlay, Stack, Tabs, Tag, Text, Textarea, TwitterIcon, Warning };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map