@cdx-ui/components 0.0.1-alpha.26 → 0.0.1-alpha.28

package/lib/typescript/components/Button/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAalE,eAAO,MAAM,kBAAkB;;;;;;8EA0V9B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;8EAwI7B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;8EAoFhC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;8EAiB9B,CAAC;AAEH,eAAO,MAAM,kBAAkB;;8EAU7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACzE,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/Button/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAwClE,eAAO,MAAM,kBAAkB;;;;;;8EAmL9B,CAAC;AAEF,eAAO,MAAM,kBAAkB;;;;;8EAiC7B,CAAC;AAEH,eAAO,MAAM,qBAAqB;;;;8EAoFhC,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;8EAiB9B,CAAC;AAEH,eAAO,MAAM,kBAAkB;;8EAU7B,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACzE,MAAM,MAAM,uBAAuB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC"}

package/lib/typescript/components/IconButton/index.d.ts

@@ -0,0 +1,15 @@
+import { View, type PressableProps } from 'react-native';
+import { type IButtonProps } from '@cdx-ui/primitives';
+import type { CdxIcon } from '@cdx-ui/icons';
+import { type IconProps } from '../Icon';
+import { type IconButtonVariantProps } from './styles';
+export interface IconButtonProps extends PressableProps, IButtonProps, IconButtonVariantProps {
+    className?: string;
+    /** CDX icon component to render (icon-only control). */
+    as: CdxIcon;
+    /** Passed through to the underlying `Icon`. */
+    iconClassName?: IconProps['className'];
+}
+export declare const IconButton: import("react").ForwardRefExoticComponent<IconButtonProps & import("react").RefAttributes<View>>;
+export type { IconButtonVariantProps };
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/IconButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsC,IAAI,EAAE,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC7F,OAAO,EAGL,KAAK,YAAY,EAElB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,SAAS,CAAC;AAC/C,OAAO,EACL,KAAK,sBAAsB,EAI5B,MAAM,UAAU,CAAC;AA2BlB,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,YAAY,EAAE,sBAAsB;IAC3F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wDAAwD;IACxD,EAAE,EAAE,OAAO,CAAC;IACZ,+CAA+C;IAC/C,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;CACxC;AAyCD,eAAO,MAAM,UAAU,kGAAiB,CAAC;AAEzC,YAAY,EAAE,sBAAsB,EAAE,CAAC"}

package/lib/typescript/components/IconButton/styles.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from 'class-variance-authority';
+export declare const iconButtonRootVariants: (props?: ({
+    variant?: "ghost" | "solid" | null | undefined;
+    size?: "small" | "default" | null | undefined;
+    mode?: "dark" | "light" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const iconButtonGlyphVariants: (props?: ({
+    size?: "small" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** Icon fill aligned with Button outline/ghost action label colors (solid matches ghost). */
+export declare const iconButtonIconColorVariants: (props?: ({
+    variant?: "ghost" | "solid" | null | undefined;
+    mode?: "dark" | "light" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export type IconButtonVariantProps = VariantProps<typeof iconButtonRootVariants>;
+//# sourceMappingURL=styles.d.ts.map

package/lib/typescript/components/IconButton/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/components/IconButton/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAyClE,eAAO,MAAM,sBAAsB;;;;8EAuDlC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;8EAUlC,CAAC;AAEH,6FAA6F;AAC7F,eAAO,MAAM,2BAA2B;;;8EAgBtC,CAAC;AAEH,MAAM,MAAM,sBAAsB,GAAG,YAAY,CAAC,OAAO,sBAAsB,CAAC,CAAC"}

package/lib/typescript/components/Image/Image.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Thin wrapper around React Native's `Image`.
+ *
+ * Design-system layout (sizes, radii, loading/error UI) is intentionally
+ * NOT baked in here — use purpose-built components like `Avatar` instead.
+ *
+ * What this wrapper adds over a raw RN `Image`:
+ *  - Accepts a plain URI **string** as `source` (auto-normalized to `{ uri }`).
+ *  - Extends the prop surface with **web-only** HTML attributes (`sizes`,
+ *    `loading`, `decoding`, etc.) for better `react-native-web` support.
+ *    Props already covered by RN 0.81+ (`alt`, `srcSet`, `crossOrigin`,
+ *    `referrerPolicy`) are inherited from the native typings.
+ *  - All other props and `ref` are forwarded to the underlying `Image`.
+ *
+ * Inspired by Expo's html-elements Image primitive:
+ * @see https://github.com/expo/expo/blob/main/packages/html-elements/src/primitives/Image.tsx
+ */
+import { type ComponentPropsWithoutRef } from 'react';
+import { Image as RNImage, type ImageSourcePropType } from 'react-native';
+/**
+ * HTML-ish attributes not in RN’s core typings. Forwarded to `Image` with `...props`;
+ * **react-native-web** maps supported ones to the DOM `<img>`. On iOS/Android they are
+ * typically ignored (no visual effect).
+ */
+export interface WebImageProps {
+    /** DOM `sizes` for responsive selection with `srcSet` — web only. */
+    sizes?: string;
+    /** DOM lazy-loading hint — web only. */
+    loading?: 'lazy' | 'eager';
+    /** DOM decode hint — web only. */
+    decoding?: 'async' | 'auto' | 'sync';
+    /** DOM drag behavior — web only. */
+    draggable?: boolean;
+    /** DOM focus order — web only. */
+    tabIndex?: number;
+}
+export type ImageProps = WebImageProps & Omit<ComponentPropsWithoutRef<typeof RNImage>, 'source'> & {
+    /** URI string (normalized to `{ uri }`) or standard `ImageSourcePropType`. */
+    source: string | ImageSourcePropType;
+    className?: string;
+};
+export declare const Image: import("react").ForwardRefExoticComponent<WebImageProps & Omit<import("react-native").ImageProps, "source"> & {
+    /** URI string (normalized to `{ uri }`) or standard `ImageSourcePropType`. */
+    source: string | ImageSourcePropType;
+    className?: string;
+} & import("react").RefAttributes<RNImage>>;
+//# sourceMappingURL=Image.d.ts.map

package/lib/typescript/components/Image/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../../../src/components/Image/Image.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAc,KAAK,wBAAwB,EAAqB,MAAM,OAAO,CAAC;AACrF,OAAO,EAAE,KAAK,IAAI,OAAO,EAAE,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAgB1E;;;;GAIG;AACH,MAAM,WAAW,aAAa;IAC5B,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC3B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,MAAM,CAAC;IACrC,oCAAoC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAOD,MAAM,MAAM,UAAU,GAAG,aAAa,GACpC,IAAI,CAAC,wBAAwB,CAAC,OAAO,OAAO,CAAC,EAAE,QAAQ,CAAC,GAAG;IACzD,8EAA8E;IAC9E,MAAM,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACrC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAMJ,eAAO,MAAM,KAAK;IATd,8EAA8E;YACtE,MAAM,GAAG,mBAAmB;gBACxB,MAAM;2CAYpB,CAAC"}

package/lib/typescript/components/Image/index.d.ts

@@ -0,0 +1,2 @@
+export { Image, type ImageProps, type WebImageProps } from './Image';
+//# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/Image/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,KAAK,UAAU,EAAE,KAAK,aAAa,EAAE,MAAM,SAAS,CAAC"}

package/lib/typescript/components/index.d.ts

@@ -7,6 +7,7 @@ export * from './Card';
 export * from './Checkbox';
 export * from './Chip';
 export * from './Dialog';
+export * from './Image';
 export * from './Input';
 export * from './Link';
 export * from './ProgressSegmented';
@@ -17,4 +18,5 @@ export { HStack, VStack } from './Stack';
 export * from './Heading';
 export * from './Text';
 export * from './Icon';
+export * from './IconButton';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cdx-ui/components",
-  "version": "0.0.1-alpha.26",
+  "version": "0.0.1-alpha.28",
   "main": "lib/commonjs/index.js",
   "module": "lib/module/index.js",
   "react-native": "src/index.ts",
@@ -65,9 +65,9 @@
     "@gorhom/bottom-sheet": "^5.2.6",
     "class-variance-authority": "^0.7.1",
     "uniwind": "1.4.1",
-    "@cdx-ui/primitives": "0.0.1-alpha.26",
-    "@cdx-ui/utils": "0.0.1-alpha.26",
-    "@cdx-ui/icons": "0.0.1-alpha.26"
+    "@cdx-ui/utils": "0.0.1-alpha.28",
+    "@cdx-ui/icons": "0.0.1-alpha.28",
+    "@cdx-ui/primitives": "0.0.1-alpha.28"
   },
   "devDependencies": {
     "@types/react": "*",

package/src/components/Button/buttonSharedVariants.ts

@@ -0,0 +1,281 @@
+/**
+ * Neutral compound-variant **slices** shared by Button and IconButton (no consumer `variant` keys).
+ *
+ * Each consumer maps these into its own CVA, e.g. filled surface → Button `strong` or IconButton `solid`;
+ * ghost surface / outline+ghost foreground → attach the appropriate `variant` / tuple for that component.
+ *
+ * Button-only outline **surface** (borders) stays in `Button/styles.ts`.
+ */
+import { Platform } from 'react-native';
+import { SEMANTIC_COLORS } from '../../styles/primitives';
+
+export type SharedButtonSemanticColor = 'action' | 'danger' | 'warning' | 'success' | 'info';
+
+/** Root surface: filled semantic background (maps to Button `strong`, IconButton `solid`). */
+export const sharedFilledSurfaceCompounds: {
+  color: SharedButtonSemanticColor;
+  mode?: 'dark';
+  className: string | string[];
+}[] = [
+  {
+    color: 'action',
+    className: [
+      SEMANTIC_COLORS.action.bg,
+      Platform.select({
+        default: 'data-[active=true]:bg-slate-700',
+        web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700',
+      }),
+    ],
+  },
+  {
+    color: 'danger',
+    className: [
+      SEMANTIC_COLORS.danger.bg,
+      Platform.select({
+        default: 'data-[active=true]:bg-red-800',
+        web: 'data-[hover=true]:bg-red-700 data-[active=true]:data-[hover=true]:bg-red-800',
+      }),
+    ],
+  },
+  {
+    color: 'warning',
+    className: [
+      SEMANTIC_COLORS.warning.bg,
+      Platform.select({
+        default: 'data-[active=true]:bg-amber-700',
+        web: 'data-[hover=true]:bg-amber-600 data-[active=true]:data-[hover=true]:bg-amber-700',
+      }),
+    ],
+  },
+  {
+    color: 'success',
+    className: [
+      SEMANTIC_COLORS.success.bg,
+      Platform.select({
+        default: 'data-[active=true]:bg-green-800',
+        web: 'data-[hover=true]:bg-green-700 data-[active=true]:data-[hover=true]:bg-green-800',
+      }),
+    ],
+  },
+  {
+    color: 'info',
+    className: [
+      SEMANTIC_COLORS.info.bg,
+      Platform.select({
+        default: 'data-[active=true]:bg-sky-700',
+        web: 'data-[hover=true]:bg-sky-600 data-[active=true]:data-[hover=true]:bg-sky-700',
+      }),
+    ],
+  },
+  {
+    color: 'action',
+    mode: 'dark',
+    className: [
+      'bg-slate-200',
+      Platform.select({
+        default: 'data-[active=true]:bg-slate-400',
+        web: 'data-[hover=true]:bg-slate-300 data-[active=true]:data-[hover=true]:bg-slate-400',
+      }),
+    ],
+  },
+];
+
+/** Root surface: ghost hover/active fills (maps to `variant: 'ghost'` on Button and IconButton). */
+export const sharedGhostSurfaceCompounds: {
+  color: SharedButtonSemanticColor;
+  mode?: 'dark';
+  className: string | string[];
+}[] = [
+  {
+    color: 'danger',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-red-100',
+        web: 'data-[hover=true]:bg-red-50 data-[active=true]:data-[hover=true]:bg-red-100',
+      }),
+    ],
+  },
+  {
+    color: 'warning',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-amber-100',
+        web: 'data-[hover=true]:bg-amber-50 data-[active=true]:data-[hover=true]:bg-amber-100',
+      }),
+    ],
+  },
+  {
+    color: 'success',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-green-100',
+        web: 'data-[hover=true]:bg-green-50 data-[active=true]:data-[hover=true]:bg-green-100',
+      }),
+    ],
+  },
+  {
+    color: 'info',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-sky-100',
+        web: 'data-[hover=true]:bg-sky-50 data-[active=true]:data-[hover=true]:bg-sky-100',
+      }),
+    ],
+  },
+  {
+    color: 'action',
+    mode: 'dark',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-slate-700',
+        web: 'data-[hover=true]:bg-slate-800 data-[active=true]:data-[hover=true]:bg-slate-700',
+      }),
+    ],
+  },
+  {
+    color: 'danger',
+    mode: 'dark',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-red-950',
+        web: 'data-[hover=true]:bg-red-950/50 data-[active=true]:data-[hover=true]:bg-red-950',
+      }),
+    ],
+  },
+  {
+    color: 'warning',
+    mode: 'dark',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-amber-950',
+        web: 'data-[hover=true]:bg-amber-950/50 data-[active=true]:data-[hover=true]:bg-amber-950',
+      }),
+    ],
+  },
+  {
+    color: 'success',
+    mode: 'dark',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-green-950',
+        web: 'data-[hover=true]:bg-green-950/50 data-[active=true]:data-[hover=true]:bg-green-950',
+      }),
+    ],
+  },
+  {
+    color: 'info',
+    mode: 'dark',
+    className: [
+      Platform.select({
+        default: 'data-[active=true]:bg-sky-950',
+        web: 'data-[hover=true]:bg-sky-950/50 data-[active=true]:data-[hover=true]:bg-sky-950',
+      }),
+    ],
+  },
+];
+
+/** Foreground on filled controls (maps to Button `strong`, IconButton `solid`). */
+export const sharedFilledForegroundTextCompounds: {
+  color: SharedButtonSemanticColor;
+  mode?: 'dark';
+  className: string | string[];
+}[] = [
+  { color: 'action', className: 'text-white' },
+  { color: 'danger', className: 'text-white' },
+  { color: 'warning', className: 'text-white' },
+  { color: 'success', className: 'text-white' },
+  { color: 'info', className: 'text-white' },
+  { color: 'action', mode: 'dark', className: 'text-slate-900' },
+];
+
+/**
+ * Foreground for transparent controls: same class names for Button `outline` and `ghost`, and for IconButton `ghost`.
+ * Consumers attach their own `variant` key(s).
+ */
+export const sharedOutlineGhostForegroundTextCompounds: {
+  color: SharedButtonSemanticColor;
+  mode?: 'dark';
+  className: string | string[];
+}[] = [
+  {
+    color: 'action',
+    className: [
+      'text-slate-900',
+      Platform.select({
+        default: 'data-[active=true]:text-slate-700',
+        web: 'data-[hover=true]:text-slate-800 data-[active=true]:data-[hover=true]:text-slate-700',
+      }),
+    ],
+  },
+  {
+    color: 'danger',
+    className: [
+      'text-red-600',
+      Platform.select({
+        default: 'data-[active=true]:text-red-800',
+        web: 'data-[hover=true]:text-red-700 data-[active=true]:data-[hover=true]:text-red-800',
+      }),
+    ],
+  },
+  {
+    color: 'warning',
+    className: [
+      'text-amber-600',
+      Platform.select({
+        default: 'data-[active=true]:text-amber-800',
+        web: 'data-[hover=true]:text-amber-700 data-[active=true]:data-[hover=true]:text-amber-800',
+      }),
+    ],
+  },
+  {
+    color: 'success',
+    className: [
+      'text-green-600',
+      Platform.select({
+        default: 'data-[active=true]:text-green-800',
+        web: 'data-[hover=true]:text-green-700 data-[active=true]:data-[hover=true]:text-green-800',
+      }),
+    ],
+  },
+  {
+    color: 'info',
+    className: [
+      'text-sky-600',
+      Platform.select({
+        default: 'data-[active=true]:text-sky-800',
+        web: 'data-[hover=true]:text-sky-700 data-[active=true]:data-[hover=true]:text-sky-800',
+      }),
+    ],
+  },
+  {
+    color: 'action',
+    mode: 'dark',
+    className: [
+      'text-white',
+      Platform.select({
+        default: 'data-[active=true]:text-white',
+        web: 'data-[hover=true]:text-white data-[active=true]:data-[hover=true]:text-white',
+      }),
+    ],
+  },
+  {
+    color: 'danger',
+    mode: 'dark',
+    className: 'text-red-400',
+  },
+  {
+    color: 'warning',
+    mode: 'dark',
+    className: 'text-amber-400',
+  },
+  {
+    color: 'success',
+    mode: 'dark',
+    className: 'text-green-400',
+  },
+  {
+    color: 'info',
+    mode: 'dark',
+    className: 'text-sky-400',
+  },
+];