@opengovsg/oui 0.0.28 → 0.0.29

package/dist/types/navbar/use-navbar.d.ts

@@ -0,0 +1,131 @@
+import type { NavbarSlots, NavbarVariantProps, SlotsToClasses } from "@opengovsg/oui-theme";
+import type { ReactRef } from "../system/react-utils";
+import type { HtmlUiProps, PropGetter } from "../system/types";
+interface Props extends HtmlUiProps<"nav"> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLElement | null>;
+    /**
+     * The height of the navbar.
+     * @default "4rem" (64px)
+     */
+    height?: number | string;
+    /**
+     * Whether the menu is open.
+     * @default false
+     */
+    isMenuOpen?: boolean;
+    /**
+     * Whether the menu should be open by default.
+     * @default false
+     */
+    isMenuDefaultOpen?: boolean;
+    /**
+     * Whether the navbar should block scroll when the menu is open or not.
+     * @default true
+     */
+    shouldBlockScroll?: boolean;
+    /**
+     * The event handler for the menu open state.
+     * @param isOpen boolean
+     * @returns void
+     */
+    onMenuOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     */
+    classNames?: SlotsToClasses<NavbarSlots>;
+}
+export type UseNavbarProps = Props & NavbarVariantProps;
+export declare function useNavbar(originalProps: UseNavbarProps): {
+    Component: import("../system/types").As<any>;
+    slots: {
+        base: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        wrapper: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        toggle: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        toggleIcon: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        brand: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        content: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        item: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        menu: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        menuItem: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+    } & {
+        base: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        wrapper: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        toggle: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        toggleIcon: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        brand: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        content: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        item: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        menu: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+        menuItem: (slotProps?: ({
+            position?: "static" | "sticky" | undefined;
+            hasBorder?: boolean | undefined;
+        } & import("tailwind-variants").ClassProp<import("tailwind-merge").ClassNameValue>) | undefined) => string;
+    } & {};
+    domRef: import("react").RefObject<HTMLElement | null>;
+    height: string | number;
+    isMenuOpen: boolean;
+    classNames: SlotsToClasses<"toggle" | "content" | "base" | "wrapper" | "item" | "brand" | "menu" | "menuItem" | "toggleIcon"> | undefined;
+    setIsMenuOpen: (value: boolean, ...args: any[]) => void;
+    menuRef: import("react").RefObject<HTMLButtonElement | null>;
+    getBaseProps: PropGetter;
+    getWrapperProps: PropGetter;
+    position: "static" | "sticky";
+};
+export type UseNavbarReturn = ReturnType<typeof useNavbar>;
+export {};
+//# sourceMappingURL=use-navbar.d.ts.map

package/dist/types/navbar/use-navbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-navbar.d.ts","sourceRoot":"","sources":["../../../src/navbar/use-navbar.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EACV,WAAW,EACX,kBAAkB,EAClB,cAAc,EACf,MAAM,sBAAsB,CAAA;AAG7B,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AACrD,OAAO,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAA;AAI9D,UAAU,KAAM,SAAQ,WAAW,CAAC,KAAK,CAAC;IACxC;;OAEG;IACH,GAAG,CAAC,EAAE,QAAQ,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAClC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5C;;;OAGG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;CACzC;AAED,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,kBAAkB,CAAA;AAEvD,wBAAgB,SAAS,CAAC,aAAa,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwHtD;AAED,MAAM,MAAM,eAAe,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAA"}

package/dist/types/system/react-utils/children.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+/**
+ * Gets only the valid children of a component,
+ * and ignores any nullish or falsy child.
+ *
+ * @param children the children
+ */
+export declare function getValidChildren(children: React.ReactNode): React.ReactElement[];
+export declare const pickChildren: <T = ReactNode>(children: T | undefined, targetChild: React.ElementType) => [T | undefined, T[] | undefined];
+//# sourceMappingURL=children.d.ts.map

package/dist/types/system/react-utils/children.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"children.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/children.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC;;;;;GAKG;AACH,wBAAgB,gBAAgB,CAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,GAGnD,KAAK,CAAC,YAAY,EAAE,CAC1B;AAED,eAAO,MAAM,YAAY,GAAI,CAAC,wBAClB,CAAC,GAAG,SAAS,eACV,KAAK,CAAC,WAAW,KAC7B,CAAC,CAAC,GAAG,SAAS,EAAE,CAAC,EAAE,GAAG,SAAS,CAiBjC,CAAA"}

package/dist/types/system/react-utils/index.d.ts

@@ -1,4 +1,6 @@
-export * from "./context";
-export * from "./refs";
-export * from "./filter-dom-props";
+export { createContext } from "./context";
+export { useDomRef } from "./refs";
+export { filterDOMProps } from "./filter-dom-props";
+export type { CreateContextOptions, CreateContextReturn } from "./context";
+export type { ReactRef } from "./refs";
 //# sourceMappingURL=index.d.ts.map

package/dist/types/system/react-utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA;AACzB,cAAc,QAAQ,CAAA;AACtB,cAAc,oBAAoB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/system/react-utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAA;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAEnD,YAAY,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAA;AAC1E,YAAY,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opengovsg/oui",
-  "version": "0.0.28",
+  "version": "0.0.29",
   "sideEffects": false,
   "license": "SEE LICENSE IN LICENSE.md",
   "type": "module",
@@ -50,10 +50,10 @@
     "storybook": "10.1.2",
     "tsx": "^4.21.0",
     "typescript": "5.7.3",
-    "@opengovsg/oui-theme": "0.0.28",
+    "@opengovsg/oui-theme": "0.0.29",
     "@oui/chromatic": "0.0.0",
-    "@oui/prettier-config": "0.0.0",
     "@oui/eslint-config": "0.0.0",
+    "@oui/prettier-config": "0.0.0",
     "@oui/typescript-config": "0.0.0"
   },
   "dependencies": {
@@ -88,7 +88,7 @@
     "motion": ">=11.12.0 || >=12.0.0-alpha.1",
     "react": ">= 18",
     "react-aria-components": "^1.13.0",
-    "@opengovsg/oui-theme": "0.0.28"
+    "@opengovsg/oui-theme": "0.0.29"
   },
   "scripts": {
     "build": "tsx ../../tooling/build-scripts/main.ts --dts --clean",