@narmi/design_system 6.15.0 → 6.15.2

package/dist/types/Toggle/index.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+export interface ToggleProps {
+    /**
+     * Callback invoked with current active state (bool) as the function argument
+     * when user changes the active state of the Toggle
+     */
+    onChange?: (isActive: boolean) => void;
+    /** When set to `true`, the toggle will initially render as active */
+    defaultActive?: boolean;
+    /**
+     * Sets active state of toggle; makes the component fully controlled.
+     * When using `isActive` you **must** use the `onChange` callback
+     * to update the active state of the toggle.
+     */
+    isActive?: boolean;
+    /**
+     * Shows a disabled state for the toggle when set to `true`.
+     */
+    disabled?: boolean;
+    /**
+     * Shows a loading state for the toggle when set to `true`.
+     */
+    isLoading?: boolean;
+    /** Label element to render to the right of the toggle */
+    label?: string;
+    /** ID of element that labels the toggle control (e.g. `my-label-element`)*/
+    labelledBy?: string;
+    /** Optional value for `data-testid` attribute */
+    testId?: string;
+    /** Label for enabled state. Not displayed, used for screen readers. */
+    enabledLabel?: string;
+    /** Label for disabled state. Not displayed, used for screen readers. */
+    disabledLabel?: string;
+}
+/**
+ * Checkbox behavior with the visual treatment of a physical toggle switch.
+ */
+declare const Toggle: ({ defaultActive, isActive, disabled, isLoading, onChange, labelledBy, label, testId, enabledLabel, disabledLabel, }: ToggleProps) => React.JSX.Element;
+export default Toggle;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/Toggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Toggle/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAInD,MAAM,WAAW,WAAW;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,qEAAqE;IACrE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uEAAuE;IACvE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wEAAwE;IACxE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;GAEG;AACH,QAAA,MAAM,MAAM,GAAI,qHAWb,WAAW,sBA8Db,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/types/formatters/formatDate.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Wrapper for `Intl.DateTimeFormat` with options configured for Narmi applications.
+ *
+ * @example
+ * import { formatDate } from '@narmi/design_system';
+ *
+ * formatDate(new Date('July 4, 2022'), 'short'); // '7/4/22'
+ * formatDate(new Date('7/4/2022'), 'long');      // 'July 4, 2022'
+ *
+ * @param date native date object
+ * @param style formatting style (`short` or `long`)
+ * @returns date string formatted for display
+ */
+export type FormatDateStyle = "short" | "long";
+declare const formatDate: (date: Date, style?: FormatDateStyle) => string;
+export default formatDate;
+//# sourceMappingURL=formatDate.d.ts.map

package/dist/types/formatters/formatDate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatDate.d.ts","sourceRoot":"","sources":["../../../src/formatters/formatDate.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,eAAe,GAAG,OAAO,GAAG,MAAM,CAAC;AAE/C,QAAA,MAAM,UAAU,GAAI,MAAM,IAAI,EAAE,QAAO,eAAyB,KAAG,MAelE,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/types/formatters/formatNumber.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Wrapper for `Intl.NumberFormat` with options configured for Narmi applications.
+ *
+ * @example
+ * import { formatNumber } from '@narmi/design_system';
+ *
+ * formatNumber(1234.56, 'currency'); // '$1,234.56'
+ * formatNumber(34.4, 'currency');    // '$34.40'
+ * formatNumber(-12, 'currency');     // '-$12.00'
+ * formatNumber('0.0342', 'percent'); // '3.42%'
+ * formatNumber(0.0023, 'percent');   // '0.23%'
+ * formatNumber(0.215555, 'percent'); // '21.56%'
+ *
+ * @param input string or number to format into a number string
+ * @param style format style (`currency` or `percent`)
+ * @returns number string formatted for display
+ */
+export type FormatNumberStyle = "currency" | "percent";
+export type FormatNumberSignDisplay = "auto" | "never" | "always" | "exceptZero";
+declare const formatNumber: (input: string | number, style?: FormatNumberStyle, signDisplay?: FormatNumberSignDisplay, showCents?: boolean) => string;
+export default formatNumber;
+//# sourceMappingURL=formatNumber.d.ts.map

package/dist/types/formatters/formatNumber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatNumber.d.ts","sourceRoot":"","sources":["../../../src/formatters/formatNumber.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,MAAM,iBAAiB,GAAG,UAAU,GAAG,SAAS,CAAC;AACvD,MAAM,MAAM,uBAAuB,GAC/B,MAAM,GACN,OAAO,GACP,QAAQ,GACR,YAAY,CAAC;AAEjB,QAAA,MAAM,YAAY,GAChB,OAAO,MAAM,GAAG,MAAM,EACtB,QAAO,iBAA8B,EACrC,cAAa,uBAAgC,EAC7C,YAAW,OAAc,KACxB,MA+CF,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/types/hooks/useLockBodyScroll/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Hook for locking body scrolling while a component is mounted
+ * @param isActive - applies scroll locking when `true`
+ */
+declare const useLockBodyScroll: (isActive: boolean) => void;
+export default useLockBodyScroll;
+//# sourceMappingURL=index.d.ts.map

package/dist/types/hooks/useLockBodyScroll/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useLockBodyScroll/index.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,QAAA,MAAM,iBAAiB,GAAI,UAAU,OAAO,KAAG,IAS9C,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/dist/types/hooks/useSupportsAnchorPositioning/index.d.ts

@@ -4,12 +4,22 @@
  * Detection strategy:
  * 1. CSS.supports() checks for property/value support (fast path).
  * 2. A separate exported constant `HAS_SCROLL_CONTAINER_BUG` runs a runtime
- *    test to detect Safari's broken anchor-size/position-try-fallbacks inside
- *    scroll containers. Components opt into this check via
+ *    test to detect Safari's broken anchor sizing and placement inside scroll
+ *    containers. Components opt into this check via
  *    `polyfillScrollBug: true` on useDropdownLayer.
  *
  * Both checks run once at module load and are cached.
  */
+/**
+ * Runtime check for Safari's specific scroll container bug.
+ *
+ * Creates 3 hidden elements (scroll container + anchor + positioned layer),
+ * measures the anchor and layer, and cleans up. If the layer doesn't match the
+ * anchor's width and position, the browser has the bug.
+ *
+ * Only called when cssChecksPass() is true (browser claims support).
+ */
+export declare const isAnchorLayoutValid: (anchorRect: Pick<DOMRect, "width" | "left" | "bottom">, layerRect: Pick<DOMRect, "width" | "left" | "top">) => boolean;
 /**
  * Whether the browser has the Safari scroll-container bug where
  * anchor-size() and position-try-fallbacks fail inside overflow:auto ancestors.

package/dist/types/hooks/useSupportsAnchorPositioning/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useSupportsAnchorPositioning/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAkDH;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,EAAE,OACoB,CAAC;AAE5D;;;GAGG;AACH,QAAA,MAAM,4BAA4B,QAAO,OAAsC,CAAC;AAEhF,eAAe,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useSupportsAnchorPositioning/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAgBH;;;;;;;;GAQG;AACH,eAAO,MAAM,mBAAmB,GAC9B,YAAY,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC,EACtD,WAAW,IAAI,CAAC,OAAO,EAAE,OAAO,GAAG,MAAM,GAAG,KAAK,CAAC,KACjD,OAOF,CAAC;AA4BF;;;;;GAKG;AACH,eAAO,MAAM,wBAAwB,EAAE,OACoB,CAAC;AAE5D;;;GAGG;AACH,QAAA,MAAM,4BAA4B,QAAO,OAAsC,CAAC;AAEhF,eAAe,4BAA4B,CAAC"}

package/dist/types/icons/iconNames.d.ts

@@ -0,0 +1,3 @@
+export declare const VALID_ICON_NAMES: string[];
+export default VALID_ICON_NAMES;
+//# sourceMappingURL=iconNames.d.ts.map

package/dist/types/icons/iconNames.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconNames.d.ts","sourceRoot":"","sources":["../../../src/icons/iconNames.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,EAAE,MAAM,EAsVpC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/dist/types/util/AsElement.d.ts

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+import { default as PropTypes } from 'prop-types';
+/**
+ * Returns the href if it uses a safe protocol, or undefined if it
+ * uses a potentially dangerous scheme (javascript:, data:, etc).
+ *
+ * Accepts `unknown` rather than `string` on purpose: this is a security
+ * guard, and it must keep rejecting non-string input that reaches it from
+ * untyped call sites at runtime.
+ */
+export declare const getSafeHref: (href?: unknown) => string | null | undefined;
+/**
+ * This is not a complete list of HTML elements;
+ * only the elements we want to support in `as` props.
+ */
+export declare const VALID_ELEMENTS: string[];
+export interface AsElementProps {
+    /** element to render  */
+    elementType?: React.ElementType;
+    children?: React.ReactNode;
+    /**
+     * Any additional props are spread onto the rendered element.
+     * `AsElement` is a passthrough, so this is intentionally open-ended.
+     */
+    [key: string]: unknown;
+}
+/**
+ * Utility to conditionally render different HTML elements
+ * in our components. Useful for exposing `as` props:
+ *
+ * `<Row as="ul"><Row.Item as="li" /></Row>
+ *
+ * @usage <AsElement elementName="ul" otherProp="this gets passed through">
+ */
+declare const AsElement: {
+    ({ elementType, children, ...rest }: AsElementProps): React.JSX.Element;
+    propTypes: {
+        /** element to render  */
+        elementType: PropTypes.Validator<NonNullable<NonNullable<string | ((...args: any[]) => any)>>>;
+        children: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
+    };
+};
+export default AsElement;
+//# sourceMappingURL=AsElement.d.ts.map

package/dist/types/util/AsElement.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AsElement.d.ts","sourceRoot":"","sources":["../../../src/util/AsElement.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,SAAS,MAAM,YAAY,CAAC;AAInC;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,GAAI,OAAO,OAAO,KAAG,MAAM,GAAG,IAAI,GAAG,SAU5D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,UAkB1B,CAAC;AAEF,MAAM,WAAW,cAAc;IAC7B,yBAAyB;IACzB,WAAW,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,QAAA,MAAM,SAAS;yCAIZ,cAAc;;QA6Bf,yBAAyB;;;;CAH1B,CAAC;AAcF,eAAe,SAAS,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@narmi/design_system",
-  "version": "6.15.0",
+  "version": "6.15.2",
   "description": "⚡ A consistent look-and-feel and extensible interface for Narmi experiences 🔥",
   "main": "dist/index.js",
   "style": "dist/style.css",