@opengovsg/oui 0.0.0-snapshot-20250311073924

package/dist/esm/input/input.js

@@ -0,0 +1,26 @@
+"use strict";
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { composeRenderProps, inputStyles } from '@opengovsg/oui-theme';
+import { Input as Input$1 } from 'react-aria-components';
+
+const Input = forwardRef(
+  ({ size, variant, isDisabled, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Input$1,
+      {
+        ...props,
+        disabled: isDisabled,
+        className: composeRenderProps(
+          props.className,
+          (className, renderProps) => inputStyles({ ...renderProps, className, size, variant })
+        ),
+        ref
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/Icon.js

@@ -0,0 +1,44 @@
+import { forwardRef, createElement } from 'react';
+import defaultAttributes from './defaultAttributes.js';
+import { mergeClasses } from './shared/src/utils.js';
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const Icon = forwardRef(
+  ({
+    color = "currentColor",
+    size = 24,
+    strokeWidth = 2,
+    absoluteStrokeWidth,
+    className = "",
+    children,
+    iconNode,
+    ...rest
+  }, ref) => {
+    return createElement(
+      "svg",
+      {
+        ref,
+        ...defaultAttributes,
+        width: size,
+        height: size,
+        stroke: color,
+        strokeWidth: absoluteStrokeWidth ? Number(strokeWidth) * 24 / Number(size) : strokeWidth,
+        className: mergeClasses("lucide", className),
+        ...rest
+      },
+      [
+        ...iconNode.map(([tag, attrs]) => createElement(tag, attrs)),
+        ...Array.isArray(children) ? children : [children]
+      ]
+    );
+  }
+);
+
+export { Icon as default };

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/createLucideIcon.js

@@ -0,0 +1,26 @@
+import { forwardRef, createElement } from 'react';
+import { mergeClasses, toKebabCase } from './shared/src/utils.js';
+import Icon from './Icon.js';
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const createLucideIcon = (iconName, iconNode) => {
+  const Component = forwardRef(
+    ({ className, ...props }, ref) => createElement(Icon, {
+      ref,
+      iconNode,
+      className: mergeClasses(`lucide-${toKebabCase(iconName)}`, className),
+      ...props
+    })
+  );
+  Component.displayName = `${iconName}`;
+  return Component;
+};
+
+export { createLucideIcon as default };

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/defaultAttributes.js

@@ -0,0 +1,20 @@
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+var defaultAttributes = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: 24,
+  height: 24,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+
+export { defaultAttributes as default };

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js

@@ -0,0 +1,14 @@
+import createLucideIcon from '../createLucideIcon.js';
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]];
+const ChevronDown = createLucideIcon("ChevronDown", __iconNode);
+
+export { __iconNode, ChevronDown as default };

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/chevron-up.js

@@ -0,0 +1,14 @@
+import createLucideIcon from '../createLucideIcon.js';
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [["path", { d: "m18 15-6-6-6 6", key: "153udz" }]];
+const ChevronUp = createLucideIcon("ChevronUp", __iconNode);
+
+export { __iconNode, ChevronUp as default };

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/circle-alert.js

@@ -0,0 +1,18 @@
+import createLucideIcon from '../createLucideIcon.js';
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["line", { x1: "12", x2: "12", y1: "8", y2: "12", key: "1pkeuh" }],
+  ["line", { x1: "12", x2: "12.01", y1: "16", y2: "16", key: "4dfq90" }]
+];
+const CircleAlert = createLucideIcon("CircleAlert", __iconNode);
+
+export { __iconNode, CircleAlert as default };

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/external-link.js

@@ -0,0 +1,18 @@
+import createLucideIcon from '../createLucideIcon.js';
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "M15 3h6v6", key: "1q9fwt" }],
+  ["path", { d: "M10 14 21 3", key: "gplh6r" }],
+  ["path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6", key: "a6xqqp" }]
+];
+const ExternalLink = createLucideIcon("ExternalLink", __iconNode);
+
+export { __iconNode, ExternalLink as default };

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/info.js

@@ -0,0 +1,18 @@
+import createLucideIcon from '../createLucideIcon.js';
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["circle", { cx: "12", cy: "12", r: "10", key: "1mglay" }],
+  ["path", { d: "M12 16v-4", key: "1dtifu" }],
+  ["path", { d: "M12 8h.01", key: "e9boi3" }]
+];
+const Info = createLucideIcon("Info", __iconNode);
+
+export { __iconNode, Info as default };

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/landmark.js

@@ -0,0 +1,21 @@
+import createLucideIcon from '../createLucideIcon.js';
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["line", { x1: "3", x2: "21", y1: "22", y2: "22", key: "j8o0r" }],
+  ["line", { x1: "6", x2: "6", y1: "18", y2: "11", key: "10tf0k" }],
+  ["line", { x1: "10", x2: "10", y1: "18", y2: "11", key: "54lgf6" }],
+  ["line", { x1: "14", x2: "14", y1: "18", y2: "11", key: "380y" }],
+  ["line", { x1: "18", x2: "18", y1: "18", y2: "11", key: "1kevvc" }],
+  ["polygon", { points: "12 2 20 7 4 7", key: "jkujk7" }]
+];
+const Landmark = createLucideIcon("Landmark", __iconNode);
+
+export { __iconNode, Landmark as default };

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/lock.js

@@ -0,0 +1,17 @@
+import createLucideIcon from '../createLucideIcon.js';
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["rect", { width: "18", height: "11", x: "3", y: "11", rx: "2", ry: "2", key: "1w4ew1" }],
+  ["path", { d: "M7 11V7a5 5 0 0 1 10 0v4", key: "fwvmzm" }]
+];
+const Lock = createLucideIcon("Lock", __iconNode);
+
+export { __iconNode, Lock as default };

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/icons/x.js

@@ -0,0 +1,17 @@
+import createLucideIcon from '../createLucideIcon.js';
+
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+
+const __iconNode = [
+  ["path", { d: "M18 6 6 18", key: "1bl5f8" }],
+  ["path", { d: "m6 6 12 12", key: "d8bk6v" }]
+];
+const X = createLucideIcon("X", __iconNode);
+
+export { __iconNode, X as default };

package/dist/esm/node_modules/.pnpm/lucide-react@0.475.0_react@19.0.0/node_modules/lucide-react/dist/esm/shared/src/utils.js

@@ -0,0 +1,13 @@
+/**
+ * @license lucide-react v0.475.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+
+const toKebabCase = (string) => string.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+const mergeClasses = (...classes) => classes.filter((className, index, array) => {
+  return Boolean(className) && className.trim() !== "" && array.indexOf(className) === index;
+}).join(" ").trim();
+
+export { mergeClasses, toKebabCase };

package/dist/esm/ripple/index.js

@@ -0,0 +1,3 @@
+"use strict";
+export { Ripple } from './ripple.js';
+export { useRipple } from './use-ripple.js';

package/dist/esm/ripple/ripple.js

@@ -0,0 +1,49 @@
+"use strict";
+"use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { clamp } from 'motion';
+import { LazyMotion, domAnimation, AnimatePresence } from 'motion/react';
+import * as m from 'motion/react-m';
+
+function Ripple({
+  ripples = [],
+  style,
+  onClear,
+  color = "currentColor"
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: ripples.map((ripple) => {
+    const duration = clamp(
+      0.2,
+      ripple.size > 100 ? 0.75 : 0.5,
+      0.01 * ripple.size
+    );
+    return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: /* @__PURE__ */ jsx(
+      m.span,
+      {
+        animate: { transform: "scale(2)", opacity: 0 },
+        exit: { opacity: 0 },
+        initial: { transform: "scale(0)", opacity: 0.35 },
+        onAnimationComplete: () => {
+          onClear(ripple.key);
+        },
+        style: {
+          position: "absolute",
+          overflow: "hidden",
+          inset: 0,
+          zIndex: 0,
+          pointerEvents: "none",
+          borderRadius: "100%",
+          top: ripple.y,
+          left: ripple.x,
+          width: `${ripple.size}px`,
+          height: `${ripple.size}px`,
+          backgroundColor: color,
+          ...style
+        },
+        transition: { duration }
+      }
+    ) }) }, ripple.key);
+  }) });
+}
+
+export { Ripple };

package/dist/esm/ripple/use-ripple.js

@@ -0,0 +1,27 @@
+"use strict";
+"use client";
+import { useState, useCallback } from 'react';
+import { nanoid } from 'nanoid';
+
+const useRipple = () => {
+  const [ripples, setRipples] = useState([]);
+  const onPress = useCallback((event) => {
+    const trigger = event.target;
+    const size = Math.max(trigger.clientWidth, trigger.clientHeight);
+    setRipples((prevRipples) => [
+      ...prevRipples,
+      {
+        key: nanoid(),
+        size,
+        x: event.x - size / 2,
+        y: event.y - size / 2
+      }
+    ]);
+  }, []);
+  const onClear = useCallback((key) => {
+    setRipples((prevState) => prevState.filter((ripple) => ripple.key !== key));
+  }, []);
+  return { ripples, onPress, onClear };
+};
+
+export { useRipple };

package/dist/esm/skip-nav-link/index.js

@@ -0,0 +1,2 @@
+"use strict";
+export { SkipNavLink } from './skip-nav-link.js';

package/dist/esm/skip-nav-link/skip-nav-link.js

@@ -0,0 +1,16 @@
+"use strict";
+import { jsx } from 'react/jsx-runtime';
+import { skipNavLinkStyles } from '@opengovsg/oui-theme';
+
+const SkipNavLink = ({ className, id, ...props }) => {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      className: skipNavLinkStyles({ className }),
+      ...props,
+      href: `#${id}`
+    }
+  );
+};
+
+export { SkipNavLink };

package/dist/esm/spinner/index.js

@@ -0,0 +1,3 @@
+"use strict";
+export { Spinner } from './spinner.js';
+export { useSpinner } from './use-spinner.js';

package/dist/esm/spinner/spinner.js

@@ -0,0 +1,15 @@
+"use strict";
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from '../system/utils.js';
+import { useSpinner } from './use-spinner.js';
+
+const Spinner = forwardRef((props, ref) => {
+  const { slots, classNames, getSpinnerProps } = useSpinner(props);
+  return /* @__PURE__ */ jsx("div", { ref, ...getSpinnerProps(), children: /* @__PURE__ */ jsxs("div", { className: slots.wrapper({ class: classNames?.wrapper }), children: [
+    /* @__PURE__ */ jsx("i", { className: slots.circle1({ class: classNames?.circle1 }) }),
+    /* @__PURE__ */ jsx("i", { className: slots.circle2({ class: classNames?.circle2 }) })
+  ] }) });
+});
+
+export { Spinner };

package/dist/esm/spinner/use-spinner.js

@@ -0,0 +1,36 @@
+"use strict";
+"use client";
+import { useMemo, useCallback } from 'react';
+import { spinnerStyles, cn } from '@opengovsg/oui-theme';
+import { useDeepCompareMemo } from 'use-deep-compare';
+import { mapPropsVariants } from '../system/utils.js';
+
+const useSpinner = (originalProps) => {
+  const [props, variantProps] = mapPropsVariants(
+    originalProps,
+    spinnerStyles.variantKeys
+  );
+  const { className, classNames, ...otherProps } = props;
+  const slots = useDeepCompareMemo(
+    () => spinnerStyles({ ...variantProps }),
+    [variantProps]
+  );
+  const baseStyles = cn(classNames?.base, className);
+  const ariaLabel = useMemo(() => {
+    return !otherProps["aria-label"] ? "Loading" : "";
+  }, [otherProps["aria-label"]]);
+  const getSpinnerProps = useCallback(
+    () => ({
+      "aria-label": ariaLabel,
+      role: "progressbar",
+      className: slots.base({
+        class: baseStyles
+      }),
+      ...otherProps
+    }),
+    [ariaLabel, slots, baseStyles, otherProps]
+  );
+  return { slots, classNames, getSpinnerProps };
+};
+
+export { useSpinner };

package/dist/esm/system/react-utils/context.js

@@ -0,0 +1,29 @@
+"use strict";
+import { createContext as createContext$1, useContext } from 'react';
+
+function createContext(options = {}) {
+  const {
+    strict = true,
+    errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
+    name
+  } = options;
+  const Context = createContext$1(void 0);
+  Context.displayName = name;
+  function useContext$1() {
+    const context = useContext(Context);
+    if (!context && strict) {
+      const error = new Error(errorMessage);
+      error.name = "ContextError";
+      Error.captureStackTrace?.(error, useContext$1);
+      throw error;
+    }
+    return context;
+  }
+  return [
+    Context.Provider,
+    useContext$1,
+    Context
+  ];
+}
+
+export { createContext };

package/dist/esm/system/react-utils/index.js

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

package/dist/esm/system/types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/esm/system/utils.js

@@ -0,0 +1,94 @@
+"use strict";
+import { forwardRef as forwardRef$1, useMemo } from 'react';
+
+function forwardRef(component) {
+  return forwardRef$1(component);
+}
+function forwardRefGeneric(render) {
+  return forwardRef(render);
+}
+const mapPropsVariants = (props, variantKeys, removeVariantProps = true) => {
+  if (!variantKeys) {
+    return [props, {}];
+  }
+  const picked = variantKeys.reduce((acc, key) => {
+    if (key in props) {
+      return { ...acc, [key]: props[key] };
+    }
+    return acc;
+  }, {});
+  if (removeVariantProps) {
+    const omitted = Object.keys(props).filter((key) => !variantKeys.includes(key)).reduce((acc, key) => ({ ...acc, [key]: props[key] }), {});
+    return [omitted, picked];
+  }
+  return [props, picked];
+};
+function useRenderProps(props) {
+  const {
+    className,
+    style,
+    children,
+    defaultClassName = void 0,
+    defaultChildren = void 0,
+    defaultStyle,
+    values
+  } = props;
+  return useMemo(() => {
+    let computedClassName;
+    let computedStyle;
+    let computedChildren;
+    if (typeof className === "function") {
+      computedClassName = className({ ...values, defaultClassName });
+    } else {
+      computedClassName = className;
+    }
+    if (typeof style === "function") {
+      computedStyle = style({ ...values, defaultStyle: defaultStyle || {} });
+    } else {
+      computedStyle = style;
+    }
+    if (typeof children === "function") {
+      computedChildren = children({ ...values, defaultChildren });
+    } else if (children == null) {
+      computedChildren = defaultChildren;
+    } else {
+      computedChildren = children;
+    }
+    return {
+      className: computedClassName ?? defaultClassName,
+      style: computedStyle || defaultStyle ? { ...defaultStyle, ...computedStyle } : void 0,
+      children: computedChildren ?? defaultChildren,
+      "data-rac": ""
+    };
+  }, [
+    className,
+    style,
+    children,
+    defaultClassName,
+    defaultChildren,
+    defaultStyle,
+    values
+  ]);
+}
+function removeDataAttributes(props) {
+  const prefix = /^(data-.*)$/;
+  const filteredProps = {};
+  for (const prop in props) {
+    if (!prefix.test(prop)) {
+      filteredProps[prop] = props[prop];
+    }
+  }
+  return filteredProps;
+}
+function pickAriaAttributes(props) {
+  const prefix = /^(aria-.*)$/;
+  const filteredProps = {};
+  for (const prop in props) {
+    if (prefix.test(prop)) {
+      filteredProps[prop] = props[prop];
+    }
+  }
+  return filteredProps;
+}
+
+export { forwardRef, forwardRefGeneric, mapPropsVariants, pickAriaAttributes, removeDataAttributes, useRenderProps };

package/dist/esm/tag-field/index.js

@@ -0,0 +1,2 @@
+"use strict";
+export { TagField } from './tag-field.js';

package/dist/esm/tag-field/tag-field-list.js

@@ -0,0 +1,69 @@
+"use strict";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createContext, useContext, createElement } from 'react';
+import { tagFieldItemStyles, dataAttr } from '@opengovsg/oui-theme';
+import { useContextProps } from 'react-aria-components';
+import { forwardRefGeneric } from '../system/utils.js';
+import { TagFieldStateContext } from './tag-field-state-context.js';
+
+const TagFieldListContext = createContext(null);
+const TagFieldListItemInner = ({ item, isHighlighted, classNames, ...itemProps }, ref) => {
+  const { itemToText, size } = useContext(TagFieldStateContext);
+  const styles = tagFieldItemStyles({ size });
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref,
+      ...itemProps,
+      className: styles.container({ className: classNames?.container }),
+      "data-rac": true,
+      "data-hovered": dataAttr(isHighlighted),
+      children: /* @__PURE__ */ jsx("span", { className: styles.label({ className: classNames?.label }), children: itemToText(item) })
+    }
+  );
+};
+const TagFieldListItem = forwardRefGeneric(TagFieldListItemInner);
+const TagFieldListInner = (props, ref) => {
+  [props, ref] = useContextProps(props, ref, TagFieldListContext);
+  const { items, getItemProps, highlightedIndex } = useContext(TagFieldStateContext);
+  const { slot, rowVirtualizer, itemClassNames, ...rest } = props;
+  return /* @__PURE__ */ jsx("ul", { slot: slot ?? void 0, ref, ...rest, children: props.children !== void 0 && typeof props.children !== "function" ? props.children : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "li",
+      {
+        "aria-hidden": true,
+        style: { height: rowVirtualizer?.getTotalSize() }
+      },
+      "total-size"
+    ),
+    rowVirtualizer?.getVirtualItems().map((virtualRow) => {
+      const item = items[virtualRow.index];
+      const itemProps = getItemProps({
+        item,
+        index: virtualRow.index,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          width: "100%",
+          height: virtualRow.size,
+          transform: `translateY(${virtualRow.start}px)`
+        }
+      });
+      const childProps = {
+        item,
+        isHighlighted: highlightedIndex === virtualRow.index,
+        key: virtualRow.key,
+        ...itemProps,
+        classNames: itemClassNames
+      };
+      if (typeof props.children === "function") {
+        return props.children(childProps);
+      }
+      return /* @__PURE__ */ createElement(TagFieldListItem, { ...childProps, key: childProps.key });
+    })
+  ] }) });
+};
+const TagFieldList = forwardRefGeneric(TagFieldListInner);
+
+export { TagFieldList, TagFieldListContext, TagFieldListItem };