@madecki/ui 1.5.0 → 2.0.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, HTMLInputTypeAttribute } from 'react';
+import { ReactNode, AriaRole, HTMLInputTypeAttribute } from 'react';
 
 type ColorVariants = "primary" | "success" | "warning" | "danger" | "info" | "white" | "gray" | "lightGray" | "darkGray" | "neutral" | "blue";
 type ThemeMode = "light" | "dark";
@@ -17,8 +17,11 @@ interface ButtonProps {
     disabled?: boolean;
     className?: string;
     type?: "button" | "submit" | "reset";
+    /** e.g. `radio` when used inside a `radiogroup` */
+    role?: AriaRole;
+    ariaChecked?: boolean | "mixed";
 }
-declare const Button: ({ variant, size, children, onClick, isActive, id, label, disabled, className, type, }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ variant, size, children, onClick, isActive, id, label, disabled, className, type, role, ariaChecked, }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface ButtonTransparentProps {
     variant: Exclude<ColorVariants, "primary">;
@@ -40,13 +43,18 @@ interface GradientButtonProps {
 }
 declare const GradientButton: ({ children, onClick, size, disabled, className, type, }: GradientButtonProps) => react_jsx_runtime.JSX.Element;
 
+type LabelVisibility = "visible" | "sr-only";
+
 interface RadioButtonsProps {
-    items: Omit<ButtonProps, "size" | "onClick" | "isActive">[];
+    label: string;
+    /** Default `visible`. Use `sr-only` to hide the group label visually while keeping it for assistive tech. */
+    labelVisibility?: LabelVisibility;
+    items: Omit<ButtonProps, "size" | "onClick" | "isActive" | "role" | "ariaChecked">[];
     onChange: (value: string) => void;
     size?: ButtonProps["size"];
     className?: string;
 }
-declare const RadioButtons: ({ items, onChange, size, className, }: RadioButtonsProps) => react_jsx_runtime.JSX.Element;
+declare const RadioButtons: ({ label, labelVisibility, items, onChange, size, className, }: RadioButtonsProps) => react_jsx_runtime.JSX.Element;
 
 interface TagProps {
     variant: ColorVariants;
@@ -70,6 +78,8 @@ interface InputProps {
     defaultValue?: string;
     placeholder?: string;
     label: string;
+    /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
+    labelVisibility?: LabelVisibility;
     variant?: "primary" | "secondary" | "tertiary";
     /** Any standard HTML `input` type (e.g. `date`, `time`, `email`). */
     type?: HTMLInputTypeAttribute;
@@ -85,7 +95,31 @@ interface InputProps {
     /** Sets `data-testid` on the native `<input>` for e2e (e.g. Playwright). */
     testId?: string;
 }
-declare const Input: ({ name, onChange, value: valueProp, defaultValue, placeholder, label, variant, type, maxLength, required, pattern, title, ariaLabel, spellCheck, disabled, className, icon, testId, }: InputProps) => react_jsx_runtime.JSX.Element;
+declare const Input: ({ name, onChange, value: valueProp, defaultValue, placeholder, label, labelVisibility, variant, type, maxLength, required, pattern, title, ariaLabel, spellCheck, disabled, className, icon, testId, }: InputProps) => react_jsx_runtime.JSX.Element;
+
+interface TextareaProps {
+    name: string;
+    onChange?: (value: string) => void;
+    /** When set, the textarea is controlled; the parent must update this from `onChange`. */
+    value?: string;
+    /** Initial value when uncontrolled (`value` omitted). Does not update after mount if `defaultValue` prop changes. */
+    defaultValue?: string;
+    placeholder?: string;
+    label: string;
+    /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
+    labelVisibility?: LabelVisibility;
+    variant?: "primary" | "secondary" | "tertiary";
+    rows?: number;
+    maxLength?: number;
+    required?: boolean;
+    ariaLabel?: string;
+    spellCheck?: boolean;
+    disabled?: boolean;
+    className?: string;
+    /** Sets `data-testid` on the native `<textarea>` for e2e (e.g. Playwright). */
+    testId?: string;
+}
+declare const Textarea: ({ name, onChange, value: valueProp, defaultValue, placeholder, label, labelVisibility, variant, rows, maxLength, required, ariaLabel, spellCheck, disabled, className, testId, }: TextareaProps) => react_jsx_runtime.JSX.Element;
 
 type SelectOption = {
     value: string;
@@ -94,6 +128,8 @@ type SelectOption = {
 type BaseSelectProps = {
     name: string;
     label: string;
+    /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
+    labelVisibility?: LabelVisibility;
     options: SelectOption[];
     placeholder?: string;
     variant?: "primary" | "secondary" | "tertiary";
@@ -209,13 +245,14 @@ declare const Heading: ({ children, level, size, weight, color, className, }: He
 
 interface TextProps {
     children: ReactNode;
+    id?: string;
     size?: "xs" | "sm" | "md" | "lg";
     weight?: "normal" | "medium" | "semibold" | "bold";
     color?: "default" | "muted" | "primary" | "success" | "warning" | "danger";
     as?: "p" | "span" | "div" | "label";
     className?: string;
 }
-declare const Text: ({ children, size, weight, color, as: Tag, className, }: TextProps) => react_jsx_runtime.JSX.Element;
+declare const Text: ({ children, id, size, weight, color, as: Tag, className, }: TextProps) => react_jsx_runtime.JSX.Element;
 
 interface HeartProps {
     variant?: "outline" | "filled" | "gradient";
@@ -258,4 +295,4 @@ declare const TwitterIcon: ({ className, size, withWrapper, }: SocialIconProps)
 declare const LinkedInIcon: ({ className, size, withWrapper, }: SocialIconProps) => react_jsx_runtime.JSX.Element;
 declare const InstagramIcon: ({ className, size, withWrapper, }: SocialIconProps) => react_jsx_runtime.JSX.Element;
 
-export { BlockQuote, type BlockQuoteProps, Button, type ButtonProps, ButtonTransparent, type ButtonTransparentProps, type ColorVariants, Container, type ContainerProps, ContentBox, type ContentBoxProps, GradientButton, type GradientButtonProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, Heart, type HeartProps, Hr, type HrProps, Info, type InfoProps, Input, type InputProps, InstagramIcon, LinkedInIcon, type MultiSelectProps, RadioButtons, type RadioButtonsProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Share, type ShareProps, type SingleSelectProps, type Size, type SocialIconProps, Spinner, SpinnerOverlay, type SpinnerOverlayProps, type SpinnerProps, Stack, type StackProps, type Tab, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, type ThemeMode, TwitterIcon, Warning, type WarningProps };
+export { BlockQuote, type BlockQuoteProps, Button, type ButtonProps, ButtonTransparent, type ButtonTransparentProps, type ColorVariants, Container, type ContainerProps, ContentBox, type ContentBoxProps, GradientButton, type GradientButtonProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, Heart, type HeartProps, Hr, type HrProps, Info, type InfoProps, Input, type InputProps, InstagramIcon, type LabelVisibility, LinkedInIcon, type MultiSelectProps, RadioButtons, type RadioButtonsProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Share, type ShareProps, type SingleSelectProps, type Size, type SocialIconProps, Spinner, SpinnerOverlay, type SpinnerOverlayProps, type SpinnerProps, Stack, type StackProps, type Tab, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Textarea, type TextareaProps, type ThemeMode, TwitterIcon, Warning, type WarningProps };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { ReactNode, HTMLInputTypeAttribute } from 'react';
+import { ReactNode, AriaRole, HTMLInputTypeAttribute } from 'react';
 
 type ColorVariants = "primary" | "success" | "warning" | "danger" | "info" | "white" | "gray" | "lightGray" | "darkGray" | "neutral" | "blue";
 type ThemeMode = "light" | "dark";
@@ -17,8 +17,11 @@ interface ButtonProps {
     disabled?: boolean;
     className?: string;
     type?: "button" | "submit" | "reset";
+    /** e.g. `radio` when used inside a `radiogroup` */
+    role?: AriaRole;
+    ariaChecked?: boolean | "mixed";
 }
-declare const Button: ({ variant, size, children, onClick, isActive, id, label, disabled, className, type, }: ButtonProps) => react_jsx_runtime.JSX.Element;
+declare const Button: ({ variant, size, children, onClick, isActive, id, label, disabled, className, type, role, ariaChecked, }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
 interface ButtonTransparentProps {
     variant: Exclude<ColorVariants, "primary">;
@@ -40,13 +43,18 @@ interface GradientButtonProps {
 }
 declare const GradientButton: ({ children, onClick, size, disabled, className, type, }: GradientButtonProps) => react_jsx_runtime.JSX.Element;
 
+type LabelVisibility = "visible" | "sr-only";
+
 interface RadioButtonsProps {
-    items: Omit<ButtonProps, "size" | "onClick" | "isActive">[];
+    label: string;
+    /** Default `visible`. Use `sr-only` to hide the group label visually while keeping it for assistive tech. */
+    labelVisibility?: LabelVisibility;
+    items: Omit<ButtonProps, "size" | "onClick" | "isActive" | "role" | "ariaChecked">[];
     onChange: (value: string) => void;
     size?: ButtonProps["size"];
     className?: string;
 }
-declare const RadioButtons: ({ items, onChange, size, className, }: RadioButtonsProps) => react_jsx_runtime.JSX.Element;
+declare const RadioButtons: ({ label, labelVisibility, items, onChange, size, className, }: RadioButtonsProps) => react_jsx_runtime.JSX.Element;
 
 interface TagProps {
     variant: ColorVariants;
@@ -70,6 +78,8 @@ interface InputProps {
     defaultValue?: string;
     placeholder?: string;
     label: string;
+    /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
+    labelVisibility?: LabelVisibility;
     variant?: "primary" | "secondary" | "tertiary";
     /** Any standard HTML `input` type (e.g. `date`, `time`, `email`). */
     type?: HTMLInputTypeAttribute;
@@ -85,7 +95,31 @@ interface InputProps {
     /** Sets `data-testid` on the native `<input>` for e2e (e.g. Playwright). */
     testId?: string;
 }
-declare const Input: ({ name, onChange, value: valueProp, defaultValue, placeholder, label, variant, type, maxLength, required, pattern, title, ariaLabel, spellCheck, disabled, className, icon, testId, }: InputProps) => react_jsx_runtime.JSX.Element;
+declare const Input: ({ name, onChange, value: valueProp, defaultValue, placeholder, label, labelVisibility, variant, type, maxLength, required, pattern, title, ariaLabel, spellCheck, disabled, className, icon, testId, }: InputProps) => react_jsx_runtime.JSX.Element;
+
+interface TextareaProps {
+    name: string;
+    onChange?: (value: string) => void;
+    /** When set, the textarea is controlled; the parent must update this from `onChange`. */
+    value?: string;
+    /** Initial value when uncontrolled (`value` omitted). Does not update after mount if `defaultValue` prop changes. */
+    defaultValue?: string;
+    placeholder?: string;
+    label: string;
+    /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
+    labelVisibility?: LabelVisibility;
+    variant?: "primary" | "secondary" | "tertiary";
+    rows?: number;
+    maxLength?: number;
+    required?: boolean;
+    ariaLabel?: string;
+    spellCheck?: boolean;
+    disabled?: boolean;
+    className?: string;
+    /** Sets `data-testid` on the native `<textarea>` for e2e (e.g. Playwright). */
+    testId?: string;
+}
+declare const Textarea: ({ name, onChange, value: valueProp, defaultValue, placeholder, label, labelVisibility, variant, rows, maxLength, required, ariaLabel, spellCheck, disabled, className, testId, }: TextareaProps) => react_jsx_runtime.JSX.Element;
 
 type SelectOption = {
     value: string;
@@ -94,6 +128,8 @@ type SelectOption = {
 type BaseSelectProps = {
     name: string;
     label: string;
+    /** Default `visible`. Use `sr-only` to hide the label visually while keeping it for assistive tech. */
+    labelVisibility?: LabelVisibility;
     options: SelectOption[];
     placeholder?: string;
     variant?: "primary" | "secondary" | "tertiary";
@@ -209,13 +245,14 @@ declare const Heading: ({ children, level, size, weight, color, className, }: He
 
 interface TextProps {
     children: ReactNode;
+    id?: string;
     size?: "xs" | "sm" | "md" | "lg";
     weight?: "normal" | "medium" | "semibold" | "bold";
     color?: "default" | "muted" | "primary" | "success" | "warning" | "danger";
     as?: "p" | "span" | "div" | "label";
     className?: string;
 }
-declare const Text: ({ children, size, weight, color, as: Tag, className, }: TextProps) => react_jsx_runtime.JSX.Element;
+declare const Text: ({ children, id, size, weight, color, as: Tag, className, }: TextProps) => react_jsx_runtime.JSX.Element;
 
 interface HeartProps {
     variant?: "outline" | "filled" | "gradient";
@@ -258,4 +295,4 @@ declare const TwitterIcon: ({ className, size, withWrapper, }: SocialIconProps)
 declare const LinkedInIcon: ({ className, size, withWrapper, }: SocialIconProps) => react_jsx_runtime.JSX.Element;
 declare const InstagramIcon: ({ className, size, withWrapper, }: SocialIconProps) => react_jsx_runtime.JSX.Element;
 
-export { BlockQuote, type BlockQuoteProps, Button, type ButtonProps, ButtonTransparent, type ButtonTransparentProps, type ColorVariants, Container, type ContainerProps, ContentBox, type ContentBoxProps, GradientButton, type GradientButtonProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, Heart, type HeartProps, Hr, type HrProps, Info, type InfoProps, Input, type InputProps, InstagramIcon, LinkedInIcon, type MultiSelectProps, RadioButtons, type RadioButtonsProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Share, type ShareProps, type SingleSelectProps, type Size, type SocialIconProps, Spinner, SpinnerOverlay, type SpinnerOverlayProps, type SpinnerProps, Stack, type StackProps, type Tab, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, type ThemeMode, TwitterIcon, Warning, type WarningProps };
+export { BlockQuote, type BlockQuoteProps, Button, type ButtonProps, ButtonTransparent, type ButtonTransparentProps, type ColorVariants, Container, type ContainerProps, ContentBox, type ContentBoxProps, GradientButton, type GradientButtonProps, Grid, GridItem, type GridItemProps, type GridProps, Heading, type HeadingProps, Heart, type HeartProps, Hr, type HrProps, Info, type InfoProps, Input, type InputProps, InstagramIcon, type LabelVisibility, LinkedInIcon, type MultiSelectProps, RadioButtons, type RadioButtonsProps, Search, type SearchProps, Select, type SelectOption, type SelectProps, Share, type ShareProps, type SingleSelectProps, type Size, type SocialIconProps, Spinner, SpinnerOverlay, type SpinnerOverlayProps, type SpinnerProps, Stack, type StackProps, type Tab, Tabs, type TabsProps, Tag, type TagProps, Text, type TextProps, Textarea, type TextareaProps, type ThemeMode, TwitterIcon, Warning, type WarningProps };

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,
@@ -860,7 +1048,7 @@ var ContentBox = ({
     }
   );
 };
-var sizeStyles = {
+var sizeStyles2 = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
   lg: "max-w-screen-lg",
@@ -877,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
     }
   );
@@ -972,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",
@@ -982,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",
@@ -1017,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 = "",
@@ -1428,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