npm - @kaushverse/pickify - Versions diffs - 1.0.0 - Mend

@kaushverse/pickify 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/index.d.mts ADDED Viewed

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+type Option = {
+    label: string;
+    value: string;
+};
+type Group = {
+    label: string;
+    data: Option[];
+};
+type Theme = {
+    primaryColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+};
+type PickerStyles = {
+    container?: ViewStyle;
+    tab?: ViewStyle;
+    activeTab?: ViewStyle;
+    tabText?: TextStyle;
+    activeTabText?: TextStyle;
+    doneBtn?: ViewStyle;
+    doneText?: TextStyle;
+    selectTab?: ViewStyle;
+    selectTabText?: TextStyle;
+};
+type Props = {
+    visible: boolean;
+    selectedValue: string;
+    options: Option[];
+    groups?: Group[];
+    styles?: PickerStyles;
+    theme?: Theme;
+    renderTab?: (tab: Group, isActive: boolean, onPress: () => void) => React.ReactNode;
+    renderItem?: (item: Option, isSelected: boolean) => React.ReactNode;
+    renderContainer?: (children: React.ReactNode) => React.ReactNode;
+    renderIcon?: (props: {
+        name: string;
+        size: number;
+        color: string;
+    }) => React.ReactNode;
+    onSelect: (value: string) => void;
+    onClose: () => void;
+};
+declare function PickerModal({ visible, selectedValue, options, groups, styles, theme, renderTab, renderItem, renderContainer, onSelect, onClose, renderIcon, variant, }: Props & {
+    variant?: "tabs" | "input";
+}): react_jsx_runtime.JSX.Element;
+declare const groupOptions: (options: Option[], config: Record<string, string[]>) => Group[];
+export { type Group, type Option, PickerModal, type PickerStyles, type Props, type Theme, groupOptions };

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+type Option = {
+    label: string;
+    value: string;
+};
+type Group = {
+    label: string;
+    data: Option[];
+};
+type Theme = {
+    primaryColor?: string;
+    backgroundColor?: string;
+    textColor?: string;
+};
+type PickerStyles = {
+    container?: ViewStyle;
+    tab?: ViewStyle;
+    activeTab?: ViewStyle;
+    tabText?: TextStyle;
+    activeTabText?: TextStyle;
+    doneBtn?: ViewStyle;
+    doneText?: TextStyle;
+    selectTab?: ViewStyle;
+    selectTabText?: TextStyle;
+};
+type Props = {
+    visible: boolean;
+    selectedValue: string;
+    options: Option[];
+    groups?: Group[];
+    styles?: PickerStyles;
+    theme?: Theme;
+    renderTab?: (tab: Group, isActive: boolean, onPress: () => void) => React.ReactNode;
+    renderItem?: (item: Option, isSelected: boolean) => React.ReactNode;
+    renderContainer?: (children: React.ReactNode) => React.ReactNode;
+    renderIcon?: (props: {
+        name: string;
+        size: number;
+        color: string;
+    }) => React.ReactNode;
+    onSelect: (value: string) => void;
+    onClose: () => void;
+};
+declare function PickerModal({ visible, selectedValue, options, groups, styles, theme, renderTab, renderItem, renderContainer, onSelect, onClose, renderIcon, variant, }: Props & {
+    variant?: "tabs" | "input";
+}): react_jsx_runtime.JSX.Element;
+declare const groupOptions: (options: Option[], config: Record<string, string[]>) => Group[];
+export { type Group, type Option, PickerModal, type PickerStyles, type Props, type Theme, groupOptions };

package/dist/index.js ADDED Viewed

@@ -0,0 +1,227 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PickerModal: () => PickerModal,
+  groupOptions: () => groupOptions
+});
+module.exports = __toCommonJS(index_exports);
+// src/core/PickerModel.tsx
+var import_react = require("react");
+var import_react_native = require("react-native");
+var import_picker = require("@react-native-picker/picker");
+var import_jsx_runtime = require("react/jsx-runtime");
+function PickerModal({
+  visible,
+  selectedValue,
+  options,
+  groups = [],
+  styles,
+  theme,
+  renderTab,
+  renderItem,
+  renderContainer,
+  onSelect,
+  onClose,
+  renderIcon,
+  variant = "tabs"
+}) {
+  const [activeTab, setActiveTab] = (0, import_react.useState)(0);
+  const hasGroups = groups.length > 0;
+  const isInputVariant = variant === "input";
+  const currentOptions = hasGroups ? groups[activeTab]?.data || [] : options;
+  (0, import_react.useEffect)(() => {
+    if (!hasGroups) return;
+    const index = groups.findIndex(
+      (group) => group.data.some((item) => item.value === selectedValue)
+    );
+    if (index !== -1) setActiveTab(index);
+  }, [selectedValue, visible]);
+  const primary = theme?.primaryColor || "#6366f1";
+  const bg = theme?.backgroundColor || "#fff";
+  const text = theme?.textColor || "#111827";
+  const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_react_native.View,
+    {
+      style: [
+        defaultStyles.container,
+        { backgroundColor: bg },
+        styles?.container
+      ],
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_native.TouchableOpacity,
+          {
+            style: [
+              defaultStyles.doneBtn,
+              { backgroundColor: primary },
+              styles?.doneBtn
+            ],
+            onPress: onClose,
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.doneText, styles?.doneText], children: "Done" })
+          }
+        ),
+        hasGroups && !isInputVariant && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: groups.map((tab, index) => {
+          const isActive = activeTab === index;
+          if (renderTab) {
+            return renderTab(tab, isActive, () => setActiveTab(index));
+          }
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react_native.TouchableOpacity,
+            {
+              style: [
+                defaultStyles.tab,
+                styles?.tab,
+                isActive && {
+                  backgroundColor: primary
+                }
+              ],
+              onPress: () => setActiveTab(index),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                import_react_native.Text,
+                {
+                  style: [
+                    defaultStyles.tabText,
+                    { color: isActive ? "#fff" : text },
+                    styles?.tabText
+                  ],
+                  children: tab.label
+                }
+              )
+            },
+            tab.label
+          );
+        }) }),
+        hasGroups && isInputVariant && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: groups.map((tab, index) => {
+          const isActive = activeTab === index;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react_native.TouchableOpacity,
+            {
+              style: [
+                defaultStyles.selectTab,
+                styles?.selectTab,
+                isActive && { borderColor: primary }
+              ],
+              onPress: () => setActiveTab(index),
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: defaultStyles.selectTabInner, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  import_react_native.Text,
+                  {
+                    style: [defaultStyles.selectTabText, styles?.selectTabText],
+                    children: tab.label
+                  }
+                ),
+                renderIcon?.({
+                  name: "chevron-down",
+                  size: 18,
+                  color: "#6B7280"
+                })
+              ] })
+            },
+            tab.label
+          );
+        }) }),
+        renderItem ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ScrollView, { style: { maxHeight: 250 }, children: currentOptions.map(
+          (item) => renderItem(item, selectedValue === item.value)
+        ) }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_picker.Picker, { selectedValue, onValueChange: onSelect, children: currentOptions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_picker.Picker.Item,
+          {
+            label: item.label,
+            value: item.value,
+            color: text
+          },
+          item.value
+        )) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Modal, { visible, transparent: true, animationType: "slide", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: defaultStyles.modalOverlay, children: renderContainer ? renderContainer(content) : content }) });
+}
+var defaultStyles = import_react_native.StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    justifyContent: "flex-end",
+    backgroundColor: "rgba(0,0,0,0.3)"
+  },
+  container: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    padding: 20
+  },
+  /* ---------- NORMAL TABS ---------- */
+  tab: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 20,
+    marginRight: 8,
+    backgroundColor: "#f3f4f6"
+  },
+  tabText: {
+    fontSize: 13,
+    fontWeight: "500"
+  },
+  /* ---------- INPUT STYLE TABS ---------- */
+  selectTab: {
+    height: 48,
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    borderRadius: 12,
+    paddingHorizontal: 14,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  selectTabInner: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  selectTabText: {
+    fontSize: 16,
+    fontWeight: "500"
+  },
+  /* ---------- DONE BUTTON ---------- */
+  doneBtn: {
+    alignSelf: "flex-end",
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    borderRadius: 30,
+    marginBottom: 20
+  },
+  doneText: {
+    color: "#FFF",
+    fontWeight: "600"
+  }
+});
+// src/utils/groupOptions.ts
+var groupOptions = (options, config) => {
+  return Object.entries(config).map(([label, values]) => ({
+    label,
+    data: options.filter((o) => values.includes(o.value))
+  })).filter((g) => g.data.length > 0);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PickerModal,
+  groupOptions
+});

package/dist/index.mjs ADDED Viewed

@@ -0,0 +1,206 @@
+// src/core/PickerModel.tsx
+import { useEffect, useState } from "react";
+import {
+  Modal,
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView
+} from "react-native";
+import { Picker } from "@react-native-picker/picker";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PickerModal({
+  visible,
+  selectedValue,
+  options,
+  groups = [],
+  styles,
+  theme,
+  renderTab,
+  renderItem,
+  renderContainer,
+  onSelect,
+  onClose,
+  renderIcon,
+  variant = "tabs"
+}) {
+  const [activeTab, setActiveTab] = useState(0);
+  const hasGroups = groups.length > 0;
+  const isInputVariant = variant === "input";
+  const currentOptions = hasGroups ? groups[activeTab]?.data || [] : options;
+  useEffect(() => {
+    if (!hasGroups) return;
+    const index = groups.findIndex(
+      (group) => group.data.some((item) => item.value === selectedValue)
+    );
+    if (index !== -1) setActiveTab(index);
+  }, [selectedValue, visible]);
+  const primary = theme?.primaryColor || "#6366f1";
+  const bg = theme?.backgroundColor || "#fff";
+  const text = theme?.textColor || "#111827";
+  const content = /* @__PURE__ */ jsxs(
+    View,
+    {
+      style: [
+        defaultStyles.container,
+        { backgroundColor: bg },
+        styles?.container
+      ],
+      children: [
+        /* @__PURE__ */ jsx(
+          TouchableOpacity,
+          {
+            style: [
+              defaultStyles.doneBtn,
+              { backgroundColor: primary },
+              styles?.doneBtn
+            ],
+            onPress: onClose,
+            children: /* @__PURE__ */ jsx(Text, { style: [defaultStyles.doneText, styles?.doneText], children: "Done" })
+          }
+        ),
+        hasGroups && !isInputVariant && /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: groups.map((tab, index) => {
+          const isActive = activeTab === index;
+          if (renderTab) {
+            return renderTab(tab, isActive, () => setActiveTab(index));
+          }
+          return /* @__PURE__ */ jsx(
+            TouchableOpacity,
+            {
+              style: [
+                defaultStyles.tab,
+                styles?.tab,
+                isActive && {
+                  backgroundColor: primary
+                }
+              ],
+              onPress: () => setActiveTab(index),
+              children: /* @__PURE__ */ jsx(
+                Text,
+                {
+                  style: [
+                    defaultStyles.tabText,
+                    { color: isActive ? "#fff" : text },
+                    styles?.tabText
+                  ],
+                  children: tab.label
+                }
+              )
+            },
+            tab.label
+          );
+        }) }),
+        hasGroups && isInputVariant && /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: groups.map((tab, index) => {
+          const isActive = activeTab === index;
+          return /* @__PURE__ */ jsx(
+            TouchableOpacity,
+            {
+              style: [
+                defaultStyles.selectTab,
+                styles?.selectTab,
+                isActive && { borderColor: primary }
+              ],
+              onPress: () => setActiveTab(index),
+              children: /* @__PURE__ */ jsxs(View, { style: defaultStyles.selectTabInner, children: [
+                /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    style: [defaultStyles.selectTabText, styles?.selectTabText],
+                    children: tab.label
+                  }
+                ),
+                renderIcon?.({
+                  name: "chevron-down",
+                  size: 18,
+                  color: "#6B7280"
+                })
+              ] })
+            },
+            tab.label
+          );
+        }) }),
+        renderItem ? /* @__PURE__ */ jsx(ScrollView, { style: { maxHeight: 250 }, children: currentOptions.map(
+          (item) => renderItem(item, selectedValue === item.value)
+        ) }) : /* @__PURE__ */ jsx(Picker, { selectedValue, onValueChange: onSelect, children: currentOptions.map((item) => /* @__PURE__ */ jsx(
+          Picker.Item,
+          {
+            label: item.label,
+            value: item.value,
+            color: text
+          },
+          item.value
+        )) })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsx(Modal, { visible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx(View, { style: defaultStyles.modalOverlay, children: renderContainer ? renderContainer(content) : content }) });
+}
+var defaultStyles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    justifyContent: "flex-end",
+    backgroundColor: "rgba(0,0,0,0.3)"
+  },
+  container: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20,
+    padding: 20
+  },
+  /* ---------- NORMAL TABS ---------- */
+  tab: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 20,
+    marginRight: 8,
+    backgroundColor: "#f3f4f6"
+  },
+  tabText: {
+    fontSize: 13,
+    fontWeight: "500"
+  },
+  /* ---------- INPUT STYLE TABS ---------- */
+  selectTab: {
+    height: 48,
+    borderWidth: 1,
+    borderColor: "#E5E7EB",
+    borderRadius: 12,
+    paddingHorizontal: 14,
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  selectTabInner: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  selectTabText: {
+    fontSize: 16,
+    fontWeight: "500"
+  },
+  /* ---------- DONE BUTTON ---------- */
+  doneBtn: {
+    alignSelf: "flex-end",
+    paddingHorizontal: 14,
+    paddingVertical: 6,
+    borderRadius: 30,
+    marginBottom: 20
+  },
+  doneText: {
+    color: "#FFF",
+    fontWeight: "600"
+  }
+});
+// src/utils/groupOptions.ts
+var groupOptions = (options, config) => {
+  return Object.entries(config).map(([label, values]) => ({
+    label,
+    data: options.filter((o) => values.includes(o.value))
+  })).filter((g) => g.data.length > 0);
+};
+export {
+  PickerModal,
+  groupOptions
+};

package/package.json ADDED Viewed

@@ -0,0 +1,63 @@
+{
+  "name": "@kaushverse/pickify",
+  "version": "1.0.0",
+  "description": "A fully customizable React Native picker with search, multi-select, grouping, and async support.",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts",
+    "clean": "rimraf dist",
+    "prepublishOnly": "npm run clean && npm run build"
+  },
+  "keywords": [
+    "react-native",
+    "picker",
+    "select",
+    "dropdown",
+    "modal",
+    "multi-select",
+    "search",
+    "grouped-picker",
+    "react-native-picker",
+    "react-native-select",
+    "ui",
+    "component",
+    "typescript"
+  ],
+  "author": "Kaushik",
+  "license": "MIT",
+  "homepage": "https://github.com/kaushverse/pickify",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kaushverse/pickify.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kaushverse/pickify/issues"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-native": ">=0.70"
+  },
+  "dependencies": {
+    "@react-native-picker/picker": "^2.11.4"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.14",
+    "react": "^19.2.4",
+    "react-native": "^0.84.1",
+    "rimraf": "^6.1.3",
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}