@opengovsg/oui 0.0.0-snapshot-20250311073924

package/dist/cjs/text-area/text-area.cjs

@@ -0,0 +1,28 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var ouiTheme = require('@opengovsg/oui-theme');
+var reactAriaComponents = require('react-aria-components');
+
+const TextArea = react.forwardRef(
+  ({ size, variant, isDisabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactAriaComponents.TextArea,
+      {
+        ...props,
+        disabled: isDisabled,
+        className: ouiTheme.composeRenderProps(
+          props.className,
+          (className, renderProps) => ouiTheme.textAreaStyles({ ...renderProps, className, size, variant })
+        ),
+        ref
+      }
+    );
+  }
+);
+TextArea.displayName = "TextArea";
+
+exports.TextArea = TextArea;

package/dist/cjs/text-area-field/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+'use strict';
+
+var textAreaField = require('./text-area-field.cjs');
+
+
+
+exports.TextAreaField = textAreaField.TextAreaField;

package/dist/cjs/text-area-field/text-area-field.cjs

@@ -0,0 +1,48 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ouiTheme = require('@opengovsg/oui-theme');
+var reactAriaComponents = require('react-aria-components');
+var textArea = require('../text-area/text-area.cjs');
+var field = require('../field/field.cjs');
+
+function TextAreaField({
+  label,
+  description,
+  errorMessage,
+  classNames,
+  className,
+  inputProps,
+  size,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.TextField,
+    {
+      ...props,
+      className: ouiTheme.composeTailwindRenderProps(
+        className ?? classNames?.base,
+        "flex flex-col gap-2"
+      ),
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size, className: classNames?.label, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          textArea.TextArea,
+          {
+            size,
+            variant,
+            className: classNames?.input,
+            ...inputProps
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size, className: classNames?.description, children: description }),
+        /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size, className: classNames?.error, children: errorMessage })
+      ]
+    }
+  );
+}
+
+exports.TextAreaField = TextAreaField;

package/dist/cjs/text-field/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+'use strict';
+
+var textField = require('./text-field.cjs');
+
+
+
+exports.TextField = textField.TextField;

package/dist/cjs/text-field/text-field.cjs

@@ -0,0 +1,48 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var ouiTheme = require('@opengovsg/oui-theme');
+var reactAriaComponents = require('react-aria-components');
+var input = require('../input/input.cjs');
+var field = require('../field/field.cjs');
+
+function TextField({
+  label,
+  description,
+  errorMessage,
+  classNames,
+  className,
+  inputProps,
+  size,
+  variant,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactAriaComponents.TextField,
+    {
+      ...props,
+      className: ouiTheme.composeTailwindRenderProps(
+        className ?? classNames?.base,
+        "flex flex-col gap-2"
+      ),
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsx(field.Label, { size, className: classNames?.label, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          input.Input,
+          {
+            size,
+            variant,
+            className: classNames?.input,
+            ...inputProps
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(field.Description, { size, className: classNames?.description, children: description }),
+        /* @__PURE__ */ jsxRuntime.jsx(field.FieldError, { size, className: classNames?.error, children: errorMessage })
+      ]
+    }
+  );
+}
+
+exports.TextField = TextField;

package/dist/cjs/toggle/index.cjs

@@ -0,0 +1,8 @@
+"use strict";
+'use strict';
+
+var toggle = require('./toggle.cjs');
+
+
+
+exports.Toggle = toggle.Toggle;

package/dist/cjs/toggle/toggle.cjs

@@ -0,0 +1,48 @@
+"use strict";
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var ouiTheme = require('@opengovsg/oui-theme');
+var reactAria = require('react-aria');
+var reactAriaComponents = require('react-aria-components');
+var utils = require('../system/utils.cjs');
+
+const Toggle = ({
+  children,
+  classNames,
+  thumbIcon,
+  ...originalProps
+}) => {
+  const [props, variantProps] = utils.mapPropsVariants(
+    originalProps,
+    ouiTheme.toggleStyles.variantKeys
+  );
+  const slots = ouiTheme.toggleStyles(variantProps);
+  const clonedThumbIcon = react.useCallback(
+    (renderProps) => {
+      const baseProps = {
+        className: slots.thumbIcon({ className: classNames?.thumbIcon })
+      };
+      return typeof thumbIcon === "function" ? thumbIcon(reactAria.mergeProps(baseProps, renderProps)) : thumbIcon && react.cloneElement(thumbIcon, baseProps);
+    },
+    [classNames?.thumbIcon, slots, thumbIcon]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.Switch,
+    {
+      ...props,
+      className: ouiTheme.composeTailwindRenderProps(
+        props.className ?? classNames?.base,
+        slots.base()
+      ),
+      children: (renderProps) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: slots.track({ className: classNames?.track }), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: slots.thumb({ className: classNames?.thumb }), children: thumbIcon && clonedThumbIcon(renderProps) }) }),
+        children
+      ] })
+    }
+  );
+};
+
+exports.Toggle = Toggle;

package/dist/esm/banner/banner.js

@@ -0,0 +1,116 @@
+"use strict";
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo, useRef } from 'react';
+import { bannerStyles } from '@opengovsg/oui-theme';
+import { useMessageFormatter, useDisclosure } from 'react-aria';
+import { useDisclosureState } from 'react-stately';
+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';
+import Info from '../node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/info.js';
+import { Button } from '../button/button.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 i18nStrings = {
+  "en-SG": {
+    dismiss: "Close banner"
+  },
+  "zh-SG": {
+    dismiss: "\u5173\u95ED\u6A2A\u5E45"
+  },
+  "ms-SG": {
+    dismiss: "Tutup sepanduk"
+  },
+  "ta-SG": {
+    dismiss: "\u0B89\u0B9F\u0BC8\u0B95\u0BB3\u0BC8 \u0BAE\u0BC2\u0B9F\u0BC1\u0B99\u0BCD\u0B95\u0BB3\u0BCD"
+  }
+};
+const Banner = ({
+  variant = "info",
+  size,
+  children,
+  isDismissable,
+  startContent: startContentProp,
+  className,
+  classNames,
+  defaultExpanded = true,
+  ...disclosureProps
+}) => {
+  const formatMessage = useMessageFormatter(i18nStrings);
+  const styles = bannerStyles({ variant, size });
+  const startContent = useMemo(() => {
+    if (startContentProp) {
+      return startContentProp;
+    }
+    switch (variant) {
+      case "info":
+        return /* @__PURE__ */ jsx(Info, { className: styles.icon({ className: classNames?.icon }) });
+      case "warning":
+      case "error":
+        return /* @__PURE__ */ jsx(
+          CircleAlert,
+          {
+            className: styles.icon({ className: classNames?.icon })
+          }
+        );
+    }
+  }, [classNames?.icon, startContentProp, styles, variant]);
+  const bannerRef = useRef(null);
+  const state = useDisclosureState({
+    defaultExpanded
+  });
+  const { buttonProps, panelProps: bannerProps } = useDisclosure(
+    disclosureProps,
+    state,
+    bannerRef
+  );
+  if (!state.isExpanded) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles.base({ className: className ?? classNames?.base }),
+      ref: bannerRef,
+      ...isDismissable ? bannerProps : {},
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.content({ className: classNames?.content }), children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: styles.startContentWrapper({
+                className: classNames?.startContentWrapper
+              }),
+              children: startContent
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: styles.childrenWrapper({
+                className: classNames?.childrenWrapper
+              }),
+              children
+            }
+          )
+        ] }),
+        isDismissable && /* @__PURE__ */ jsx(
+          Button,
+          {
+            size: "xs",
+            variant: "clear",
+            color: "neutral",
+            isIconOnly: true,
+            "aria-label": formatMessage("dismiss"),
+            className: styles.dismissButton({
+              className: classNames?.dismissButton
+            }),
+            ...buttonProps,
+            children: /* @__PURE__ */ jsx(X, {})
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { Banner };

package/dist/esm/banner/index.js

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

package/dist/esm/button/button.js

@@ -0,0 +1,84 @@
+"use strict";
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useMemo } from 'react';
+import { buttonStyles } from '@opengovsg/oui-theme';
+import { chain } from '@react-aria/utils';
+import { Button as Button$1, composeRenderProps } from 'react-aria-components';
+import { useRipple } from '../ripple/use-ripple.js';
+import { Spinner } from '../spinner/spinner.js';
+import { Ripple } from '../ripple/ripple.js';
+
+const Button = forwardRef(
+  ({
+    startContent,
+    endContent,
+    className: classNameProp,
+    variant,
+    color,
+    layout,
+    radius,
+    size = "md",
+    spinnerPlacement = "start",
+    loadingText,
+    onPress,
+    children,
+    disableRipple,
+    isPending,
+    spinner: spinnerProp,
+    isIconOnly,
+    ...props
+  }, ref) => {
+    const {
+      onPress: onPressRipple,
+      onClear: onClearRipple,
+      ripples
+    } = useRipple();
+    const spinner = useMemo(() => {
+      if (spinnerProp) {
+        return spinnerProp;
+      }
+      const buttonSpinnerSizeMap = {
+        sm: "sm",
+        md: "sm",
+        lg: "md"
+      };
+      const spinnerSize = buttonSpinnerSizeMap[size];
+      return /* @__PURE__ */ jsx(Spinner, { size: spinnerSize });
+    }, [size, spinnerProp]);
+    return /* @__PURE__ */ jsxs(
+      Button$1,
+      {
+        ...props,
+        className: composeRenderProps(
+          classNameProp,
+          (className, renderProps) => buttonStyles({
+            ...renderProps,
+            variant,
+            size,
+            className,
+            layout,
+            color,
+            radius,
+            isIconOnly
+          })
+        ),
+        isPending,
+        onPress: chain(onPress, onPressRipple),
+        ref,
+        children: [
+          startContent,
+          isPending && spinnerPlacement === "start" ? spinner : null,
+          isPending ? null : children,
+          isPending && loadingText ? loadingText : null,
+          isPending && spinnerPlacement === "end" ? spinner : null,
+          endContent,
+          !disableRipple && /* @__PURE__ */ jsx(Ripple, { onClear: onClearRipple, ripples })
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button };

package/dist/esm/button/index.js

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

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

@@ -0,0 +1,105 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useDeferredValue, useMemo, useState, useCallback } from 'react';
+import { comboBoxFuzzyHighlightedTextStyles } from '@opengovsg/oui-theme';
+import fuzzysort from 'fuzzysort';
+import { ComboBox, ComboBoxItem } from './combo-box.js';
+
+function HighlightedText({
+  result,
+  originalText,
+  isFocused,
+  isSelected,
+  className
+}) {
+  if (!result || result.indexes.length === 0) return originalText;
+  return result.highlight((m, i) => /* @__PURE__ */ jsx(
+    "mark",
+    {
+      className: comboBoxFuzzyHighlightedTextStyles({
+        className,
+        isFocused,
+        isSelected
+      }),
+      children: m
+    },
+    i
+  ));
+}
+function ComboBoxFuzzy({
+  items,
+  itemClassNames,
+  onSelectionChange: onSelectionChangeProp,
+  onInputChange: onInputChangeProp,
+  ...props
+}) {
+  const deferredInputValue = useDeferredValue(props.inputValue);
+  const preparedItems = useMemo(() => {
+    return items?.map((item) => ({
+      ...item,
+      prepared: fuzzysort.prepare(item.name)
+    })) ?? [];
+  }, [items]);
+  const [filteredResults, setFilteredResults] = useState({ items, result: {} });
+  const onSelectionChange = useCallback(
+    (key) => {
+      onSelectionChangeProp(key);
+      setFilteredResults({ items: preparedItems, result: {} });
+    },
+    [onSelectionChangeProp, preparedItems]
+  );
+  const onInputChange = useCallback(
+    (value) => {
+      onInputChangeProp(value);
+      if (!value) {
+        setFilteredResults({ items: preparedItems, result: {} });
+        return;
+      }
+      const results = fuzzysort.go(value, preparedItems, {
+        key: "prepared"
+      }).reduce(
+        (acc, result) => {
+          acc.items.push(result.obj);
+          acc.result[result.obj.name] = result;
+          return acc;
+        },
+        { items: [], result: {} }
+      );
+      setFilteredResults(results);
+    },
+    [onInputChangeProp, preparedItems]
+  );
+  return /* @__PURE__ */ jsx(
+    ComboBox,
+    {
+      ...props,
+      items: filteredResults.items,
+      dependencies: [deferredInputValue],
+      onSelectionChange,
+      onInputChange,
+      children: (item) => /* @__PURE__ */ jsx(
+        ComboBoxItem,
+        {
+          classNames: itemClassNames,
+          label: ({ isSelected, isFocused }) => /* @__PURE__ */ jsx(
+            HighlightedText,
+            {
+              className: itemClassNames?.highlight,
+              result: filteredResults.result?.[item.name],
+              originalText: item.name,
+              isSelected,
+              isFocused
+            }
+          ),
+          description: item.description,
+          textValue: item.name,
+          id: item.value
+        },
+        item.name
+      )
+    }
+  );
+}
+
+export { ComboBoxFuzzy };