@campxdev/react-native-blueprint 0.1.0

package/lib/module/components/ui/Context-Menu.js

@@ -0,0 +1,287 @@
+"use strict";
+
+import { Icon } from "./Icon.js";
+import { NativeOnlyAnimatedView } from "./Native-Only-Animated-View.js";
+import { TextClassContext } from "./Text.js";
+import { cn } from "../../lib/utils.js";
+import * as ContextMenuPrimitive from '@rn-primitives/context-menu';
+import { Check, ChevronDown, ChevronRight, ChevronUp } from 'lucide-react-native';
+import * as React from 'react';
+import { Platform, StyleSheet, Text, View } from 'react-native';
+import { cssInterop } from 'nativewind';
+import { FadeIn } from 'react-native-reanimated';
+import { FullWindowOverlay as RNFullWindowOverlay } from 'react-native-screens';
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+cssInterop(View, {
+  className: 'style'
+});
+cssInterop(Text, {
+  className: 'style'
+});
+
+/**
+ * Root context menu component
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <ContextMenu>
+ *   <ContextMenuTrigger>
+ *     <View><Text>Right-click me</Text></View>
+ *   </ContextMenuTrigger>
+ *   <ContextMenuContent>
+ *     <ContextMenuItem><Text>Edit</Text></ContextMenuItem>
+ *     <ContextMenuItem><Text>Delete</Text></ContextMenuItem>
+ *   </ContextMenuContent>
+ * </ContextMenu>
+ * ```
+ */
+const ContextMenu = ContextMenuPrimitive.Root;
+
+/**
+ * Trigger component that opens context menu on right-click or long-press
+ * @component
+ */
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+
+/**
+ * Groups related context menu items
+ * @component
+ */
+const ContextMenuGroup = ContextMenuPrimitive.Group;
+
+/**
+ * Root component for nested submenu
+ * @component
+ */
+const ContextMenuSub = ContextMenuPrimitive.Sub;
+
+/**
+ * Groups radio items for single selection
+ * @component
+ */
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+
+/**
+ * Trigger for opening a nested submenu
+ * @component
+ */
+function ContextMenuSubTrigger({
+  className: _className,
+  inset,
+  children,
+  iconClassName,
+  ...props
+}) {
+  const {
+    open
+  } = ContextMenuPrimitive.useSubContext();
+  const icon = Platform.OS === 'web' ? ChevronRight : open ? ChevronUp : ChevronDown;
+  return /*#__PURE__*/_jsx(TextClassContext.Provider, {
+    value: cn('text-sm select-none group-active:text-accent-foreground', open && 'text-accent-foreground'),
+    children: /*#__PURE__*/_jsxs(ContextMenuPrimitive.SubTrigger, {
+      className: cn('active:bg-accent group flex flex-row items-center rounded-sm px-2 py-2 sm:py-1.5', Platform.select({
+        web: 'focus:bg-accent focus:text-accent-foreground cursor-default outline-none [&_svg]:pointer-events-none'
+      }), open && cn('bg-accent', Platform.select({
+        native: 'mb-1'
+      })), inset && 'pl-8'),
+      ...props,
+      children: [/*#__PURE__*/_jsx(_Fragment, {
+        children: children
+      }), /*#__PURE__*/_jsx(Icon, {
+        as: icon,
+        className: cn('text-foreground ml-auto size-4 shrink-0', iconClassName)
+      })]
+    })
+  });
+}
+
+/**
+ * Content container for nested submenu items
+ * @component
+ */
+function ContextMenuSubContent({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(NativeOnlyAnimatedView, {
+    entering: FadeIn,
+    children: /*#__PURE__*/_jsx(ContextMenuPrimitive.SubContent, {
+      className: cn('bg-popover border-border overflow-hidden rounded-md border p-1 shadow-lg shadow-black/5', Platform.select({
+        web: 'animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 fade-in-0 data-[state=closed]:zoom-out-95 zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-(--radix-context-menu-content-transform-origin) z-50 min-w-[8rem]'
+      }), className),
+      ...props
+    })
+  });
+}
+
+/**
+ * Full window overlay wrapper for iOS
+ */
+const FullWindowOverlay = Platform.OS === 'ios' ? RNFullWindowOverlay : React.Fragment;
+
+/**
+ * Main content container for context menu items
+ * @component
+ */
+function ContextMenuContent({
+  className,
+  overlayClassName,
+  overlayStyle,
+  portalHost,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(ContextMenuPrimitive.Portal, {
+    hostName: portalHost,
+    children: /*#__PURE__*/_jsx(FullWindowOverlay, {
+      children: /*#__PURE__*/_jsx(ContextMenuPrimitive.Overlay, {
+        style: Platform.select({
+          web: overlayStyle ?? undefined,
+          native: overlayStyle ? StyleSheet.flatten([StyleSheet.absoluteFill, overlayStyle]) : StyleSheet.absoluteFill
+        }),
+        className: overlayClassName,
+        children: /*#__PURE__*/_jsx(NativeOnlyAnimatedView, {
+          entering: FadeIn,
+          children: /*#__PURE__*/_jsx(TextClassContext.Provider, {
+            value: "text-popover-foreground",
+            children: /*#__PURE__*/_jsx(ContextMenuPrimitive.Content, {
+              className: cn('bg-popover border-border min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg shadow-black/5', Platform.select({
+                web: cn('animate-in fade-in-0 zoom-in-95 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) z-50 cursor-default', props.side === 'bottom' && 'slide-in-from-top-2', props.side === 'top' && 'slide-in-from-bottom-2')
+              }), className),
+              ...props
+            })
+          })
+        })
+      })
+    })
+  });
+}
+
+/**
+ * Individual context menu item
+ * @component
+ */
+function ContextMenuItem({
+  className,
+  inset,
+  variant,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(TextClassContext.Provider, {
+    value: cn('select-none text-sm text-popover-foreground group-active:text-popover-foreground', variant === 'destructive' && 'text-destructive group-active:text-destructive'),
+    children: /*#__PURE__*/_jsx(ContextMenuPrimitive.Item, {
+      className: cn('active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm px-2 py-2 sm:py-1.5', Platform.select({
+        web: cn('focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none', variant === 'destructive' && 'focus:bg-destructive/10 dark:focus:bg-destructive/20')
+      }), variant === 'destructive' && 'active:bg-destructive/10 dark:active:bg-destructive/20', props.disabled && 'opacity-50', inset && 'pl-8', className),
+      ...props
+    })
+  });
+}
+
+/**
+ * Menu item with checkbox for multi-selection
+ * @component
+ */
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(TextClassContext.Provider, {
+    value: "text-sm text-popover-foreground select-none group-active:text-accent-foreground",
+    children: /*#__PURE__*/_jsxs(ContextMenuPrimitive.CheckboxItem, {
+      className: cn('active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm py-2 pl-8 pr-2 sm:py-1.5', Platform.select({
+        web: 'focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none'
+      }), props.disabled && 'opacity-50', className),
+      ...props,
+      children: [/*#__PURE__*/_jsx(View, {
+        className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+        children: /*#__PURE__*/_jsx(ContextMenuPrimitive.ItemIndicator, {
+          children: /*#__PURE__*/_jsx(Icon, {
+            as: Check,
+            className: cn('text-foreground size-4', Platform.select({
+              web: 'pointer-events-none'
+            }))
+          })
+        })
+      }), /*#__PURE__*/_jsx(_Fragment, {
+        children: children
+      })]
+    })
+  });
+}
+
+/**
+ * Menu item with radio button for single selection
+ * @component
+ */
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(TextClassContext.Provider, {
+    value: "text-sm text-popover-foreground select-none group-active:text-accent-foreground",
+    children: /*#__PURE__*/_jsxs(ContextMenuPrimitive.RadioItem, {
+      className: cn('active:bg-accent group relative flex flex-row items-center gap-2 rounded-sm py-2 pl-8 pr-2 sm:py-1.5', Platform.select({
+        web: 'focus:bg-accent focus:text-accent-foreground cursor-default outline-none data-[disabled]:pointer-events-none'
+      }), props.disabled && 'opacity-50', className),
+      ...props,
+      children: [/*#__PURE__*/_jsx(View, {
+        className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+        children: /*#__PURE__*/_jsx(ContextMenuPrimitive.ItemIndicator, {
+          children: /*#__PURE__*/_jsx(View, {
+            className: "bg-foreground h-2 w-2 rounded-full"
+          })
+        })
+      }), /*#__PURE__*/_jsx(_Fragment, {
+        children: children
+      })]
+    })
+  });
+}
+
+/**
+ * Label for grouping context menu sections
+ * @component
+ */
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(ContextMenuPrimitive.Label, {
+    className: cn('text-foreground px-2 py-2 text-sm font-medium sm:py-1.5', inset && 'pl-8', className),
+    ...props
+  });
+}
+
+/**
+ * Visual separator between menu items
+ * @component
+ */
+function ContextMenuSeparator({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(ContextMenuPrimitive.Separator, {
+    className: cn('bg-border -mx-1 my-1 h-px', className),
+    ...props
+  });
+}
+
+/**
+ * Displays keyboard shortcut hint for menu items
+ * @component
+ */
+function ContextMenuShortcut({
+  className,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Text, {
+    className: cn('text-muted-foreground ml-auto text-xs tracking-widest', className),
+    ...props
+  });
+}
+export { ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger };
+//# sourceMappingURL=Context-Menu.js.map

package/lib/module/components/ui/Context-Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Icon","NativeOnlyAnimatedView","TextClassContext","cn","ContextMenuPrimitive","Check","ChevronDown","ChevronRight","ChevronUp","React","Platform","StyleSheet","Text","View","cssInterop","FadeIn","FullWindowOverlay","RNFullWindowOverlay","Fragment","_Fragment","jsx","_jsx","jsxs","_jsxs","className","ContextMenu","Root","ContextMenuTrigger","Trigger","ContextMenuGroup","Group","ContextMenuSub","Sub","ContextMenuRadioGroup","RadioGroup","ContextMenuSubTrigger","_className","inset","children","iconClassName","props","open","useSubContext","icon","OS","Provider","value","SubTrigger","select","web","native","as","ContextMenuSubContent","entering","SubContent","ContextMenuContent","overlayClassName","overlayStyle","portalHost","Portal","hostName","Overlay","style","undefined","flatten","absoluteFill","Content","side","ContextMenuItem","variant","Item","disabled","ContextMenuCheckboxItem","CheckboxItem","ItemIndicator","ContextMenuRadioItem","RadioItem","ContextMenuLabel","Label","ContextMenuSeparator","Separator","ContextMenuShortcut"],"sourceRoot":"../../../../src","sources":["components/ui/Context-Menu.tsx"],"mappings":";;AAAA,SAASA,IAAI,QAAQ,WAAQ;AAC7B,SAASC,sBAAsB,QAAQ,gCAA6B;AACpE,SAASC,gBAAgB,QAAQ,WAAQ;AACzC,SAASC,EAAE,QAAQ,oBAAiB;AACpC,OAAO,KAAKC,oBAAoB,MAAM,6BAA6B;AACnE,SACEC,KAAK,EACLC,WAAW,EACXC,YAAY,EACZC,SAAS,QACJ,qBAAqB;AAC5B,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SACEC,QAAQ,EAERC,UAAU,EACVC,IAAI,EAEJC,IAAI,QAEC,cAAc;AACrB,SAASC,UAAU,QAAQ,YAAY;AACvC,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAASC,iBAAiB,IAAIC,mBAAmB,QAAQ,sBAAsB;AAAC,SAAAC,QAAA,IAAAC,SAAA,EAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEhFT,UAAU,CAACD,IAAI,EAAE;EAAEW,SAAS,EAAE;AAAQ,CAAC,CAAC;AACxCV,UAAU,CAACF,IAAI,EAAE;EAAEY,SAAS,EAAE;AAAQ,CAAC,CAAC;;AAExC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,WAAW,GAAGrB,oBAAoB,CAACsB,IAAI;;AAE7C;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,GAAGvB,oBAAoB,CAACwB,OAAO;;AAEvD;AACA;AACA;AACA;AACA,MAAMC,gBAAgB,GAAGzB,oBAAoB,CAAC0B,KAAK;;AAEnD;AACA;AACA;AACA;AACA,MAAMC,cAAc,GAAG3B,oBAAoB,CAAC4B,GAAG;;AAE/C;AACA;AACA;AACA;AACA,MAAMC,qBAAqB,GAAG7B,oBAAoB,CAAC8B,UAAU;;AAE7D;AACA;AACA;AACA;AACA,SAASC,qBAAqBA,CAAC;EAC7BX,SAAS,EAAEY,UAAU;EACrBC,KAAK;EACLC,QAAQ;EACRC,aAAa;EACb,GAAGC;AAMH,CAAC,EAAE;EACH,MAAM;IAAEC;EAAK,CAAC,GAAGrC,oBAAoB,CAACsC,aAAa,CAAC,CAAC;EACrD,MAAMC,IAAI,GACRjC,QAAQ,CAACkC,EAAE,KAAK,KAAK,GAAGrC,YAAY,GAAGkC,IAAI,GAAGjC,SAAS,GAAGF,WAAW;EACvE,oBACEe,IAAA,CAACnB,gBAAgB,CAAC2C,QAAQ;IACxBC,KAAK,EAAE3C,EAAE,CACP,yDAAyD,EACzDsC,IAAI,IAAI,wBACV,CAAE;IAAAH,QAAA,eAEFf,KAAA,CAACnB,oBAAoB,CAAC2C,UAAU;MAC9BvB,SAAS,EAAErB,EAAE,CACX,kFAAkF,EAClFO,QAAQ,CAACsC,MAAM,CAAC;QACdC,GAAG,EAAE;MACP,CAAC,CAAC,EACFR,IAAI,IAAItC,EAAE,CAAC,WAAW,EAAEO,QAAQ,CAACsC,MAAM,CAAC;QAAEE,MAAM,EAAE;MAAO,CAAC,CAAC,CAAC,EAC5Db,KAAK,IAAI,MACX,CAAE;MAAA,GACEG,KAAK;MAAAF,QAAA,gBAETjB,IAAA,CAAAF,SAAA;QAAAmB,QAAA,EAAGA;MAAQ,CAAG,CAAC,eACfjB,IAAA,CAACrB,IAAI;QACHmD,EAAE,EAAER,IAAK;QACTnB,SAAS,EAAErB,EAAE,CACX,yCAAyC,EACzCoC,aACF;MAAE,CACH,CAAC;IAAA,CAC6B;EAAC,CACT,CAAC;AAEhC;;AAEA;AACA;AACA;AACA;AACA,SAASa,qBAAqBA,CAAC;EAC7B5B,SAAS;EACT,GAAGgB;AAEmD,CAAC,EAAE;EACzD,oBACEnB,IAAA,CAACpB,sBAAsB;IAACoD,QAAQ,EAAEtC,MAAO;IAAAuB,QAAA,eACvCjB,IAAA,CAACjB,oBAAoB,CAACkD,UAAU;MAC9B9B,SAAS,EAAErB,EAAE,CACX,yFAAyF,EACzFO,QAAQ,CAACsC,MAAM,CAAC;QACdC,GAAG,EAAE;MACP,CAAC,CAAC,EACFzB,SACF,CAAE;MAAA,GACEgB;IAAK,CACV;EAAC,CACoB,CAAC;AAE7B;;AAEA;AACA;AACA;AACA,MAAMxB,iBAAiB,GACrBN,QAAQ,CAACkC,EAAE,KAAK,KAAK,GAAG3B,mBAAmB,GAAGR,KAAK,CAACS,QAAQ;;AAE9D;AACA;AACA;AACA;AACA,SAASqC,kBAAkBA,CAAC;EAC1B/B,SAAS;EACTgC,gBAAgB;EAChBC,YAAY;EACZC,UAAU;EACV,GAAGlB;AAMH,CAAC,EAAE;EACH,oBACEnB,IAAA,CAACjB,oBAAoB,CAACuD,MAAM;IAACC,QAAQ,EAAEF,UAAW;IAAApB,QAAA,eAChDjB,IAAA,CAACL,iBAAiB;MAAAsB,QAAA,eAChBjB,IAAA,CAACjB,oBAAoB,CAACyD,OAAO;QAC3BC,KAAK,EAAEpD,QAAQ,CAACsC,MAAM,CAAC;UACrBC,GAAG,EAAEQ,YAAY,IAAIM,SAAS;UAC9Bb,MAAM,EAAEO,YAAY,GAChB9C,UAAU,CAACqD,OAAO,CAAC,CACjBrD,UAAU,CAACsD,YAAY,EACvBR,YAAY,CACb,CAAC,GACF9C,UAAU,CAACsD;QACjB,CAAC,CAAE;QACHzC,SAAS,EAAEgC,gBAAiB;QAAAlB,QAAA,eAE5BjB,IAAA,CAACpB,sBAAsB;UAACoD,QAAQ,EAAEtC,MAAO;UAAAuB,QAAA,eACvCjB,IAAA,CAACnB,gBAAgB,CAAC2C,QAAQ;YAACC,KAAK,EAAC,yBAAyB;YAAAR,QAAA,eACxDjB,IAAA,CAACjB,oBAAoB,CAAC8D,OAAO;cAC3B1C,SAAS,EAAErB,EAAE,CACX,sGAAsG,EACtGO,QAAQ,CAACsC,MAAM,CAAC;gBACdC,GAAG,EAAE9C,EAAE,CACL,kKAAkK,EAClKqC,KAAK,CAAC2B,IAAI,KAAK,QAAQ,IAAI,qBAAqB,EAChD3B,KAAK,CAAC2B,IAAI,KAAK,KAAK,IAAI,wBAC1B;cACF,CAAC,CAAC,EACF3C,SACF,CAAE;cAAA,GACEgB;YAAK,CACV;UAAC,CACuB;QAAC,CACN;MAAC,CACG;IAAC,CACd;EAAC,CACO,CAAC;AAElC;;AAEA;AACA;AACA;AACA;AACA,SAAS4B,eAAeA,CAAC;EACvB5C,SAAS;EACTa,KAAK;EACLgC,OAAO;EACP,GAAG7B;AAMH,CAAC,EAAE;EACH,oBACEnB,IAAA,CAACnB,gBAAgB,CAAC2C,QAAQ;IACxBC,KAAK,EAAE3C,EAAE,CACP,kFAAkF,EAClFkE,OAAO,KAAK,aAAa,IACvB,gDACJ,CAAE;IAAA/B,QAAA,eAEFjB,IAAA,CAACjB,oBAAoB,CAACkE,IAAI;MACxB9C,SAAS,EAAErB,EAAE,CACX,iGAAiG,EACjGO,QAAQ,CAACsC,MAAM,CAAC;QACdC,GAAG,EAAE9C,EAAE,CACL,8GAA8G,EAC9GkE,OAAO,KAAK,aAAa,IACvB,sDACJ;MACF,CAAC,CAAC,EACFA,OAAO,KAAK,aAAa,IACvB,wDAAwD,EAC1D7B,KAAK,CAAC+B,QAAQ,IAAI,YAAY,EAC9BlC,KAAK,IAAI,MAAM,EACfb,SACF,CAAE;MAAA,GACEgB;IAAK,CACV;EAAC,CACuB,CAAC;AAEhC;;AAEA;AACA;AACA;AACA;AACA,SAASgC,uBAAuBA,CAAC;EAC/BhD,SAAS;EACTc,QAAQ;EACR,GAAGE;AAIH,CAAC,EAAE;EACH,oBACEnB,IAAA,CAACnB,gBAAgB,CAAC2C,QAAQ;IAACC,KAAK,EAAC,iFAAiF;IAAAR,QAAA,eAChHf,KAAA,CAACnB,oBAAoB,CAACqE,YAAY;MAChCjD,SAAS,EAAErB,EAAE,CACX,sGAAsG,EACtGO,QAAQ,CAACsC,MAAM,CAAC;QACdC,GAAG,EAAE;MACP,CAAC,CAAC,EACFT,KAAK,CAAC+B,QAAQ,IAAI,YAAY,EAC9B/C,SACF,CAAE;MAAA,GACEgB,KAAK;MAAAF,QAAA,gBAETjB,IAAA,CAACR,IAAI;QAACW,SAAS,EAAC,8DAA8D;QAAAc,QAAA,eAC5EjB,IAAA,CAACjB,oBAAoB,CAACsE,aAAa;UAAApC,QAAA,eACjCjB,IAAA,CAACrB,IAAI;YACHmD,EAAE,EAAE9C,KAAM;YACVmB,SAAS,EAAErB,EAAE,CACX,wBAAwB,EACxBO,QAAQ,CAACsC,MAAM,CAAC;cAAEC,GAAG,EAAE;YAAsB,CAAC,CAChD;UAAE,CACH;QAAC,CACgC;MAAC,CACjC,CAAC,eACP5B,IAAA,CAAAF,SAAA;QAAAmB,QAAA,EAAGA;MAAQ,CAAG,CAAC;IAAA,CACkB;EAAC,CACX,CAAC;AAEhC;;AAEA;AACA;AACA;AACA;AACA,SAASqC,oBAAoBA,CAAC;EAC5BnD,SAAS;EACTc,QAAQ;EACR,GAAGE;AAIH,CAAC,EAAE;EACH,oBACEnB,IAAA,CAACnB,gBAAgB,CAAC2C,QAAQ;IAACC,KAAK,EAAC,iFAAiF;IAAAR,QAAA,eAChHf,KAAA,CAACnB,oBAAoB,CAACwE,SAAS;MAC7BpD,SAAS,EAAErB,EAAE,CACX,sGAAsG,EACtGO,QAAQ,CAACsC,MAAM,CAAC;QACdC,GAAG,EAAE;MACP,CAAC,CAAC,EACFT,KAAK,CAAC+B,QAAQ,IAAI,YAAY,EAC9B/C,SACF,CAAE;MAAA,GACEgB,KAAK;MAAAF,QAAA,gBAETjB,IAAA,CAACR,IAAI;QAACW,SAAS,EAAC,8DAA8D;QAAAc,QAAA,eAC5EjB,IAAA,CAACjB,oBAAoB,CAACsE,aAAa;UAAApC,QAAA,eACjCjB,IAAA,CAACR,IAAI;YAACW,SAAS,EAAC;UAAoC,CAAE;QAAC,CACrB;MAAC,CACjC,CAAC,eACPH,IAAA,CAAAF,SAAA;QAAAmB,QAAA,EAAGA;MAAQ,CAAG,CAAC;IAAA,CACe;EAAC,CACR,CAAC;AAEhC;;AAEA;AACA;AACA;AACA;AACA,SAASuC,gBAAgBA,CAAC;EACxBrD,SAAS;EACTa,KAAK;EACL,GAAGG;AAKH,CAAC,EAAE;EACH,oBACEnB,IAAA,CAACjB,oBAAoB,CAAC0E,KAAK;IACzBtD,SAAS,EAAErB,EAAE,CACX,yDAAyD,EACzDkC,KAAK,IAAI,MAAM,EACfb,SACF,CAAE;IAAA,GACEgB;EAAK,CACV,CAAC;AAEN;;AAEA;AACA;AACA;AACA;AACA,SAASuC,oBAAoBA,CAAC;EAC5BvD,SAAS;EACT,GAAGgB;AAEkD,CAAC,EAAE;EACxD,oBACEnB,IAAA,CAACjB,oBAAoB,CAAC4E,SAAS;IAC7BxD,SAAS,EAAErB,EAAE,CAAC,2BAA2B,EAAEqB,SAAS,CAAE;IAAA,GAClDgB;EAAK,CACV,CAAC;AAEN;;AAEA;AACA;AACA;AACA;AACA,SAASyC,mBAAmBA,CAAC;EAC3BzD,SAAS;EACT,GAAGgB;AACkC,CAAC,EAAE;EACxC,oBACEnB,IAAA,CAACT,IAAI;IACHY,SAAS,EAAErB,EAAE,CACX,uDAAuD,EACvDqB,SACF,CAAE;IAAA,GACEgB;EAAK,CACV,CAAC;AAEN;AAEA,SACEf,WAAW,EACX+C,uBAAuB,EACvBjB,kBAAkB,EAClB1B,gBAAgB,EAChBuC,eAAe,EACfS,gBAAgB,EAChB5C,qBAAqB,EACrB0C,oBAAoB,EACpBI,oBAAoB,EACpBE,mBAAmB,EACnBlD,cAAc,EACdqB,qBAAqB,EACrBjB,qBAAqB,EACrBR,kBAAkB","ignoreList":[]}

package/lib/module/components/ui/Custom-Card.js

@@ -0,0 +1,202 @@
+"use strict";
+
+import * as Slot from '@rn-primitives/slot';
+import * as React from 'react';
+import { View, useColorScheme } from 'react-native';
+import { SquircleView } from 'react-native-figma-squircle';
+import { cn } from "../../lib/utils.js";
+import { TextClassContext } from "./Text.js";
+
+/**
+ * CustomCard container component with squircle shape
+ *
+ * Provides elevated container with smooth squircle corners (iOS-like rounded corners),
+ * border, and shadow. Uses Figma's squircle algorithm for premium look.
+ * Use with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter
+ * for a complete card structure.
+ *
+ * @component
+ * @example
+ * ```tsx
+ * <CustomCard>
+ *   <CardHeader>
+ *     <CardTitle><Text>Title</Text></CardTitle>
+ *     <CardDescription><Text>Description</Text></CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     <Text>Card content goes here</Text>
+ *   </CardContent>
+ *   <CardFooter>
+ *     <Button>Action</Button>
+ *   </CardFooter>
+ * </CustomCard>
+ *
+ * // With custom corner smoothing
+ * <CustomCard cornerSmoothing={1}>
+ *   <Text>Extra smooth corners</Text>
+ * </CustomCard>
+ * ```
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes
+ * @property {number} [cornerRadius=16] - Corner radius in pixels
+ * @property {number} [cornerSmoothing=0.8] - Smoothing factor (0-1), higher = more iOS-like
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const CustomCard = /*#__PURE__*/React.forwardRef(({
+  className: _className,
+  asChild = false,
+  cornerRadius = 16,
+  cornerSmoothing = 1.0,
+  children,
+  ...props
+}, ref) => {
+  const colorScheme = useColorScheme();
+  const isDark = colorScheme === 'dark';
+  if (asChild) {
+    const Component = Slot.View;
+    return /*#__PURE__*/_jsx(Component, {
+      ref: ref,
+      ...props,
+      children: children
+    });
+  }
+
+  // Use SquircleView directly as the container with inner View for content
+  return /*#__PURE__*/_jsx(SquircleView, {
+    squircleParams: {
+      cornerRadius,
+      cornerSmoothing,
+      fillColor: isDark ? 'hsl(224 71.4% 4.1%)' : 'hsl(0 0% 100%)',
+      strokeColor: isDark ? 'hsl(215 27.9% 16.9%)' : 'hsl(214.3 31.8% 91.4%)',
+      strokeWidth: 1
+    },
+    ...props,
+    children: /*#__PURE__*/_jsx(View, {
+      ref: ref,
+      className: "px-4",
+      children: children
+    })
+  });
+});
+CustomCard.displayName = 'CustomCard';
+
+/**
+ * CustomCardHeader - Container for card title and description
+ *
+ * Provides proper spacing for title and description elements at the top of a card.
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes
+ */
+const CustomCardHeader = /*#__PURE__*/React.forwardRef(({
+  className,
+  asChild = false,
+  ...props
+}, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return /*#__PURE__*/_jsx(Component, {
+    className: cn('flex flex-col gap-1.5 p-6', className),
+    ref: ref,
+    ...props
+  });
+});
+CustomCardHeader.displayName = 'CustomCardHeader';
+
+/**
+ * CustomCardTitle - Main title text for the card
+ *
+ * Automatically styles child Text components with large, semibold typography.
+ * Uses TextClassContext to apply consistent styling to nested Text elements.
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes for text styling
+ */
+const CustomCardTitle = /*#__PURE__*/React.forwardRef(({
+  className,
+  asChild = false,
+  ...props
+}, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return /*#__PURE__*/_jsx(TextClassContext.Provider, {
+    value: cn('text-2xl font-semibold leading-none tracking-tight text-card-foreground dark:text-card-foreground', className),
+    children: /*#__PURE__*/_jsx(Component, {
+      ref: ref,
+      ...props
+    })
+  });
+});
+CustomCardTitle.displayName = 'CustomCardTitle';
+
+/**
+ * CustomCardDescription - Subtitle or description text for the card
+ *
+ * Automatically styles child Text components with muted, smaller typography.
+ * Uses TextClassContext to apply consistent styling to nested Text elements.
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes for text styling
+ */
+const CustomCardDescription = /*#__PURE__*/React.forwardRef(({
+  className,
+  asChild = false,
+  ...props
+}, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return /*#__PURE__*/_jsx(TextClassContext.Provider, {
+    value: cn('text-sm text-muted-foreground dark:text-muted-foreground', className),
+    children: /*#__PURE__*/_jsx(Component, {
+      ref: ref,
+      ...props
+    })
+  });
+});
+CustomCardDescription.displayName = 'CustomCardDescription';
+
+/**
+ * CustomCardContent - Main content area of the card
+ *
+ * Container for the primary card content with appropriate padding.
+ * Top padding is removed to flow naturally after CustomCardHeader.
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes
+ */
+const CustomCardContent = /*#__PURE__*/React.forwardRef(({
+  className,
+  asChild = false,
+  ...props
+}, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return /*#__PURE__*/_jsx(Component, {
+    className: cn('p-6 pt-0', className),
+    ref: ref,
+    ...props
+  });
+});
+CustomCardContent.displayName = 'CustomCardContent';
+
+/**
+ * CustomCardFooter - Footer area for actions or additional info
+ *
+ * Typically contains buttons or other interactive elements.
+ * Arranged as a row with centered items.
+ *
+ * @property {boolean} [asChild] - When true, merges props into immediate child
+ * @property {string} [className] - Additional Tailwind classes
+ */
+const CustomCardFooter = /*#__PURE__*/React.forwardRef(({
+  className,
+  asChild = false,
+  ...props
+}, ref) => {
+  const Component = asChild ? Slot.View : View;
+  return /*#__PURE__*/_jsx(Component, {
+    className: cn('flex flex-row items-center p-6 pt-0', className),
+    ref: ref,
+    ...props
+  });
+});
+CustomCardFooter.displayName = 'CustomCardFooter';
+export { CustomCard, CustomCardContent, CustomCardDescription, CustomCardFooter, CustomCardHeader, CustomCardTitle };
+//# sourceMappingURL=Custom-Card.js.map

package/lib/module/components/ui/Custom-Card.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Slot","React","View","useColorScheme","SquircleView","cn","TextClassContext","jsx","_jsx","CustomCard","forwardRef","className","_className","asChild","cornerRadius","cornerSmoothing","children","props","ref","colorScheme","isDark","Component","squircleParams","fillColor","strokeColor","strokeWidth","displayName","CustomCardHeader","CustomCardTitle","Provider","value","CustomCardDescription","CustomCardContent","CustomCardFooter"],"sourceRoot":"../../../../src","sources":["components/ui/Custom-Card.tsx"],"mappings":"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","ignoreList":[]}