@opengovsg/oui 0.0.0-snapshot-20250311073924

package/dist/esm/combo-box/combo-box.js

@@ -0,0 +1,273 @@
+"use strict";
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useMemo, useCallback } from 'react';
+import { comboBoxItemStyles, cn, comboBoxStyles, composeTailwindRenderProps, composeRenderProps, comboBoxClearButtonStyles } from '@opengovsg/oui-theme';
+import { useMessageFormatter } from 'react-aria';
+import { UNSTABLE_ListLayout, ComboBox as ComboBox$1, Input, Button, UNSTABLE_Virtualizer, Popover, ListBox, ListBoxItem, Text } from 'react-aria-components';
+import { Label, FieldGroup, Description, FieldError } from '../field/field.js';
+import ChevronUp from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.js';
+import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
+import X from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js';
+
+const calculateEstimatedRowHeight = (size) => {
+  switch (size) {
+    case "xs":
+      return 44;
+    case "sm":
+      return 44;
+    case "md":
+      return 48;
+  }
+};
+const i18nStrings = {
+  "en-SG": {
+    clear: "Clear",
+    empty: "No matching results"
+  },
+  "zh-SG": {
+    clear: "\u6E05\u9664",
+    empty: "\u6CA1\u6709\u5339\u914D\u7684\u7ED3\u679C"
+  },
+  "ms-SG": {
+    clear: "Jelas",
+    empty: "Tiada hasil yang sepadan"
+  },
+  "ta-SG": {
+    clear: "\u0BA4\u0BC6\u0BB3\u0BBF\u0BB5\u0BC1",
+    empty: "\u0BAA\u0BCA\u0BB0\u0BC1\u0BA8\u0BCD\u0BA4\u0BC1\u0BAE\u0BCD \u0BAE\u0BC1\u0B9F\u0BBF\u0BB5\u0BC1\u0B95\u0BB3\u0BCD \u0B87\u0BB2\u0BCD\u0BB2\u0BC8"
+  }
+};
+function ComboBoxEmptyState({
+  size,
+  className
+}) {
+  const styles = comboBoxItemStyles({ size });
+  const formatMessage = useMessageFormatter(i18nStrings);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: styles.container({
+        className: cn("cursor-default italic", className)
+      }),
+      children: formatMessage("empty")
+    }
+  );
+}
+function ComboBox({
+  label,
+  description,
+  errorMessage,
+  classNames,
+  itemClassNames,
+  size,
+  listLayoutOptions,
+  children,
+  dependencies,
+  onClear,
+  renderEmptyState: renderEmptyStateProp,
+  ...props
+}) {
+  const formatMessage = useMessageFormatter(i18nStrings);
+  const styles = comboBoxStyles({ size });
+  const layout = useMemo(() => {
+    return new UNSTABLE_ListLayout({
+      estimatedRowHeight: calculateEstimatedRowHeight(size ?? "md"),
+      ...listLayoutOptions
+    });
+  }, [listLayoutOptions, size]);
+  const renderEmptyState = useCallback(
+    (props2) => {
+      if (renderEmptyStateProp) {
+        return renderEmptyStateProp(props2);
+      }
+      return /* @__PURE__ */ jsx(ComboBoxEmptyState, { size, className: classNames?.emptyState });
+    },
+    [classNames?.emptyState, renderEmptyStateProp, size]
+  );
+  return /* @__PURE__ */ jsx(
+    ComboBox$1,
+    {
+      className: composeTailwindRenderProps(
+        props.className ?? classNames?.base,
+        styles.container()
+      ),
+      shouldFocusWrap: true,
+      allowsEmptyCollection: true,
+      ...props,
+      children: ({ isOpen, isDisabled: isComboBoxDisabled }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Label,
+          {
+            size,
+            className: styles.label({ className: classNames?.label, size }),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-row", children: [
+          /* @__PURE__ */ jsxs(
+            FieldGroup,
+            {
+              className: composeRenderProps(
+                classNames?.group,
+                (className, renderProps) => styles.group({
+                  ...renderProps,
+                  className,
+                  size,
+                  isClearable: !!onClear
+                })
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    className: composeRenderProps(
+                      classNames?.field,
+                      (className, renderProps) => styles.field({ ...renderProps, className, size })
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Button,
+                  {
+                    className: composeRenderProps(
+                      classNames?.expandButton,
+                      (className, renderProps) => styles.expandButton({ ...renderProps, className, size })
+                    ),
+                    children: isOpen ? /* @__PURE__ */ jsx(
+                      ChevronUp,
+                      {
+                        className: styles.icon({
+                          className: classNames?.icon,
+                          size
+                        })
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      ChevronDown,
+                      {
+                        className: styles.icon({
+                          className: classNames?.icon,
+                          size
+                        })
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          !!onClear && /* @__PURE__ */ jsx(
+            Button,
+            {
+              slot: null,
+              onPress: onClear,
+              isDisabled: isComboBoxDisabled,
+              "aria-label": formatMessage("clear"),
+              className: composeRenderProps(
+                classNames?.clearButton,
+                (className, renderProps) => comboBoxClearButtonStyles({
+                  ...renderProps,
+                  className,
+                  size,
+                  isInactive: !props.inputValue,
+                  isDisabled: renderProps.isDisabled
+                })
+              ),
+              children: /* @__PURE__ */ jsx(
+                X,
+                {
+                  className: styles.icon({
+                    className: classNames?.icon,
+                    size
+                  })
+                }
+              )
+            }
+          )
+        ] }),
+        description && /* @__PURE__ */ jsx(Description, { size, children: description }),
+        /* @__PURE__ */ jsx(FieldError, { size, children: errorMessage }),
+        /* @__PURE__ */ jsx(UNSTABLE_Virtualizer, { layout, children: /* @__PURE__ */ jsx(
+          Popover,
+          {
+            className: composeRenderProps(
+              classNames?.popover,
+              (className, renderProps) => styles.popover({ ...renderProps, className })
+            ),
+            children: /* @__PURE__ */ jsx(
+              ListBox,
+              {
+                className: composeRenderProps(
+                  classNames?.list,
+                  (className, renderProps) => styles.list({ ...renderProps, className })
+                ),
+                dependencies,
+                renderEmptyState,
+                children: (item) => {
+                  if (children) {
+                    return children(item);
+                  }
+                  return /* @__PURE__ */ jsx(
+                    ComboBoxItem,
+                    {
+                      size,
+                      id: item.value,
+                      label: item.name,
+                      textValue: item.name,
+                      description: item.description,
+                      classNames: itemClassNames
+                    }
+                  );
+                }
+              }
+            )
+          }
+        ) })
+      ] })
+    }
+  );
+}
+function ComboBoxItem({
+  className,
+  size,
+  description,
+  label,
+  classNames,
+  ...props
+}) {
+  const styles = comboBoxItemStyles({ size });
+  return /* @__PURE__ */ jsx(
+    ListBoxItem,
+    {
+      ...props,
+      className: composeRenderProps(
+        className ?? classNames?.container,
+        (className2, renderProps) => styles.container({ ...renderProps, className: className2 })
+      ),
+      children: (renderProps) => {
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: styles.label({ className: classNames?.label }),
+              slot: "label",
+              children: typeof label === "function" ? label(renderProps) : label
+            }
+          ),
+          description && /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: styles.description({
+                className: classNames?.description
+              }),
+              slot: "description",
+              children: typeof description === "function" ? description(renderProps) : description
+            }
+          )
+        ] });
+      }
+    }
+  );
+}
+
+export { ComboBox, ComboBoxEmptyState, ComboBoxItem };

package/dist/esm/combo-box/index.js

@@ -0,0 +1,3 @@
+"use strict";
+export { ComboBox, ComboBoxEmptyState, ComboBoxItem } from './combo-box.js';
+export { ComboBoxFuzzy } from './combo-box-fuzzy.js';

package/dist/esm/field/field.js

@@ -0,0 +1,58 @@
+"use strict";
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { labelStyles, descriptionStyles, fieldErrorStyles, composeRenderProps, fieldGroupStyles } from '@opengovsg/oui-theme';
+import { Label as Label$1, Text, FieldError as FieldError$1, Group } from 'react-aria-components';
+import CircleAlert from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.js';
+
+function Label({ size, className, ...props }) {
+  return /* @__PURE__ */ jsx(Label$1, { ...props, className: labelStyles({ className, size }) });
+}
+function Description({ size, className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Text,
+    {
+      ...props,
+      slot: "description",
+      className: descriptionStyles({ className, size })
+    }
+  );
+}
+function FieldError({
+  children,
+  className,
+  size,
+  classNames,
+  ...props
+}) {
+  const styles = fieldErrorStyles({ size });
+  if (!children) return null;
+  return /* @__PURE__ */ jsx(
+    FieldError$1,
+    {
+      ...props,
+      className: composeRenderProps(
+        className ?? classNames?.text,
+        (className2, renderProps) => styles.text({ ...renderProps, className: className2 })
+      ),
+      children: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(CircleAlert, { className: styles.icon({ className: classNames?.icon }) }),
+        children
+      ] })
+    }
+  );
+}
+function FieldGroup(props) {
+  return /* @__PURE__ */ jsx(
+    Group,
+    {
+      ...props,
+      className: composeRenderProps(
+        props.className,
+        (className, renderProps) => fieldGroupStyles({ ...renderProps, className })
+      )
+    }
+  );
+}
+
+export { Description, FieldError, FieldGroup, Label };

package/dist/esm/field/index.js

@@ -0,0 +1,2 @@
+"use strict";
+export { Description, FieldError, FieldGroup, Label } from './field.js';

package/dist/esm/govt-banner/govt-banner.js

@@ -0,0 +1,257 @@
+"use strict";
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useRef } from 'react';
+import { govtBannerStyles, dataAttr, twMerge } from '@opengovsg/oui-theme';
+import { useMessageFormatter, useDisclosure, useButton, useFocusRing, mergeProps } from 'react-aria';
+import { useDisclosureState } from 'react-stately';
+import ChevronDown from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js';
+import Landmark from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/landmark.js';
+import ExternalLink from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/external-link.js';
+import Lock from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/lock.js';
+
+const i18nStrings = {
+  "en-SG": {
+    mainLabel: "A Singapore Government Agency Website",
+    identifyLabel: "How to identify",
+    environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
+    officialLinkHeader: "Official website links end with .gov.sg",
+    officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
+    officialLinkTrusted: "Trusted websites",
+    secureHeader: "Secure websites use HTTPS",
+    secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
+  },
+  "zh-SG": {
+    mainLabel: "A Singapore Government Agency Website",
+    identifyLabel: "How to identify",
+    environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
+    officialLinkHeader: "Official website links end with .gov.sg",
+    officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
+    officialLinkTrusted: "Trusted websites",
+    secureHeader: "Secure websites use HTTPS",
+    secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
+  },
+  "ms-SG": {
+    mainLabel: "A Singapore Government Agency Website",
+    identifyLabel: "How to identify",
+    environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
+    officialLinkHeader: "Official website links end with .gov.sg",
+    officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
+    officialLinkTrusted: "Trusted websites",
+    secureHeader: "Secure websites use HTTPS",
+    secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
+  },
+  "ta-SG": {
+    mainLabel: "A Singapore Government Agency Website",
+    identifyLabel: "How to identify",
+    environmentLabel: "[NOTE: THIS IS A {environment} WEBSITE]",
+    officialLinkHeader: "Official website links end with .gov.sg",
+    officialLinkContent: "Government agencies communicate via <boldThis>.gov.sg</boldThis> websites (e.g. go.gov.sg/open).",
+    officialLinkTrusted: "Trusted websites",
+    secureHeader: "Secure websites use HTTPS",
+    secureContent: "Look for a <boldThis>lock</boldThis> {icon} or https:// as an added precaution. Share sensitive information only on official, secure websites."
+  }
+};
+function GovtBanner({
+  environment,
+  classNames,
+  ...props
+}) {
+  const formatMessage = useMessageFormatter(i18nStrings);
+  const state = useDisclosureState(props);
+  const panelRef = useRef(null);
+  const triggerRef = useRef(null);
+  const { buttonProps: triggerProps, panelProps } = useDisclosure(
+    props,
+    state,
+    panelRef
+  );
+  const { buttonProps } = useButton(triggerProps, triggerRef);
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const slots = govtBannerStyles();
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: slots.banner({ className: classNames?.banner }),
+      role: "banner",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: slots.mainContentContainer({
+              className: classNames?.mainContentContainer
+            }),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  className: slots.crest({ className: classNames?.crest }),
+                  version: "1.1",
+                  viewBox: "0 0 32 32",
+                  xmlns: "http://www.w3.org/2000/svg",
+                  children: [
+                    /* @__PURE__ */ jsx("path", { d: "M5.896 11.185c0 0-0.949 1.341 0.294 3.075 0 0 0.196-0.883 2.159-0.883h2.356c2.225 0 3.893-2.126 2.846-4.319 0 0 1.57 0.164 2.095-0.818 0.523-0.981-0.033-1.374-0.818-1.374h-3.959c0 0.704-1.341 0.802-1.341 0h-2.225c0 0-1.669 0-1.701 1.407 0 0 0.377-0.229 0.752-0.261v0.375c0 0-0.458 0.082-0.671 0.197-0.212 0.114-0.523 0.425-0.228 1.227 0.294 0.801 0.409 1.079 0.409 1.079s0.475-0.41 1.244-0.41h0.9c1.602 0 1.308 1.554-0.295 1.554s-1.815-0.85-1.815-0.85z" }),
+                    /* @__PURE__ */ jsx("path", { d: "M14.255 9.566c0 0 0.54 0.033 0.932-0.31 0 0 3.55 2.765-1.717 8.326-5.268 5.562-1.195 9.162-1.195 9.162s-0.948 0.915-0.409 2.699c0 0-2.191-1.237-3.867-3.338-2.422-3.036-3.902-7.681 2.749-11.386 0 0 4.389-2.208 3.506-5.153z" }),
+                    /* @__PURE__ */ jsx("path", { d: "M8.829 6.343c0 0 0.709-1.265 2.355-1.265 1.298 0 1.594-0.666 1.594-0.666s0.566-1.079 3.424-1.079c2.619 0 4.384 0.873 5.812 2.039 0 0-3.85-2.388-7.645 0.971h-5.54z" }),
+                    /* @__PURE__ */ jsx("path", { d: "M24.839 14.348c-0.109-3.948-3.163-8.179-9.728-7.939 6.413-5.431 17.537 6.695 8.375 13.066 0 0 1.533-2.186 1.353-5.126z" }),
+                    /* @__PURE__ */ jsx("path", { d: "M16.093 6.845c8.005-0.24 10.863 9.357 5.693 13.676l-5.191 2.509c0 0-0.676-2.181 1.833-4.734 2.509-2.551 4.929-7.328-2.006-10.469 0 0 0.131-0.654-0.327-0.981z" }),
+                    /* @__PURE__ */ jsx("path", { d: "M15.678 9.004c0 0 0.393-0.371 0.524-0.676 5.954 2.486 5.017 6.697 1.461 10.23-2.181 2.246-1.505 4.668-1.505 4.668s-2.66 1.657-3.577 3.097c0 0-3.852-3.28 1.483-8.724 5.235-5.344 1.614-8.594 1.614-8.594z" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: slots.mainContent({ className: classNames?.mainContent }),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: formatMessage("mainLabel") }),
+                    environment ? /* @__PURE__ */ jsx("b", { children: formatMessage("environmentLabel", {
+                      environment: environment.toUpperCase()
+                    }) }) : null,
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        className: slots.identifyButton({
+                          className: classNames?.identifyButton
+                        }),
+                        "data-focus-visible": dataAttr(isFocusVisible),
+                        ref: triggerRef,
+                        type: "button",
+                        ...mergeProps(buttonProps, focusProps),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: slots.link({ className: classNames?.link }), children: formatMessage("identifyLabel") }),
+                          /* @__PURE__ */ jsx(
+                            ChevronDown,
+                            {
+                              className: slots.chevron({ className: classNames?.chevron })
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { ref: panelRef, ...panelProps, children: /* @__PURE__ */ jsxs("div", { className: slots.panel({ className: classNames?.panel }), children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: slots.panelGroup({
+                className: classNames?.panelGroup
+              }),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Landmark,
+                  {
+                    className: slots.panelIcon({ className: classNames?.panelIcon })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: slots.panelSection({
+                      className: classNames?.panelSection
+                    }),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          className: slots.panelHeader({
+                            className: classNames?.panelHeader
+                          }),
+                          children: formatMessage("officialLinkHeader")
+                        }
+                      ),
+                      /* @__PURE__ */ jsxs("article", { children: [
+                        formatMessage("officialLinkContent", {
+                          boldThis: (content) => /* @__PURE__ */ jsx("b", { children: content })
+                        }),
+                        " ",
+                        /* @__PURE__ */ jsxs(
+                          "a",
+                          {
+                            className: slots.link({ className: classNames?.link }),
+                            href: "https://www.gov.sg/trusted-sites#govsites",
+                            rel: "noreferrer",
+                            target: "_blank",
+                            children: [
+                              formatMessage("officialLinkTrusted", {}),
+                              /* @__PURE__ */ jsx(
+                                ExternalLink,
+                                {
+                                  "aria-hidden": true,
+                                  className: slots.inlineIcon({
+                                    className: twMerge("ml-0.5", classNames?.inlineIcon)
+                                  })
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      ] })
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: slots.panelGroup({
+                className: classNames?.panelGroup
+              }),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Lock,
+                  {
+                    className: slots.panelIcon({ className: classNames?.panelIcon })
+                  }
+                ),
+                /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: slots.panelSection({
+                      className: classNames?.panelSection
+                    }),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "p",
+                        {
+                          className: slots.panelHeader({
+                            className: classNames?.panelHeader
+                          }),
+                          children: formatMessage("secureHeader")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx("article", { children: formatMessage("secureContent", {
+                        boldThis: (content) => /* @__PURE__ */ jsx("b", { children: content }),
+                        icon: /* @__PURE__ */ jsxs("span", { "aria-hidden": true, children: [
+                          "(",
+                          /* @__PURE__ */ jsx(
+                            Lock,
+                            {
+                              className: slots.inlineIcon({
+                                className: classNames?.inlineIcon
+                              })
+                            }
+                          ),
+                          ")"
+                        ] })
+                      }) })
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+}
+
+export { GovtBanner };

package/dist/esm/govt-banner/index.js

@@ -0,0 +1,2 @@
+"use strict";
+export { GovtBanner } from './govt-banner.js';

package/dist/esm/hooks/index.js

@@ -0,0 +1,2 @@
+"use strict";
+export { useControllableState } from './use-controllable-state.js';

package/dist/esm/hooks/use-callback-ref.js

@@ -0,0 +1,15 @@
+"use strict";
+"use client";
+import { useRef, useInsertionEffect, useCallback } from 'react';
+
+function useCallbackRef(callback, deps = []) {
+  const callbackRef = useRef(() => {
+    throw new Error("Cannot call an event handler while rendering.");
+  });
+  useInsertionEffect(() => {
+    callbackRef.current = callback;
+  });
+  return useCallback((...args) => callbackRef.current?.(...args), deps);
+}
+
+export { useCallbackRef };

package/dist/esm/hooks/use-controllable-state.js

@@ -0,0 +1,35 @@
+"use strict";
+"use client";
+import { useState } from 'react';
+import { useCallbackRef } from './use-callback-ref.js';
+
+function useControllableState(props) {
+  const {
+    value: valueProp,
+    defaultValue,
+    onChange,
+    shouldUpdate = (prev, next) => prev !== next
+  } = props;
+  const onChangeProp = useCallbackRef(onChange);
+  const shouldUpdateProp = useCallbackRef(shouldUpdate);
+  const [uncontrolledState, setUncontrolledState] = useState(defaultValue);
+  const controlled = valueProp !== void 0;
+  const value = controlled ? valueProp : uncontrolledState;
+  const setValue = useCallbackRef(
+    (next) => {
+      const setter = next;
+      const nextValue = typeof next === "function" ? setter(value) : next;
+      if (!shouldUpdateProp(value, nextValue)) {
+        return;
+      }
+      if (!controlled) {
+        setUncontrolledState(nextValue);
+      }
+      onChangeProp(nextValue);
+    },
+    [controlled, onChangeProp, value, shouldUpdateProp]
+  );
+  return [value, setValue];
+}
+
+export { useControllableState };

package/dist/esm/index.js

@@ -0,0 +1,19 @@
+"use strict";
+export { useControllableState } from './hooks/use-controllable-state.js';
+export { Button } from './button/button.js';
+export { GovtBanner } from './govt-banner/govt-banner.js';
+export { Ripple } from './ripple/ripple.js';
+export { useRipple } from './ripple/use-ripple.js';
+export { Spinner } from './spinner/spinner.js';
+export { useSpinner } from './spinner/use-spinner.js';
+export { Toggle } from './toggle/toggle.js';
+export { SkipNavLink } from './skip-nav-link/skip-nav-link.js';
+export { Input } from './input/input.js';
+export { TextField } from './text-field/text-field.js';
+export { Description, FieldError, FieldGroup, Label } from './field/field.js';
+export { TextArea } from './text-area/text-area.js';
+export { TextAreaField } from './text-area-field/text-area-field.js';
+export { ComboBox, ComboBoxEmptyState, ComboBoxItem } from './combo-box/combo-box.js';
+export { ComboBoxFuzzy } from './combo-box/combo-box-fuzzy.js';
+export { Banner } from './banner/banner.js';
+export { TagField } from './tag-field/tag-field.js';

package/dist/esm/input/index.js

@@ -0,0 +1,2 @@
+"use strict";
+export { Input } from './input.js';