@holmdigital/components 1.2.4 → 2.1.0

package/dist/chunk-OMSIXECN.mjs

@@ -0,0 +1,247 @@
+// src/Combobox/Combobox.tsx
+import { useState, useRef, useEffect, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Combobox = ({
+  label,
+  description,
+  error,
+  options,
+  onChange,
+  value,
+  placeholder = "Type to search...",
+  className = ""
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const inputRef = useRef(null);
+  const listboxRef = useRef(null);
+  const containerRef = useRef(null);
+  const id = useId();
+  const listboxId = `${id}-listbox`;
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const filteredOptions = options.filter(
+    (option) => option.label.toLowerCase().includes(inputValue.toLowerCase())
+  );
+  useEffect(() => {
+    if (value) {
+      const selectedOption = options.find((o) => o.value === value);
+      if (selectedOption) {
+        setInputValue(selectedOption.label);
+      }
+    } else {
+      setInputValue("");
+    }
+  }, [value, options]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setFocusedIndex(-1);
+        if (value) {
+          const selectedOption = options.find((o) => o.value === value);
+          if (selectedOption) setInputValue(selectedOption.label);
+        } else {
+          setInputValue("");
+        }
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [value, options]);
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+    setIsOpen(true);
+    setFocusedIndex(-1);
+    if (e.target.value === "") {
+      onChange(null);
+    }
+  };
+  const handleOptionSelect = (option) => {
+    onChange(option.value);
+    setInputValue(option.label);
+    setIsOpen(false);
+    setFocusedIndex(-1);
+  };
+  const handleKeyDown = (e) => {
+    if (!isOpen && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+      setIsOpen(true);
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setFocusedIndex(
+          (prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0
+        );
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setFocusedIndex(
+          (prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1
+        );
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (isOpen && focusedIndex >= 0) {
+          handleOptionSelect(filteredOptions[focusedIndex]);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        setIsOpen(false);
+        setFocusedIndex(-1);
+        if (value) {
+          const selectedOption = options.find((o) => o.value === value);
+          if (selectedOption) setInputValue(selectedOption.label);
+        } else {
+          setInputValue("");
+        }
+        break;
+      case "Tab":
+        setIsOpen(false);
+        break;
+    }
+  };
+  const styles = {
+    container: {
+      position: "relative",
+      marginBottom: "1rem",
+      fontFamily: "system-ui, -apple-system, sans-serif"
+    },
+    label: {
+      display: "block",
+      fontWeight: 600,
+      marginBottom: "0.25rem",
+      color: "#1e293b"
+    },
+    description: {
+      fontSize: "0.875rem",
+      color: "#64748b",
+      marginBottom: "0.5rem"
+    },
+    error: {
+      fontSize: "0.875rem",
+      color: "#dc2626",
+      marginTop: "0.25rem"
+    },
+    input: {
+      width: "100%",
+      padding: "0.5rem 0.75rem",
+      fontSize: "1rem",
+      border: `1px solid ${error ? "#dc2626" : "#cbd5e1"}`,
+      borderRadius: "0.375rem",
+      outline: "none",
+      boxSizing: "border-box"
+    },
+    listbox: {
+      position: "absolute",
+      top: "100%",
+      left: 0,
+      right: 0,
+      maxHeight: "200px",
+      overflowY: "auto",
+      border: "1px solid #cbd5e1",
+      borderRadius: "0.375rem",
+      backgroundColor: "white",
+      zIndex: 10,
+      marginTop: "0.25rem",
+      padding: 0,
+      listStyle: "none",
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+    },
+    option: {
+      padding: "0.5rem 0.75rem",
+      cursor: "pointer"
+    },
+    activeOption: {
+      backgroundColor: "#e2e8f0",
+      color: "#0f172a"
+    },
+    noResults: {
+      padding: "0.5rem 0.75rem",
+      color: "#64748b",
+      fontStyle: "italic"
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className, style: styles.container, children: [
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        id: labelId,
+        htmlFor: id,
+        style: styles.label,
+        children: label
+      }
+    ),
+    description && /* @__PURE__ */ jsx("div", { id: descriptionId, style: styles.description, children: description }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        id,
+        type: "text",
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": listboxId,
+        "aria-activedescendant": focusedIndex >= 0 ? `${id}-option-${focusedIndex}` : void 0,
+        "aria-invalid": !!error,
+        "aria-describedby": [
+          description ? descriptionId : null,
+          error ? errorId : null
+        ].filter(Boolean).join(" ") || void 0,
+        value: inputValue,
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        placeholder,
+        style: {
+          ...styles.input,
+          ...isOpen ? { borderColor: "#3b82f6", ring: "2px solid #93c5fd" } : {}
+        }
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { id: errorId, style: styles.error, role: "alert", children: error }),
+    isOpen && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        ref: listboxRef,
+        id: listboxId,
+        role: "listbox",
+        "aria-label": label,
+        style: styles.listbox,
+        children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
+          const isSelected = value === option.value;
+          const isFocused = focusedIndex === index;
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              id: `${id}-option-${index}`,
+              role: "option",
+              "aria-selected": isSelected,
+              onClick: () => handleOptionSelect(option),
+              onMouseEnter: () => setFocusedIndex(index),
+              style: {
+                ...styles.option,
+                ...isFocused ? styles.activeOption : {},
+                ...isSelected ? { fontWeight: "bold" } : {}
+              },
+              children: [
+                option.label,
+                isSelected && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { float: "right" }, children: "\u2713" })
+              ]
+            },
+            option.value
+          );
+        }) : /* @__PURE__ */ jsx("li", { style: styles.noResults, children: "No results found" })
+      }
+    )
+  ] });
+};
+
+export {
+  Combobox
+};

package/dist/chunk-P2IXX552.mjs

@@ -0,0 +1,95 @@
+// src/ErrorSummary/ErrorSummary.tsx
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ErrorSummary = ({
+  errors,
+  title = "There is a problem",
+  focusOnMount = true,
+  className = ""
+}) => {
+  const headingRef = useRef(null);
+  useEffect(() => {
+    if (focusOnMount && errors.length > 0 && headingRef.current) {
+      headingRef.current.focus();
+    }
+  }, [focusOnMount, errors]);
+  if (errors.length === 0) {
+    return null;
+  }
+  const styles = {
+    container: {
+      border: "2px solid #dc2626",
+      // Red-600
+      borderRadius: "0.375rem",
+      padding: "1rem",
+      marginBottom: "1.5rem",
+      backgroundColor: "#fef2f2"
+      // Red-50
+    },
+    heading: {
+      color: "#991b1b",
+      // Red-800
+      fontWeight: "bold",
+      fontSize: "1.125rem",
+      marginBottom: "0.5rem",
+      outline: "none"
+      // Managed focus usually visually indicated by browser, but we can style if needed
+    },
+    list: {
+      listStyleType: "disc",
+      paddingLeft: "1.25rem",
+      margin: 0,
+      color: "#dc2626"
+      // Red-600
+    },
+    link: {
+      color: "#b91c1c",
+      // Red-700
+      textDecoration: "underline",
+      cursor: "pointer",
+      fontWeight: 500
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `a11y-error-summary ${className}`,
+      role: "alert",
+      "aria-labelledby": "error-summary-title",
+      style: styles.container,
+      children: [
+        /* @__PURE__ */ jsx(
+          "h2",
+          {
+            id: "error-summary-title",
+            ref: headingRef,
+            tabIndex: -1,
+            style: styles.heading,
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx("ul", { style: styles.list, children: errors.map((error, index) => /* @__PURE__ */ jsx("li", { style: { marginBottom: "0.25rem" }, children: /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: `#${error.id}`,
+            style: styles.link,
+            onClick: (e) => {
+              e.preventDefault();
+              const element = document.getElementById(error.id);
+              if (element) {
+                element.focus();
+                element.scrollIntoView({ behavior: "smooth", block: "center" });
+              }
+            },
+            children: error.message
+          }
+        ) }, index)) })
+      ]
+    }
+  );
+};
+ErrorSummary.displayName = "ErrorSummary";
+
+export {
+  ErrorSummary
+};

package/dist/chunk-VM3O36W4.mjs

@@ -0,0 +1,239 @@
+// src/MultiSelect/MultiSelect.tsx
+import { useState, useRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MultiSelect = ({
+  label,
+  description,
+  error,
+  options,
+  selected,
+  onChange,
+  placeholder = "Select items...",
+  className = ""
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [focusedIndex, setFocusedIndex] = useState(-1);
+  const [activeTokenIndex] = useState(-1);
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const id = useId();
+  const listboxId = `${id}-listbox`;
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const availableOptions = options.filter(
+    (option) => !selected.includes(option.value) && option.label.toLowerCase().includes(inputValue.toLowerCase())
+  );
+  const handleSelect = (value) => {
+    onChange([...selected, value]);
+    setInputValue("");
+    setIsOpen(false);
+    setFocusedIndex(-1);
+    inputRef.current?.focus();
+  };
+  const handleRemove = (value) => {
+    onChange(selected.filter((v) => v !== value));
+    inputRef.current?.focus();
+  };
+  const handleKeyDown = (e) => {
+    if (activeTokenIndex !== -1) {
+      handleTokenNavigation(e);
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setIsOpen(true);
+        setFocusedIndex((prev) => prev < availableOptions.length - 1 ? prev + 1 : 0);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setIsOpen(true);
+        setFocusedIndex((prev) => prev > 0 ? prev - 1 : availableOptions.length - 1);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (isOpen && focusedIndex >= 0) {
+          handleSelect(availableOptions[focusedIndex].value);
+        }
+        break;
+      case "Escape":
+        setIsOpen(false);
+        break;
+      case "Backspace":
+        if (inputValue === "" && selected.length > 0) {
+          handleRemove(selected[selected.length - 1]);
+        }
+        break;
+      case "ArrowLeft":
+        if (inputValue === "" && selected.length > 0) {
+        }
+        break;
+    }
+  };
+  const handleTokenNavigation = (_e) => {
+  };
+  const styles = {
+    container: {
+      position: "relative",
+      marginBottom: "1rem",
+      fontFamily: "system-ui, -apple-system, sans-serif"
+    },
+    label: {
+      display: "block",
+      fontWeight: 600,
+      marginBottom: "0.25rem",
+      color: "#1e293b"
+    },
+    description: {
+      fontSize: "0.875rem",
+      color: "#64748b",
+      marginBottom: "0.5rem"
+    },
+    error: {
+      fontSize: "0.875rem",
+      color: "#dc2626",
+      marginTop: "0.25rem"
+    },
+    inputWrapper: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "0.5rem",
+      padding: "0.375rem",
+      border: `1px solid ${error ? "#dc2626" : "#cbd5e1"}`,
+      borderRadius: "0.375rem",
+      backgroundColor: "white",
+      minHeight: "2.5rem"
+    },
+    input: {
+      flex: 1,
+      minWidth: "120px",
+      border: "none",
+      outline: "none",
+      padding: "0.25rem",
+      fontSize: "1rem"
+    },
+    token: {
+      display: "inline-flex",
+      alignItems: "center",
+      backgroundColor: "#e2e8f0",
+      border: "1px solid #cbd5e1",
+      borderRadius: "0.25rem",
+      padding: "0.125rem 0.5rem",
+      fontSize: "0.875rem",
+      color: "#0f172a"
+    },
+    removeButton: {
+      marginLeft: "0.25rem",
+      border: "none",
+      background: "none",
+      cursor: "pointer",
+      padding: "0 0.125rem",
+      fontSize: "1rem",
+      lineHeight: 1,
+      color: "#64748b"
+    },
+    listbox: {
+      position: "absolute",
+      top: "100%",
+      left: 0,
+      right: 0,
+      maxHeight: "200px",
+      overflowY: "auto",
+      border: "1px solid #cbd5e1",
+      borderRadius: "0.375rem",
+      backgroundColor: "white",
+      zIndex: 10,
+      marginTop: "0.25rem",
+      padding: 0,
+      listStyle: "none",
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+    },
+    option: {
+      padding: "0.5rem 0.75rem",
+      cursor: "pointer"
+    },
+    activeOption: {
+      backgroundColor: "#e2e8f0",
+      color: "#0f172a"
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className, style: styles.container, children: [
+    /* @__PURE__ */ jsx("label", { id: labelId, htmlFor: id, style: styles.label, children: label }),
+    description && /* @__PURE__ */ jsx("div", { id: descriptionId, style: styles.description, children: description }),
+    /* @__PURE__ */ jsxs("div", { style: styles.inputWrapper, children: [
+      selected.map((value) => {
+        const option = options.find((o) => o.value === value);
+        return /* @__PURE__ */ jsxs("span", { style: styles.token, children: [
+          option?.label || value,
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              style: styles.removeButton,
+              onClick: () => handleRemove(value),
+              "aria-label": `Remove ${option?.label || value}`,
+              children: "\xD7"
+            }
+          )
+        ] }, value);
+      }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: inputRef,
+          id,
+          type: "text",
+          role: "combobox",
+          "aria-autocomplete": "list",
+          "aria-expanded": isOpen,
+          "aria-haspopup": "listbox",
+          "aria-controls": listboxId,
+          "aria-activedescendant": focusedIndex >= 0 ? `${id}-option-${focusedIndex}` : void 0,
+          "aria-invalid": !!error,
+          value: inputValue,
+          onChange: (e) => {
+            setInputValue(e.target.value);
+            setIsOpen(true);
+            setFocusedIndex(-1);
+          },
+          onKeyDown: handleKeyDown,
+          onFocus: () => setIsOpen(true),
+          placeholder: selected.length === 0 ? placeholder : "",
+          style: styles.input
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ jsx("div", { id: errorId, style: styles.error, role: "alert", children: error }),
+    isOpen && availableOptions.length > 0 && /* @__PURE__ */ jsx(
+      "ul",
+      {
+        id: listboxId,
+        role: "listbox",
+        "aria-label": label,
+        style: styles.listbox,
+        children: availableOptions.map((option, index) => /* @__PURE__ */ jsx(
+          "li",
+          {
+            id: `${id}-option-${index}`,
+            role: "option",
+            "aria-selected": false,
+            onClick: () => handleSelect(option.value),
+            onMouseEnter: () => setFocusedIndex(index),
+            style: {
+              ...styles.option,
+              ...focusedIndex === index ? styles.activeOption : {}
+            },
+            children: option.label
+          },
+          option.value
+        ))
+      }
+    )
+  ] });
+};
+
+export {
+  MultiSelect
+};

package/dist/index.d.mts

@@ -13,6 +13,17 @@ export { Switch } from './Switch/Switch.mjs';
 export { Toast, ToastProvider, ToastType, useToast } from './Toast/Toast.mjs';
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './Tooltip/Tooltip.mjs';
 export { Heading, HeadingProps } from './Heading/Heading.mjs';
+export { AccessibilityStatement, AccessibilityStatementProps } from './AccessibilityStatement/AccessibilityStatement.mjs';
+export { ErrorSummary, ErrorSummaryProps } from './ErrorSummary/ErrorSummary.mjs';
+export { Combobox, ComboboxOption, ComboboxProps } from './Combobox/Combobox.mjs';
+export { DatePicker, DatePickerProps } from './DatePicker/DatePicker.mjs';
+export { MultiSelect, MultiSelectOption, MultiSelectProps } from './MultiSelect/MultiSelect.mjs';
+export { Column, DataTable, DataTableProps } from './DataTable/DataTable.mjs';
+export { Pagination, PaginationProps } from './Pagination/Pagination.mjs';
+export { Card, CardProps } from './Card/Card.mjs';
+export { TreeNode, TreeView, TreeViewProps } from './TreeView/TreeView.mjs';
+export { LiveRegion, LiveRegionProps } from './LiveRegion/LiveRegion.mjs';
+import '@holmdigital/standards';
 
 interface BreadcrumbsProps extends React__default.HTMLAttributes<HTMLElement> {
     separator?: ReactNode;
@@ -81,4 +92,34 @@ interface TabsContentProps {
 }
 declare const TabsContent: ({ value, children, className }: TabsContentProps) => react_jsx_runtime.JSX.Element | null;
 
-export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, TabTrigger, type TabTriggerProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps };
+interface ProgressBarProps {
+    value: number;
+    min?: number;
+    max?: number;
+    label: string;
+    showValueLabel?: boolean;
+    valueText?: string;
+    variant?: 'primary' | 'success' | 'warning' | 'danger';
+    className?: string;
+}
+declare const ProgressBar: React__default.FC<ProgressBarProps>;
+
+interface SkeletonProps {
+    variant?: 'text' | 'circular' | 'rectangular';
+    width?: string | number;
+    height?: string | number;
+    animation?: 'pulse' | 'wave' | 'none';
+    className?: string;
+}
+declare const Skeleton: React__default.FC<SkeletonProps>;
+
+interface HelpTextProps {
+    id: string;
+    children: React__default.ReactNode;
+    variant?: 'default' | 'error' | 'valid';
+    showIcon?: boolean;
+    className?: string;
+}
+declare const HelpText: React__default.FC<HelpTextProps>;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, HelpText, type HelpTextProps, ProgressBar, type ProgressBarProps, Skeleton, type SkeletonProps, TabTrigger, type TabTriggerProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps };

package/dist/index.d.ts

@@ -13,6 +13,17 @@ export { Switch } from './Switch/Switch.js';
 export { Toast, ToastProvider, ToastType, useToast } from './Toast/Toast.js';
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from './Tooltip/Tooltip.js';
 export { Heading, HeadingProps } from './Heading/Heading.js';
+export { AccessibilityStatement, AccessibilityStatementProps } from './AccessibilityStatement/AccessibilityStatement.js';
+export { ErrorSummary, ErrorSummaryProps } from './ErrorSummary/ErrorSummary.js';
+export { Combobox, ComboboxOption, ComboboxProps } from './Combobox/Combobox.js';
+export { DatePicker, DatePickerProps } from './DatePicker/DatePicker.js';
+export { MultiSelect, MultiSelectOption, MultiSelectProps } from './MultiSelect/MultiSelect.js';
+export { Column, DataTable, DataTableProps } from './DataTable/DataTable.js';
+export { Pagination, PaginationProps } from './Pagination/Pagination.js';
+export { Card, CardProps } from './Card/Card.js';
+export { TreeNode, TreeView, TreeViewProps } from './TreeView/TreeView.js';
+export { LiveRegion, LiveRegionProps } from './LiveRegion/LiveRegion.js';
+import '@holmdigital/standards';
 
 interface BreadcrumbsProps extends React__default.HTMLAttributes<HTMLElement> {
     separator?: ReactNode;
@@ -81,4 +92,34 @@ interface TabsContentProps {
 }
 declare const TabsContent: ({ value, children, className }: TabsContentProps) => react_jsx_runtime.JSX.Element | null;
 
-export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, TabTrigger, type TabTriggerProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps };
+interface ProgressBarProps {
+    value: number;
+    min?: number;
+    max?: number;
+    label: string;
+    showValueLabel?: boolean;
+    valueText?: string;
+    variant?: 'primary' | 'success' | 'warning' | 'danger';
+    className?: string;
+}
+declare const ProgressBar: React__default.FC<ProgressBarProps>;
+
+interface SkeletonProps {
+    variant?: 'text' | 'circular' | 'rectangular';
+    width?: string | number;
+    height?: string | number;
+    animation?: 'pulse' | 'wave' | 'none';
+    className?: string;
+}
+declare const Skeleton: React__default.FC<SkeletonProps>;
+
+interface HelpTextProps {
+    id: string;
+    children: React__default.ReactNode;
+    variant?: 'default' | 'error' | 'valid';
+    showIcon?: boolean;
+    className?: string;
+}
+declare const HelpText: React__default.FC<HelpTextProps>;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, HelpText, type HelpTextProps, ProgressBar, type ProgressBarProps, Skeleton, type SkeletonProps, TabTrigger, type TabTriggerProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps };