@react-md/core 1.0.0-next.20 → 1.0.0-next.21

package/dist/responsive-item/_responsive-item.scss

@@ -1,3 +1,7 @@
+////
+/// @group responsive-item
+////
+
 @use "sass:list";
 @use "sass:map";
 @use "sass:math";
@@ -5,34 +9,104 @@
 @use "../theme/colors";
 @use "../theme/theme";
 
+/// Set to `true` to disable all the styles.
+///
+/// NOTE: You most likely want to disable these styles and use the
+/// `object-fit` styles instead.
+///
+/// @type Boolean
 $disable-everything: false !default;
+
+/// Set to `true` to disable automatically adding the `height: auto` and
+/// `width: 100%` to each selector in the `$selectors` list.
+///
+/// @see $selectors
+/// @type Boolean
 $disable-auto: false !default;
+
+/// Set to `true` to disable the full width styles.
+/// @type Boolean
 $disable-full-width: false !default;
+
+/// Set to `true` to disable the `ResponsiveItemOverlay` styles.
+/// @type Boolean
 $disable-overlay: false !default;
+
+/// Set to `true` to disable the `ResponsiveItemOverlay` `position="top"`
+/// styles.
+/// @type Boolean
 $disable-overlay-top: false !default;
+
+/// Set to `true` to disable the `ResponsiveItemOverlay` `position="right"`
+/// styles.
+/// @type Boolean
 $disable-overlay-right: false !default;
+
+/// Set to `true` to disable the `ResponsiveItemOverlay` `position="bottom"`
+/// styles.
+/// @type Boolean
 $disable-overlay-bottom: false !default;
+
+/// Set to `true` to disable the `ResponsiveItemOverlay` `position="left"`
+/// styles.
+/// @type Boolean
 $disable-overlay-left: false !default;
+
+/// Set to `true` to disable the `ResponsiveItemOverlay` `position="middle"`
+/// styles.
+/// @type Boolean
 $disable-overlay-middle: false !default;
+
+/// Set to `true` to disable the `ResponsiveItemOverlay` `position="center"`
+/// styles.
+/// @type Boolean
 $disable-overlay-center: false !default;
+
+/// Set to `true` to disable the `ResponsiveItemOverlay`
+/// `position="absolute-center"` styles.
+/// @type Boolean
 $disable-overlay-absolute-center: false !default;
 
+/// The default selectors to automatically apply the responsive item styles.
+/// @type List
 $selectors: (img ">svg" iframe video embed object) !default;
 
+/// The default `ResponsiveItemOverlay` background color.
+/// @type Color
 $overlay-background-color: rgba(colors.$black, 0.54) !default;
+
+/// The default `ResponsiveItemOverlay` text color.
+/// @type Color
 $overlay-color: theme.$dark-theme-text-primary-color !default;
+
+/// The default `ResponsiveItemOverlay` z-index.
+/// @type Number
 $overlay-z-index: 0 !default;
+
+/// The default `ResponsiveItemOverlay` padding.
+/// @type Number
 $overlay-padding: 1rem !default;
+
+/// The default width to apply to the `position="left"`, `"position="right"`,
+/// `position="center"`, or `position="absolute-center"`
+/// `ResponsiveItemOverlay`.
+/// @type Number
 $overlay-horizontal-width: 30% !default;
 
+/// The default aspect ratios to support which will be available on the
+/// `ResponsiveItem` component.
+/// @type Map
 $aspect-ratios: (
   "16-9": 16 9,
   "4-3": 4 3,
   "1-1": 1 1,
 ) !default;
 
+/// Set to `true` to disable the custom aspect ratios.
+/// @type Boolean
 $disable-aspect-ratios: not list.length(map.keys($aspect-ratios)) !default;
 
+/// This mixin should really only be used if the ``
 @mixin forced-aspect-ratio {
   height: 100%;
   inset: 0;
@@ -40,10 +114,18 @@ $disable-aspect-ratios: not list.length(map.keys($aspect-ratios)) !default;
   width: 100%;
 }
 
+/// Create a custom aspect ratio using `padding-bottom`.
+///
+/// @link https://css-tricks.com/aspect-ratio-boxes/
+/// @param {Number} $width -
+/// @param {Number} $height -
 @mixin aspect-ratio($width, $height) {
   padding-bottom: math.percentage(math.div($height, $width));
 }
 
+/// This should only be used if not using the `responsive-item-styles` mixin.
+///
+/// @see {mixin} styles
 @mixin base-styles {
   .rmd-responsive-item {
     display: inline-block;
@@ -93,6 +175,9 @@ $disable-aspect-ratios: not list.length(map.keys($aspect-ratios)) !default;
   }
 }
 
+/// This should only be used if not using the `responsive-item-styles` mixin.
+///
+/// @see {mixin} styles
 @mixin overlay-styles {
   .rmd-responsive-item-overlay {
     background-color: $overlay-background-color;
@@ -163,6 +248,10 @@ $disable-aspect-ratios: not list.length(map.keys($aspect-ratios)) !default;
   }
 }
 
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(responsive-item, $disable-layer) {

package/dist/scroll/useScrollLock.d.ts

@@ -7,6 +7,7 @@ export declare const SCROLLBAR_SIZE_VAR = "--rmd-scrollbar-size";
 /**
  * Used to enable scroll locking on the entire page.
  *
+ * @see {@link https://next.react-md.dev/hooks/use-scroll-lock | useScrollLock Demos}
  * @since 6.0.0 No longer support scroll locking elements other than
  * the `document.body` since it's more reliable to scroll lock with an overlay.
  * @since 6.0.0 Now applies `paddingRight` equal to the current OS's

package/dist/scroll/useScrollLock.js

@@ -8,6 +8,7 @@ let isLocked = false;
 /**
  * Used to enable scroll locking on the entire page.
  *
+ * @see {@link https://next.react-md.dev/hooks/use-scroll-lock | useScrollLock Demos}
  * @since 6.0.0 No longer support scroll locking elements other than
  * the `document.body` since it's more reliable to scroll lock with an overlay.
  * @since 6.0.0 Now applies `paddingRight` equal to the current OS's

package/dist/scroll/useScrollLock.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/scroll/useScrollLock.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\n\nimport { getScrollbarWidth } from \"./getScrollbarWidth.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-scrollbar-size\"?: string;\n  }\n}\n\nexport const SCROLLBAR_SIZE_VAR = \"--rmd-scrollbar-size\";\n\n// this is really just so that nested dialogs will work correctly. Only the\n// first created dialog should prevent scroll locking on the `document.body`\nlet isLocked = false;\n\n/**\n * Used to enable scroll locking on the entire page.\n *\n * @since 6.0.0 No longer support scroll locking elements other than\n * the `document.body` since it's more reliable to scroll lock with an overlay.\n * @since 6.0.0 Now applies `paddingRight` equal to the current OS's\n * scrollbar width if there is a full page scrollbar to prevent layout shifting.\n *\n * @param locked - The `document.body` will not be scrollable when this is\n * `true`.\n */\nexport function useScrollLock(locked: boolean): void {\n  useEffect(() => {\n    if (isLocked || !locked) {\n      return;\n    }\n\n    isLocked = true;\n\n    const size = `${getScrollbarWidth()}px`;\n    const el = document.body;\n    const { paddingRight } = el.style;\n    const isScrollbarVisible = el.scrollHeight > el.offsetHeight;\n\n    el.style.overflow = \"hidden\";\n    if (isScrollbarVisible) {\n      el.style.setProperty(SCROLLBAR_SIZE_VAR, size);\n      el.style.paddingRight = `var(${SCROLLBAR_SIZE_VAR})`;\n    }\n\n    return () => {\n      isLocked = false;\n\n      el.style.removeProperty(SCROLLBAR_SIZE_VAR);\n      el.style.overflow = \"\";\n      if (isScrollbarVisible) {\n        el.style.paddingRight = paddingRight;\n      }\n    };\n  }, [locked]);\n}\n"],"names":["useEffect","getScrollbarWidth","SCROLLBAR_SIZE_VAR","isLocked","useScrollLock","locked","size","el","document","body","paddingRight","style","isScrollbarVisible","scrollHeight","offsetHeight","overflow","setProperty","removeProperty"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,QAAQ;AAElC,SAASC,iBAAiB,QAAQ,yBAAyB;AAQ3D,OAAO,MAAMC,qBAAqB,uBAAuB;AAEzD,2EAA2E;AAC3E,4EAA4E;AAC5E,IAAIC,WAAW;AAEf;;;;;;;;;;CAUC,GACD,OAAO,SAASC,cAAcC,MAAe;IAC3CL,UAAU;QACR,IAAIG,YAAY,CAACE,QAAQ;YACvB;QACF;QAEAF,WAAW;QAEX,MAAMG,OAAO,GAAGL,oBAAoB,EAAE,CAAC;QACvC,MAAMM,KAAKC,SAASC,IAAI;QACxB,MAAM,EAAEC,YAAY,EAAE,GAAGH,GAAGI,KAAK;QACjC,MAAMC,qBAAqBL,GAAGM,YAAY,GAAGN,GAAGO,YAAY;QAE5DP,GAAGI,KAAK,CAACI,QAAQ,GAAG;QACpB,IAAIH,oBAAoB;YACtBL,GAAGI,KAAK,CAACK,WAAW,CAACd,oBAAoBI;YACzCC,GAAGI,KAAK,CAACD,YAAY,GAAG,CAAC,IAAI,EAAER,mBAAmB,CAAC,CAAC;QACtD;QAEA,OAAO;YACLC,WAAW;YAEXI,GAAGI,KAAK,CAACM,cAAc,CAACf;YACxBK,GAAGI,KAAK,CAACI,QAAQ,GAAG;YACpB,IAAIH,oBAAoB;gBACtBL,GAAGI,KAAK,CAACD,YAAY,GAAGA;YAC1B;QACF;IACF,GAAG;QAACL;KAAO;AACb"}
+{"version":3,"sources":["../../src/scroll/useScrollLock.ts"],"sourcesContent":["\"use client\";\n\nimport { useEffect } from \"react\";\n\nimport { getScrollbarWidth } from \"./getScrollbarWidth.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-scrollbar-size\"?: string;\n  }\n}\n\nexport const SCROLLBAR_SIZE_VAR = \"--rmd-scrollbar-size\";\n\n// this is really just so that nested dialogs will work correctly. Only the\n// first created dialog should prevent scroll locking on the `document.body`\nlet isLocked = false;\n\n/**\n * Used to enable scroll locking on the entire page.\n *\n * @see {@link https://next.react-md.dev/hooks/use-scroll-lock | useScrollLock Demos}\n * @since 6.0.0 No longer support scroll locking elements other than\n * the `document.body` since it's more reliable to scroll lock with an overlay.\n * @since 6.0.0 Now applies `paddingRight` equal to the current OS's\n * scrollbar width if there is a full page scrollbar to prevent layout shifting.\n *\n * @param locked - The `document.body` will not be scrollable when this is\n * `true`.\n */\nexport function useScrollLock(locked: boolean): void {\n  useEffect(() => {\n    if (isLocked || !locked) {\n      return;\n    }\n\n    isLocked = true;\n\n    const size = `${getScrollbarWidth()}px`;\n    const el = document.body;\n    const { paddingRight } = el.style;\n    const isScrollbarVisible = el.scrollHeight > el.offsetHeight;\n\n    el.style.overflow = \"hidden\";\n    if (isScrollbarVisible) {\n      el.style.setProperty(SCROLLBAR_SIZE_VAR, size);\n      el.style.paddingRight = `var(${SCROLLBAR_SIZE_VAR})`;\n    }\n\n    return () => {\n      isLocked = false;\n\n      el.style.removeProperty(SCROLLBAR_SIZE_VAR);\n      el.style.overflow = \"\";\n      if (isScrollbarVisible) {\n        el.style.paddingRight = paddingRight;\n      }\n    };\n  }, [locked]);\n}\n"],"names":["useEffect","getScrollbarWidth","SCROLLBAR_SIZE_VAR","isLocked","useScrollLock","locked","size","el","document","body","paddingRight","style","isScrollbarVisible","scrollHeight","offsetHeight","overflow","setProperty","removeProperty"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,QAAQ;AAElC,SAASC,iBAAiB,QAAQ,yBAAyB;AAQ3D,OAAO,MAAMC,qBAAqB,uBAAuB;AAEzD,2EAA2E;AAC3E,4EAA4E;AAC5E,IAAIC,WAAW;AAEf;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,cAAcC,MAAe;IAC3CL,UAAU;QACR,IAAIG,YAAY,CAACE,QAAQ;YACvB;QACF;QAEAF,WAAW;QAEX,MAAMG,OAAO,GAAGL,oBAAoB,EAAE,CAAC;QACvC,MAAMM,KAAKC,SAASC,IAAI;QACxB,MAAM,EAAEC,YAAY,EAAE,GAAGH,GAAGI,KAAK;QACjC,MAAMC,qBAAqBL,GAAGM,YAAY,GAAGN,GAAGO,YAAY;QAE5DP,GAAGI,KAAK,CAACI,QAAQ,GAAG;QACpB,IAAIH,oBAAoB;YACtBL,GAAGI,KAAK,CAACK,WAAW,CAACd,oBAAoBI;YACzCC,GAAGI,KAAK,CAACD,YAAY,GAAG,CAAC,IAAI,EAAER,mBAAmB,CAAC,CAAC;QACtD;QAEA,OAAO;YACLC,WAAW;YAEXI,GAAGI,KAAK,CAACM,cAAc,CAACf;YACxBK,GAAGI,KAAK,CAACI,QAAQ,GAAG;YACpB,IAAIH,oBAAoB;gBACtBL,GAAGI,KAAK,CAACD,YAAY,GAAGA;YAC1B;QACF;IACF,GAAG;QAACL;KAAO;AACb"}

package/dist/searching/fuzzy.d.ts

@@ -3,7 +3,8 @@ import { type BaseSearchOptions } from "./types.js";
 /**
  * @example
  * ```tsx
- * import { createFuzzyRegExp, toSearchQuery } from "@react-md/core":
+ * import { createFuzzyRegExp } from "@react-md/core/searching/fuzzy":
+ * import { toSearchQuery } from "@react-md/core/searching/toSearchQuery":
  * import { useDeferredValue, useMemo, useState, type ReactElement } from "react";
  *
  * function Example(): ReactElement {

package/dist/searching/fuzzy.js

@@ -2,7 +2,8 @@ import { defaultExtractor, search } from "./utils.js";
 /**
  * @example
  * ```tsx
- * import { createFuzzyRegExp, toSearchQuery } from "@react-md/core":
+ * import { createFuzzyRegExp } from "@react-md/core/searching/fuzzy":
+ * import { toSearchQuery } from "@react-md/core/searching/toSearchQuery":
  * import { useDeferredValue, useMemo, useState, type ReactElement } from "react";
  *
  * function Example(): ReactElement {

package/dist/searching/fuzzy.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/searching/fuzzy.ts"],"sourcesContent":["import { type TextExtractor } from \"../types.js\";\nimport { type BaseSearchOptions } from \"./types.js\";\nimport { defaultExtractor, search } from \"./utils.js\";\n\n/**\n * @example\n * ```tsx\n * import { createFuzzyRegExp, toSearchQuery } from \"@react-md/core\":\n * import { useDeferredValue, useMemo, useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"\");\n *   const deferredValue = useDeferredValue(value)\n *\n *   const match = useMemo(() => {\n *     const query = toSearchQuery(deferredValue);\n *     if (!query) {\n *       return;\n *     }\n *\n *     const fuzzyRegExp = createFuzzyRegExp(query);\n *     return options.find(option => fuzzyRegExp.test(option.label)):\n *   }, [options])\n *\n *   if (match) {\n *     // do something\n *   }\n * }\n *\n * ```\n *\n * @since 6.0.0\n * @see {@link fuzzySearch}\n */\nexport function createFuzzyRegExp(query: string): RegExp {\n  return new RegExp(\n    query\n      .split(\"\")\n      .join(\"\\\\w*\")\n      .replace(/(\\(|\\||\\)|\\\\(?!w\\*)|\\[|\\|-|\\.|\\^|\\+|\\$|\\?|^(?!w)\\*)/g, \"\\\\$1\")\n      // Couldn't get the matching of two '*' working, so replace them here..\n      .replace(/\\*\\*/g, \"*\\\\*\"),\n    \"i\"\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport type FuzzySearchOptions<T> = BaseSearchOptions<T>;\n\n/**\n * Filters a list by making sure that all the letters appear in order ignoring\n * case, punctuation, whitespace, and special characters. This is kind of the\n * same filtering that appears in text editors.\n *\n * @example Simple Example\n * ```ts\n * const list = [\n *   \"at\",\n *   \"charAt\",\n *   \"charCodeAt\",\n *   \"codePointAt\",\n *   \"concat\",\n *   \"constructor\",\n *   \"endsWith\",\n *   \"includes\",\n *   \"indexOf\",\n *   \"lastIndexOf\",\n *   \"length\",\n *   \"localeCompare\",\n *   \"match\",\n *   \"matchAll\",\n *   \"normalize\",\n *   \"padEnd\",\n *   \"padStart\",\n *   \"repeat\",\n *   \"replace\",\n *   \"replaceAll\",\n *   \"search\",\n *   \"slice\",\n *   \"split\",\n *   \"startsWith\",\n *   \"substring\",\n *   \"toLocaleLowerCase\",\n *   \"toLocaleUpperCase\",\n *   \"toLowerCase\",\n *   \"toString\",\n *   \"toUpperCase\",\n *   \"trim\",\n *   \"trimEnd\",\n *   \"trimStart\",\n *   \"valueOf\",\n * ];\n *\n * fuzzySearch({\n *   list,\n *   query: \"la\",\n * });\n * // [\n * //   \"lastIndexOf\",\n * //    ^^\n * //   \"localeCompare\",\n * //    ^  ^\n * //   \"replace\",\n * //       ^^\n * //   \"replaceAll\",\n * //       ^^\n * //   \"toLocaleLowerCase\",\n * //      ^  ^\n * //   \"toLocaleUpperCase\",\n * //      ^  ^\n * //   \"toLowerCase\",\n * //      ^     ^\n * // ]\n *\n * fuzzySearch({\n *   list,\n *   query: \"ad\",\n *   type: \"search\",\n * });\n * // \"charCodeAt\"\n * //    ^   ^\n * ```\n *\n * @since 6.0.0\n */\nexport function fuzzySearch<T extends string>(\n  options: Omit<FuzzySearchOptions<T>, \"extractor\"> & { type?: \"filter\" }\n): readonly T[];\nexport function fuzzySearch<T extends string>(\n  options: Omit<FuzzySearchOptions<T>, \"extractor\"> & { type?: \"search\" }\n): T | undefined;\nexport function fuzzySearch<T>(\n  option: FuzzySearchOptions<T> & {\n    extractor: TextExtractor<T>;\n    type?: \"filter\";\n  }\n): readonly T[];\nexport function fuzzySearch<T>(\n  option: FuzzySearchOptions<T> & {\n    extractor: TextExtractor<T>;\n    type?: \"search\";\n  }\n): T | undefined;\nexport function fuzzySearch<T>(\n  options: FuzzySearchOptions<T>\n): readonly T[] | T | undefined {\n  const {\n    list,\n    type = \"filter\",\n    query,\n    extractor = defaultExtractor(\"fuzzySearch\"),\n    whitespace,\n  } = options;\n\n  // lazy initialize the RegExp since the base `filter` function will modify the\n  // query and never call the filter function if:\n  // - there is no query\n  // - the list is empty\n  let regexp: RegExp;\n  return search({\n    type,\n    list,\n    query,\n    extractor,\n    whitespace,\n    filter(query, value) {\n      return (\n        value.length > 0 && (regexp ??= createFuzzyRegExp(query)).test(value)\n      );\n    },\n  });\n}\n"],"names":["defaultExtractor","search","createFuzzyRegExp","query","RegExp","split","join","replace","fuzzySearch","options","list","type","extractor","whitespace","regexp","filter","value","length","test"],"mappings":"AAEA,SAASA,gBAAgB,EAAEC,MAAM,QAAQ,aAAa;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BC,GACD,OAAO,SAASC,kBAAkBC,KAAa;IAC7C,OAAO,IAAIC,OACTD,MACGE,KAAK,CAAC,IACNC,IAAI,CAAC,QACLC,OAAO,CAAC,wDAAwD,OACjE,uEAAuE;KACtEA,OAAO,CAAC,SAAS,SACpB;AAEJ;AAqGA,OAAO,SAASC,YACdC,OAA8B;IAE9B,MAAM,EACJC,IAAI,EACJC,OAAO,QAAQ,EACfR,KAAK,EACLS,YAAYZ,iBAAiB,cAAc,EAC3Ca,UAAU,EACX,GAAGJ;IAEJ,8EAA8E;IAC9E,+CAA+C;IAC/C,sBAAsB;IACtB,sBAAsB;IACtB,IAAIK;IACJ,OAAOb,OAAO;QACZU;QACAD;QACAP;QACAS;QACAC;QACAE,QAAOZ,KAAK,EAAEa,KAAK;YACjB,OACEA,MAAMC,MAAM,GAAG,KAAK,AAACH,CAAAA,WAAWZ,kBAAkBC,MAAK,EAAGe,IAAI,CAACF;QAEnE;IACF;AACF"}
+{"version":3,"sources":["../../src/searching/fuzzy.ts"],"sourcesContent":["import { type TextExtractor } from \"../types.js\";\nimport { type BaseSearchOptions } from \"./types.js\";\nimport { defaultExtractor, search } from \"./utils.js\";\n\n/**\n * @example\n * ```tsx\n * import { createFuzzyRegExp } from \"@react-md/core/searching/fuzzy\":\n * import { toSearchQuery } from \"@react-md/core/searching/toSearchQuery\":\n * import { useDeferredValue, useMemo, useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"\");\n *   const deferredValue = useDeferredValue(value)\n *\n *   const match = useMemo(() => {\n *     const query = toSearchQuery(deferredValue);\n *     if (!query) {\n *       return;\n *     }\n *\n *     const fuzzyRegExp = createFuzzyRegExp(query);\n *     return options.find(option => fuzzyRegExp.test(option.label)):\n *   }, [options])\n *\n *   if (match) {\n *     // do something\n *   }\n * }\n *\n * ```\n *\n * @since 6.0.0\n * @see {@link fuzzySearch}\n */\nexport function createFuzzyRegExp(query: string): RegExp {\n  return new RegExp(\n    query\n      .split(\"\")\n      .join(\"\\\\w*\")\n      .replace(/(\\(|\\||\\)|\\\\(?!w\\*)|\\[|\\|-|\\.|\\^|\\+|\\$|\\?|^(?!w)\\*)/g, \"\\\\$1\")\n      // Couldn't get the matching of two '*' working, so replace them here..\n      .replace(/\\*\\*/g, \"*\\\\*\"),\n    \"i\"\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport type FuzzySearchOptions<T> = BaseSearchOptions<T>;\n\n/**\n * Filters a list by making sure that all the letters appear in order ignoring\n * case, punctuation, whitespace, and special characters. This is kind of the\n * same filtering that appears in text editors.\n *\n * @example Simple Example\n * ```ts\n * const list = [\n *   \"at\",\n *   \"charAt\",\n *   \"charCodeAt\",\n *   \"codePointAt\",\n *   \"concat\",\n *   \"constructor\",\n *   \"endsWith\",\n *   \"includes\",\n *   \"indexOf\",\n *   \"lastIndexOf\",\n *   \"length\",\n *   \"localeCompare\",\n *   \"match\",\n *   \"matchAll\",\n *   \"normalize\",\n *   \"padEnd\",\n *   \"padStart\",\n *   \"repeat\",\n *   \"replace\",\n *   \"replaceAll\",\n *   \"search\",\n *   \"slice\",\n *   \"split\",\n *   \"startsWith\",\n *   \"substring\",\n *   \"toLocaleLowerCase\",\n *   \"toLocaleUpperCase\",\n *   \"toLowerCase\",\n *   \"toString\",\n *   \"toUpperCase\",\n *   \"trim\",\n *   \"trimEnd\",\n *   \"trimStart\",\n *   \"valueOf\",\n * ];\n *\n * fuzzySearch({\n *   list,\n *   query: \"la\",\n * });\n * // [\n * //   \"lastIndexOf\",\n * //    ^^\n * //   \"localeCompare\",\n * //    ^  ^\n * //   \"replace\",\n * //       ^^\n * //   \"replaceAll\",\n * //       ^^\n * //   \"toLocaleLowerCase\",\n * //      ^  ^\n * //   \"toLocaleUpperCase\",\n * //      ^  ^\n * //   \"toLowerCase\",\n * //      ^     ^\n * // ]\n *\n * fuzzySearch({\n *   list,\n *   query: \"ad\",\n *   type: \"search\",\n * });\n * // \"charCodeAt\"\n * //    ^   ^\n * ```\n *\n * @since 6.0.0\n */\nexport function fuzzySearch<T extends string>(\n  options: Omit<FuzzySearchOptions<T>, \"extractor\"> & { type?: \"filter\" }\n): readonly T[];\nexport function fuzzySearch<T extends string>(\n  options: Omit<FuzzySearchOptions<T>, \"extractor\"> & { type?: \"search\" }\n): T | undefined;\nexport function fuzzySearch<T>(\n  option: FuzzySearchOptions<T> & {\n    extractor: TextExtractor<T>;\n    type?: \"filter\";\n  }\n): readonly T[];\nexport function fuzzySearch<T>(\n  option: FuzzySearchOptions<T> & {\n    extractor: TextExtractor<T>;\n    type?: \"search\";\n  }\n): T | undefined;\nexport function fuzzySearch<T>(\n  options: FuzzySearchOptions<T>\n): readonly T[] | T | undefined {\n  const {\n    list,\n    type = \"filter\",\n    query,\n    extractor = defaultExtractor(\"fuzzySearch\"),\n    whitespace,\n  } = options;\n\n  // lazy initialize the RegExp since the base `filter` function will modify the\n  // query and never call the filter function if:\n  // - there is no query\n  // - the list is empty\n  let regexp: RegExp;\n  return search({\n    type,\n    list,\n    query,\n    extractor,\n    whitespace,\n    filter(query, value) {\n      return (\n        value.length > 0 && (regexp ??= createFuzzyRegExp(query)).test(value)\n      );\n    },\n  });\n}\n"],"names":["defaultExtractor","search","createFuzzyRegExp","query","RegExp","split","join","replace","fuzzySearch","options","list","type","extractor","whitespace","regexp","filter","value","length","test"],"mappings":"AAEA,SAASA,gBAAgB,EAAEC,MAAM,QAAQ,aAAa;AAEtD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,SAASC,kBAAkBC,KAAa;IAC7C,OAAO,IAAIC,OACTD,MACGE,KAAK,CAAC,IACNC,IAAI,CAAC,QACLC,OAAO,CAAC,wDAAwD,OACjE,uEAAuE;KACtEA,OAAO,CAAC,SAAS,SACpB;AAEJ;AAqGA,OAAO,SAASC,YACdC,OAA8B;IAE9B,MAAM,EACJC,IAAI,EACJC,OAAO,QAAQ,EACfR,KAAK,EACLS,YAAYZ,iBAAiB,cAAc,EAC3Ca,UAAU,EACX,GAAGJ;IAEJ,8EAA8E;IAC9E,+CAA+C;IAC/C,sBAAsB;IACtB,sBAAsB;IACtB,IAAIK;IACJ,OAAOb,OAAO;QACZU;QACAD;QACAP;QACAS;QACAC;QACAE,QAAOZ,KAAK,EAAEa,KAAK;YACjB,OACEA,MAAMC,MAAM,GAAG,KAAK,AAACH,CAAAA,WAAWZ,kBAAkBC,MAAK,EAAGe,IAAI,CAACF;QAEnE;IACF;AACF"}

package/dist/segmented-button/SegmentedButton.d.ts

@@ -48,10 +48,8 @@ export interface SegmentedButtonProps extends ButtonHTMLAttributes<HTMLButtonEle
  *
  * @example Simple Example
  * ```tsx
- * import {
- *   SegmentedButton,
- *   SegmentedButtonContainer,
- * } from "@react-md/core";
+ * import { SegmentedButton } from "@react-md/core/segmented-button/SegmentedButton";
+ * import { SegmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
  * import type { ReactElement } from "react";
  * import { useState } from "react";
  *
@@ -83,6 +81,7 @@ export interface SegmentedButtonProps extends ButtonHTMLAttributes<HTMLButtonEle
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/segmented-button | SegmentedButton Demos}
  * @since 6.0.0
  */
 export declare const SegmentedButton: import("react").ForwardRefExoticComponent<SegmentedButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/segmented-button/SegmentedButton.js

@@ -11,10 +11,8 @@ import { segmentedButton } from "./segmentedButtonStyles.js";
  *
  * @example Simple Example
  * ```tsx
- * import {
- *   SegmentedButton,
- *   SegmentedButtonContainer,
- * } from "@react-md/core";
+ * import { SegmentedButton } from "@react-md/core/segmented-button/SegmentedButton";
+ * import { SegmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
  * import type { ReactElement } from "react";
  * import { useState } from "react";
  *
@@ -46,6 +44,7 @@ import { segmentedButton } from "./segmentedButtonStyles.js";
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/segmented-button | SegmentedButton Demos}
  * @since 6.0.0
  */ export const SegmentedButton = /*#__PURE__*/ forwardRef(function SegmentedButton(props, ref) {
     const { className, type = "button", leftAddon, rightAddon, children: propChildren, selected, selectedIcon: propSelectedIcon, selectedClassName, disableSelectedIcon, disableSelectedTransition, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, disabled, disableRipple, ...remaining } = props;

package/dist/segmented-button/SegmentedButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/segmented-button/SegmentedButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ButtonHTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { useMaxWidthTransition } from \"../transition/useMaxWidthTransition.js\";\nimport { segmentedButton } from \"./segmentedButtonStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SegmentedButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    ComponentWithRippleProps {\n  /**\n   * Set this to `true` to apply selected styles and an optional\n   * {@link selectedIcon}\n   *\n   * @defaultValue `false`\n   */\n  selected?: boolean;\n\n  /** @defaultValue `getIcon(\"selected\")` */\n  selectedIcon?: ReactNode;\n\n  /**\n   * An optional className to apply when {@link selected} is `true`.\n   */\n  selectedClassName?: string;\n\n  /**\n   * Set this to `true` to not render the {@link selectedIcon} when\n   * {@link selected} is `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * Set this to `true` to disable the {@link selectedIcon} enter/exit\n   * transition and instead just use `display: none`.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedTransition?: boolean;\n\n  /**\n   * An optional addon to render before the {@link children} and after the\n   * {@link selectedIcon}. This is only useful when rendering text children so\n   * it can appear above the interaction states.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * An optional addon to render after the {@link children}. This is only useful\n   * when rendering text children so it can appear above the interaction states.\n   */\n  rightAddon?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import {\n *   SegmentedButton,\n *   SegmentedButtonContainer,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"a\");\n *   return (\n *     <SegmentedButtonContainer>\n *       <SegmentedButton\n *         onClick={() => setValue(\"a\")}\n *         selected={value === \"a\"}\n *       >\n *         First\n *       </SegmentedButton>\n *       <SegmentedButton\n *         onClick={() => setValue(\"b\")}\n *         selected={value === \"b\"}\n *       >\n *         Second\n *       </SegmentedButton>\n *       <SegmentedButton\n *         onClick={() => setValue(\"c\")}\n *         selected={value === \"c\"}\n *         disableSelectedIcon\n *       >\n *         Third\n *       </SegmentedButton>\n *     </SegmentedButtonContainer>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const SegmentedButton = forwardRef<\n  HTMLButtonElement,\n  SegmentedButtonProps\n>(function SegmentedButton(props, ref) {\n  const {\n    className,\n    type = \"button\",\n    leftAddon,\n    rightAddon,\n    children: propChildren,\n    selected,\n    selectedIcon: propSelectedIcon,\n    selectedClassName,\n    disableSelectedIcon,\n    disableSelectedTransition,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n    disableRipple,\n    ...remaining\n  } = props;\n\n  const children = useHigherContrastChildren(propChildren);\n  const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n  const selectedIcon = useMaxWidthTransition({\n    element: selectedIconNode,\n    transitionIn: !!selected,\n    disabled: disableSelectedIcon,\n    disableTransition: disableSelectedTransition,\n  });\n  const { pressedClassName, handlers, ripples } = useElementInteraction({\n    mode: disableRipple ? \"none\" : undefined,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n  });\n\n  return (\n    <button\n      {...remaining}\n      {...handlers}\n      aria-pressed={selected}\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={segmentedButton({\n        className,\n        selected,\n        selectedClassName,\n        pressedClassName,\n      })}\n    >\n      {!disableSelectedIcon && selectedIcon}\n      {leftAddon}\n      {children}\n      {rightAddon}\n      {ripples}\n    </button>\n  );\n});\n"],"names":["forwardRef","getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","segmentedButton","SegmentedButton","props","ref","className","type","leftAddon","rightAddon","children","propChildren","selected","selectedIcon","propSelectedIcon","selectedClassName","disableSelectedIcon","disableSelectedTransition","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","disabled","disableRipple","remaining","selectedIconNode","element","transitionIn","disableTransition","pressedClassName","handlers","ripples","mode","undefined","button","aria-pressed"],"mappings":"AAAA;;AAEA,SAAoDA,UAAU,QAAQ,QAAQ;AAE9E,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,qBAAqB,QAAQ,yCAAyC;AAC/E,SAASC,eAAe,QAAQ,6BAA6B;AAsD7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyCC,GACD,OAAO,MAAMC,gCAAkBN,WAG7B,SAASM,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,SAAS,EACTC,OAAO,QAAQ,EACfC,SAAS,EACTC,UAAU,EACVC,UAAUC,YAAY,EACtBC,QAAQ,EACRC,cAAcC,gBAAgB,EAC9BC,iBAAiB,EACjBC,mBAAmB,EACnBC,yBAAyB,EACzBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,QAAQ,EACRC,aAAa,EACb,GAAGC,WACJ,GAAG3B;IAEJ,MAAMM,WAAWV,0BAA0BW;IAC3C,MAAMqB,mBAAmBlC,QAAQ,YAAYgB;IAC7C,MAAMD,eAAeZ,sBAAsB;QACzCgC,SAASD;QACTE,cAAc,CAAC,CAACtB;QAChBiB,UAAUb;QACVmB,mBAAmBlB;IACrB;IACA,MAAM,EAAEmB,gBAAgB,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGvC,sBAAsB;QACpEwC,MAAMT,gBAAgB,SAASU;QAC/BtB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,MAACY;QACE,GAAGV,SAAS;QACZ,GAAGM,QAAQ;QACZK,gBAAc9B;QACdP,KAAKA;QACLE,MAAMA;QACNsB,UAAUA;QACVvB,WAAWJ,gBAAgB;YACzBI;YACAM;YACAG;YACAqB;QACF;;YAEC,CAACpB,uBAAuBH;YACxBL;YACAE;YACAD;YACA6B;;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/segmented-button/SegmentedButton.tsx"],"sourcesContent":["\"use client\";\n\nimport { type ButtonHTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { getIcon } from \"../icon/config.js\";\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { useMaxWidthTransition } from \"../transition/useMaxWidthTransition.js\";\nimport { segmentedButton } from \"./segmentedButtonStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SegmentedButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    ComponentWithRippleProps {\n  /**\n   * Set this to `true` to apply selected styles and an optional\n   * {@link selectedIcon}\n   *\n   * @defaultValue `false`\n   */\n  selected?: boolean;\n\n  /** @defaultValue `getIcon(\"selected\")` */\n  selectedIcon?: ReactNode;\n\n  /**\n   * An optional className to apply when {@link selected} is `true`.\n   */\n  selectedClassName?: string;\n\n  /**\n   * Set this to `true` to not render the {@link selectedIcon} when\n   * {@link selected} is `true`.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedIcon?: boolean;\n\n  /**\n   * Set this to `true` to disable the {@link selectedIcon} enter/exit\n   * transition and instead just use `display: none`.\n   *\n   * @defaultValue `false`\n   */\n  disableSelectedTransition?: boolean;\n\n  /**\n   * An optional addon to render before the {@link children} and after the\n   * {@link selectedIcon}. This is only useful when rendering text children so\n   * it can appear above the interaction states.\n   */\n  leftAddon?: ReactNode;\n\n  /**\n   * An optional addon to render after the {@link children}. This is only useful\n   * when rendering text children so it can appear above the interaction states.\n   */\n  rightAddon?: ReactNode;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { SegmentedButton } from \"@react-md/core/segmented-button/SegmentedButton\";\n * import { SegmentedButtonContainer } from \"@react-md/core/segmented-button/SegmentedButtonContainer\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [value, setValue] = useState(\"a\");\n *   return (\n *     <SegmentedButtonContainer>\n *       <SegmentedButton\n *         onClick={() => setValue(\"a\")}\n *         selected={value === \"a\"}\n *       >\n *         First\n *       </SegmentedButton>\n *       <SegmentedButton\n *         onClick={() => setValue(\"b\")}\n *         selected={value === \"b\"}\n *       >\n *         Second\n *       </SegmentedButton>\n *       <SegmentedButton\n *         onClick={() => setValue(\"c\")}\n *         selected={value === \"c\"}\n *         disableSelectedIcon\n *       >\n *         Third\n *       </SegmentedButton>\n *     </SegmentedButtonContainer>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/segmented-button | SegmentedButton Demos}\n * @since 6.0.0\n */\nexport const SegmentedButton = forwardRef<\n  HTMLButtonElement,\n  SegmentedButtonProps\n>(function SegmentedButton(props, ref) {\n  const {\n    className,\n    type = \"button\",\n    leftAddon,\n    rightAddon,\n    children: propChildren,\n    selected,\n    selectedIcon: propSelectedIcon,\n    selectedClassName,\n    disableSelectedIcon,\n    disableSelectedTransition,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n    disableRipple,\n    ...remaining\n  } = props;\n\n  const children = useHigherContrastChildren(propChildren);\n  const selectedIconNode = getIcon(\"selected\", propSelectedIcon);\n  const selectedIcon = useMaxWidthTransition({\n    element: selectedIconNode,\n    transitionIn: !!selected,\n    disabled: disableSelectedIcon,\n    disableTransition: disableSelectedTransition,\n  });\n  const { pressedClassName, handlers, ripples } = useElementInteraction({\n    mode: disableRipple ? \"none\" : undefined,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n  });\n\n  return (\n    <button\n      {...remaining}\n      {...handlers}\n      aria-pressed={selected}\n      ref={ref}\n      type={type}\n      disabled={disabled}\n      className={segmentedButton({\n        className,\n        selected,\n        selectedClassName,\n        pressedClassName,\n      })}\n    >\n      {!disableSelectedIcon && selectedIcon}\n      {leftAddon}\n      {children}\n      {rightAddon}\n      {ripples}\n    </button>\n  );\n});\n"],"names":["forwardRef","getIcon","useElementInteraction","useHigherContrastChildren","useMaxWidthTransition","segmentedButton","SegmentedButton","props","ref","className","type","leftAddon","rightAddon","children","propChildren","selected","selectedIcon","propSelectedIcon","selectedClassName","disableSelectedIcon","disableSelectedTransition","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","disabled","disableRipple","remaining","selectedIconNode","element","transitionIn","disableTransition","pressedClassName","handlers","ripples","mode","undefined","button","aria-pressed"],"mappings":"AAAA;;AAEA,SAAoDA,UAAU,QAAQ,QAAQ;AAE9E,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AACxF,SAASC,qBAAqB,QAAQ,yCAAyC;AAC/E,SAASC,eAAe,QAAQ,6BAA6B;AAsD7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCC,GACD,OAAO,MAAMC,gCAAkBN,WAG7B,SAASM,gBAAgBC,KAAK,EAAEC,GAAG;IACnC,MAAM,EACJC,SAAS,EACTC,OAAO,QAAQ,EACfC,SAAS,EACTC,UAAU,EACVC,UAAUC,YAAY,EACtBC,QAAQ,EACRC,cAAcC,gBAAgB,EAC9BC,iBAAiB,EACjBC,mBAAmB,EACnBC,yBAAyB,EACzBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,QAAQ,EACRC,aAAa,EACb,GAAGC,WACJ,GAAG3B;IAEJ,MAAMM,WAAWV,0BAA0BW;IAC3C,MAAMqB,mBAAmBlC,QAAQ,YAAYgB;IAC7C,MAAMD,eAAeZ,sBAAsB;QACzCgC,SAASD;QACTE,cAAc,CAAC,CAACtB;QAChBiB,UAAUb;QACVmB,mBAAmBlB;IACrB;IACA,MAAM,EAAEmB,gBAAgB,EAAEC,QAAQ,EAAEC,OAAO,EAAE,GAAGvC,sBAAsB;QACpEwC,MAAMT,gBAAgB,SAASU;QAC/BtB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,qBACE,MAACY;QACE,GAAGV,SAAS;QACZ,GAAGM,QAAQ;QACZK,gBAAc9B;QACdP,KAAKA;QACLE,MAAMA;QACNsB,UAAUA;QACVvB,WAAWJ,gBAAgB;YACzBI;YACAM;YACAG;YACAqB;QACF;;YAEC,CAACpB,uBAAuBH;YACxBL;YACAE;YACAD;YACA6B;;;AAGP,GAAG"}

package/dist/segmented-button/SegmentedButtonContainer.d.ts

@@ -8,21 +8,19 @@ export interface SegmentedButtonContainerProps extends HTMLAttributes<HTMLDivEle
 }
 /**
  * Simple wrapper `div` to apply the segmented button container styles. You can
- * just use the {@link segmentedButtonContainerStyles} util function instead.
+ * just use the {@link segmentedButtonContainer} util function instead.
  *
  * @example Without This Component
  * ```tsx
- * import {
- *   SegmentedButton,
- *   segmentedButtonContainerStyles,
- * } from "@react-md/core";
+ * import { SegmentedButton } from "@react-md/core/segmented-button/SegmentedButton";
+ * import { segmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
  * import type { ReactElement } from "react";
  *
  * import { CustomWrapperComponent } from "./CustomWrapperComponent.jsx";
  *
  * function Example(): ReactElement {
  *   return (
- *     <CustomWrapperComponent className={segmentedButtonContainerStyles()}>
+ *     <CustomWrapperComponent className={segmentedButtonContainer()}>
  *       <SegmentedButton>One</SegmentedButton>
  *       <SegmentedButton>Two</SegmentedButton>
  *       <SegmentedButton>Three</SegmentedButton>
@@ -31,6 +29,7 @@ export interface SegmentedButtonContainerProps extends HTMLAttributes<HTMLDivEle
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/segmented-button | SegmentedButton Demos}
  * @since 6.0.0
  */
 export declare const SegmentedButtonContainer: import("react").ForwardRefExoticComponent<SegmentedButtonContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/segmented-button/SegmentedButtonContainer.js

@@ -1,23 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { segmentedButtonContainerStyles } from "./segmentedButtonContainerStyles.js";
+import { segmentedButtonContainer } from "./segmentedButtonContainerStyles.js";
 /**
  * Simple wrapper `div` to apply the segmented button container styles. You can
- * just use the {@link segmentedButtonContainerStyles} util function instead.
+ * just use the {@link segmentedButtonContainer} util function instead.
  *
  * @example Without This Component
  * ```tsx
- * import {
- *   SegmentedButton,
- *   segmentedButtonContainerStyles,
- * } from "@react-md/core";
+ * import { SegmentedButton } from "@react-md/core/segmented-button/SegmentedButton";
+ * import { segmentedButtonContainer } from "@react-md/core/segmented-button/SegmentedButtonContainer";
  * import type { ReactElement } from "react";
  *
  * import { CustomWrapperComponent } from "./CustomWrapperComponent.jsx";
  *
  * function Example(): ReactElement {
  *   return (
- *     <CustomWrapperComponent className={segmentedButtonContainerStyles()}>
+ *     <CustomWrapperComponent className={segmentedButtonContainer()}>
  *       <SegmentedButton>One</SegmentedButton>
  *       <SegmentedButton>Two</SegmentedButton>
  *       <SegmentedButton>Three</SegmentedButton>
@@ -26,13 +24,14 @@ import { segmentedButtonContainerStyles } from "./segmentedButtonContainerStyles
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/segmented-button | SegmentedButton Demos}
  * @since 6.0.0
  */ export const SegmentedButtonContainer = /*#__PURE__*/ forwardRef(function SegmentedButtonContainer(props, ref) {
     const { className, disableFullWidth, children, ...remaining } = props;
     return /*#__PURE__*/ _jsx("div", {
         ...remaining,
         ref: ref,
-        className: segmentedButtonContainerStyles({
+        className: segmentedButtonContainer({
             className,
             disableFullWidth
         }),

package/dist/segmented-button/SegmentedButtonContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/segmented-button/SegmentedButtonContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport {\n  type SegmentedButtonContainerClassNameOptions,\n  segmentedButtonContainerStyles,\n} from \"./segmentedButtonContainerStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SegmentedButtonContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SegmentedButtonContainerClassNameOptions {\n  children: ReactNode;\n}\n\n/**\n * Simple wrapper `div` to apply the segmented button container styles. You can\n * just use the {@link segmentedButtonContainerStyles} util function instead.\n *\n * @example Without This Component\n * ```tsx\n * import {\n *   SegmentedButton,\n *   segmentedButtonContainerStyles,\n * } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * import { CustomWrapperComponent } from \"./CustomWrapperComponent.jsx\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <CustomWrapperComponent className={segmentedButtonContainerStyles()}>\n *       <SegmentedButton>One</SegmentedButton>\n *       <SegmentedButton>Two</SegmentedButton>\n *       <SegmentedButton>Three</SegmentedButton>\n *     </CustomWrapperComponent>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport const SegmentedButtonContainer = forwardRef<\n  HTMLDivElement,\n  SegmentedButtonContainerProps\n>(function SegmentedButtonContainer(props, ref) {\n  const { className, disableFullWidth, children, ...remaining } = props;\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={segmentedButtonContainerStyles({\n        className,\n        disableFullWidth,\n      })}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["forwardRef","segmentedButtonContainerStyles","SegmentedButtonContainer","props","ref","className","disableFullWidth","children","remaining","div"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAEEC,8BAA8B,QACzB,sCAAsC;AAW7C;;;;;;;;;;;;;;;;;;;;;;;;;;CA0BC,GACD,OAAO,MAAMC,yCAA2BF,WAGtC,SAASE,yBAAyBC,KAAK,EAAEC,GAAG;IAC5C,MAAM,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEhE,qBACE,KAACM;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLC,WAAWJ,+BAA+B;YACxCI;YACAC;QACF;kBAECC;;AAGP,GAAG"}
+{"version":3,"sources":["../../src/segmented-button/SegmentedButtonContainer.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport {\n  type SegmentedButtonContainerClassNameOptions,\n  segmentedButtonContainer,\n} from \"./segmentedButtonContainerStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SegmentedButtonContainerProps\n  extends HTMLAttributes<HTMLDivElement>,\n    SegmentedButtonContainerClassNameOptions {\n  children: ReactNode;\n}\n\n/**\n * Simple wrapper `div` to apply the segmented button container styles. You can\n * just use the {@link segmentedButtonContainer} util function instead.\n *\n * @example Without This Component\n * ```tsx\n * import { SegmentedButton } from \"@react-md/core/segmented-button/SegmentedButton\";\n * import { segmentedButtonContainer } from \"@react-md/core/segmented-button/SegmentedButtonContainer\";\n * import type { ReactElement } from \"react\";\n *\n * import { CustomWrapperComponent } from \"./CustomWrapperComponent.jsx\";\n *\n * function Example(): ReactElement {\n *   return (\n *     <CustomWrapperComponent className={segmentedButtonContainer()}>\n *       <SegmentedButton>One</SegmentedButton>\n *       <SegmentedButton>Two</SegmentedButton>\n *       <SegmentedButton>Three</SegmentedButton>\n *     </CustomWrapperComponent>\n *   );\n * }\n * ```\n *\n * @see {@link https://next.react-md.dev/components/segmented-button | SegmentedButton Demos}\n * @since 6.0.0\n */\nexport const SegmentedButtonContainer = forwardRef<\n  HTMLDivElement,\n  SegmentedButtonContainerProps\n>(function SegmentedButtonContainer(props, ref) {\n  const { className, disableFullWidth, children, ...remaining } = props;\n\n  return (\n    <div\n      {...remaining}\n      ref={ref}\n      className={segmentedButtonContainer({\n        className,\n        disableFullWidth,\n      })}\n    >\n      {children}\n    </div>\n  );\n});\n"],"names":["forwardRef","segmentedButtonContainer","SegmentedButtonContainer","props","ref","className","disableFullWidth","children","remaining","div"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAExE,SAEEC,wBAAwB,QACnB,sCAAsC;AAW7C;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,yCAA2BF,WAGtC,SAASE,yBAAyBC,KAAK,EAAEC,GAAG;IAC5C,MAAM,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGL;IAEhE,qBACE,KAACM;QACE,GAAGD,SAAS;QACbJ,KAAKA;QACLC,WAAWJ,yBAAyB;YAClCI;YACAC;QACF;kBAECC;;AAGP,GAAG"}

package/dist/segmented-button/_segmented-button.scss

@@ -1,3 +1,7 @@
+////
+/// @group segmented-button
+////
+
 @use "sass:map";
 @use "sass:color";
 @use "../utils";
@@ -9,24 +13,24 @@
 @use "../theme/colors";
 @use "../theme/theme";
 
-// Set to `true` to disable all the styles
-// @type boolean
+/// Set to `true` to disable all the styles
+/// @type Boolean
 $disable-everything: false !default;
 
-// Set to `true` to disable the styles to display an icon while selected
-// @type boolean
+/// Set to `true` to disable the styles to display an icon while selected
+/// @type Boolean
 $disable-selected-icon: false !default;
 
-// The light theme text color
-// @type Color
+/// The light theme text color
+/// @type Color
 $light-theme-color: colors.$black !default;
 
-// The light theme outline color
-// @type Color
+/// The light theme outline color
+/// @type Color
 $light-theme-outline-color: #79747e !default;
 
-// The light theme background color while selected
-// @type Color
+/// The light theme background color while selected
+/// @type Color
 $light-theme-selected-background-color: theme.get-swatch(
   theme.$secondary-color,
   700,
@@ -34,22 +38,22 @@ $light-theme-selected-background-color: theme.get-swatch(
   color.adjust(theme.$secondary-color, $lightness: -20%)
 ) !default;
 
-// The light theme text color while selected
-// @type Color
+/// The light theme text color while selected
+/// @type Color
 $light-theme-selected-color: a11y.contrast-color(
   $light-theme-selected-background-color
 ) !default;
 
-// The dark theme text color
-// @type Color
+/// The dark theme text color
+/// @type Color
 $dark-theme-color: colors.$white !default;
 
-// The dark theme outline color
-// @type Color
+/// The dark theme outline color
+/// @type Color
 $dark-theme-outline-color: #938f99 !default;
 
-// The dark theme background color while selected
-// @type Color
+/// The dark theme background color while selected
+/// @type Color
 $dark-theme-selected-background-color: theme.get-swatch(
   theme.$secondary-color,
   300,
@@ -57,38 +61,73 @@ $dark-theme-selected-background-color: theme.get-swatch(
   color.adjust(theme.$secondary-color, $lightness: 20%)
 ) !default;
 
-// The dark theme text color while selected
-// @type Color
+/// The dark theme text color while selected
+/// @type Color
 $dark-theme-selected-color: a11y.contrast-color(
   $dark-theme-selected-background-color
 ) !default;
 
+/// The default gap to apply between the elements in the `SegmentedButton`.
+/// @type Number
 $gap: icon.$spacing !default;
+
+/// The default border-radius to apply `SegmentedButton` that appear at the
+/// edges.
+/// @type Number
 $border-radius: 2.5rem !default;
+
+/// The default min-height for a `SegmentedButton`.
+/// @type Number
 $min-height: 2.5rem !default;
+
+/// The default min-width for a `SegmentedButton`.
+/// @type Number
 $min-width: 3rem !default;
+
+/// The default horizontal padding for a `SegmentedButton`.
+/// @type Number
 $horizontal-padding: 0.75rem !default;
+
+/// The default vertical padding for a `SegmentedButton`.
+/// @type Number
 $vertical-padding: 0 !default;
+
+/// The default outline width for a `SegmentedButton`.
+/// @type Number
 $outline-width: 0.0625rem !default;
+
+/// The default outline color.
+/// @type Color
 $outline-color: theme.get-default-color(
   $light-theme-outline-color,
   $dark-theme-outline-color
 ) !default;
+
+/// The default text color
+/// @type Color
 $color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
+
+/// The default selected text color
+/// @type Color
 $selected-color: theme.get-default-color(
   $light-theme-selected-color,
   $dark-theme-selected-color
 ) !default;
+
+/// The default selected background-color
+/// @type Color
 $selected-background-color: theme.get-default-color(
   $light-theme-selected-background-color,
   $dark-theme-selected-background-color
 ) !default;
 
+/// The default typography styles.
+/// @type Map
 $typography-styles: typography.$button-styles !default;
 
-// The available configurable css variables and mostly used internally for the
-// `get-var`, `set-var`, and `use-var` utils.
-// @type List
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $variables: (
   outline-width,
   outline-color,
@@ -97,9 +136,9 @@ $variables: (
   selected-color
 );
 
-// @param {string} name - The supported variable name
-// @param {any} fallback - An optional fallback value
-// @returns {string} a `var()` statement
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "segmented-button");
   @if $fallback {
@@ -109,23 +148,24 @@ $variables: (
   @return var(#{$var});
 }
 
-// @param {string} name - The supported variable name
-// @param {any} value - The value to set the variable to. Supports `null` which
-// will just be a no-op.
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "segmented-button")}: #{$value};
   }
 }
 
-// @param {string} property - The css property to apply the variable to
-// @param {string} name - The supported variable name
-// @param {any} fallback - An optional fallback value if the variable has not
-// been set
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+/// Applies the light the variables based on feature flags
 @mixin use-light-theme {
   @if not $disable-everything {
     @if $light-theme-outline-color != $dark-theme-outline-color {
@@ -147,6 +187,7 @@ $variables: (
   }
 }
 
+/// Applies the dark the variables based on feature flags
 @mixin use-dark-theme {
   @if not $disable-everything {
     @if $light-theme-outline-color != $dark-theme-outline-color {
@@ -168,6 +209,7 @@ $variables: (
   }
 }
 
+/// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(outline-width, $outline-width);
@@ -178,6 +220,10 @@ $variables: (
   }
 }
 
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(segmented-button, $disable-layer) {

package/dist/segmented-button/segmentedButtonContainerStyles.d.ts

@@ -9,4 +9,4 @@ export interface SegmentedButtonContainerClassNameOptions {
 /**
  * @since 6.0.0
  */
-export declare function segmentedButtonContainerStyles(options?: SegmentedButtonContainerClassNameOptions): string;
+export declare function segmentedButtonContainer(options?: SegmentedButtonContainerClassNameOptions): string;