custom-mobile-ui 1.0.1

package/dist/context.mjs

@@ -0,0 +1,148 @@
+import { createContext } from 'react';
+
+// src/context/ThemeContext.tsx
+
+// src/theme/colors.ts
+var Colors = {
+  primary: {
+    50: "#EFF6FF",
+    400: "#60A5FA",
+    500: "#3B82F6",
+    600: "#2563EB",
+    900: "#1E3A8A"
+  },
+  primaryColor: "#2563EB",
+  gray: {
+    50: "#F9FAFB",
+    100: "#F3F4F6",
+    200: "#E5E7EB",
+    300: "#D1D5DB",
+    400: "#9CA3AF",
+    500: "#6B7280",
+    600: "#4B5563",
+    700: "#374151",
+    800: "#1F2937",
+    900: "#111827"
+  },
+  white: "#ffffff",
+  green: { 500: "#22C55E" },
+  orange: { 500: "#F97316" },
+  red: { 500: "#EF4444" }};
+var colors_default = Colors;
+
+// src/theme/theme.ts
+var BaseTheme = {
+  primary: {
+    default: colors_default.primary[600],
+    hover: colors_default.primary[500]
+  },
+  background: {
+    screen: colors_default.gray[50],
+    surface: "#FFFFFF",
+    selected: colors_default.primary[50],
+    secondary: colors_default.gray[100],
+    design: colors_default.primary[50]
+  },
+  input: {
+    background: colors_default.gray[50]
+  },
+  text: {
+    primary: colors_default.gray[900],
+    secondary: colors_default.gray[600],
+    muted: colors_default.gray[400],
+    inverse: "#FFFFFF"
+  },
+  border: {
+    default: colors_default.gray[300],
+    focused: colors_default.primary[600],
+    success: colors_default.green[500],
+    warning: colors_default.orange[500],
+    error: colors_default.red[500]
+  },
+  status: {
+    success: colors_default.green[500],
+    warning: colors_default.orange[500],
+    error: colors_default.red[500],
+    validating: colors_default.primary[600]
+  },
+  icon: {
+    default: colors_default.gray[500],
+    active: colors_default.primary[600],
+    disabled: colors_default.gray[400]
+  },
+  tabContent: {
+    active: colors_default.primary[600],
+    inactive: colors_default.gray[400]
+  },
+  skeleton: {
+    background: colors_default.gray[200],
+    componentBg: colors_default.gray[300],
+    highlight: "#ffffff99"
+  },
+  primaryContent: {
+    color: colors_default.primaryColor
+  }
+};
+var LightTheme = {
+  ...BaseTheme
+};
+var DarkTheme = {
+  ...BaseTheme,
+  primary: {
+    default: colors_default.primary[500],
+    hover: colors_default.primary[400]
+  },
+  background: {
+    ...BaseTheme.background,
+    screen: colors_default.gray[900],
+    surface: colors_default.gray[800],
+    selected: colors_default.primary[900],
+    secondary: colors_default.gray[900],
+    design: colors_default.primaryColor + 10
+  },
+  input: {
+    background: colors_default.gray[700]
+  },
+  text: {
+    ...BaseTheme.text,
+    primary: "#FFFFFF",
+    secondary: colors_default.gray[200],
+    muted: colors_default.gray[500],
+    inverse: colors_default.gray[900]
+  },
+  border: {
+    ...BaseTheme.border,
+    default: colors_default.gray[700]
+  },
+  icon: {
+    ...BaseTheme.icon,
+    default: colors_default.gray[400],
+    disabled: colors_default.gray[600]
+  },
+  tabContent: {
+    active: colors_default.white,
+    inactive: colors_default.gray[500]
+  },
+  skeleton: {
+    background: colors_default.gray[700],
+    componentBg: colors_default.gray[800],
+    highlight: "#ffffff14"
+  },
+  primaryContent: {
+    color: colors_default.primary[400]
+  }
+};
+
+// src/theme/index.ts
+var getTheme = (mode) => mode === "dark" ? DarkTheme : LightTheme;
+
+// src/context/ThemeContext.tsx
+var ThemeContext = createContext({
+  mode: "system",
+  setMode: () => {
+  },
+  theme: getTheme("light"),
+  resolvedMode: "light"
+});
+
+export { ThemeContext };

package/dist/examples.d.mts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { A as AlertModalExample, D as DateTimePickerExample, P as PopupMenuExample, T as TabPagerExample } from './PopupMenuExample-DAAku8nG.mjs';
+import React__default from 'react';
+
+declare function CustomFieldExample(): react_jsx_runtime.JSX.Element;
+
+declare function BottomBarExample(): react_jsx_runtime.JSX.Element;
+
+type ComponentGalleryId = "customButton" | "text" | "avatar" | "badge" | "divider" | "iconWrapper" | "networkImage" | "imagePreview" | "chip" | "customField" | "checkbox" | "radio" | "switch" | "tagSelection" | "dateTimePicker" | "searchBar" | "autoComplete" | "segmentedControl" | "passwordStrength" | "colorPicker" | "socialLogin" | "phoneInput" | "formWrapper" | "authScreens" | "card" | "listItem" | "statCard" | "progressBar" | "timeline" | "shimmer" | "activityFeed" | "notificationCenter" | "searchWithFilters" | "dataTable" | "kanbanBoard" | "billingUI" | "charts" | "calendar" | "breadcrumb" | "bottomBar" | "tabPager" | "header" | "collapsible" | "accordion" | "drawer" | "alertModal" | "customModal" | "messageBox" | "commonState" | "toast" | "loader" | "tooltip" | "confirmationModal" | "snackbar" | "customPopup" | "dismissKeyboard" | "animatedListItem" | "errorBoundary" | "networkStatus" | "fab" | "stepper" | "speedDial";
+type GallerySection = "Core UI" | "Form & Data Entry" | "Data Display" | "Navigation & Layout" | "Feedback & Alerts" | "Utilities";
+type GalleryItem = {
+    id: ComponentGalleryId;
+    title: string;
+    description: string;
+    icon: React__default.ReactNode;
+    tagline: string;
+    section: GallerySection;
+    render: () => React__default.ReactElement;
+};
+declare const GALLERY_ITEMS: GalleryItem[];
+/** All distinct sections in display order. */
+declare const GALLERY_SECTIONS: GallerySection[];
+/** Items grouped by section, preserving order. */
+declare function getGroupedGalleryItems(): {
+    section: GallerySection;
+    items: GalleryItem[];
+}[];
+declare function getGalleryItem(id: ComponentGalleryId | null): GalleryItem | undefined;
+
+export { BottomBarExample as BottomBarExampleScreen, type ComponentGalleryId, CustomFieldExample as CustomFieldExampleScreen, GALLERY_ITEMS, GALLERY_SECTIONS, type GalleryItem, type GallerySection, getGalleryItem, getGroupedGalleryItems };

package/dist/examples.d.ts

@@ -0,0 +1,30 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { A as AlertModalExample, D as DateTimePickerExample, P as PopupMenuExample, T as TabPagerExample } from './PopupMenuExample-DAAku8nG.js';
+import React__default from 'react';
+
+declare function CustomFieldExample(): react_jsx_runtime.JSX.Element;
+
+declare function BottomBarExample(): react_jsx_runtime.JSX.Element;
+
+type ComponentGalleryId = "customButton" | "text" | "avatar" | "badge" | "divider" | "iconWrapper" | "networkImage" | "imagePreview" | "chip" | "customField" | "checkbox" | "radio" | "switch" | "tagSelection" | "dateTimePicker" | "searchBar" | "autoComplete" | "segmentedControl" | "passwordStrength" | "colorPicker" | "socialLogin" | "phoneInput" | "formWrapper" | "authScreens" | "card" | "listItem" | "statCard" | "progressBar" | "timeline" | "shimmer" | "activityFeed" | "notificationCenter" | "searchWithFilters" | "dataTable" | "kanbanBoard" | "billingUI" | "charts" | "calendar" | "breadcrumb" | "bottomBar" | "tabPager" | "header" | "collapsible" | "accordion" | "drawer" | "alertModal" | "customModal" | "messageBox" | "commonState" | "toast" | "loader" | "tooltip" | "confirmationModal" | "snackbar" | "customPopup" | "dismissKeyboard" | "animatedListItem" | "errorBoundary" | "networkStatus" | "fab" | "stepper" | "speedDial";
+type GallerySection = "Core UI" | "Form & Data Entry" | "Data Display" | "Navigation & Layout" | "Feedback & Alerts" | "Utilities";
+type GalleryItem = {
+    id: ComponentGalleryId;
+    title: string;
+    description: string;
+    icon: React__default.ReactNode;
+    tagline: string;
+    section: GallerySection;
+    render: () => React__default.ReactElement;
+};
+declare const GALLERY_ITEMS: GalleryItem[];
+/** All distinct sections in display order. */
+declare const GALLERY_SECTIONS: GallerySection[];
+/** Items grouped by section, preserving order. */
+declare function getGroupedGalleryItems(): {
+    section: GallerySection;
+    items: GalleryItem[];
+}[];
+declare function getGalleryItem(id: ComponentGalleryId | null): GalleryItem | undefined;
+
+export { BottomBarExample as BottomBarExampleScreen, type ComponentGalleryId, CustomFieldExample as CustomFieldExampleScreen, GALLERY_ITEMS, GALLERY_SECTIONS, type GalleryItem, type GallerySection, getGalleryItem, getGroupedGalleryItems };