@cdx-ui/components 0.0.1-alpha.3 → 0.0.1-alpha.31

package/lib/commonjs/styles/primitives.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TRANSITION_COLORS = exports.SIZE_SCALE = exports.SHADOW_SM = exports.SHADOW_MD = exports.SEMANTIC_COLORS = exports.RADIUS_SM = exports.RADIUS_MD = exports.RADIUS_FULL = exports.FOCUS_RING = exports.DISABLED_OPACITY = exports.DISABLED_CURSOR = exports.COLOR_TEXT_SECONDARY = exports.COLOR_TEXT_PRIMARY = exports.COLOR_TEXT_PLACEHOLDER = exports.COLOR_TEXT_MUTED = exports.COLOR_TEXT_INVERSE = exports.COLOR_TEXT_INVALID = exports.COLOR_BRAND_HOVER = exports.COLOR_BRAND_DEFAULT = exports.COLOR_BRAND_ACTIVE = exports.COLOR_BORDER_STRONG = exports.COLOR_BORDER_INVALID = exports.COLOR_BORDER_FOCUS = exports.COLOR_BORDER_DEFAULT = exports.COLOR_BG_SUBTLE = exports.COLOR_BG_PRIMARY = exports.COLOR_BG_MUTED = exports.COLOR_BG_INVERSE = exports.COLOR_ACCENT_DEFAULT = exports.COLOR_ACCENT_BORDER = void 0;
+// packages/components/src/styles/primitives.ts
+// Semantic constants for CDX UI component styling.
+// See docs/visual-revamp-plan.md for rationale and usage.
+
+// ─── Colors ──────────────────────────────────────────────
+// Surface & background
+const COLOR_BG_PRIMARY = exports.COLOR_BG_PRIMARY = 'bg-white';
+const COLOR_BG_SUBTLE = exports.COLOR_BG_SUBTLE = 'bg-slate-50';
+const COLOR_BG_MUTED = exports.COLOR_BG_MUTED = 'bg-slate-100';
+const COLOR_BG_INVERSE = exports.COLOR_BG_INVERSE = 'bg-slate-900';
+
+// Border
+const COLOR_BORDER_DEFAULT = exports.COLOR_BORDER_DEFAULT = 'border-slate-200';
+const COLOR_BORDER_STRONG = exports.COLOR_BORDER_STRONG = 'border-slate-300';
+const COLOR_BORDER_FOCUS = exports.COLOR_BORDER_FOCUS = 'border-slate-900';
+const COLOR_BORDER_INVALID = exports.COLOR_BORDER_INVALID = 'border-red-500';
+
+// Text
+const COLOR_TEXT_PRIMARY = exports.COLOR_TEXT_PRIMARY = 'text-slate-900';
+const COLOR_TEXT_SECONDARY = exports.COLOR_TEXT_SECONDARY = 'text-slate-500';
+const COLOR_TEXT_MUTED = exports.COLOR_TEXT_MUTED = 'text-slate-400';
+const COLOR_TEXT_INVERSE = exports.COLOR_TEXT_INVERSE = 'text-white';
+const COLOR_TEXT_PLACEHOLDER = exports.COLOR_TEXT_PLACEHOLDER = 'text-slate-400';
+const COLOR_TEXT_INVALID = exports.COLOR_TEXT_INVALID = 'text-red-600';
+
+// Brand / Action
+const COLOR_BRAND_DEFAULT = exports.COLOR_BRAND_DEFAULT = 'bg-slate-900';
+const COLOR_BRAND_HOVER = exports.COLOR_BRAND_HOVER = 'bg-slate-800';
+const COLOR_BRAND_ACTIVE = exports.COLOR_BRAND_ACTIVE = 'bg-slate-700';
+
+// Accent (for checked states, active indicators)
+const COLOR_ACCENT_DEFAULT = exports.COLOR_ACCENT_DEFAULT = 'bg-slate-900';
+const COLOR_ACCENT_BORDER = exports.COLOR_ACCENT_BORDER = 'border-slate-900';
+
+// Semantic colors (danger, warning, success, info)
+// Kept for Button's 5-color system
+const SEMANTIC_COLORS = exports.SEMANTIC_COLORS = {
+  action: {
+    bg: 'bg-slate-900',
+    bgHover: 'bg-slate-800',
+    bgActive: 'bg-slate-700',
+    border: 'border-slate-900',
+    text: 'text-slate-900',
+    ring: 'ring-slate-400/50'
+  },
+  danger: {
+    bg: 'bg-red-600',
+    bgHover: 'bg-red-700',
+    bgActive: 'bg-red-800',
+    border: 'border-red-600',
+    text: 'text-red-600',
+    ring: 'ring-red-400/50'
+  },
+  warning: {
+    bg: 'bg-amber-500',
+    bgHover: 'bg-amber-600',
+    bgActive: 'bg-amber-700',
+    border: 'border-amber-500',
+    text: 'text-amber-600',
+    ring: 'ring-amber-400/50'
+  },
+  success: {
+    bg: 'bg-green-600',
+    bgHover: 'bg-green-700',
+    bgActive: 'bg-green-800',
+    border: 'border-green-600',
+    text: 'text-green-600',
+    ring: 'ring-green-400/50'
+  },
+  info: {
+    bg: 'bg-sky-500',
+    bgHover: 'bg-sky-600',
+    bgActive: 'bg-sky-700',
+    border: 'border-sky-500',
+    text: 'text-sky-600',
+    ring: 'ring-sky-400/50'
+  }
+};
+
+// ─── Focus ───────────────────────────────────────────────
+const FOCUS_RING = exports.FOCUS_RING = 'ring-2 ring-slate-400/50 ring-offset-2';
+
+// ─── Radius ──────────────────────────────────────────────
+const RADIUS_SM = exports.RADIUS_SM = 'rounded-lg'; // buttons, inputs, checkboxes
+const RADIUS_MD = exports.RADIUS_MD = 'rounded-xl'; // cards, dropdowns, modals
+const RADIUS_FULL = exports.RADIUS_FULL = 'rounded-full'; // pills, avatars, switches
+
+// ─── Shadows ─────────────────────────────────────────────
+const SHADOW_SM = exports.SHADOW_SM = 'shadow-sm';
+const SHADOW_MD = exports.SHADOW_MD = 'shadow-md';
+
+// ─── Sizing ──────────────────────────────────────────────
+// Unified size scale for interactive/form components (Button, Input, Select, Checkbox).
+// Only two sizes: 'default' (regular) and 'small' (compact).
+// NOTE: Text and Heading use a separate typography scale (xs/sm/md/lg/xl) — not this.
+const SIZE_SCALE = exports.SIZE_SCALE = {
+  default: {
+    height: 'h-10',
+    px: 'px-4',
+    gap: 'gap-2',
+    text: 'text-base'
+  },
+  small: {
+    height: 'h-8',
+    px: 'px-3',
+    gap: 'gap-1.5',
+    text: 'text-sm'
+  }
+};
+
+// ─── Transitions ─────────────────────────────────────────
+const TRANSITION_COLORS = exports.TRANSITION_COLORS = 'transition-colors duration-150';
+
+// ─── Disabled ────────────────────────────────────────────
+const DISABLED_OPACITY = exports.DISABLED_OPACITY = 'data-[disabled=true]:opacity-50';
+const DISABLED_CURSOR = exports.DISABLED_CURSOR = 'data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none';
+//# sourceMappingURL=primitives.js.map

package/lib/commonjs/styles/primitives.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["COLOR_BG_PRIMARY","exports","COLOR_BG_SUBTLE","COLOR_BG_MUTED","COLOR_BG_INVERSE","COLOR_BORDER_DEFAULT","COLOR_BORDER_STRONG","COLOR_BORDER_FOCUS","COLOR_BORDER_INVALID","COLOR_TEXT_PRIMARY","COLOR_TEXT_SECONDARY","COLOR_TEXT_MUTED","COLOR_TEXT_INVERSE","COLOR_TEXT_PLACEHOLDER","COLOR_TEXT_INVALID","COLOR_BRAND_DEFAULT","COLOR_BRAND_HOVER","COLOR_BRAND_ACTIVE","COLOR_ACCENT_DEFAULT","COLOR_ACCENT_BORDER","SEMANTIC_COLORS","action","bg","bgHover","bgActive","border","text","ring","danger","warning","success","info","FOCUS_RING","RADIUS_SM","RADIUS_MD","RADIUS_FULL","SHADOW_SM","SHADOW_MD","SIZE_SCALE","default","height","px","gap","small","TRANSITION_COLORS","DISABLED_OPACITY","DISABLED_CURSOR"],"sourceRoot":"../../../src","sources":["styles/primitives.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/components/AlertDialog/index.js

@@ -0,0 +1,112 @@
+"use strict";
+
+import React, { forwardRef } from 'react';
+import { useDialog } from '@cdx-ui/primitives';
+import { composeEventHandlers } from '@cdx-ui/utils';
+import { Button } from '../Button';
+import { Dialog } from '../Dialog';
+
+// =============================================================================
+// ALERT DIALOG ROOT (Dialog with non-dismissible defaults + alertdialog role)
+// =============================================================================
+import { jsx as _jsx } from "react/jsx-runtime";
+const AlertDialogRoot = /*#__PURE__*/forwardRef(({
+  closeOnBackdropPress = false,
+  closeOnEscKey = false,
+  role = 'alertdialog',
+  children,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(Dialog, {
+  ref: ref,
+  closeOnBackdropPress: closeOnBackdropPress,
+  closeOnEscKey: closeOnEscKey,
+  role: role,
+  ...props,
+  children: children
+}));
+AlertDialogRoot.displayName = 'AlertDialog';
+
+// =============================================================================
+// ALERT DIALOG ACTION
+// =============================================================================
+
+const AlertDialogAction = /*#__PURE__*/forwardRef(({
+  asChild = false,
+  children,
+  color = 'action',
+  className,
+  ...props
+}, ref) => {
+  if (asChild && /*#__PURE__*/React.isValidElement(children)) {
+    return /*#__PURE__*/React.cloneElement(children, {
+      ref,
+      className,
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(Button, {
+    ref: ref,
+    variant: "strong",
+    color: color,
+    className: className,
+    ...props,
+    children: /*#__PURE__*/_jsx(Button.Label, {
+      children: children
+    })
+  });
+});
+AlertDialogAction.displayName = 'AlertDialog.Action';
+
+// =============================================================================
+// ALERT DIALOG CANCEL
+// =============================================================================
+
+const AlertDialogCancel = /*#__PURE__*/forwardRef(({
+  asChild = false,
+  children,
+  onPress,
+  className,
+  ...props
+}, ref) => {
+  const {
+    onOpenChange
+  } = useDialog();
+  const handlePress = composeEventHandlers(onPress, () => onOpenChange(false));
+  if (asChild && /*#__PURE__*/React.isValidElement(children)) {
+    return /*#__PURE__*/React.cloneElement(children, {
+      ref,
+      onPress: handlePress,
+      className,
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(Button, {
+    ref: ref,
+    variant: "outline",
+    onPress: handlePress,
+    className: className,
+    ...props,
+    children: /*#__PURE__*/_jsx(Button.Label, {
+      children: children
+    })
+  });
+});
+AlertDialogCancel.displayName = 'AlertDialog.Cancel';
+
+// =============================================================================
+// COMPOUND EXPORT
+// =============================================================================
+
+export const AlertDialog = Object.assign(AlertDialogRoot, {
+  Trigger: Dialog.Trigger,
+  Content: Dialog.Content,
+  Header: Dialog.Header,
+  Title: Dialog.Title,
+  Description: Dialog.Description,
+  Body: Dialog.Body,
+  Footer: Dialog.Footer,
+  Close: Dialog.Close,
+  Action: AlertDialogAction,
+  Cancel: AlertDialogCancel
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/AlertDialog/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","forwardRef","useDialog","composeEventHandlers","Button","Dialog","jsx","_jsx","AlertDialogRoot","closeOnBackdropPress","closeOnEscKey","role","children","props","ref","displayName","AlertDialogAction","asChild","color","className","isValidElement","cloneElement","variant","Label","AlertDialogCancel","onPress","onOpenChange","handlePress","AlertDialog","Object","assign","Trigger","Content","Header","Title","Description","Body","Footer","Close","Action","Cancel"],"sourceRoot":"../../../../src","sources":["components/AlertDialog/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Avatar/index.js

@@ -0,0 +1,152 @@
+"use strict";
+
+import { forwardRef } from 'react';
+import { Image, Text, View } from 'react-native';
+import { createAvatar } from '@cdx-ui/primitives';
+import { cn, useStyleContext, withStyleContext } from '@cdx-ui/utils';
+import { Icon as IconComponent } from '../Icon';
+import { avatarBadgeVariants, avatarIconVariants, avatarTextVariants, avatarImageVariants, avatarRootVariants } from './styles';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SCOPE = 'AVATAR';
+const Root = withStyleContext(View, SCOPE);
+const useAvatarStyleContext = () => useStyleContext(SCOPE);
+const AvatarPrimitive = createAvatar({
+  Root,
+  Image,
+  Text,
+  Icon: IconComponent,
+  Badge: View
+});
+
+// =============================================================================
+// AVATAR ROOT
+// =============================================================================
+
+const AvatarRoot = /*#__PURE__*/forwardRef(({
+  size = 'lg',
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const computedClassName = cn(avatarRootVariants({
+    size
+  }), className);
+  return /*#__PURE__*/_jsx(AvatarPrimitive, {
+    ref: ref,
+    className: computedClassName,
+    style: style,
+    context: {
+      size
+    },
+    ...props,
+    children: children
+  });
+});
+AvatarRoot.displayName = 'Avatar';
+
+// =============================================================================
+// AVATAR IMAGE
+// =============================================================================
+
+const AvatarImage = /*#__PURE__*/forwardRef(({
+  className,
+  style,
+  ...props
+}, ref) => {
+  const computedClassName = cn(avatarImageVariants(), className);
+  return /*#__PURE__*/_jsx(AvatarPrimitive.Image, {
+    ref: ref,
+    className: computedClassName,
+    style: style,
+    ...props
+  });
+});
+AvatarImage.displayName = 'Avatar.Image';
+
+// =============================================================================
+// AVATAR TEXT
+// =============================================================================
+
+const AvatarText = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const {
+    size
+  } = useAvatarStyleContext();
+  const computedClassName = cn(avatarTextVariants({
+    size
+  }), className);
+  return /*#__PURE__*/_jsx(AvatarPrimitive.Text, {
+    ref: ref,
+    className: computedClassName,
+    style: style,
+    ...props,
+    children: children
+  });
+});
+AvatarText.displayName = 'Avatar.Text';
+
+// =============================================================================
+// AVATAR ICON
+// =============================================================================
+
+const AvatarIcon = ({
+  className,
+  style,
+  ...props
+}) => {
+  const {
+    size
+  } = useAvatarStyleContext();
+  const computedClassName = cn(avatarIconVariants({
+    size
+  }), className);
+  return /*#__PURE__*/_jsx(AvatarPrimitive.Icon, {
+    className: computedClassName,
+    style: style,
+    ...props
+  });
+};
+AvatarIcon.displayName = 'Avatar.Icon';
+
+// =============================================================================
+// AVATAR BADGE
+// =============================================================================
+
+const AvatarBadge = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const {
+    size
+  } = useAvatarStyleContext();
+  const computedClassName = cn(avatarBadgeVariants({
+    size
+  }), className);
+  return /*#__PURE__*/_jsx(AvatarPrimitive.Badge, {
+    ref: ref,
+    className: computedClassName,
+    style: style,
+    ...props,
+    children: children
+  });
+});
+AvatarBadge.displayName = 'Avatar.Badge';
+
+// =============================================================================
+// COMPOUND COMPONENT
+// =============================================================================
+
+export const Avatar = Object.assign(AvatarRoot, {
+  Image: AvatarImage,
+  Text: AvatarText,
+  Icon: AvatarIcon,
+  Badge: AvatarBadge
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/Avatar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","Image","Text","View","createAvatar","cn","useStyleContext","withStyleContext","Icon","IconComponent","avatarBadgeVariants","avatarIconVariants","avatarTextVariants","avatarImageVariants","avatarRootVariants","jsx","_jsx","SCOPE","Root","useAvatarStyleContext","AvatarPrimitive","Badge","AvatarRoot","size","className","children","style","props","ref","computedClassName","context","displayName","AvatarImage","AvatarText","AvatarIcon","AvatarBadge","Avatar","Object","assign"],"sourceRoot":"../../../../src","sources":["components/Avatar/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Avatar/styles.js

@@ -0,0 +1,77 @@
+"use strict";
+
+import { cva } from 'class-variance-authority';
+import { COLOR_BG_MUTED, COLOR_TEXT_SECONDARY, RADIUS_FULL } from '../../styles/primitives';
+
+// ── Root ─────────────────────────────────────────────────
+
+export const avatarRootVariants = cva([RADIUS_FULL, 'relative items-center justify-center', COLOR_BG_MUTED], {
+  variants: {
+    size: {
+      sm: 'w-8 h-8',
+      md: 'w-10 h-10',
+      lg: 'w-12 h-12',
+      xl: 'w-16 h-16',
+      '2xl': 'w-20 h-20'
+    }
+  },
+  defaultVariants: {
+    size: 'lg'
+  }
+});
+
+// ── Image ────────────────────────────────────────────────
+
+export const avatarImageVariants = cva(['absolute top-0 left-0 w-full h-full', RADIUS_FULL, 'overflow-hidden']);
+
+// ── Text ─────────────────────────────────────────────────
+
+export const avatarTextVariants = cva([COLOR_TEXT_SECONDARY, 'font-semibold'], {
+  variants: {
+    size: {
+      sm: 'text-xs',
+      md: 'text-sm',
+      lg: 'text-base',
+      xl: 'text-xl',
+      '2xl': 'text-2xl'
+    }
+  },
+  defaultVariants: {
+    size: 'lg'
+  }
+});
+
+// ── Icon ─────────────────────────────────────────────────
+
+export const avatarIconVariants = cva([COLOR_TEXT_SECONDARY], {
+  variants: {
+    size: {
+      sm: 'size-4',
+      md: 'size-5',
+      lg: 'size-6',
+      xl: 'size-8',
+      '2xl': 'size-10'
+    }
+  },
+  defaultVariants: {
+    size: 'lg'
+  }
+});
+
+// ── Badge ────────────────────────────────────────────────
+
+export const avatarBadgeVariants = cva(['absolute border-2 border-white', RADIUS_FULL], {
+  variants: {
+    size: {
+      sm: 'w-2.5 h-2.5 bottom-0 right-0',
+      md: 'w-3 h-3 bottom-0 right-0',
+      lg: 'w-3.5 h-3.5 bottom-0 right-0',
+      xl: 'w-4 h-4 bottom-0.5 right-0.5',
+      '2xl': 'w-5 h-5 bottom-0.5 right-0.5'
+    }
+  },
+  defaultVariants: {
+    size: 'lg'
+  }
+});
+//# sourceMappingURL=styles.js.map

package/lib/module/components/Avatar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cva","COLOR_BG_MUTED","COLOR_TEXT_SECONDARY","RADIUS_FULL","avatarRootVariants","variants","size","sm","md","lg","xl","defaultVariants","avatarImageVariants","avatarTextVariants","avatarIconVariants","avatarBadgeVariants"],"sourceRoot":"../../../../src","sources":["components/Avatar/styles.ts"],"mappings":";;AAAA,SAASA,GAAG,QAA2B,0BAA0B;AACjE,SAASC,cAAc,EAAEC,oBAAoB,EAAEC,WAAW,QAAQ,yBAAyB;;AAE3F;;AAEA,OAAO,MAAMC,kBAAkB,GAAGJ,GAAG,CACnC,CAACG,WAAW,EAAE,sCAAsC,EAAEF,cAAc,CAAC,EACrE;EACEI,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,WAAW;MACf,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,IAAI,EAAE;EACR;AACF,CACF,CAAC;;AAED;;AAEA,OAAO,MAAMM,mBAAmB,GAAGZ,GAAG,CAAC,CACrC,qCAAqC,EACrCG,WAAW,EACX,iBAAiB,CAClB,CAAC;;AAEF;;AAEA,OAAO,MAAMU,kBAAkB,GAAGb,GAAG,CAAC,CAACE,oBAAoB,EAAE,eAAe,CAAC,EAAE;EAC7EG,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,SAAS;MACbC,EAAE,EAAE,WAAW;MACfC,EAAE,EAAE,SAAS;MACb,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,IAAI,EAAE;EACR;AACF,CAAC,CAAC;;AAEF;;AAEA,OAAO,MAAMQ,kBAAkB,GAAGd,GAAG,CAAC,CAACE,oBAAoB,CAAC,EAAE;EAC5DG,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZC,EAAE,EAAE,QAAQ;MACZ,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,IAAI,EAAE;EACR;AACF,CAAC,CAAC;;AAEF;;AAEA,OAAO,MAAMS,mBAAmB,GAAGf,GAAG,CAAC,CAAC,gCAAgC,EAAEG,WAAW,CAAC,EAAE;EACtFE,QAAQ,EAAE;IACRC,IAAI,EAAE;MACJC,EAAE,EAAE,8BAA8B;MAClCC,EAAE,EAAE,0BAA0B;MAC9BC,EAAE,EAAE,8BAA8B;MAClCC,EAAE,EAAE,8BAA8B;MAClC,KAAK,EAAE;IACT;EACF,CAAC;EACDC,eAAe,EAAE;IACfL,IAAI,EAAE;EACR;AACF,CAAC,CAAC","ignoreList":[]}