@persona/design-system 0.5.1 → 0.7.0

package/dist/types-CuQSgl1F.d.mts

@@ -0,0 +1,36 @@
+import { AnchorHTMLAttributes, ComponentType, ReactNode, Ref } from "react";
+
+//#region lib/router/types.d.ts
+type To = string | {
+  pathname?: string;
+  search?: string;
+  hash?: string;
+};
+interface NavigateOptions {
+  replace?: boolean;
+  state?: unknown;
+}
+interface RouterLinkComponentProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
+  to: To;
+  replace?: boolean;
+  state?: unknown;
+  /** Full document navigation; the browser follows the href, skipping client-side routing. */
+  reloadDocument?: boolean;
+  children?: ReactNode;
+  ref?: Ref<HTMLAnchorElement>;
+}
+interface RouterAdapter {
+  /** Client-side navigation; called on plain left-clicks of internal links. */
+  navigate: (to: To, options?: NavigateOptions) => void;
+  /** Hook mapping `to` to the rendered href (basepath, hash routing). Defaults to createPath(to). */
+  useHref?: (to: To) => string;
+  /** Hook exposing the current pathname (FloatingPanel dismiss-on-navigate). */
+  useLocation?: () => {
+    pathname: string;
+  };
+  /** Replace the anchor used for internal links entirely (Atlassian-style). When set, navigate/useHref are unused for links. */
+  linkComponent?: ComponentType<RouterLinkComponentProps>;
+}
+//#endregion
+export { To as i, RouterAdapter as n, RouterLinkComponentProps as r, NavigateOptions as t };
+//# sourceMappingURL=types-CuQSgl1F.d.mts.map

package/dist/{types-COeginAF.d.mts → types-D8rWSj3z.d.mts}

@@ -21,4 +21,4 @@ interface AbsoluteDateRange {
 }
 //#endregion
 export { DateFilterPreset as a, RelativeDateFilterValue as c, DATE_FILTER_PRESET_LABELS as i, AbsoluteDateRange as n, DateFilterValue as o, DATE_FILTER_PRESETS as r, PresetRelativeDateFilterValue as s, AbsoluteDateFilterValue as t };
-//# sourceMappingURL=types-COeginAF.d.mts.map
+//# sourceMappingURL=types-D8rWSj3z.d.mts.map

package/dist/{types-1_JSe9Wr.d.mts → types-I9z-0m7q.d.mts}

@@ -1,4 +1,4 @@
-import { c as RelativeDateFilterValue } from "./types-COeginAF.mjs";
+import { c as RelativeDateFilterValue } from "./types-D8rWSj3z.mjs";
 //#region components/DataTable/TableControls/FiltersV2/types.d.ts
 /**
  * Filter UI v2 — client-side state shape.
@@ -169,4 +169,4 @@ declare const EMPTY_FILTER_STATE: FilterStateV2;
 declare function isEmptyState(state: FilterStateV2): boolean;
 //#endregion
 export { FilterField as a, FilterOperator as c, FilterRuleValueChange as d, FilterSize as f, isEmptyState as h, EMPTY_FILTER_STATE as i, FilterRule as l, TopLevelFilterRule as m, CompoundExpression as n, FilterFieldSource as o, FilterStateV2 as p, DateRangeFilterValue as r, FilterFieldType as s, AndGroup as t, FilterRuleValue as u };
-//# sourceMappingURL=types-1_JSe9Wr.d.mts.map
+//# sourceMappingURL=types-I9z-0m7q.d.mts.map

package/dist/{types-CtLY82w5.d.mts → types-RWjW1d9I.d.mts}

@@ -24,4 +24,4 @@ interface BaseActiveFilter<TFilter extends BaseFilterConfig = BaseFilterConfig>
 }
 //#endregion
 export { BaseActiveFilter as n, BaseFilterConfig as r, AttributeColumn as t };
-//# sourceMappingURL=types-CtLY82w5.d.mts.map
+//# sourceMappingURL=types-RWjW1d9I.d.mts.map

package/dist/types.d.mts

@@ -1,2 +1,2 @@
-import { n as BaseActiveFilter, r as BaseFilterConfig, t as AttributeColumn } from "./types-CtLY82w5.mjs";
-export { AttributeColumn, BaseActiveFilter, BaseFilterConfig };
+import { i as To, n as RouterAdapter, r as RouterLinkComponentProps, t as NavigateOptions } from "./types-CuQSgl1F.mjs";
+export { NavigateOptions, RouterAdapter, RouterLinkComponentProps, To };

package/dist/types2.d.mts

@@ -1,2 +1,2 @@
-import { a as DateFilterPreset, c as RelativeDateFilterValue, i as DATE_FILTER_PRESET_LABELS, n as AbsoluteDateRange, o as DateFilterValue, r as DATE_FILTER_PRESETS, s as PresetRelativeDateFilterValue, t as AbsoluteDateFilterValue } from "./types-COeginAF.mjs";
-export { AbsoluteDateFilterValue, AbsoluteDateRange, DATE_FILTER_PRESETS, DATE_FILTER_PRESET_LABELS, DateFilterPreset, DateFilterValue, PresetRelativeDateFilterValue, RelativeDateFilterValue };
+import { n as BaseActiveFilter, r as BaseFilterConfig, t as AttributeColumn } from "./types-RWjW1d9I.mjs";
+export { AttributeColumn, BaseActiveFilter, BaseFilterConfig };

package/dist/types3.d.mts

@@ -1,2 +1,2 @@
-import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, h as isEmptyState, i as EMPTY_FILTER_STATE, l as FilterRule, m as TopLevelFilterRule, n as CompoundExpression, o as FilterFieldSource, p as FilterStateV2, r as DateRangeFilterValue, s as FilterFieldType, t as AndGroup, u as FilterRuleValue } from "./types-1_JSe9Wr.mjs";
-export { AndGroup, CompoundExpression, DateRangeFilterValue, EMPTY_FILTER_STATE, FilterField, FilterFieldSource, FilterFieldType, FilterOperator, FilterRule, FilterRuleValue, FilterRuleValueChange, FilterSize, FilterStateV2, TopLevelFilterRule, isEmptyState };
+import { a as DateFilterPreset, c as RelativeDateFilterValue, i as DATE_FILTER_PRESET_LABELS, n as AbsoluteDateRange, o as DateFilterValue, r as DATE_FILTER_PRESETS, s as PresetRelativeDateFilterValue, t as AbsoluteDateFilterValue } from "./types-D8rWSj3z.mjs";
+export { AbsoluteDateFilterValue, AbsoluteDateRange, DATE_FILTER_PRESETS, DATE_FILTER_PRESET_LABELS, DateFilterPreset, DateFilterValue, PresetRelativeDateFilterValue, RelativeDateFilterValue };

package/dist/types4.d.mts

@@ -1,2 +1,2 @@
-import { t as ValueControlProps } from "./types-C2s9yhgO.mjs";
-export { ValueControlProps };
+import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, f as FilterSize, h as isEmptyState, i as EMPTY_FILTER_STATE, l as FilterRule, m as TopLevelFilterRule, n as CompoundExpression, o as FilterFieldSource, p as FilterStateV2, r as DateRangeFilterValue, s as FilterFieldType, t as AndGroup, u as FilterRuleValue } from "./types-I9z-0m7q.mjs";
+export { AndGroup, CompoundExpression, DateRangeFilterValue, EMPTY_FILTER_STATE, FilterField, FilterFieldSource, FilterFieldType, FilterOperator, FilterRule, FilterRuleValue, FilterRuleValueChange, FilterSize, FilterStateV2, TopLevelFilterRule, isEmptyState };

package/dist/types5.d.mts

@@ -1,2 +1,2 @@
-import { t as PaginationParams } from "./types-Ok2lRZeu.mjs";
-export { PaginationParams };
+import { t as ValueControlProps } from "./types-B8aAvU2a2.mjs";
+export { ValueControlProps };

package/dist/types6.d.mts

@@ -0,0 +1,2 @@
+import { t as PaginationParams } from "./types-CcZbBH0e.mjs";
+export { PaginationParams };

package/dist/{url-state-DP78aDol.d.mts → url-state-BOkOTKNZ.d.mts}

@@ -1,4 +1,4 @@
-import { p as FilterStateV2 } from "./types-1_JSe9Wr.mjs";
+import { p as FilterStateV2 } from "./types-I9z-0m7q.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/url-state.d.ts
 /**
@@ -39,4 +39,4 @@ declare function applyFilterStateToSearchParams(params: URLSearchParams, state:
 declare function decodeFilterStateFromString(raw: string | null | undefined): FilterStateV2 | null;
 //#endregion
 export { decodeFilterStateFromUrl as a, decodeFilterStateFromString as i, UrlStateCodecResult as n, encodeFilterStateToUrlParam as o, applyFilterStateToSearchParams as r, FILTER_STATE_URL_PARAM as t };
-//# sourceMappingURL=url-state-DP78aDol.d.mts.map
+//# sourceMappingURL=url-state-BOkOTKNZ.d.mts.map

package/dist/url-state.d.mts

@@ -1,2 +1,2 @@
-import { a as decodeFilterStateFromUrl, i as decodeFilterStateFromString, n as UrlStateCodecResult, o as encodeFilterStateToUrlParam, r as applyFilterStateToSearchParams, t as FILTER_STATE_URL_PARAM } from "./url-state-DP78aDol.mjs";
+import { a as decodeFilterStateFromUrl, i as decodeFilterStateFromString, n as UrlStateCodecResult, o as encodeFilterStateToUrlParam, r as applyFilterStateToSearchParams, t as FILTER_STATE_URL_PARAM } from "./url-state-BOkOTKNZ.mjs";
 export { FILTER_STATE_URL_PARAM, UrlStateCodecResult, applyFilterStateToSearchParams, decodeFilterStateFromString, decodeFilterStateFromUrl, encodeFilterStateToUrlParam };

package/dist/useComboboxFooterAction.d.mts

@@ -1,4 +1,4 @@
-import { p as FooterAction } from "./ComboboxBase-Ds_i3K2m.mjs";
+import { p as FooterAction } from "./ComboboxBase-B3Es1y9g.mjs";
 import { KeyboardEvent } from "react";
 
 //#region components/Combobox/useComboboxFooterAction.d.ts

package/dist/{useFilterStateV2-DC2rGXHK.d.mts → useFilterStateV2-CjXG2vjy.d.mts}

@@ -1,5 +1,5 @@
-import { l as FilterRule, n as CompoundExpression, p as FilterStateV2 } from "./types-1_JSe9Wr.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-BslyuPZw.mjs";
+import { l as FilterRule, n as CompoundExpression, p as FilterStateV2 } from "./types-I9z-0m7q.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-BtdqMYUD.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/useFilterStateV2.d.ts
 interface UseFilterStateV2Options {
@@ -90,4 +90,4 @@ interface UseFilterStateV2Result {
 declare function useFilterStateV2(options: UseFilterStateV2Options): UseFilterStateV2Result;
 //#endregion
 export { UseFilterStateV2Result as n, useFilterStateV2 as r, UseFilterStateV2Options as t };
-//# sourceMappingURL=useFilterStateV2-DC2rGXHK.d.mts.map
+//# sourceMappingURL=useFilterStateV2-CjXG2vjy.d.mts.map

package/dist/useFilterStateV2.d.mts

@@ -1,2 +1,2 @@
-import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "./useFilterStateV2-DC2rGXHK.mjs";
+import { n as UseFilterStateV2Result, r as useFilterStateV2, t as UseFilterStateV2Options } from "./useFilterStateV2-CjXG2vjy.mjs";
 export { UseFilterStateV2Options, UseFilterStateV2Result, useFilterStateV2 };

package/dist/{useFormField-C-K1lgmv.mjs → useFormField-C61u9KvG.mjs}

@@ -1,4 +1,4 @@
-import { n as useFormGroup } from "./useFormGroup-y-duFylq.mjs";
+import { n as useFormGroup } from "./useFormGroup-C89-oI4w.mjs";
 import { createContext, useContext } from "react";
 //#region components/FormControl/useFormField.ts
 const FormControlContext = createContext({});
@@ -22,4 +22,4 @@ const useFormField = (props) => {
 //#endregion
 export { useFormField as n, FormControlContext as t };
 
-//# sourceMappingURL=useFormField-C-K1lgmv.mjs.map
+//# sourceMappingURL=useFormField-C61u9KvG.mjs.map

package/dist/{useFormField-C-K1lgmv.mjs.map → useFormField-C61u9KvG.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"useFormField-C-K1lgmv.mjs","names":[],"sources":["../components/FormControl/useFormField.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport type ErrorProps from 'design-system/types/ErrorProps';\n\nexport interface FormControlContextProps extends ErrorProps {\n  inputId?: string;\n  helperTextId?: string;\n  errorTextId?: string;\n  warningTextId?: string;\n  labelId?: string;\n  disabled?: boolean;\n  maxLength?: number;\n  configField?: boolean;\n}\n\nexport const FormControlContext = createContext<FormControlContextProps>({});\n\nconst useFormField = (props: Partial<FormControlContextProps>) => {\n  const group = useFormGroup();\n  const field = useContext(FormControlContext);\n\n  const inputId = props.inputId ?? field.inputId;\n\n  return {\n    configField: props.configField ?? group.configField,\n    hasError: props.hasError ?? field.hasError,\n    hasWarning: props.hasWarning ?? field.hasWarning,\n    inputId,\n    helperTextId: props.helperTextId ?? field.helperTextId,\n    errorTextId: props.errorTextId ?? field.errorTextId,\n    warningTextId: props.warningTextId ?? field.warningTextId,\n    labelId: props.labelId ?? field.labelId,\n    disabled: props.disabled ?? field.disabled,\n    maxLength: props.maxLength ?? field.maxLength,\n  };\n};\n\nexport default useFormField;\n"],"mappings":";;;AAgBA,MAAa,qBAAqB,cAAuC,EAAE,CAAC;AAE5E,MAAM,gBAAgB,UAA4C;CAChE,MAAM,QAAQ,cAAc;CAC5B,MAAM,QAAQ,WAAW,mBAAmB;CAE5C,MAAM,UAAU,MAAM,WAAW,MAAM;AAEvC,QAAO;EACL,aAAa,MAAM,eAAe,MAAM;EACxC,UAAU,MAAM,YAAY,MAAM;EAClC,YAAY,MAAM,cAAc,MAAM;EACtC;EACA,cAAc,MAAM,gBAAgB,MAAM;EAC1C,aAAa,MAAM,eAAe,MAAM;EACxC,eAAe,MAAM,iBAAiB,MAAM;EAC5C,SAAS,MAAM,WAAW,MAAM;EAChC,UAAU,MAAM,YAAY,MAAM;EAClC,WAAW,MAAM,aAAa,MAAM;EACrC"}
+{"version":3,"file":"useFormField-C61u9KvG.mjs","names":[],"sources":["../components/FormControl/useFormField.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport useFormGroup from 'design-system/components/ConfigFormGroup/useFormGroup';\nimport type ErrorProps from 'design-system/types/ErrorProps';\n\nexport interface FormControlContextProps extends ErrorProps {\n  inputId?: string;\n  helperTextId?: string;\n  errorTextId?: string;\n  warningTextId?: string;\n  labelId?: string;\n  disabled?: boolean;\n  maxLength?: number;\n  configField?: boolean;\n}\n\nexport const FormControlContext = createContext<FormControlContextProps>({});\n\nconst useFormField = (props: Partial<FormControlContextProps>) => {\n  const group = useFormGroup();\n  const field = useContext(FormControlContext);\n\n  const inputId = props.inputId ?? field.inputId;\n\n  return {\n    configField: props.configField ?? group.configField,\n    hasError: props.hasError ?? field.hasError,\n    hasWarning: props.hasWarning ?? field.hasWarning,\n    inputId,\n    helperTextId: props.helperTextId ?? field.helperTextId,\n    errorTextId: props.errorTextId ?? field.errorTextId,\n    warningTextId: props.warningTextId ?? field.warningTextId,\n    labelId: props.labelId ?? field.labelId,\n    disabled: props.disabled ?? field.disabled,\n    maxLength: props.maxLength ?? field.maxLength,\n  };\n};\n\nexport default useFormField;\n"],"mappings":";;;AAgBA,MAAa,qBAAqB,cAAuC,EAAE,CAAC;AAE5E,MAAM,gBAAgB,UAA4C;CAChE,MAAM,QAAQ,cAAc;CAC5B,MAAM,QAAQ,WAAW,mBAAmB;CAE5C,MAAM,UAAU,MAAM,WAAW,MAAM;AAEvC,QAAO;EACL,aAAa,MAAM,eAAe,MAAM;EACxC,UAAU,MAAM,YAAY,MAAM;EAClC,YAAY,MAAM,cAAc,MAAM;EACtC;EACA,cAAc,MAAM,gBAAgB,MAAM;EAC1C,aAAa,MAAM,eAAe,MAAM;EACxC,eAAe,MAAM,iBAAiB,MAAM;EAC5C,SAAS,MAAM,WAAW,MAAM;EAChC,UAAU,MAAM,YAAY,MAAM;EAClC,WAAW,MAAM,aAAa,MAAM;EACrC"}

package/dist/{useFormField--_14te0K.d.mts → useFormField-DDbo-ExT.d.mts}

@@ -1,4 +1,4 @@
-import { t as ErrorProps } from "./ErrorProps-7eWoxSes.mjs";
+import { t as ErrorProps } from "./ErrorProps-Dgu98PkH.mjs";
 import * as _$react from "react";
 
 //#region components/FormControl/useFormField.d.ts
@@ -27,4 +27,4 @@ declare const useFormField: (props: Partial<FormControlContextProps>) => {
 };
 //#endregion
 export { FormControlContextProps as n, useFormField as r, FormControlContext as t };
-//# sourceMappingURL=useFormField--_14te0K.d.mts.map
+//# sourceMappingURL=useFormField-DDbo-ExT.d.mts.map

package/dist/useFormField.d.mts

@@ -1,2 +1,2 @@
-import { n as FormControlContextProps, r as useFormField, t as FormControlContext } from "./useFormField--_14te0K.mjs";
+import { n as FormControlContextProps, r as useFormField, t as FormControlContext } from "./useFormField-DDbo-ExT.mjs";
 export { FormControlContext, FormControlContextProps, useFormField as default };

package/dist/{useFormGroup-y-duFylq.mjs → useFormGroup-C89-oI4w.mjs}

@@ -11,4 +11,4 @@ const useFormGroup = (props) => {
 //#endregion
 export { useFormGroup as n, FormGroupContext as t };
 
-//# sourceMappingURL=useFormGroup-y-duFylq.mjs.map
+//# sourceMappingURL=useFormGroup-C89-oI4w.mjs.map

package/dist/{useFormGroup-y-duFylq.mjs.map → useFormGroup-C89-oI4w.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"useFormGroup-y-duFylq.mjs","names":[],"sources":["../components/ConfigFormGroup/useFormGroup.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface FormGroupContextProps {\n  configField?: boolean;\n  /**\n   * The z-index to use when labels are rendered as tooltips (e.g. when configField is true).\n   */\n  labelTooltipZIndex?: number;\n}\n\nexport const FormGroupContext = createContext<FormGroupContextProps>({});\n\nconst useFormGroup = (props?: Partial<FormGroupContextProps>) => {\n  const field = useContext(FormGroupContext);\n\n  return {\n    configField: props?.configField ?? field.configField,\n    labelTooltipZIndex: props?.labelTooltipZIndex ?? field.labelTooltipZIndex,\n  };\n};\n\nexport default useFormGroup;\n"],"mappings":";;AAUA,MAAa,mBAAmB,cAAqC,EAAE,CAAC;AAExE,MAAM,gBAAgB,UAA2C;CAC/D,MAAM,QAAQ,WAAW,iBAAiB;AAE1C,QAAO;EACL,aAAa,OAAO,eAAe,MAAM;EACzC,oBAAoB,OAAO,sBAAsB,MAAM;EACxD"}
+{"version":3,"file":"useFormGroup-C89-oI4w.mjs","names":[],"sources":["../components/ConfigFormGroup/useFormGroup.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface FormGroupContextProps {\n  configField?: boolean;\n  /**\n   * The z-index to use when labels are rendered as tooltips (e.g. when configField is true).\n   */\n  labelTooltipZIndex?: number;\n}\n\nexport const FormGroupContext = createContext<FormGroupContextProps>({});\n\nconst useFormGroup = (props?: Partial<FormGroupContextProps>) => {\n  const field = useContext(FormGroupContext);\n\n  return {\n    configField: props?.configField ?? field.configField,\n    labelTooltipZIndex: props?.labelTooltipZIndex ?? field.labelTooltipZIndex,\n  };\n};\n\nexport default useFormGroup;\n"],"mappings":";;AAUA,MAAa,mBAAmB,cAAqC,EAAE,CAAC;AAExE,MAAM,gBAAgB,UAA2C;CAC/D,MAAM,QAAQ,WAAW,iBAAiB;AAE1C,QAAO;EACL,aAAa,OAAO,eAAe,MAAM;EACzC,oBAAoB,OAAO,sBAAsB,MAAM;EACxD"}

package/dist/useLocationPathname-K2N4fw8j.d.mts

@@ -0,0 +1,5 @@
+//#region lib/router/useLocationPathname.d.ts
+declare const usePathname: () => string;
+//#endregion
+export { usePathname as t };
+//# sourceMappingURL=useLocationPathname-K2N4fw8j.d.mts.map

package/dist/useLocationPathname.d.mts

@@ -0,0 +1,2 @@
+import { t as usePathname } from "./useLocationPathname-K2N4fw8j.mjs";
+export { usePathname };

package/dist/{useTableBoxDragAndDrop-DkCxC7Mi.d.mts → useTableBoxDragAndDrop-CbbH3pMK.d.mts}

@@ -66,4 +66,4 @@ declare const useTableBoxDragAndDrop: <T extends object>({
 }: UseTableBoxDragAndDropArgs<T>) => UseTableBoxDragAndDropResult;
 //#endregion
 export { ReorderConfig as n, useTableBoxDragAndDrop as r, DragDirection as t };
-//# sourceMappingURL=useTableBoxDragAndDrop-DkCxC7Mi.d.mts.map
+//# sourceMappingURL=useTableBoxDragAndDrop-CbbH3pMK.d.mts.map

package/dist/useTableBoxDragAndDrop.d.mts

@@ -1,2 +1,2 @@
-import { n as ReorderConfig, r as useTableBoxDragAndDrop, t as DragDirection } from "./useTableBoxDragAndDrop-DkCxC7Mi.mjs";
+import { n as ReorderConfig, r as useTableBoxDragAndDrop, t as DragDirection } from "./useTableBoxDragAndDrop-CbbH3pMK.mjs";
 export { DragDirection, ReorderConfig, useTableBoxDragAndDrop };

package/dist/{useToggle-0zLL1E7s.mjs → useToggle-DUHQjohK.mjs}

@@ -18,4 +18,4 @@ function useToggle(initialValue = false) {
 //#endregion
 export { useToggle as t };
 
-//# sourceMappingURL=useToggle-0zLL1E7s.mjs.map
+//# sourceMappingURL=useToggle-DUHQjohK.mjs.map

package/dist/{useToggle-0zLL1E7s.mjs.map → useToggle-DUHQjohK.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"useToggle-0zLL1E7s.mjs","names":[],"sources":["../lib/useToggle.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\ninterface UseToggleCallbacks {\n  set: (value: boolean) => void;\n  toggle: () => void;\n  enable: () => void;\n  disable: () => void;\n}\n\n/**\n * useToggle\n *\n * Boolean state hook that provides callbacks for enabling, disabling, flipping\n * and setting state.\n */\nexport default function useToggle(initialValue = false): [boolean, UseToggleCallbacks] {\n  const [value, setValue] = useState<boolean>(!!initialValue);\n  const set = useCallback((newValue: boolean) => setValue(newValue), []);\n  const toggle = useCallback(() => setValue(!value), [value]);\n  const enable = useCallback(() => setValue(true), []);\n  const disable = useCallback(() => setValue(false), []);\n  return [value, { set, toggle, enable, disable }];\n}\n"],"mappings":";;;;;;;;AAeA,SAAwB,UAAU,eAAe,OAAsC;CACrF,MAAM,CAAC,OAAO,YAAY,SAAkB,CAAC,CAAC,aAAa;AAK3D,QAAO,CAAC,OAAO;EAAE,KAJL,aAAa,aAAsB,SAAS,SAAS,EAAE,EAAE,CAIjD;EAAE,QAHP,kBAAkB,SAAS,CAAC,MAAM,EAAE,CAAC,MAAM,CAG9B;EAAE,QAFf,kBAAkB,SAAS,KAAK,EAAE,EAAE,CAEf;EAAE,SADtB,kBAAkB,SAAS,MAAM,EAAE,EAAE,CACR;EAAE,CAAC"}
+{"version":3,"file":"useToggle-DUHQjohK.mjs","names":[],"sources":["../lib/useToggle.ts"],"sourcesContent":["import { useCallback, useState } from 'react';\n\ninterface UseToggleCallbacks {\n  set: (value: boolean) => void;\n  toggle: () => void;\n  enable: () => void;\n  disable: () => void;\n}\n\n/**\n * useToggle\n *\n * Boolean state hook that provides callbacks for enabling, disabling, flipping\n * and setting state.\n */\nexport default function useToggle(initialValue = false): [boolean, UseToggleCallbacks] {\n  const [value, setValue] = useState<boolean>(!!initialValue);\n  const set = useCallback((newValue: boolean) => setValue(newValue), []);\n  const toggle = useCallback(() => setValue(!value), [value]);\n  const enable = useCallback(() => setValue(true), []);\n  const disable = useCallback(() => setValue(false), []);\n  return [value, { set, toggle, enable, disable }];\n}\n"],"mappings":";;;;;;;;AAeA,SAAwB,UAAU,eAAe,OAAsC;CACrF,MAAM,CAAC,OAAO,YAAY,SAAkB,CAAC,CAAC,aAAa;AAK3D,QAAO,CAAC,OAAO;EAAE,KAJL,aAAa,aAAsB,SAAS,SAAS,EAAE,EAAE,CAIjD;EAAE,QAHP,kBAAkB,SAAS,CAAC,MAAM,EAAE,CAAC,MAAM,CAG9B;EAAE,QAFf,kBAAkB,SAAS,KAAK,EAAE,EAAE,CAEf;EAAE,SADtB,kBAAkB,SAAS,MAAM,EAAE,EAAE,CACR;EAAE,CAAC"}

package/dist/useTruncation.d.mts

@@ -1,4 +1,4 @@
-import { i as ComboboxOption } from "./ComboboxBase-Ds_i3K2m.mjs";
+import { i as ComboboxOption } from "./ComboboxBase-B3Es1y9g.mjs";
 import { MutableRefObject, RefObject } from "react";
 
 //#region components/Combobox/useTruncation.d.ts

package/dist/{utilities-C1hOxjt_.d.mts → utilities-D0EhDri-.d.mts}

@@ -6,4 +6,4 @@
 type RequireOneOf<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & { [K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>> }[Keys];
 //#endregion
 export { RequireOneOf as t };
-//# sourceMappingURL=utilities-C1hOxjt_.d.mts.map
+//# sourceMappingURL=utilities-D0EhDri-.d.mts.map

package/dist/utilities.d.mts

@@ -1,2 +1,2 @@
-import { t as RequireOneOf } from "./utilities-C1hOxjt_.mjs";
+import { t as RequireOneOf } from "./utilities-D0EhDri-.mjs";
 export { RequireOneOf };

package/dist/utils/storybook.mjs

@@ -1,4 +1,4 @@
-import { n as Stack } from "../Stack-BqQndGI9.mjs";
+import { n as Stack } from "../Stack-ChsImaEY.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region utils/storybook.tsx
 const withStack = (Story) => {

package/dist/utils/testing.d.mts

@@ -1,3 +1,4 @@
+import { n as RouterAdapter } from "../types-CuQSgl1F.mjs";
 import { ReactElement } from "react";
 import * as _$_testing_library_react0 from "@testing-library/react";
 import { RenderOptions, screen } from "@testing-library/react";
@@ -6,6 +7,7 @@ import * as _$_testing_library_dom_types_queries0 from "@testing-library/dom/typ
 //#region utils/testing.d.ts
 declare const customRender: (ui: ReactElement, options?: Omit<RenderOptions, "wrapper"> & {
   includeRouter?: boolean;
+  routerAdapter?: RouterAdapter;
 }) => _$_testing_library_react0.RenderResult<typeof _$_testing_library_dom_types_queries0, HTMLElement, HTMLElement>;
 /**
  * TODO: Improve this helper or the Select to make querying it easer

package/dist/utils/testing.mjs

@@ -1,10 +1,10 @@
 import PDSProvider from "../lib/PDSProvider.mjs";
 import { RouterProvider } from "react-aria-components";
 import { Fragment, jsx } from "react/jsx-runtime";
-import { render, screen } from "@testing-library/react";
 import { RouterProvider as RouterProvider$1, createMemoryRouter } from "react-router-dom";
+import { render, screen } from "@testing-library/react";
 //#region utils/testing.tsx
-const AllTheProviders = ({ children, includeRouter = false }) => {
+const AllTheProviders = ({ children, includeRouter = false, routerAdapter }) => {
 	let router;
 	if (includeRouter) router = createMemoryRouter([{
 		path: "/internal-route",
@@ -13,14 +13,18 @@ const AllTheProviders = ({ children, includeRouter = false }) => {
 		path: "*",
 		element: /* @__PURE__ */ jsx(Fragment, { children })
 	}]);
-	return /* @__PURE__ */ jsx(PDSProvider, { children: router ? /* @__PURE__ */ jsx(RouterProvider, {
-		navigate: router.navigate,
-		children: /* @__PURE__ */ jsx(RouterProvider$1, { router })
-	}) : /* @__PURE__ */ jsx(Fragment, { children }) });
+	return /* @__PURE__ */ jsx(PDSProvider, {
+		router: routerAdapter,
+		children: router ? /* @__PURE__ */ jsx(RouterProvider, {
+			navigate: router.navigate,
+			children: /* @__PURE__ */ jsx(RouterProvider$1, { router })
+		}) : /* @__PURE__ */ jsx(Fragment, { children })
+	});
 };
 const customRender = (ui, options) => render(ui, {
 	wrapper: ({ children }) => /* @__PURE__ */ jsx(AllTheProviders, {
 		includeRouter: options?.includeRouter,
+		routerAdapter: options?.routerAdapter,
 		children
 	}),
 	...options

package/dist/utils/testing.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"testing.mjs","names":["ReactAriaRouterProvider","RouterProvider"],"sources":["../../utils/testing.tsx"],"sourcesContent":["import { render, type RenderOptions, screen } from '@testing-library/react';\nimport type { FC, PropsWithChildren, ReactElement } from 'react';\nimport { RouterProvider as ReactAriaRouterProvider } from 'react-aria-components';\nimport { createMemoryRouter, RouterProvider } from 'react-router-dom';\n\nimport PDSProvider from '@persona/design-system/lib/PDSProvider';\n\nconst AllTheProviders: FC<PropsWithChildren<{ includeRouter?: boolean }>> = ({\n  children,\n  includeRouter = false,\n}) => {\n  let router: ReturnType<typeof createMemoryRouter> | undefined;\n  if (includeRouter) {\n    router = createMemoryRouter([\n      {\n        path: '/internal-route',\n        element: <div>INTERNAL ROUTE</div>,\n      },\n      {\n        path: '*',\n        element: <>{children}</>,\n      },\n    ]);\n  }\n\n  return (\n    <PDSProvider>\n      {router ? (\n        <ReactAriaRouterProvider navigate={router.navigate}>\n          <RouterProvider router={router} />\n        </ReactAriaRouterProvider>\n      ) : (\n        <>{children}</>\n      )}\n    </PDSProvider>\n  );\n};\n\n// https://testing-library.com/docs/react-testing-library/setup/#custom-render\nconst customRender = (\n  ui: ReactElement,\n  options?: Omit<RenderOptions, 'wrapper'> & { includeRouter?: boolean },\n) =>\n  render(ui, {\n    wrapper: ({ children }) => (\n      <AllTheProviders includeRouter={options?.includeRouter}>{children}</AllTheProviders>\n    ),\n    ...options,\n  });\n\n/**\n * TODO: Improve this helper or the Select to make querying it easer\n */\nexport const getSelectByTrigger = (triggerLabel: string) => {\n  const triggerBtn = screen.getByText(triggerLabel).closest('button');\n\n  // Check to make sure it's a combobox button\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  if (triggerBtn.getAttribute('role') !== 'combobox') {\n    return null;\n  }\n\n  return triggerBtn;\n};\n\nexport const isInLoadingState = (screenObj: typeof screen) => {\n  expect(screenObj.queryAllByTestId('loading-shimmer').length).toBeGreaterThan(0);\n};\n\nexport const isNotInLoadingState = (screenObj: typeof screen) => {\n  expect(screenObj.queryAllByTestId('loading-shimmer').length).toBe(0);\n};\n\nexport { customRender as render };\n"],"mappings":";;;;;;AAOA,MAAM,mBAAuE,EAC3E,UACA,gBAAgB,YACZ;CACJ,IAAI;AACJ,KAAI,cACF,UAAS,mBAAmB,CAC1B;EACE,MAAM;EACN,SAAS,oBAAC,OAAD,EAAA,UAAK,kBAAoB,CAAA;EACnC,EACD;EACE,MAAM;EACN,SAAS,oBAAA,UAAA,EAAG,UAAY,CAAA;EACzB,CACF,CAAC;AAGJ,QACE,oBAAC,aAAD,EAAA,UACG,SACC,oBAACA,gBAAD;EAAyB,UAAU,OAAO;YACxC,oBAACC,kBAAD,EAAwB,QAAU,CAAA;EACV,CAAA,GAE1B,oBAAA,UAAA,EAAG,UAAY,CAAA,EAEL,CAAA;;AAKlB,MAAM,gBACJ,IACA,YAEA,OAAO,IAAI;CACT,UAAU,EAAE,eACV,oBAAC,iBAAD;EAAiB,eAAe,SAAS;EAAgB;EAA2B,CAAA;CAEtF,GAAG;CACJ,CAAC;;;;AAKJ,MAAa,sBAAsB,iBAAyB;CAC1D,MAAM,aAAa,OAAO,UAAU,aAAa,CAAC,QAAQ,SAAS;AAInE,KAAI,WAAW,aAAa,OAAO,KAAK,WACtC,QAAO;AAGT,QAAO;;AAGT,MAAa,oBAAoB,cAA6B;AAC5D,QAAO,UAAU,iBAAiB,kBAAkB,CAAC,OAAO,CAAC,gBAAgB,EAAE;;AAGjF,MAAa,uBAAuB,cAA6B;AAC/D,QAAO,UAAU,iBAAiB,kBAAkB,CAAC,OAAO,CAAC,KAAK,EAAE"}
+{"version":3,"file":"testing.mjs","names":["ReactAriaRouterProvider","RouterProvider"],"sources":["../../utils/testing.tsx"],"sourcesContent":["import { render, type RenderOptions, screen } from '@testing-library/react';\nimport type { FC, PropsWithChildren, ReactElement } from 'react';\nimport { RouterProvider as ReactAriaRouterProvider } from 'react-aria-components';\nimport { createMemoryRouter, RouterProvider } from 'react-router-dom';\n\nimport PDSProvider from '@persona/design-system/lib/PDSProvider';\nimport type { RouterAdapter } from '@persona/design-system/lib/router';\n\nconst AllTheProviders: FC<PropsWithChildren<{ includeRouter?: boolean; routerAdapter?: RouterAdapter }>> = ({\n  children,\n  includeRouter = false,\n  routerAdapter,\n}) => {\n  let router: ReturnType<typeof createMemoryRouter> | undefined;\n  if (includeRouter) {\n    router = createMemoryRouter([\n      {\n        path: '/internal-route',\n        element: <div>INTERNAL ROUTE</div>,\n      },\n      {\n        path: '*',\n        element: <>{children}</>,\n      },\n    ]);\n  }\n\n  return (\n    <PDSProvider router={routerAdapter}>\n      {router ? (\n        <ReactAriaRouterProvider navigate={router.navigate}>\n          <RouterProvider router={router} />\n        </ReactAriaRouterProvider>\n      ) : (\n        <>{children}</>\n      )}\n    </PDSProvider>\n  );\n};\n\n// https://testing-library.com/docs/react-testing-library/setup/#custom-render\nconst customRender = (\n  ui: ReactElement,\n  options?: Omit<RenderOptions, 'wrapper'> & {\n    includeRouter?: boolean;\n    routerAdapter?: RouterAdapter;\n  },\n) =>\n  render(ui, {\n    wrapper: ({ children }) => (\n      <AllTheProviders includeRouter={options?.includeRouter} routerAdapter={options?.routerAdapter}>\n        {children}\n      </AllTheProviders>\n    ),\n    ...options,\n  });\n\n/**\n * TODO: Improve this helper or the Select to make querying it easer\n */\nexport const getSelectByTrigger = (triggerLabel: string) => {\n  const triggerBtn = screen.getByText(triggerLabel).closest('button');\n\n  // Check to make sure it's a combobox button\n  /* @ts-expect-error [strict-migration] The following line is not strict; please fix! */\n  if (triggerBtn.getAttribute('role') !== 'combobox') {\n    return null;\n  }\n\n  return triggerBtn;\n};\n\nexport const isInLoadingState = (screenObj: typeof screen) => {\n  expect(screenObj.queryAllByTestId('loading-shimmer').length).toBeGreaterThan(0);\n};\n\nexport const isNotInLoadingState = (screenObj: typeof screen) => {\n  expect(screenObj.queryAllByTestId('loading-shimmer').length).toBe(0);\n};\n\nexport { customRender as render };\n"],"mappings":";;;;;;AAQA,MAAM,mBAAsG,EAC1G,UACA,gBAAgB,OAChB,oBACI;CACJ,IAAI;AACJ,KAAI,cACF,UAAS,mBAAmB,CAC1B;EACE,MAAM;EACN,SAAS,oBAAC,OAAD,EAAA,UAAK,kBAAoB,CAAA;EACnC,EACD;EACE,MAAM;EACN,SAAS,oBAAA,UAAA,EAAG,UAAY,CAAA;EACzB,CACF,CAAC;AAGJ,QACE,oBAAC,aAAD;EAAa,QAAQ;YAClB,SACC,oBAACA,gBAAD;GAAyB,UAAU,OAAO;aACxC,oBAACC,kBAAD,EAAwB,QAAU,CAAA;GACV,CAAA,GAE1B,oBAAA,UAAA,EAAG,UAAY,CAAA;EAEL,CAAA;;AAKlB,MAAM,gBACJ,IACA,YAKA,OAAO,IAAI;CACT,UAAU,EAAE,eACV,oBAAC,iBAAD;EAAiB,eAAe,SAAS;EAAe,eAAe,SAAS;EAC7E;EACe,CAAA;CAEpB,GAAG;CACJ,CAAC;;;;AAKJ,MAAa,sBAAsB,iBAAyB;CAC1D,MAAM,aAAa,OAAO,UAAU,aAAa,CAAC,QAAQ,SAAS;AAInE,KAAI,WAAW,aAAa,OAAO,KAAK,WACtC,QAAO;AAGT,QAAO;;AAGT,MAAa,oBAAoB,cAA6B;AAC5D,QAAO,UAAU,iBAAiB,kBAAkB,CAAC,OAAO,CAAC,gBAAgB,EAAE;;AAGjF,MAAa,uBAAuB,cAA6B;AAC/D,QAAO,UAAU,iBAAiB,kBAAkB,CAAC,OAAO,CAAC,KAAK,EAAE"}

package/dist/utils.d.mts

@@ -1,4 +1,4 @@
-import { u as FilterRuleValue } from "./types-1_JSe9Wr.mjs";
+import { u as FilterRuleValue } from "./types-I9z-0m7q.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/value-controls/utils.d.ts
 /**

package/dist/{validation-CpDsI-TM.d.mts → validation-C07D6XjI.d.mts}

@@ -1,5 +1,5 @@
-import { l as FilterRule, p as FilterStateV2 } from "./types-1_JSe9Wr.mjs";
-import { t as FieldRegistry } from "./FieldRegistry-BslyuPZw.mjs";
+import { l as FilterRule, p as FilterStateV2 } from "./types-I9z-0m7q.mjs";
+import { t as FieldRegistry } from "./FieldRegistry-BtdqMYUD.mjs";
 
 //#region components/DataTable/TableControls/FiltersV2/validation.d.ts
 /**
@@ -48,4 +48,4 @@ declare function pruneToRegistry(state: FilterStateV2, registry: FieldRegistry |
 declare function hasCompleteValue(rule: FilterRule, registry: FieldRegistry): boolean;
 //#endregion
 export { isFilterStateV2 as n, pruneToRegistry as r, hasCompleteValue as t };
-//# sourceMappingURL=validation-CpDsI-TM.d.mts.map
+//# sourceMappingURL=validation-C07D6XjI.d.mts.map

package/dist/validation.d.mts

@@ -1,2 +1,2 @@
-import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "./validation-CpDsI-TM.mjs";
+import { n as isFilterStateV2, r as pruneToRegistry, t as hasCompleteValue } from "./validation-C07D6XjI.mjs";
 export { hasCompleteValue, isFilterStateV2, pruneToRegistry };

package/dist/{value-control-resolver-DhaqxKmK.d.mts → value-control-resolver-zYNPNlRW.d.mts}

@@ -1,4 +1,4 @@
-import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, l as FilterRule, u as FilterRuleValue } from "./types-1_JSe9Wr.mjs";
+import { a as FilterField, c as FilterOperator, d as FilterRuleValueChange, l as FilterRule, u as FilterRuleValue } from "./types-I9z-0m7q.mjs";
 import { ReactNode } from "react";
 
 //#region components/DataTable/TableControls/FiltersV2/FilterBar/value-control-resolver.d.ts
@@ -45,4 +45,4 @@ type ValueControlResolver = (opts: ResolveValueControlOptions) => ReactNode | un
 declare function resolveValueControl(opts: ResolveValueControlOptions, hostResolver?: ValueControlResolver): ReactNode;
 //#endregion
 export { ValueControlResolver as n, resolveValueControl as r, ResolveValueControlOptions as t };
-//# sourceMappingURL=value-control-resolver-DhaqxKmK.d.mts.map
+//# sourceMappingURL=value-control-resolver-zYNPNlRW.d.mts.map

package/dist/value-control-resolver.d.mts

@@ -1,2 +1,2 @@
-import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "./value-control-resolver-DhaqxKmK.mjs";
+import { n as ValueControlResolver, r as resolveValueControl, t as ResolveValueControlOptions } from "./value-control-resolver-zYNPNlRW.mjs";
 export { ResolveValueControlOptions, ValueControlResolver, resolveValueControl };

package/dist/variables/effect.d.mts

@@ -1,4 +1,4 @@
-import { t as MaybeSemanticTheme } from "../semanticColor-DkVQjcbc.mjs";
+import { t as MaybeSemanticTheme } from "../semanticColor-IAhXS17y.mjs";
 
 //#region variables/effect.d.ts
 /**

package/dist/variables/semantic.d.mts

@@ -1,2 +1,2 @@
-import { i as semanticLight, n as SemanticTokens, r as semanticDark, t as CssPercentage } from "../semantic-Dy7mTyBP.mjs";
+import { i as semanticLight, n as SemanticTokens, r as semanticDark, t as CssPercentage } from "../semantic-DUctmpu_.mjs";
 export { CssPercentage, SemanticTokens, semanticDark, semanticLight };

package/llms.txt

@@ -13,10 +13,11 @@ For exact prop types, prefer the published type declarations (`dist/**/*.d.mts`,
 
 ## Skills
 
-- [ui-authoring](skills/ui-authoring/SKILL.md): design tokens, PDS implementation guidelines, table guidelines (DataTable vs TableBox vs TableLayout), loading states, testing, Storybook
+- [ui-authoring](skills/ui-authoring/SKILL.md): design tokens, PDS implementation guidelines, table guidelines (DataTable vs TableBox vs TableLayout), routing/link adapters (react-router, TanStack, custom), loading states, testing, Storybook
 - [Tokens](skills/ui-authoring/TOKENS.md): Color / Spacing / Typography selection and catalog, radius, charts
 - [Patterns](skills/ui-authoring/PATTERNS.md): forms, layout, indicators, feedback, empty states, charts, panels
 - [Components](skills/ui-authoring/COMPONENTS.md): which PDS component to use (and its import path); APIs live in that component's `.mdx` when one exists, otherwise in `dist/components/<Name>/index.d.mts`
+- [design-system-component-authoring](skills/design-system-component-authoring/SKILL.md): authoring a new PDS component in this repo — clarifying scope, component conventions, prop interface patterns
 
 ## Imports
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@persona/design-system",
-  "version": "0.5.1",
+  "version": "0.7.0",
   "description": "React components for Persona UI",
   "keywords": [
     "tanstack-intent"
@@ -107,6 +107,9 @@
     "./lib/PDSProvider": "./dist/lib/PDSProvider.mjs",
     "./lib/pseudoClass": "./dist/lib/pseudoClass.mjs",
     "./lib/reorderItems": "./dist/lib/reorderItems.mjs",
+    "./lib/router": "./dist/lib/router/index.mjs",
+    "./lib/router/adapters/reactRouter": "./dist/lib/router/adapters/reactRouter.mjs",
+    "./lib/router/adapters/tanstack": "./dist/lib/router/adapters/tanstack.mjs",
     "./lib/selectHelper": "./dist/lib/selectHelper.mjs",
     "./lib/semanticColor": "./dist/lib/semanticColor.mjs",
     "./lib/TruncatedText": "./dist/lib/TruncatedText.mjs",
@@ -114,6 +117,7 @@
     "./lib/useControlled": "./dist/lib/useControlled.mjs",
     "./lib/useEmbeddedSurface": "./dist/lib/useEmbeddedSurface.mjs",
     "./lib/useIsOverflow": "./dist/lib/useIsOverflow.mjs",
+    "./lib/useModalInsetRight": "./dist/lib/useModalInsetRight.mjs",
     "./lib/useOutsideClick": "./dist/lib/useOutsideClick.mjs",
     "./lib/useResizablePanel": "./dist/lib/useResizablePanel.mjs",
     "./lib/useScrollOverflow": "./dist/lib/useScrollOverflow.mjs",
@@ -193,11 +197,12 @@
   "devDependencies": {
     "@faker-js/faker": "^10.5.0",
     "@figma/code-connect": "^1.4.4",
-    "@persona/design-tokens": "0.4.15",
-    "@persona/icons": "0.1.4",
+    "@persona/design-tokens": "0.4.16",
+    "@persona/icons": "0.1.5",
     "@storybook/react": "^10.4.6",
     "@storybook/react-vite": "^10.4.6",
     "@tanstack/intent": "^0.3.6",
+    "@tanstack/react-router": "1.170.38",
     "@testing-library/dom": "^8.0.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^12.1.5",
@@ -234,6 +239,7 @@
   "peerDependencies": {
     "@persona/design-tokens": ">=0.4.5",
     "@persona/icons": ">=0.1.0",
+    "@tanstack/react-router": ">=1.0.0",
     "@testing-library/dom": ">=8",
     "@testing-library/react": ">=12",
     "@testing-library/user-event": ">=14",
@@ -243,6 +249,9 @@
     "styled-components": "^5.3.5"
   },
   "peerDependenciesMeta": {
+    "@tanstack/react-router": {
+      "optional": true
+    },
     "@testing-library/react": {
       "optional": true
     }
@@ -339,6 +348,9 @@
       "./lib/PDSProvider": "./dist/lib/PDSProvider.mjs",
       "./lib/pseudoClass": "./dist/lib/pseudoClass.mjs",
       "./lib/reorderItems": "./dist/lib/reorderItems.mjs",
+      "./lib/router": "./dist/lib/router/index.mjs",
+      "./lib/router/adapters/reactRouter": "./dist/lib/router/adapters/reactRouter.mjs",
+      "./lib/router/adapters/tanstack": "./dist/lib/router/adapters/tanstack.mjs",
       "./lib/selectHelper": "./dist/lib/selectHelper.mjs",
       "./lib/semanticColor": "./dist/lib/semanticColor.mjs",
       "./lib/TruncatedText": "./dist/lib/TruncatedText.mjs",
@@ -346,6 +358,7 @@
       "./lib/useControlled": "./dist/lib/useControlled.mjs",
       "./lib/useEmbeddedSurface": "./dist/lib/useEmbeddedSurface.mjs",
       "./lib/useIsOverflow": "./dist/lib/useIsOverflow.mjs",
+      "./lib/useModalInsetRight": "./dist/lib/useModalInsetRight.mjs",
       "./lib/useOutsideClick": "./dist/lib/useOutsideClick.mjs",
       "./lib/useResizablePanel": "./dist/lib/useResizablePanel.mjs",
       "./lib/useScrollOverflow": "./dist/lib/useScrollOverflow.mjs",

package/skills/design-system-component-authoring/SKILL.md

@@ -0,0 +1,79 @@
+---
+name: design-system-component-authoring
+description: Use when building a new Persona design system component under packages/design-system/components/, or turning a designer's description, Figma frame, or AI-generated first draft into one. Also use when determining prop interfaces, weighing `children` vs a typed `items` array, questioning a composer pattern, spotting props that allow impossible states, finding hardcoded colors or missing tokens, or seeing a component rebuild what an existing DS primitive already does.
+---
+
+# Design System Component Authoring
+
+## Overview
+
+Core principle: **model the real requirement with the smallest prop interface that makes impossible
+states unrepresentable, compose existing design-system components instead of rebuilding them, and
+ask before inventing scope.** A first pass built this way needs almost no engineer refactoring.
+
+These components usually start from a designer's description (the designer may not code), so the
+failure mode is predictable: guessing at scope, inventing props, reaching for the most
+flexible-looking type. Prefer clarifying questions and small, correct interfaces over feature-rich
+guesses.
+
+## When to use
+
+- Building a new component under `packages/design-system/components/`.
+- Turning a designer's description, a Figma frame, or an AI draft into a real DS component.
+
+**REQUIRED BACKGROUND — load this too:**
+
+- `ui-authoring` — design tokens (`Color`, `Spacing`, `Typography`), when to use `Stack`/`HStack`/`Text` instead of styled elements, and its `COMPONENTS.md`/`PATTERNS.md` catalog of existing components to compose from (also browse `packages/design-system/components/`).
+
+## Canonical example
+
+`packages/design-system/components/Breadcrumbs/` is the example to imitate: a constrained
+`BreadcrumbsItemProps[]` rendered by a private `Breadcrumb`; `onEdit?` gating inline editing with no
+`editable` boolean; composition from `IconButton`, `Input`, `Link`, `HStack`, `Paragraph`,
+`Tooltip`; semantic theme tokens; a `DEFAULT_EDIT_MAX_LENGTH` constant; and a barrel `index.ts`
+plus `Breadcrumbs.mdx` with `<Controls />`.
+
+## Step 1 — Clarify before building (do NOT assume)
+
+Ask the designer whenever scope, states, sizes, max lengths, content shape, or state ownership are
+unspecified — and never add props the designer didn't ask for. **REQUIRED:** read
+`clarifying-scope.md` (in this skill directory) for the exact questions to ask.
+
+## Step 2 — Design the prop interface
+
+The props ARE the contract; make incorrect usage impossible to express. **REQUIRED:** read
+`prop-interface-patterns.md` (in this skill directory) for the rules, the do/don't table, and the
+rationalizations that lead to bad interfaces.
+
+## Step 3 — Build it
+
+Compose from existing DS components (never copy their CSS), style only with design tokens, follow
+the standard file layout with a barrel `index.ts`, use real aria affordances, and ship a
+`ComponentName.mdx`. Also add a row to
+`packages/design-system/skills/ui-authoring/COMPONENTS.md` (Component / Use for / Import) so UI
+authors pick the new component instead of reinventing it. **REQUIRED:** read
+`component-conventions.md` (in this skill directory) for each of those in detail.
+
+## Step 4 — Handoff
+
+Add a component `.mdx` page in `persona-id/design-site`, following the structure of existing
+component docs, and open a separate PR. If this session cannot access or write to that repository,
+explicitly flag the documentation PR as a required follow-up rather than marking it complete.
+
+If you open a PR, open it as a **draft** so an engineer can pick it up and review before it goes to
+wider engineering review.
+
+## Red flags — STOP and reconsider (or ask the designer)
+
+- A boolean and a callback that mean the same thing (`editable` + `onEdit`).
+- `loading` and `data` (or `error` and `value`) that can both be set at once.
+- A `variant`/status string union with exactly two options.
+- `title` / `label` / tooltip text typed as `ReactNode`.
+- `children` accepted where the design wants a fixed set of items.
+- `styled(SomeDSComponent)` with hardcoded color overrides or arbitrary restyling — layout-only tweaks (margin/width/alignment) are fine — or CSS copied from another component.
+- A prop, variant, or feature the designer never asked for (`fullWidth`, extra sizes), or spreading arbitrary `...props` onto the root.
+- A context provider whose only job is passing a `size`/`variant`.
+- Hardcoded hex/px, or `Core*` foundational tokens where a semantic token exists.
+- Missing `index.ts`, `.mdx`, aria attributes, or a `COMPONENTS.md` picker row.
+- You assumed a constraint (some items editable, a specific max length) instead of asking.
+- MDX docs with long, difficult-to-scan prose.

package/skills/design-system-component-authoring/clarifying-scope.md

@@ -0,0 +1,18 @@
+# Clarifying scope with the designer
+
+Stop and ask when any of the following is unspecified. **Never invent constraints or scope.** A
+short question now prevents a rebuild later.
+
+| Designer says / leaves unstated               | Ask before coding                                                                                                                                                                                 |
+| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| "the items can be editable"                   | Are **all** items editable, or only some? Default: assume all behave the same. Do **not** invent a per-item `editable` flag.                                                                      |
+| A text/rename input                           | What is the max length we'd reasonably allow? Pick a sensible default and confirm it.                                                                                                             |
+| A "status" / "loading" component              | What are the exact, mutually-exclusive states? (drives the prop interface)                                                                                                                       |
+| Sizes/variants mentioned loosely              | Which sizes/variants actually exist? Don't add extras "for completeness".                                                                                                                        |
+| "designers can put whatever they want inside" | Should the contents be a constrained set of typed items (`items: ItemProps[]` + private child) or a genuinely open `children` slot? Surface this tradeoff — don't silently default to `children`. |
+| Nothing about ownership                       | Should the caller own the value (`value` + `onChange`) or should the component manage it internally?                                                                                              |
+
+Do **not** add props, variants, or features the designer did not ask for (e.g. `fullWidth`, extra
+variants, spreading arbitrary `...props` onto the root). A single optional `className` for external
+layout composition is fine (see `BreadcrumbsProps`); inventing feature props is not. If you think
+one is needed, propose it and ask — don't ship it silently.