kitunga-web 0.1.98 → 0.1.99

package/dist/features/inputs/components/Inputs/Toggle.d.ts

@@ -0,0 +1,12 @@
+import type React from 'react';
+export interface ToggleProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: React.ReactNode;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    className?: string;
+}
+export declare function Toggle({ checked, onChange, label, disabled, id, name, className, }: ToggleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Toggle.d.ts.map

package/dist/features/inputs/components/Inputs/Toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.d.ts","sourceRoot":"","sources":["../../../../../src/features/inputs/components/Inputs/Toggle.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAGD,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,EAAE,EACF,IAAI,EACJ,SAAc,GACf,EAAE,WAAW,2CAkBb"}

package/dist/features/inputs/components/Inputs/Toggle.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './Toggle.module.css';
+// Switch partilhado — a pill 40×22 com o thumb a deslizar.
+export function Toggle({ checked, onChange, label, disabled = false, id, name, className = '', }) {
+    return (_jsxs("label", { className: `${styles.wrapper} ${disabled ? styles.disabled : ''} ${className}`, children: [_jsxs("span", { className: styles.track, children: [_jsx("input", { type: "checkbox", id: id, name: name, checked: checked, disabled: disabled, onChange: (e) => onChange(e.target.checked), className: styles.input }), _jsx("span", { className: styles.thumb })] }), label && _jsx("span", { className: styles.label, children: label })] }));
+}
+//# sourceMappingURL=Toggle.js.map

package/dist/features/inputs/components/Inputs/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sourceRoot":"","sources":["../../../../../src/features/inputs/components/Inputs/Toggle.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,MAAM,MAAM,qBAAqB,CAAC;AAYzC,2DAA2D;AAC3D,MAAM,UAAU,MAAM,CAAC,EACrB,OAAO,EACP,QAAQ,EACR,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,EAAE,EACF,IAAI,EACJ,SAAS,GAAG,EAAE,GACF;IACZ,OAAO,CACL,iBAAO,SAAS,EAAE,GAAG,MAAM,CAAC,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,IAAI,SAAS,EAAE,aACnF,gBAAM,SAAS,EAAE,MAAM,CAAC,KAAK,aAC3B,gBACE,IAAI,EAAC,UAAU,EACf,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,EAC3C,SAAS,EAAE,MAAM,CAAC,KAAK,GACvB,EACF,eAAM,SAAS,EAAE,MAAM,CAAC,KAAK,GAAI,IAC5B,EACN,KAAK,IAAI,eAAM,SAAS,EAAE,MAAM,CAAC,KAAK,YAAG,KAAK,GAAQ,IACjD,CACT,CAAC;AACJ,CAAC"}

package/dist/features/inputs/components/Inputs/Toggle.module.css

@@ -0,0 +1,62 @@
+.wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.wrapper.disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.track {
+  position: relative;
+  width: 40px;
+  height: 22px;
+  border-radius: 999px;
+  background: var(--bg-hover-normal);
+  border: 1.5px solid var(--border-divider);
+  transition: background 0.15s ease, border-color 0.15s ease;
+  flex-shrink: 0;
+}
+
+.input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: inherit;
+}
+
+.thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--color-white);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+  transition: transform 0.15s ease;
+}
+
+.input:checked ~ .thumb {
+  transform: translateX(18px);
+}
+
+.track:has(.input:checked) {
+  background: var(--bg-interactive);
+  border-color: var(--bg-interactive);
+}
+
+.input:focus-visible ~ .thumb {
+  outline: 2px solid var(--bg-interactive);
+  outline-offset: 2px;
+}
+
+.label {
+  font-size: 0.875rem;
+  color: var(--text-primary);
+}

package/dist/features/selects/components/PickerSelect/PickerSelect.d.ts

@@ -0,0 +1,94 @@
+import React from 'react';
+import { type PickerSheetClassNames } from './PickerSheet';
+import { type PickerOption } from './pickerOptions';
+export interface PickerSelectClassNames extends PickerSheetClassNames {
+    /** Applied on the wrapper around the CustomSelect trigger. */
+    trigger?: string;
+    overlay?: string;
+    panel?: string;
+}
+export interface PickerSelectProps {
+    id?: string;
+    name?: string;
+    required?: boolean;
+    value: string;
+    onChange: (value: string) => void;
+    /** Explicit options — always wins over `kind`. */
+    options?: PickerOption[];
+    /** Convenience builders:
+     *  'country'  → every libphonenumber territory + Intl.DisplayNames
+     *               + flags from flagBaseUrl;
+     *  'language' → `locales` + `getLanguageLabel` + Globe glyph. */
+    kind?: 'country' | 'language';
+    /** Locale for Intl.DisplayNames + sort order (consumer's active
+     *  language; default 'en'). */
+    displayLocale?: string;
+    /** Base URL of the consumer's flag SVG assets (default '/flags/4x3'). */
+    flagBaseUrl?: string;
+    /** Priority country codes — product order, land in the
+     *  `suggestedLabel` group (kind='country'). */
+    priorityCodes?: readonly string[];
+    /** Header text for the priority group (kind='country'). */
+    suggestedLabel?: string;
+    /** Whitelist of locales for kind='language'. */
+    locales?: readonly string[];
+    /** Language name resolver — consumer's i18n. */
+    getLanguageLabel?: (locale: string) => string;
+    /** Per-row icon for kind='language' (default: Globe glyph). */
+    languageIcon?: React.ReactNode;
+    /** Texto do topo do sheet. */
+    title?: string;
+    /** Ícone do botão esquerdo do header (default ArrowLeft — no Masolo
+     *  só aparece no takeover ≤600px, via --picker-back-display). */
+    backIcon?: React.ReactNode;
+    /** Acção do botão esquerdo (default: fecha o sheet). */
+    onBack?: () => void;
+    /** aria-label do botão esquerdo. */
+    backAriaLabel?: string;
+    /** Ícone do botão de fecho à direita (default X). */
+    closeIcon?: React.ReactNode;
+    /** aria-label do botão de fecho. */
+    closeAriaLabel?: string;
+    /** Show the pinned SearchInput (default true). */
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    searchSize?: 'sm' | 'md' | 'lg';
+    /** Autofocus search on open (default false — mobile pops keyboard). */
+    searchAutoFocus?: boolean;
+    searchEmptyProps?: {
+        title?: string;
+        description?: string;
+        actionLabel?: string;
+    };
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'flat';
+    valueBold?: boolean;
+    collapsible?: boolean;
+    leftIcon?: React.ReactNode;
+    hasError?: boolean;
+    disabled?: boolean;
+    className?: string;
+    /** Class slots for the consumer's skin — media queries / breakpoint
+     *  rules always live in the consumer's CSS, never in kitunga. */
+    classNames?: PickerSelectClassNames;
+}
+/**
+ * PickerSelect — a selection sheet (overlay + header + search + grouped
+ * list) that uses CustomSelect purely as its visual trigger.
+ *
+ * The wrapped CustomSelect never opens its own dropdown: click and
+ * Enter/Space are intercepted in the capture phase by the wrapper, so
+ * the inner select stays closed and unaware. All sheet state lives
+ * here — the two components don't know about each other's internals.
+ *
+ * For consumers with their own popup manager (Masolo's PopupContext /
+ * PopupManager), mount `PickerSheet` inside the system's `.modal` —
+ * the overlay/panel anatomy comes from the consumer.
+ *
+ * Responsiveness is entirely the consumer's: every dimension/visibility
+ * knob is a `--picker-*` CSS var or a `classNames` slot.
+ */
+declare const PickerSelect: React.FC<PickerSelectProps>;
+export default PickerSelect;
+//# sourceMappingURL=PickerSelect.d.ts.map

package/dist/features/selects/components/PickerSelect/PickerSelect.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerSelect.d.ts","sourceRoot":"","sources":["../../../../../src/features/selects/components/PickerSelect/PickerSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAExE,OAAoB,EAAE,KAAK,qBAAqB,EAAE,MAAM,eAAe,CAAC;AACxE,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,iBAAiB,CAAC;AAGzB,MAAM,WAAW,sBAAuB,SAAQ,qBAAqB;IACnE,8DAA8D;IAC9D,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,kDAAkD;IAClD,OAAO,CAAC,EAAE,YAAY,EAAE,CAAC;IACzB;;;qEAGiE;IACjE,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B;mCAC+B;IAC/B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,yEAAyE;IACzE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;mDAC+C;IAC/C,aAAa,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAClC,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gDAAgD;IAChD,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;IAC5B,gDAAgD;IAChD,gBAAgB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,MAAM,CAAC;IAC9C,+DAA+D;IAC/D,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE/B,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;qEACiE;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,oCAAoC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,kDAAkD;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChC,uEAAuE;IACvE,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IAGF,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;qEACiE;IACjE,UAAU,CAAC,EAAE,sBAAsB,CAAC;CACrC;AAED;;;;;;;;;;;;;;;GAeG;AACH,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA4M7C,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/features/selects/components/PickerSelect/PickerSelect.js

@@ -0,0 +1,137 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import CustomSelect from '../Selects/CustomSelect';
+import PickerSheet from './PickerSheet';
+import { buildCountryPickerOptions, buildLanguagePickerOptions, } from './pickerOptions';
+import styles from './PickerSelect.module.css';
+/**
+ * PickerSelect — a selection sheet (overlay + header + search + grouped
+ * list) that uses CustomSelect purely as its visual trigger.
+ *
+ * The wrapped CustomSelect never opens its own dropdown: click and
+ * Enter/Space are intercepted in the capture phase by the wrapper, so
+ * the inner select stays closed and unaware. All sheet state lives
+ * here — the two components don't know about each other's internals.
+ *
+ * For consumers with their own popup manager (Masolo's PopupContext /
+ * PopupManager), mount `PickerSheet` inside the system's `.modal` —
+ * the overlay/panel anatomy comes from the consumer.
+ *
+ * Responsiveness is entirely the consumer's: every dimension/visibility
+ * knob is a `--picker-*` CSS var or a `classNames` slot.
+ */
+const PickerSelect = ({ id, name, required = false, value, onChange, options, kind, displayLocale, flagBaseUrl, priorityCodes, suggestedLabel, locales, getLanguageLabel, languageIcon, title = 'Select', backIcon, onBack, backAriaLabel, closeIcon, closeAriaLabel, searchable = true, searchPlaceholder, searchSize = 'md', searchAutoFocus = false, searchEmptyProps, placeholder = 'Selecione uma opção', size = 'md', variant = 'default', valueBold = false, collapsible = false, leftIcon, hasError = false, disabled = false, className = '', classNames, }) => {
+    var _a, _b, _c, _d;
+    const [isOpen, setIsOpen] = useState(false);
+    // Transient history entry — mobile back gesture/button pops it and
+    // closes the sheet (same model as Masolo's PopupContext, router-free).
+    const pushedRef = useRef(false);
+    const resolvedOptions = React.useMemo(() => {
+        if (options === null || options === void 0 ? void 0 : options.length)
+            return options;
+        if (kind === 'country') {
+            return buildCountryPickerOptions({
+                displayLocale,
+                flagBaseUrl,
+                priorityCodes,
+                suggestedLabel,
+            });
+        }
+        if (kind === 'language') {
+            return buildLanguagePickerOptions({
+                locales: locales !== null && locales !== void 0 ? locales : [],
+                getLanguageLabel,
+                displayLocale,
+                languageIcon,
+            });
+        }
+        return options !== null && options !== void 0 ? options : [];
+    }, [
+        options,
+        kind,
+        displayLocale,
+        flagBaseUrl,
+        priorityCodes,
+        suggestedLabel,
+        locales,
+        getLanguageLabel,
+        languageIcon,
+    ]);
+    // Close: if the history entry is ours, back() pops it and the
+    // popstate listener flips isOpen; otherwise just flip the state.
+    const closeSheet = useCallback(() => {
+        if (pushedRef.current) {
+            pushedRef.current = false;
+            window.history.back();
+            return;
+        }
+        setIsOpen(false);
+    }, []);
+    const openSheet = useCallback(() => {
+        if (disabled || isOpen)
+            return;
+        setIsOpen(true);
+        if (typeof window !== 'undefined') {
+            pushedRef.current = true;
+            window.history.pushState({ __kitungaPickerSelect: true }, '');
+        }
+    }, [disabled, isOpen]);
+    // popstate — the OS/browser back popped our entry: close the sheet.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handlePopState = () => {
+            pushedRef.current = false;
+            setIsOpen(false);
+        };
+        window.addEventListener('popstate', handlePopState);
+        return () => window.removeEventListener('popstate', handlePopState);
+    }, [isOpen]);
+    // ESC + page scroll lock while the sheet is open.
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === 'Escape')
+                closeSheet();
+        };
+        window.addEventListener('keydown', handleKeyDown);
+        document.body.style.overflow = 'hidden';
+        return () => {
+            window.removeEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen, closeSheet]);
+    const handleTriggerClick = (e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        if (isOpen)
+            closeSheet();
+        else
+            openSheet();
+    };
+    const handleTriggerKey = (e) => {
+        if (disabled)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            e.stopPropagation();
+            if (isOpen)
+                closeSheet();
+            else
+                openSheet();
+        }
+    };
+    const handleSelect = (option) => {
+        if (option.disabled)
+            return;
+        onChange(option.value);
+        closeSheet();
+    };
+    return (_jsxs("div", { className: `${styles.pickerSelect} ${className}`, children: [_jsx("div", { className: `${styles.triggerWrap} ${(_a = classNames === null || classNames === void 0 ? void 0 : classNames.trigger) !== null && _a !== void 0 ? _a : ''}`, onClickCapture: handleTriggerClick, onKeyDownCapture: handleTriggerKey, children: _jsx(CustomSelect, { value: value, onChange: onChange, options: resolvedOptions, placeholder: placeholder, size: size, variant: variant, valueBold: valueBold, collapsible: collapsible, leftIcon: leftIcon, hasError: hasError, disabled: disabled, className: (_b = classNames === null || classNames === void 0 ? void 0 : classNames.trigger) !== null && _b !== void 0 ? _b : '' }) }), isOpen && (_jsx("div", { className: `${styles.overlay} ${(_c = classNames === null || classNames === void 0 ? void 0 : classNames.overlay) !== null && _c !== void 0 ? _c : ''}`, onClick: closeSheet, role: "dialog", "aria-modal": "true", "aria-label": title, children: _jsx("div", { className: `${styles.panel} ${(_d = classNames === null || classNames === void 0 ? void 0 : classNames.panel) !== null && _d !== void 0 ? _d : ''}`, onClick: (e) => e.stopPropagation(), children: _jsx(PickerSheet, { options: resolvedOptions, value: value, onSelect: handleSelect, onClose: closeSheet, title: title, backIcon: backIcon, onBack: onBack, backAriaLabel: backAriaLabel, closeIcon: closeIcon, closeAriaLabel: closeAriaLabel, searchable: searchable, searchPlaceholder: searchPlaceholder, searchSize: searchSize, searchAutoFocus: searchAutoFocus, searchEmptyProps: searchEmptyProps, classNames: classNames }) }) })), _jsx("input", { type: "hidden", id: id, name: name, value: value, required: required })] }));
+};
+export default PickerSelect;
+//# sourceMappingURL=PickerSelect.js.map

package/dist/features/selects/components/PickerSelect/PickerSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerSelect.js","sourceRoot":"","sources":["../../../../../src/features/selects/components/PickerSelect/PickerSelect.tsx"],"names":[],"mappings":"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"}

package/dist/features/selects/components/PickerSelect/PickerSelect.module.css

@@ -0,0 +1,228 @@
+/* ===== PickerSelect — overlay-sheet with header, search and grouped
+   sections, for long lists with visual identity (countries, languages).
+   The trigger is a wrapped CustomSelect; the sheet lives entirely here.
+   ZERO breakpoints: the consumer's skin drives every responsive rule
+   through the --picker-* vars and the `classNames` slots — kitunga does
+   not know the Masolo 600px rule or any other product's (decision 75). */
+
+.pickerSelect {
+  position: relative;
+  width: 100%;
+}
+
+/* Wrapper that hijacks click/keys on the wrapped CustomSelect so its
+   own dropdown never opens. */
+.triggerWrap {
+  width: 100%;
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--picker-overlay-z, 1300);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100dvh;
+  padding: var(--picker-overlay-padding, var(--spacing-lg));
+  background: var(--picker-overlay-bg, rgba(0, 0, 0, 0.5));
+  animation: pickerFadeIn 0.15s ease-out;
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: var(--picker-panel-width, 100%);
+  max-width: var(--picker-panel-max-width, 480px);
+  height: var(--picker-panel-height, 600px);
+  max-height: var(--picker-panel-max-height, 100%);
+  background: var(--picker-panel-bg, var(--bg-primary));
+  border-radius: var(--picker-panel-radius, var(--radius-sm));
+  box-shadow: var(--picker-panel-shadow, 0 10px 25px rgba(0, 0, 0, 0.2));
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding: var(--spacing-md);
+  flex-shrink: 0;
+}
+
+.title {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--text-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.back,
+.close {
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: var(--picker-button-bg, var(--bg-hover-normal));
+  color: var(--picker-button-color, var(--text-primary));
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: background-color var(--transition-fast);
+}
+
+.back:hover,
+.close:hover {
+  background-color: var(--picker-button-hover, var(--color-gray-200));
+}
+
+/* Control visibility — always the consumer's CSS. In Masolo the X
+   dies and the ← appears in the ≤600px takeover, via
+   --picker-back-display / --picker-close-display in the app's own
+   media query. Both are "close": ← is back in form, close in function
+   (decision 30). */
+.back {
+  display: var(--picker-back-display, none);
+}
+
+.close {
+  display: var(--picker-close-display, flex);
+}
+
+/* Espaço uniforme à volta da pesquisa — spacing-md em todos os
+   lados, como a anatomia da casa (o header acima já traz o seu
+   padding-md, pelo que o respiro X→input fica md+md). */
+.searchRow {
+  padding: var(--picker-search-padding, var(--spacing-md));
+  border-bottom: 1px solid var(--picker-search-border, var(--border-divider));
+  flex-shrink: 0;
+}
+
+.list {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  /* The parent list breathes: spacing-md top/bottom, 8px on the
+     sides — items float inside the panel, never glued to the edges. */
+  padding: var(--picker-list-padding, var(--spacing-md) var(--spacing-sm));
+}
+
+/* Section header — just another list item: scrolls with the list,
+   never sticky/absolute. */
+.groupHeader {
+  padding: var(--spacing-sm) var(--picker-group-padding-x, var(--spacing-sm));
+  font-size: var(--picker-group-size, 0.8rem);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--picker-group-color, var(--text-tertiary));
+}
+
+/* Picker rows — the reference list style (decision 75): no dividers
+   between rows, gray hover (EntityRow colors), light-blue selected
+   (--selection-bg) + CheckBadge on the right. Each item carries its
+   own 8px padding and radius-sm. */
+.option {
+  min-height: var(--picker-option-height, 52px);
+  padding: var(--picker-option-padding, var(--spacing-sm));
+  border-radius: var(--picker-option-radius, var(--radius-sm));
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  transition: all 0.12s ease;
+  color: var(--text-primary);
+  font-weight: 400;
+}
+
+.option span {
+  font-size: var(--picker-option-font-size, 1rem);
+  line-height: 1.3;
+}
+
+/* O gap global entre itens (--entity-row-gap) — via `~` para que o
+   primeiro filho nunca leve espaço e as cores de hover/selecção
+   nunca se colem. */
+.list > * ~ * {
+  margin-top: var(--picker-option-gap, var(--entity-row-gap, 2px));
+}
+
+.option:hover {
+  background-color: var(--bg-hover-normal);
+}
+
+.option.selected {
+  background-color: var(--picker-option-selected-bg, #f2f6fe);
+  color: var(--picker-option-selected-text, var(--selection-text));
+  font-weight: var(--picker-option-selected-weight, 700);
+}
+
+.option.disabledOption {
+  opacity: 0.45;
+  cursor: not-allowed;
+  color: var(--text-tertiary);
+  background-color: var(--bg-primary);
+  pointer-events: none;
+}
+
+.optionText {
+  display: inline-flex;
+  align-items: center;
+  min-width: 0;
+}
+
+/* Row icons in the picker list — the same circular 24px frame as the
+   CustomSelect trigger: img/svg children fill it and the circle crops
+   (flags always read round, trigger and list consistent). */
+.optionIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--picker-icon-size, 24px);
+  height: var(--picker-icon-size, 24px);
+  border-radius: var(--picker-icon-radius, 50%);
+  overflow: hidden;
+  flex-shrink: 0;
+  font-size: 1rem;
+  margin-right: var(--spacing-md);
+}
+
+.optionIcon > img,
+.optionIcon > svg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
+
+.option:focus-visible {
+  outline: none;
+  background-color: var(--bg-tertiary);
+  color: var(--color-primary);
+}
+
+/* Flag fallback when the asset fails — ISO text inside the same
+   rectangular frame (a consumer with partial flagBaseUrl never shows
+   a broken image). */
+.flagFallback {
+  font-size: 0.55rem;
+  font-weight: 700;
+  letter-spacing: 0.02em;
+  color: var(--text-tertiary);
+}
+
+@keyframes pickerFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

package/dist/features/selects/components/PickerSelect/PickerSheet.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import type { PickerOption } from './pickerOptions';
+export interface PickerSheetClassNames {
+    header?: string;
+    backButton?: string;
+    closeButton?: string;
+    searchRow?: string;
+    list?: string;
+    groupHeader?: string;
+    option?: string;
+}
+export interface PickerSheetProps {
+    options: PickerOption[];
+    value: string;
+    onSelect: (option: PickerOption) => void;
+    /** Chamado pelos controlos de fecho/voltar do header e pelo ESC. */
+    onClose: () => void;
+    /** Texto do topo do sheet. */
+    title?: string;
+    /** Ícone do botão esquerdo do header (default ArrowLeft — no Masolo
+     *  só aparece no takeover ≤600px, via --picker-back-display). */
+    backIcon?: React.ReactNode;
+    /** Acção do botão esquerdo (default: onClose). */
+    onBack?: () => void;
+    /** aria-label do botão esquerdo. */
+    backAriaLabel?: string;
+    /** Ícone do botão de fecho à direita (default X). */
+    closeIcon?: React.ReactNode;
+    /** aria-label do botão de fecho. */
+    closeAriaLabel?: string;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    searchSize?: 'sm' | 'md' | 'lg';
+    searchAutoFocus?: boolean;
+    searchEmptyProps?: {
+        title?: string;
+        description?: string;
+        actionLabel?: string;
+    };
+    classNames?: PickerSheetClassNames;
+}
+/**
+ * PickerSheet — o conteúdo da folha (header + pesquisa + lista
+ * agrupada), SEM overlay. É o que o PickerSelect renderiza dentro do
+ * seu próprio overlay — e o que um consumidor com popup manager
+ * próprio (ex.: o PopupManager do Masolo) monta dentro do seu `.modal`
+ * para obter a anatomia 500×600 / takeover / X→← do próprio sistema.
+ */
+declare const PickerSheet: React.FC<PickerSheetProps>;
+export default PickerSheet;
+//# sourceMappingURL=PickerSheet.d.ts.map

package/dist/features/selects/components/PickerSelect/PickerSheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PickerSheet.d.ts","sourceRoot":"","sources":["../../../../../src/features/selects/components/PickerSelect/PickerSheet.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAKxC,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAGpD,MAAM,WAAW,qBAAqB;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,gBAAgB;IAC/B,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IACzC,oEAAoE;IACpE,OAAO,EAAE,MAAM,IAAI,CAAC;IAEpB,8BAA8B;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;qEACiE;IACjE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,qDAAqD;IACrD,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,oCAAoC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,UAAU,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IAChC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE;QACjB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IAEF,UAAU,CAAC,EAAE,qBAAqB,CAAC;CACpC;AAQD;;;;;;GAMG;AACH,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAiI3C,CAAC;AAEF,eAAe,WAAW,CAAC"}