nepal-places-react 0.1.1 → 0.3.0

package/README.md

@@ -0,0 +1,51 @@
+# nepal-places-react
+
+React dropdown component for Nepal's Provinces, Districts, Municipalities, Wards, and Places. Built on top of `nepal-places`.
+
+```
+npm install nepal-places-react
+```
+
+## Usage
+
+```tsx
+import { NepalPlacesDropdown } from 'nepal-places-react'
+
+function AddressForm() {
+  return (
+    <NepalPlacesDropdown
+      depth={3}
+      onChange={(selection) => console.log(selection)}
+    />
+  )
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `depth` | `1`-`5` | `2` | Number of cascade levels |
+| `mode` | `'cascade'` \| `'flat'` | `'cascade'` | Selection mode |
+| `labels` | `'english'` \| `'nepali'` | `'english'` | Display language |
+| `flat` | `boolean` | `false` | Return flat code string |
+| `filterType` | `LocalLevelType` | — | Filter by local level type |
+| `searchable` | `boolean` | `true` | Enable search |
+| `clearable` | `boolean` | `false` | Show clear button |
+| `disabled` | `boolean` | `false` | Disable the dropdown |
+| `placeholder` | `string` | — | Input placeholder text |
+| `onChange` | `(value) => void` | — | Selection callback |
+
+## Depth levels
+
+| Depth | Levels |
+|-------|--------|
+| `1` | Province |
+| `2` | Province → District |
+| `3` | Province → District → Municipality |
+| `4` | Province → District → Municipality → Ward |
+| `5` | Province → District → Municipality → Ward → Place |
+
+## License
+
+MIT — [kushal1o1](https://github.com/kushal1o1)

package/dist/NepalPlacesDropdown.d.ts

@@ -1,2 +1,2 @@
 import type { NepalPlacesDropdownProps } from './types.js';
-export declare function NepalPlacesDropdown({ depth, labels, flat, filterType, className, onChange, }: NepalPlacesDropdownProps): import("react").JSX.Element;
+export declare function NepalPlacesDropdown({ depth, mode, labels, flat, filterType, className, style: wrapperStyle, theme, searchable, clearable, disabled, selectClassName, inputClassName, dropdownClassName, optionClassName, placeholder, noOptionsMessage, onChange, }: NepalPlacesDropdownProps): import("react").JSX.Element;

package/dist/NepalPlacesDropdown.js

@@ -1,11 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { getDistricts, getMunicipalities, getProvinces, } from 'nepal-places';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { getDistricts, getMunicipalities, getPlaces, getProvinces, } from 'nepal-places';
 import { useEffect, useMemo, useRef, useState } from 'react';
-export function NepalPlacesDropdown({ depth = 4, labels = 'english', flat = false, filterType, className, onChange, }) {
+import { SearchableSelect } from './SearchableSelect.js';
+import { SinglePlacePicker } from './SinglePlacePicker.js';
+const defaults = {
+    province: 'Province',
+    district: 'District',
+    municipality: 'Municipality',
+    ward: 'Ward',
+    place: 'Place',
+};
+const nepalDefaults = {
+    province: 'प्रदेश',
+    district: 'जिल्ला',
+    municipality: 'स्थानीय तह',
+    ward: 'वडा',
+    place: 'स्थान',
+};
+export function NepalPlacesDropdown({ depth = 4, mode = 'cascade', labels = 'english', flat = false, filterType, className, style: wrapperStyle, theme, searchable = true, clearable = true, disabled = false, selectClassName, inputClassName, dropdownClassName, optionClassName, placeholder, noOptionsMessage, onChange, }) {
     const [provinceId, setProvinceId] = useState('');
     const [districtId, setDistrictId] = useState('');
     const [localLevelId, setLocalLevelId] = useState('');
     const [wardId, setWardId] = useState('');
+    const [placeId, setPlaceId] = useState('');
     const mounted = useRef(false);
     const provinces = useMemo(() => getProvinces(), []);
     const districts = useMemo(() => (provinceId ? getDistricts(Number(provinceId)) : []), [provinceId]);
@@ -13,7 +30,11 @@ export function NepalPlacesDropdown({ depth = 4, labels = 'english', flat = fals
         if (!districtId)
             return [];
         const all = getMunicipalities(Number(districtId));
-        return filterType ? all.filter((m) => m.type === filterType) : all;
+        const filtered = filterType ? all.filter((m) => m.type === filterType) : all;
+        return filtered.map((m) => ({
+            ...m,
+            name: filterType ? m.name : `${m.name} (${m.type.replace('_', ' ')})`,
+        }));
     }, [districtId, filterType]);
     const selectedLocalLevel = useMemo(() => localLevels.find((m) => m.id === Number(localLevelId)), [localLevels, localLevelId]);
     const wards = useMemo(() => {
@@ -29,12 +50,20 @@ export function NepalPlacesDropdown({ depth = 4, labels = 'english', flat = fals
         }
         return list;
     }, [selectedLocalLevel]);
-    const name = (item) => labels === 'nepali' && item.name_np ? item.name_np : item.name;
+    const wardOptions = useMemo(() => wards.map((w) => ({
+        id: w.id,
+        name: labels === 'nepali'
+            ? `वडा ${w.ward_number}`
+            : `Ward ${w.ward_number}`,
+        name_np: `वडा ${w.ward_number}`,
+    })), [wards, labels]);
+    const places = useMemo(() => (wardId ? getPlaces(Number(wardId)) : []), [wardId]);
     const output = useMemo(() => {
         const province = provinces.find((p) => p.id === Number(provinceId));
         const district = districts.find((d) => d.id === Number(districtId));
         const localLevel = localLevels.find((m) => m.id === Number(localLevelId));
         const ward = wards.find((w) => w.id === Number(wardId));
+        const place = places.find((p) => p.id === Number(placeId));
         const sel = {};
         if (province)
             sel.province = province;
@@ -44,6 +73,8 @@ export function NepalPlacesDropdown({ depth = 4, labels = 'english', flat = fals
             sel.localLevel = localLevel;
         if (ward)
             sel.ward = ward;
+        if (place)
+            sel.place = place;
         if (flat) {
             const parts = [];
             if (province)
@@ -54,6 +85,8 @@ export function NepalPlacesDropdown({ depth = 4, labels = 'english', flat = fals
                 parts.push(String(localLevel.id));
             if (ward)
                 parts.push(String(ward.ward_number));
+            if (place)
+                parts.push(String(place.id));
             sel.code = parts.join('/');
         }
         return sel;
@@ -62,10 +95,12 @@ export function NepalPlacesDropdown({ depth = 4, labels = 'english', flat = fals
         districtId,
         localLevelId,
         wardId,
+        placeId,
         provinces,
         districts,
         localLevels,
         wards,
+        places,
         flat,
     ]);
     useEffect(() => {
@@ -75,13 +110,44 @@ export function NepalPlacesDropdown({ depth = 4, labels = 'english', flat = fals
         }
         onChange?.(output);
     }, [output, onChange]);
-    const onSelect = (set, ...clear) => (e) => {
-        const v = e.target.value ? Number(e.target.value) : '';
-        set(v);
+    const handle = (set, ...clear) => (value) => {
+        set(value);
         for (const fn of clear)
             fn('');
     };
-    return (_jsxs("div", { className: `np-places-dropdown ${className ?? ''}`, style: { display: 'flex', gap: '8px', flexWrap: 'wrap' }, children: [depth >= 1 && (_jsxs("select", { className: "np-places-select", value: provinceId, onChange: onSelect(setProvinceId, setDistrictId, setLocalLevelId, setWardId), children: [_jsx("option", { value: "", children: labels === 'nepali' ? 'प्रदेश' : 'Province' }), provinces.map((p) => (_jsx("option", { value: p.id, children: name(p) }, p.id)))] })), depth >= 2 && provinceId !== '' && (_jsxs("select", { className: "np-places-select", value: districtId, onChange: onSelect(setDistrictId, setLocalLevelId, setWardId), children: [_jsx("option", { value: "", children: labels === 'nepali' ? 'जिल्ला' : 'District' }), districts.map((d) => (_jsx("option", { value: d.id, children: name(d) }, d.id)))] })), depth >= 3 && districtId !== '' && (_jsxs("select", { className: "np-places-select", value: localLevelId, onChange: onSelect(setLocalLevelId, setWardId), children: [_jsx("option", { value: "", children: labels === 'nepali' ? 'स्थानीय तह' : 'Municipality' }), localLevels.map((m) => (_jsxs("option", { value: m.id, children: [name(m), filterType ? '' : ` (${m.type.replace('_', ' ')})`] }, m.id)))] })), depth >= 4 && localLevelId !== '' && wards.length > 0 && (_jsxs("select", { className: "np-places-select", value: wardId, onChange: onSelect(setWardId), children: [_jsx("option", { value: "", children: labels === 'nepali' ? 'वडा' : 'Ward' }), wards.map((w) => (_jsx("option", { value: w.id, children: labels === 'nepali'
-                            ? `वडा ${w.ward_number}`
-                            : `Ward ${w.ward_number}` }, w.id)))] }))] }));
+    const handleSingle = (p, d, m) => {
+        setProvinceId(p);
+        setDistrictId(d);
+        setLocalLevelId(m);
+        setWardId('');
+        setPlaceId('');
+    };
+    const ph = (level) => {
+        if (placeholder && typeof placeholder === 'object') {
+            return placeholder[level] ?? defaults[level];
+        }
+        if (placeholder && typeof placeholder === 'string') {
+            return placeholder;
+        }
+        return labels === 'nepali' ? nepalDefaults[level] : defaults[level];
+    };
+    const shared = {
+        labels,
+        searchable,
+        clearable,
+        disabled,
+        className: selectClassName,
+        inputClassName,
+        dropdownClassName,
+        optionClassName,
+        noOptionsMessage,
+        theme,
+    };
+    const singlePlaceholder = typeof placeholder === 'string' ? placeholder : 'Search places in Nepal...';
+    return (_jsx("div", { className: `np-places-dropdown${className ? ` ${className}` : ''}`, style: {
+            display: 'flex',
+            gap: '8px',
+            flexWrap: 'wrap',
+            ...wrapperStyle,
+        }, children: mode === 'single' ? (_jsxs(_Fragment, { children: [_jsx(SinglePlacePicker, { provinceId: provinceId, districtId: districtId, localLevelId: localLevelId, onChange: handleSingle, labels: labels, disabled: disabled, clearable: clearable, placeholder: singlePlaceholder, className: selectClassName, inputClassName: inputClassName, dropdownClassName: dropdownClassName, optionClassName: optionClassName, noOptionsMessage: noOptionsMessage, theme: theme }), depth >= 4 && localLevelId !== '' && wards.length > 0 && (_jsx(SearchableSelect, { options: wardOptions, value: wardId, onChange: handle(setWardId, setPlaceId), placeholder: ph('ward'), ...shared })), depth >= 5 && wardId !== '' && places.length > 0 && (_jsx(SearchableSelect, { options: places, value: placeId, onChange: handle(setPlaceId), placeholder: ph('place'), ...shared }))] })) : (_jsxs(_Fragment, { children: [depth >= 1 && (_jsx(SearchableSelect, { options: provinces, value: provinceId, onChange: handle(setProvinceId, setDistrictId, setLocalLevelId, setWardId, setPlaceId), placeholder: ph('province'), ...shared })), depth >= 2 && provinceId !== '' && (_jsx(SearchableSelect, { options: districts, value: districtId, onChange: handle(setDistrictId, setLocalLevelId, setWardId, setPlaceId), placeholder: ph('district'), ...shared })), depth >= 3 && districtId !== '' && (_jsx(SearchableSelect, { options: localLevels, value: localLevelId, onChange: handle(setLocalLevelId, setWardId, setPlaceId), placeholder: ph('municipality'), ...shared })), depth >= 4 && localLevelId !== '' && wards.length > 0 && (_jsx(SearchableSelect, { options: wardOptions, value: wardId, onChange: handle(setWardId, setPlaceId), placeholder: ph('ward'), ...shared })), depth >= 5 && wardId !== '' && places.length > 0 && (_jsx(SearchableSelect, { options: places, value: placeId, onChange: handle(setPlaceId), placeholder: ph('place'), ...shared }))] })) }));
 }

package/dist/SearchableSelect.d.ts

@@ -0,0 +1,30 @@
+export interface SearchableSelectOption {
+    id: number;
+    name: string;
+    name_np?: string;
+}
+export interface SearchableSelectProps {
+    options: SearchableSelectOption[];
+    value: number | '';
+    onChange: (value: number | '') => void;
+    placeholder?: string;
+    disabled?: boolean;
+    labels?: 'english' | 'nepali';
+    className?: string;
+    inputClassName?: string;
+    dropdownClassName?: string;
+    optionClassName?: string;
+    clearable?: boolean;
+    searchable?: boolean;
+    noOptionsMessage?: string;
+    theme?: {
+        borderColor?: string;
+        borderColorFocus?: string;
+        borderRadius?: number;
+        bg?: string;
+        textColor?: string;
+        shadow?: string;
+        accentColor?: string;
+    };
+}
+export declare function SearchableSelect({ options, value, onChange, placeholder, disabled, labels, className, inputClassName, dropdownClassName, optionClassName, clearable, searchable, noOptionsMessage, theme: themeProp, }: SearchableSelectProps): import("react").JSX.Element;

package/dist/SearchableSelect.js

@@ -0,0 +1,206 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+const s = {
+    container: {
+        position: 'relative',
+        minWidth: 180,
+    },
+    inputWrap: {
+        position: 'relative',
+        display: 'flex',
+        alignItems: 'center',
+    },
+    input: {
+        width: '100%',
+        padding: '8px 28px 8px 12px',
+        border: '1px solid var(--np-border, #d2d2d7)',
+        borderRadius: 8,
+        fontSize: 14,
+        outline: 'none',
+        cursor: 'pointer',
+        boxSizing: 'border-box',
+        fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif",
+        background: 'var(--np-bg, #fff)',
+        color: 'var(--np-text, #1d1d1f)',
+        lineHeight: 1.4,
+    },
+    inputFocus: {
+        borderColor: 'var(--np-border-focus, #0071e3)',
+        boxShadow: '0 0 0 2px color-mix(in srgb, var(--np-border-focus, #0071e3) 20%, transparent)',
+    },
+    clear: {
+        position: 'absolute',
+        right: 6,
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        fontSize: 14,
+        color: 'var(--np-text-secondary, #86868b)',
+        padding: '2px 4px',
+        lineHeight: 1,
+        borderRadius: 4,
+    },
+    dropdown: {
+        position: 'absolute',
+        top: '100%',
+        left: 0,
+        right: 0,
+        marginTop: 4,
+        background: 'var(--np-bg, #fff)',
+        border: '1px solid var(--np-border, #d2d2d7)',
+        borderRadius: 8,
+        boxShadow: 'var(--np-shadow, 0 4px 12px rgba(0,0,0,0.08))',
+        maxHeight: 240,
+        overflow: 'auto',
+        zIndex: 100,
+    },
+    opt: {
+        padding: '8px 12px',
+        cursor: 'pointer',
+        fontSize: 14,
+        transition: 'background 0.1s',
+        color: 'var(--np-text, #1d1d1f)',
+    },
+    optHover: {
+        background: 'var(--np-bg-hover, #f5f5f7)',
+    },
+    empty: {
+        padding: 12,
+        textAlign: 'center',
+        color: 'var(--np-text-secondary, #86868b)',
+        fontSize: 13,
+    },
+};
+const defTheme = {
+    borderColor: 'var(--np-border, #d2d2d7)',
+    borderColorFocus: 'var(--np-border-focus, #0071e3)',
+    borderRadius: 8,
+    bg: 'var(--np-bg, #fff)',
+    textColor: 'var(--np-text, #1d1d1f)',
+    shadow: 'var(--np-shadow, 0 4px 12px rgba(0,0,0,0.08))',
+    accentColor: 'var(--np-border-focus, #0071e3)',
+};
+export function SearchableSelect({ options, value, onChange, placeholder = 'Select', disabled = false, labels = 'english', className, inputClassName, dropdownClassName, optionClassName, clearable = true, searchable = true, noOptionsMessage = 'No options found', theme: themeProp, }) {
+    const t = { ...defTheme, ...themeProp };
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState('');
+    const [highlighted, setHighlighted] = useState(-1);
+    const [focused, setFocused] = useState(false);
+    const containerRef = useRef(null);
+    const inputRef = useRef(null);
+    const selected = useMemo(() => options.find((o) => o.id === value), [options, value]);
+    const filtered = useMemo(() => {
+        if (!search || !open)
+            return options;
+        const q = search.toLowerCase();
+        return options.filter((o) => {
+            const n = (labels === 'nepali' && o.name_np ? o.name_np : o.name).toLowerCase();
+            return n.includes(q);
+        });
+    }, [options, search, open, labels]);
+    const display = (o) => labels === 'nepali' && o.name_np ? o.name_np : o.name;
+    useEffect(() => {
+        const handler = (e) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(e.target)) {
+                setOpen(false);
+                setSearch('');
+                setHighlighted(-1);
+            }
+        };
+        document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, []);
+    useEffect(() => {
+        if (highlighted >= filtered.length) {
+            setHighlighted(filtered.length - 1);
+        }
+    }, [filtered.length, highlighted]);
+    const select = (id) => {
+        onChange(id);
+        setOpen(false);
+        setSearch('');
+        setHighlighted(-1);
+    };
+    const onKey = (e) => {
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!open) {
+                    setOpen(true);
+                    return;
+                }
+                setHighlighted((p) => (p < filtered.length - 1 ? p + 1 : 0));
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setHighlighted((p) => (p > 0 ? p - 1 : filtered.length - 1));
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (open && highlighted >= 0 && highlighted < filtered.length) {
+                    select(filtered[highlighted].id);
+                }
+                break;
+            case 'Escape':
+                setOpen(false);
+                setSearch('');
+                setHighlighted(-1);
+                inputRef.current?.blur();
+                break;
+        }
+    };
+    const inputStyle = {
+        ...s.input,
+        borderRadius: t.borderRadius,
+        borderColor: t.borderColor,
+        background: t.bg,
+        color: t.textColor,
+        ...(focused
+            ? {
+                ...s.inputFocus,
+                borderColor: t.borderColorFocus,
+                boxShadow: `0 0 0 2px ${t.borderColorFocus}33`,
+            }
+            : {}),
+    };
+    const dropdownStyle = {
+        ...s.dropdown,
+        borderRadius: t.borderRadius,
+        background: t.bg,
+        borderColor: t.borderColor,
+        boxShadow: t.shadow,
+    };
+    const clearStyle = {
+        ...s.clear,
+        borderRadius: t.borderRadius,
+    };
+    const inputVal = open ? search : selected ? display(selected) : '';
+    return (_jsxs("div", { ref: containerRef, className: `np-searchable-select${className ? ` ${className}` : ''}`, style: s.container, children: [_jsxs("div", { style: s.inputWrap, children: [_jsx("input", { ref: inputRef, type: "text", role: "combobox", "aria-expanded": open, "aria-autocomplete": "list", "aria-label": placeholder, "aria-controls": `np-list-${placeholder}`, "aria-activedescendant": highlighted >= 0 ? `np-opt-${filtered[highlighted]?.id}` : undefined, value: inputVal, onChange: (e) => {
+                            if (open || searchable) {
+                                setSearch(e.target.value);
+                                if (!open)
+                                    setOpen(true);
+                                setHighlighted(-1);
+                            }
+                        }, onFocus: () => {
+                            setFocused(true);
+                            if (searchable)
+                                setOpen(true);
+                        }, onBlur: () => setFocused(false), onClick: () => {
+                            if (!searchable)
+                                setOpen((p) => !p);
+                        }, onKeyDown: onKey, placeholder: placeholder, disabled: disabled, readOnly: !searchable, className: `np-searchable-input${inputClassName ? ` ${inputClassName}` : ''}`, style: inputStyle }), clearable && value !== '' && !disabled && (_jsx("button", { type: "button", "aria-label": "Clear selection", style: clearStyle, onClick: (e) => {
+                            e.stopPropagation();
+                            onChange('');
+                            setSearch('');
+                            inputRef.current?.focus();
+                        }, tabIndex: -1, onMouseDown: (e) => e.preventDefault(), children: "\u2715" }))] }), open && (_jsx("div", { id: `np-list-${placeholder}`, role: "listbox", tabIndex: -1, className: `np-searchable-dropdown${dropdownClassName ? ` ${dropdownClassName}` : ''}`, style: dropdownStyle, children: filtered.length === 0 ? (_jsx("div", { style: s.empty, children: noOptionsMessage })) : (filtered.map((o, i) => (_jsx("div", { id: `np-opt-${o.id}`, role: "option", tabIndex: -1, "aria-selected": o.id === value, className: `np-searchable-option${optionClassName ? ` ${optionClassName}` : ''}`, style: {
+                        ...s.opt,
+                        ...(i === highlighted ? s.optHover : {}),
+                        ...(o.id === value ? { fontWeight: 600 } : {}),
+                    }, onClick: () => select(o.id), onKeyDown: (e) => {
+                        if (e.key === 'Enter')
+                            select(o.id);
+                    }, onMouseEnter: () => setHighlighted(i), children: display(o) }, o.id)))) }))] }));
+}

package/dist/SinglePlacePicker.d.ts

@@ -0,0 +1,25 @@
+export interface SinglePlacePickerProps {
+    provinceId: number | '';
+    districtId: number | '';
+    localLevelId: number | '';
+    onChange: (p: number | '', d: number | '', m: number | '') => void;
+    labels?: 'english' | 'nepali';
+    disabled?: boolean;
+    className?: string;
+    inputClassName?: string;
+    dropdownClassName?: string;
+    optionClassName?: string;
+    clearable?: boolean;
+    placeholder?: string;
+    noOptionsMessage?: string;
+    theme?: {
+        borderColor?: string;
+        borderColorFocus?: string;
+        borderRadius?: number;
+        bg?: string;
+        textColor?: string;
+        shadow?: string;
+        accentColor?: string;
+    };
+}
+export declare function SinglePlacePicker({ provinceId, districtId, localLevelId, onChange, labels, disabled, className, inputClassName, dropdownClassName, optionClassName, clearable, placeholder, noOptionsMessage, theme: themeProp, }: SinglePlacePickerProps): import("react").JSX.Element;

package/dist/SinglePlacePicker.js

@@ -0,0 +1,267 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getDistrict, getDistricts, getMunicipalities, getProvince, getProvinces, } from 'nepal-places';
+import { useEffect, useMemo, useRef, useState } from 'react';
+const defTheme = {
+    borderColor: 'var(--np-border, #d2d2d7)',
+    borderColorFocus: 'var(--np-border-focus, #0071e3)',
+    borderRadius: 8,
+    bg: 'var(--np-bg, #fff)',
+    textColor: 'var(--np-text, #1d1d1f)',
+    shadow: 'var(--np-shadow, 0 4px 12px rgba(0,0,0,0.08))',
+    accentColor: 'var(--np-border-focus, #0071e3)',
+};
+export function SinglePlacePicker({ provinceId, districtId, localLevelId, onChange, labels = 'english', disabled = false, className, inputClassName, dropdownClassName, optionClassName, clearable = true, placeholder = 'Search places in Nepal...', noOptionsMessage = 'No places found', theme: themeProp, }) {
+    const [open, setOpen] = useState(false);
+    const [search, setSearch] = useState('');
+    const [highlighted, setHighlighted] = useState(-1);
+    const [focused, setFocused] = useState(false);
+    const containerRef = useRef(null);
+    const inputRef = useRef(null);
+    const t = { ...defTheme, ...themeProp };
+    const allItems = useMemo(() => {
+        const items = [];
+        for (const p of getProvinces()) {
+            items.push({
+                id: `p-${p.id}`,
+                level: 'province',
+                levelLabel: 'Province',
+                name: p.name,
+                name_np: p.name_np,
+                provinceId: p.id,
+            });
+        }
+        for (const d of getDistricts()) {
+            const p = getProvince(d.province_id);
+            items.push({
+                id: `d-${d.id}`,
+                level: 'district',
+                levelLabel: 'District',
+                name: `${d.name}${p ? ` — ${p.name}` : ''}`,
+                name_np: d.name_np,
+                provinceId: d.province_id,
+                districtId: d.id,
+            });
+        }
+        for (const m of getMunicipalities()) {
+            const d = getDistrict(m.district_id);
+            const p = d ? getProvince(d.province_id) : undefined;
+            items.push({
+                id: `m-${m.id}`,
+                level: 'municipality',
+                levelLabel: m.type === 'metropolitan'
+                    ? 'Metro'
+                    : m.type === 'sub_metropolitan'
+                        ? 'Sub-Metro'
+                        : m.type === 'municipality'
+                            ? 'Muni'
+                            : 'Rural',
+                name: `${m.name}${d ? ` — ${d.name}` : ''}`,
+                name_np: m.name_np,
+                provinceId: p?.id,
+                districtId: m.district_id,
+                localLevelId: m.id,
+            });
+        }
+        return items;
+    }, []);
+    const filtered = useMemo(() => {
+        if (!search)
+            return allItems.slice(0, 50);
+        const q = search.toLowerCase();
+        return allItems
+            .filter((i) => {
+            const n = (labels === 'nepali' && i.name_np ? i.name_np : i.name).toLowerCase();
+            return n.includes(q);
+        })
+            .slice(0, 100);
+    }, [search, allItems, labels]);
+    const selectedProvince = provinceId
+        ? getProvince(Number(provinceId))
+        : undefined;
+    const selectedDistrict = districtId
+        ? getDistrict(Number(districtId))
+        : undefined;
+    const selectedLocalLevel = localLevelId
+        ? getMunicipalities().find((m) => m.id === Number(localLevelId))
+        : undefined;
+    const selectedPath = useMemo(() => {
+        if (labels === 'nepali') {
+            const parts = [];
+            if (selectedLocalLevel?.name_np)
+                parts.push(selectedLocalLevel.name_np);
+            else if (selectedLocalLevel)
+                parts.push(selectedLocalLevel.name);
+            if (selectedDistrict?.name_np)
+                parts.push(selectedDistrict.name_np);
+            else if (selectedDistrict)
+                parts.push(selectedDistrict.name);
+            if (selectedProvince?.name_np)
+                parts.push(selectedProvince.name_np);
+            else if (selectedProvince)
+                parts.push(selectedProvince.name);
+            return parts.join(' > ');
+        }
+        const parts = [];
+        if (selectedLocalLevel)
+            parts.push(selectedLocalLevel.name);
+        if (selectedDistrict)
+            parts.push(selectedDistrict.name);
+        if (selectedProvince)
+            parts.push(selectedProvince.name);
+        return parts.join(' > ');
+    }, [selectedProvince, selectedDistrict, selectedLocalLevel, labels]);
+    useEffect(() => {
+        const handler = (e) => {
+            if (containerRef.current &&
+                !containerRef.current.contains(e.target)) {
+                setOpen(false);
+                setSearch('');
+                setHighlighted(-1);
+            }
+        };
+        document.addEventListener('mousedown', handler);
+        return () => document.removeEventListener('mousedown', handler);
+    }, []);
+    const selectItem = (item) => {
+        if (item.level === 'province') {
+            onChange(Number(item.id.slice(2)), '', '');
+        }
+        else if (item.level === 'district' &&
+            item.provinceId &&
+            item.districtId) {
+            onChange(item.provinceId, item.districtId, '');
+        }
+        else if (item.level === 'municipality' &&
+            item.districtId &&
+            item.provinceId &&
+            item.localLevelId) {
+            onChange(item.provinceId, item.districtId, item.localLevelId);
+        }
+        setOpen(false);
+        setSearch('');
+        setHighlighted(-1);
+    };
+    const handleKey = (e) => {
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                if (!open) {
+                    setOpen(true);
+                    return;
+                }
+                setHighlighted((p) => (p < filtered.length - 1 ? p + 1 : 0));
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                setHighlighted((p) => (p > 0 ? p - 1 : filtered.length - 1));
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (open && highlighted >= 0 && highlighted < filtered.length) {
+                    selectItem(filtered[highlighted]);
+                }
+                break;
+            case 'Escape':
+                setOpen(false);
+                setSearch('');
+                setHighlighted(-1);
+                inputRef.current?.blur();
+                break;
+        }
+    };
+    return (_jsxs("div", { ref: containerRef, className: `np-single-picker${className ? ` ${className}` : ''}`, style: {
+            position: 'relative',
+            minWidth: 280,
+            fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif",
+        }, children: [_jsxs("div", { style: { position: 'relative', display: 'flex', alignItems: 'center' }, children: [_jsx("input", { ref: inputRef, type: "text", role: "combobox", "aria-expanded": open, "aria-autocomplete": "list", "aria-label": placeholder, "aria-controls": "np-single-list", "aria-activedescendant": highlighted >= 0 ? `np-si-${filtered[highlighted]?.id}` : undefined, value: open ? search : selectedPath, onChange: (e) => {
+                            setSearch(e.target.value);
+                            if (!open)
+                                setOpen(true);
+                            setHighlighted(-1);
+                        }, onFocus: () => setFocused(true), onBlur: () => setFocused(false), onClick: () => {
+                            if (!open) {
+                                setOpen(true);
+                                setSearch('');
+                            }
+                        }, onKeyDown: handleKey, placeholder: selectedPath ? '' : placeholder, disabled: disabled, className: inputClassName ?? '', style: {
+                            width: '100%',
+                            padding: '8px 28px 8px 12px',
+                            border: `1px solid ${focused ? t.borderColorFocus : t.borderColor}`,
+                            borderRadius: t.borderRadius,
+                            fontSize: 14,
+                            outline: 'none',
+                            cursor: 'pointer',
+                            boxSizing: 'border-box',
+                            background: t.bg,
+                            color: selectedPath
+                                ? t.textColor
+                                : 'var(--np-text-secondary, #86868b)',
+                            lineHeight: 1.4,
+                            boxShadow: focused ? `0 0 0 2px ${t.borderColorFocus}33` : 'none',
+                        } }), clearable &&
+                        (provinceId || districtId || localLevelId) &&
+                        !disabled && (_jsx("button", { type: "button", "aria-label": "Clear selection", onClick: (e) => {
+                            e.stopPropagation();
+                            onChange('', '', '');
+                            setSearch('');
+                            inputRef.current?.focus();
+                        }, onMouseDown: (e) => e.preventDefault(), style: {
+                            position: 'absolute',
+                            right: 6,
+                            background: 'none',
+                            border: 'none',
+                            cursor: 'pointer',
+                            fontSize: 14,
+                            color: 'var(--np-text-secondary, #86868b)',
+                            padding: '2px 4px',
+                            lineHeight: 1,
+                            borderRadius: 4,
+                        }, children: "\u2715" }))] }), open && (_jsx("div", { id: "np-single-list", role: "listbox", tabIndex: -1, className: dropdownClassName ?? '', style: {
+                    position: 'absolute',
+                    top: '100%',
+                    left: 0,
+                    right: 0,
+                    marginTop: 4,
+                    background: t.bg,
+                    border: `1px solid ${t.borderColor}`,
+                    borderRadius: t.borderRadius,
+                    boxShadow: t.shadow,
+                    maxHeight: 300,
+                    overflow: 'auto',
+                    zIndex: 100,
+                }, children: filtered.length === 0 ? (_jsx("div", { style: {
+                        padding: 12,
+                        textAlign: 'center',
+                        color: 'var(--np-text-secondary, #86868b)',
+                        fontSize: 13,
+                    }, children: noOptionsMessage })) : (filtered.map((item, i) => (_jsxs("div", { id: `np-si-${item.id}`, role: "option", tabIndex: -1, "aria-selected": (item.level === 'province' &&
+                        item.provinceId === provinceId) ||
+                        (item.level === 'district' &&
+                            item.districtId === districtId) ||
+                        (item.level === 'municipality' &&
+                            item.localLevelId === localLevelId), className: optionClassName ?? '', onClick: () => selectItem(item), onKeyDown: (e) => {
+                        if (e.key === 'Enter')
+                            selectItem(item);
+                    }, onMouseEnter: () => setHighlighted(i), style: {
+                        padding: '6px 12px',
+                        cursor: 'pointer',
+                        fontSize: 13,
+                        transition: 'background 0.1s',
+                        color: t.textColor,
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 8,
+                        ...(i === highlighted
+                            ? { background: 'var(--np-bg-hover, #f5f5f7)' }
+                            : {}),
+                    }, children: [_jsx("span", { style: {
+                                fontSize: 10,
+                                fontWeight: 600,
+                                color: 'var(--np-text-secondary, #86868b)',
+                                textTransform: 'uppercase',
+                                minWidth: 44,
+                                letterSpacing: '0.03em',
+                            }, children: item.levelLabel }), _jsx("span", { style: { flex: 1 }, children: labels === 'nepali' && item.name_np
+                                ? item.name_np
+                                : item.name })] }, item.id)))) }))] }));
+}

package/dist/index.d.ts

@@ -1,2 +1,6 @@
 export { NepalPlacesDropdown } from './NepalPlacesDropdown.js';
-export type { NepalPlacesDropdownProps, PlaceSelection, Labels, } from './types.js';
+export { SearchableSelect } from './SearchableSelect.js';
+export { SinglePlacePicker } from './SinglePlacePicker.js';
+export type { NepalPlacesDropdownProps, PlaceSelection, Labels, DropdownMode, Placeholder, ThemeVars, } from './types.js';
+export type { SearchableSelectOption, SearchableSelectProps, } from './SearchableSelect.js';
+export type { SinglePlacePickerProps } from './SinglePlacePicker.js';

package/dist/index.js

@@ -1 +1,3 @@
 export { NepalPlacesDropdown } from './NepalPlacesDropdown.js';
+export { SearchableSelect } from './SearchableSelect.js';
+export { SinglePlacePicker } from './SinglePlacePicker.js';

package/dist/types.d.ts

@@ -1,17 +1,52 @@
-import type { District, LocalLevel, LocalLevelType, Province, Ward } from 'nepal-places';
+import type { District, LocalLevel, LocalLevelType, Place, Province, Ward } from 'nepal-places';
 export type Labels = 'english' | 'nepali';
+export type DropdownMode = 'cascade' | 'single';
 export interface PlaceSelection {
     province?: Province;
     district?: District;
     localLevel?: LocalLevel;
     ward?: Ward;
+    place?: Place;
+    province_id?: number;
+    district_id?: number;
+    local_level_id?: number;
+    ward_id?: number;
+    place_id?: number;
     code?: string;
 }
+export type Placeholder = string | {
+    province?: string;
+    district?: string;
+    municipality?: string;
+    ward?: string;
+    place?: string;
+};
+export interface ThemeVars {
+    borderColor?: string;
+    borderColorFocus?: string;
+    borderRadius?: number;
+    bg?: string;
+    textColor?: string;
+    shadow?: string;
+    accentColor?: string;
+}
 export interface NepalPlacesDropdownProps {
-    depth?: 1 | 2 | 3 | 4;
+    depth?: 1 | 2 | 3 | 4 | 5;
+    mode?: DropdownMode;
     labels?: Labels;
     flat?: boolean;
     filterType?: LocalLevelType;
     className?: string;
+    style?: React.CSSProperties;
+    theme?: ThemeVars;
+    searchable?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    selectClassName?: string;
+    inputClassName?: string;
+    dropdownClassName?: string;
+    optionClassName?: string;
+    placeholder?: Placeholder;
+    noOptionsMessage?: string;
     onChange?: (selection: PlaceSelection) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nepal-places-react",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "description": "React dropdown component for Nepal's provinces, districts, municipalities, and wards. Fast, typed, bilingual.",
   "type": "module",
   "main": "./dist/index.js",
@@ -12,7 +12,7 @@
       "types": "./dist/index.d.ts"
     }
   },
-  "files": ["dist"],
+  "files": ["dist", "README.md"],
   "scripts": {
     "build": "tsc",
     "typecheck": "tsc --noEmit",
@@ -22,7 +22,7 @@
     "react": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "nepal-places": "^0.1.0"
+    "nepal-places": "^0.3.0"
   },
   "keywords": [
     "nepal",