@madecki/ui 1.5.0 → 2.1.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,
@@ -304,6 +387,7 @@ var Input = ({
   defaultValue,
   placeholder,
   label,
+  labelVisibility = "visible",
   variant = "primary",
   type = "text",
   maxLength,
@@ -317,6 +401,7 @@ var Input = ({
   icon,
   testId
 }) => {
+  const labelId = useId();
   const isControlled = valueProp !== void 0;
   const [internalValue, setInternalValue] = useState(() => defaultValue ?? "");
   const [isFocused, setIsFocused] = useState(false);
@@ -352,8 +437,15 @@ var Input = ({
     }
     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(
@@ -373,7 +465,7 @@ var Input = ({
           required,
           pattern,
           title,
-          "aria-label": ariaLabel || label || name,
+          "aria-label": ariaLabel,
           spellCheck,
           disabled,
           "data-testid": testId
@@ -382,6 +474,94 @@ var Input = ({
     ] })
   ] }) });
 };
+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, "_");
 }
@@ -466,6 +646,7 @@ function Select(props) {
   const {
     name,
     label,
+    labelVisibility = "visible",
     options,
     placeholder = "Select\u2026",
     variant = "primary",
@@ -473,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;
@@ -668,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",
@@ -683,7 +872,6 @@ function Select(props) {
             disabled,
             placeholder,
             value: inputValue,
-            "aria-label": label,
             "aria-expanded": open,
             "aria-haspopup": "listbox",
             "aria-controls": listboxId,
@@ -708,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,
@@ -824,6 +1012,93 @@ var SpinnerOverlay = ({
     }
   );
 };
+
+// src/components/contentBoxVariants.ts
+var contentBoxVariantBorderClasses = {
+  info: "border-blue",
+  warning: "border-warning",
+  success: "border-success",
+  danger: "border-danger"
+};
+var placementClassNames = {
+  "top-left": "top-5 left-5",
+  "top-right": "top-5 right-5",
+  "bottom-left": "bottom-5 left-5",
+  "bottom-right": "bottom-5 right-5"
+};
+function CloseIcon({ className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M4 4L12 12M12 4L4 12",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+}
+var Toast = ({
+  children,
+  variant = "info",
+  placement = "bottom-right",
+  autoCloseMs = 5e3,
+  onClose,
+  className = ""
+}) => {
+  const [open, setOpen] = useState(true);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+  const dismiss = useCallback(() => {
+    setOpen(false);
+    onCloseRef.current?.();
+  }, []);
+  useEffect(() => {
+    if (!open || autoCloseMs <= 0) {
+      return;
+    }
+    const id = window.setTimeout(dismiss, autoCloseMs);
+    return () => window.clearTimeout(id);
+  }, [open, autoCloseMs, dismiss]);
+  if (!open) {
+    return null;
+  }
+  const border = contentBoxVariantBorderClasses[variant];
+  const live = variant === "danger" ? "assertive" : "polite";
+  const role = variant === "danger" ? "alert" : "status";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role,
+      "aria-live": live,
+      className: `fixed z-50 flex max-w-sm gap-3 rounded-md border-2 bg-darkgray p-5 text-md text-white shadow-lg dark:bg-gray ${placementClassNames[placement]} ${border} ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: dismiss,
+            className: "shrink-0 rounded-sm p-2 text-icongray transition-colors hover:bg-white/10 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue",
+            "aria-label": "Close",
+            children: /* @__PURE__ */ jsx(CloseIcon, {})
+          }
+        )
+      ]
+    }
+  );
+};
 var BlockQuote = ({ children, className = "" }) => {
   return /* @__PURE__ */ jsx(
     "blockquote",
@@ -837,12 +1112,6 @@ var Hr = ({ className = "" }) => {
   const defaultClassNames = "border border-gray my-4";
   return /* @__PURE__ */ jsx("hr", { className: `${defaultClassNames} ${className}` });
 };
-var variantStyles = {
-  info: "border-blue",
-  warning: "border-warning",
-  success: "border-success",
-  danger: "border-danger"
-};
 var ContentBox = ({
   children,
   variant = "info",
@@ -852,7 +1121,7 @@ var ContentBox = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `relative border rounded-md my-9 ${variantStyles[variant]} ${className}`,
+      className: `relative border rounded-md my-9 ${contentBoxVariantBorderClasses[variant]} ${className}`,
       children: [
         icon && /* @__PURE__ */ jsx("div", { className: "absolute flex items-center justify-center p-3 -top-6 right-8 bg-primary border border-darkgray", children: icon }),
         /* @__PURE__ */ jsx("div", { className: "m-7", children })
@@ -860,7 +1129,66 @@ var ContentBox = ({
     }
   );
 };
-var sizeStyles = {
+function ChevronDown2({ className = "" }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: 20,
+      height: 20,
+      viewBox: "0 0 20 20",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      className,
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M5 7.5L10 12.5L15 7.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+var DetailsPanel = ({
+  summary,
+  children,
+  variant = "info",
+  icon,
+  defaultOpen = false,
+  className = "",
+  id
+}) => {
+  const border = contentBoxVariantBorderClasses[variant];
+  const [open, setOpen] = useState(defaultOpen);
+  return /* @__PURE__ */ jsxs(
+    "details",
+    {
+      id,
+      className: `group relative border rounded-md my-9 ${border} ${className}`,
+      open,
+      onToggle: (e) => setOpen(e.currentTarget.open),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "summary",
+          {
+            className: "flex cursor-pointer list-none items-center gap-3 p-7 text-white outline-none transition-colors hover:bg-darkgray/40 dark:hover:bg-white/5 focus-visible:ring-2 focus-visible:ring-blue group-open:pb-3 [&::-webkit-details-marker]:hidden",
+            children: [
+              /* @__PURE__ */ jsx(ChevronDown2, { className: "size-5 shrink-0 text-icongray transition-transform group-open:rotate-180" }),
+              icon ? /* @__PURE__ */ jsx("span", { className: "flex shrink-0 items-center", children: icon }) : null,
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 text-md font-medium text-white dark:text-white", children: summary })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "border-t border-gray px-7 pb-7 pt-3 dark:border-gray", children })
+      ]
+    }
+  );
+};
+var sizeStyles2 = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
   lg: "max-w-screen-lg",
@@ -877,7 +1205,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
     }
   );
@@ -972,7 +1300,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",
@@ -982,13 +1310,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",
@@ -1017,47 +1345,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 = "",
@@ -1428,6 +1720,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, DetailsPanel, GradientButton, Grid, GridItem, Heading, Heart, Hr, Info, Input, InstagramIcon, LinkedInIcon, RadioButtons, Search, Select, Share, Spinner, SpinnerOverlay, Stack, Tabs, Tag, Text, Textarea, Toast, TwitterIcon, Warning };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map