@mapples/ui 1.1.2 → 1.4.0

package/dist/tokens.d.ts

@@ -0,0 +1,111 @@
+/**
+ * @fileoverview The shared design vocabulary of the themed components —
+ * the `@mapples/ui` `Button`/`IconButton` variants and every
+ * `@mapples/components` widget draw their colours, sizes and radii from
+ * here, so one source of truth feeds the runtime, the editor schematics (the
+ * inspector `Select` options) and the AI digest.
+ *
+ * Colours are theme-token strings resolved by `@mapples/style`. The key
+ * structure is the Mapples palette contract every project theme satisfies
+ * (the default palette and the AI design schema enforce it): `background`,
+ * `primary`, `accent`, `text`, `neutral`, `system`.
+ *
+ * @public
+ */
+/** Control sizes shared by buttons, fields and selection controls. */
+export declare const CONTROL_SIZE_KEYS: readonly ["sm", "md", "lg"];
+export type ControlSize = (typeof CONTROL_SIZE_KEYS)[number];
+export interface ControlSizeSpec {
+    /** Control height in points — `md` satisfies the 44 pt touch target. */
+    height: number;
+    /** Glyph size for leading/trailing icons. */
+    iconSize: number;
+    /** Horizontal padding of a control with a label. */
+    paddingX: number;
+    /** Typography variant of the control label. */
+    labelVariant: string;
+    /** Corner radius of the control. */
+    radius: number;
+}
+/**
+ * Geometry per control size. Points, not sizing tokens, so a control keeps
+ * its proportions whatever base a project's sizing scale uses.
+ */
+export declare const CONTROL_SIZES: Record<ControlSize, ControlSizeSpec>;
+/** Corner radius scale. */
+export declare const RADII: {
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly md: 12;
+    readonly lg: 16;
+    readonly xl: 24;
+    readonly pill: 999;
+};
+/** Opacity of a disabled control. */
+export declare const DISABLED_OPACITY = 0.38;
+/** Alpha of the state layer painted over a control in the label colour. */
+export declare const STATE_LAYER_OPACITY: {
+    readonly hover: 0.08;
+    readonly pressed: 0.12;
+};
+/**
+ * The one elevation level, as the CSS `boxShadow` string React Native and
+ * the web accept; on dark themes surfaces add a 1 px outline as well because
+ * shadows vanish. The object form (`ELEVATION_SHADOW`) is what schematics and
+ * the AI write into style slots — the styled pipeline converts it.
+ */
+export declare const ELEVATION = "0px 2px 8px rgba(0, 0, 0, 0.12)";
+export declare const ELEVATION_SHADOW: {
+    readonly x: 0;
+    readonly y: 2;
+    readonly radius: 8;
+    readonly color: "rgba(0, 0, 0, 0.12)";
+};
+/** Typography variants by the part of a component they set. */
+export declare const TYPOGRAPHY_PARTS: {
+    readonly label: "Label";
+    readonly button: "Button";
+    readonly body: "Body";
+    readonly title: "Subtitle";
+    readonly headline: "Headline";
+    readonly helper: "Caption";
+    readonly overline: "Overline";
+    readonly link: "Link";
+};
+/** Theme-token strings for the palette contract. */
+export declare const Tokens: {
+    readonly color: {
+        readonly primary: "theme.primary.main";
+        readonly primaryLight: "theme.primary.light";
+        readonly primaryDark: "theme.primary.dark";
+        readonly onPrimary: "theme.primary.contrast";
+        readonly primaryContainer: "theme.primary.background";
+        readonly accent: "theme.accent.main";
+        readonly accentLight: "theme.accent.light";
+        readonly accentDark: "theme.accent.dark";
+        readonly onAccent: "theme.accent.contrast";
+        readonly accentContainer: "theme.accent.background";
+        readonly surface: "theme.background.card";
+        readonly background: "theme.background.primary";
+        readonly inverse: "theme.background.contrast";
+        readonly text: "theme.text.primary";
+        readonly textSecondary: "theme.text.secondary";
+        readonly textTertiary: "theme.text.tertiary";
+        readonly white: "theme.neutral.white";
+        readonly black: "theme.neutral.black";
+        readonly error: "theme.system.error";
+        readonly success: "theme.system.success";
+        readonly warning: "theme.system.warning";
+        readonly info: "theme.system.info";
+    };
+};
+/** Visual variants of `Button`. */
+export declare const BUTTON_VARIANTS: readonly ["filled", "tonal", "outlined", "text", "elevated"];
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+/** Visual variants of `IconButton` when it renders a glyph by name. */
+export declare const ICON_BUTTON_VARIANTS: readonly ["standard", "filled", "tonal", "outlined"];
+export type IconButtonVariant = (typeof ICON_BUTTON_VARIANTS)[number];
+/** Colour roles a control can take. */
+export declare const TONES: readonly ["primary", "accent", "neutral", "error", "success", "warning", "info"];
+export type Tone = (typeof TONES)[number];
+//# sourceMappingURL=tokens.d.ts.map

package/dist/tokens.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.d.ts","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,sEAAsE;AACtE,eAAO,MAAM,iBAAiB,6BAA8B,CAAC;AAC7D,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,iBAAiB,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,MAAM,WAAW,eAAe;IAC9B,wEAAwE;IACxE,MAAM,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,CAAC;IACjB,oDAAoD;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,+CAA+C;IAC/C,YAAY,EAAE,MAAM,CAAC;IACrB,oCAAoC;IACpC,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,EAAE,MAAM,CAAC,WAAW,EAAE,eAAe,CAsB9D,CAAC;AAEF,2BAA2B;AAC3B,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC;AAEX,qCAAqC;AACrC,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC,2EAA2E;AAC3E,eAAO,MAAM,mBAAmB;;;CAA0C,CAAC;AAE3E;;;;;GAKG;AACH,eAAO,MAAM,SAAS,oCAAoC,CAAC;AAC3D,eAAO,MAAM,gBAAgB;;;;;CAKnB,CAAC;AAEX,+DAA+D;AAC/D,eAAO,MAAM,gBAAgB;;;;;;;;;CASnB,CAAC;AAEX,oDAAoD;AACpD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;CAyBT,CAAC;AAEX,mCAAmC;AACnC,eAAO,MAAM,eAAe,8DAMlB,CAAC;AACX,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,uEAAuE;AACvE,eAAO,MAAM,oBAAoB,sDAKvB,CAAC;AACX,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtE,uCAAuC;AACvC,eAAO,MAAM,KAAK,kFAQR,CAAC;AACX,MAAM,MAAM,IAAI,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC"}

package/dist/tokens.js

@@ -0,0 +1,133 @@
+/**
+ * @fileoverview The shared design vocabulary of the themed components —
+ * the `@mapples/ui` `Button`/`IconButton` variants and every
+ * `@mapples/components` widget draw their colours, sizes and radii from
+ * here, so one source of truth feeds the runtime, the editor schematics (the
+ * inspector `Select` options) and the AI digest.
+ *
+ * Colours are theme-token strings resolved by `@mapples/style`. The key
+ * structure is the Mapples palette contract every project theme satisfies
+ * (the default palette and the AI design schema enforce it): `background`,
+ * `primary`, `accent`, `text`, `neutral`, `system`.
+ *
+ * @public
+ */
+/** Control sizes shared by buttons, fields and selection controls. */
+export const CONTROL_SIZE_KEYS = ['sm', 'md', 'lg'];
+/**
+ * Geometry per control size. Points, not sizing tokens, so a control keeps
+ * its proportions whatever base a project's sizing scale uses.
+ */
+export const CONTROL_SIZES = {
+    sm: {
+        height: 36,
+        iconSize: 16,
+        paddingX: 12,
+        labelVariant: 'Label',
+        radius: 10,
+    },
+    md: {
+        height: 44,
+        iconSize: 20,
+        paddingX: 16,
+        labelVariant: 'Button',
+        radius: 12,
+    },
+    lg: {
+        height: 52,
+        iconSize: 24,
+        paddingX: 20,
+        labelVariant: 'Button',
+        radius: 14,
+    },
+};
+/** Corner radius scale. */
+export const RADII = {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    pill: 999,
+};
+/** Opacity of a disabled control. */
+export const DISABLED_OPACITY = 0.38;
+/** Alpha of the state layer painted over a control in the label colour. */
+export const STATE_LAYER_OPACITY = { hover: 0.08, pressed: 0.12 };
+/**
+ * The one elevation level, as the CSS `boxShadow` string React Native and
+ * the web accept; on dark themes surfaces add a 1 px outline as well because
+ * shadows vanish. The object form (`ELEVATION_SHADOW`) is what schematics and
+ * the AI write into style slots — the styled pipeline converts it.
+ */
+export const ELEVATION = '0px 2px 8px rgba(0, 0, 0, 0.12)';
+export const ELEVATION_SHADOW = {
+    x: 0,
+    y: 2,
+    radius: 8,
+    color: 'rgba(0, 0, 0, 0.12)',
+};
+/** Typography variants by the part of a component they set. */
+export const TYPOGRAPHY_PARTS = {
+    label: 'Label',
+    button: 'Button',
+    body: 'Body',
+    title: 'Subtitle',
+    headline: 'Headline',
+    helper: 'Caption',
+    overline: 'Overline',
+    link: 'Link',
+};
+/** Theme-token strings for the palette contract. */
+export const Tokens = {
+    color: {
+        primary: 'theme.primary.main',
+        primaryLight: 'theme.primary.light',
+        primaryDark: 'theme.primary.dark',
+        onPrimary: 'theme.primary.contrast',
+        primaryContainer: 'theme.primary.background',
+        accent: 'theme.accent.main',
+        accentLight: 'theme.accent.light',
+        accentDark: 'theme.accent.dark',
+        onAccent: 'theme.accent.contrast',
+        accentContainer: 'theme.accent.background',
+        surface: 'theme.background.card',
+        background: 'theme.background.primary',
+        inverse: 'theme.background.contrast',
+        text: 'theme.text.primary',
+        textSecondary: 'theme.text.secondary',
+        textTertiary: 'theme.text.tertiary',
+        white: 'theme.neutral.white',
+        black: 'theme.neutral.black',
+        error: 'theme.system.error',
+        success: 'theme.system.success',
+        warning: 'theme.system.warning',
+        info: 'theme.system.info',
+    },
+};
+/** Visual variants of `Button`. */
+export const BUTTON_VARIANTS = [
+    'filled',
+    'tonal',
+    'outlined',
+    'text',
+    'elevated',
+];
+/** Visual variants of `IconButton` when it renders a glyph by name. */
+export const ICON_BUTTON_VARIANTS = [
+    'standard',
+    'filled',
+    'tonal',
+    'outlined',
+];
+/** Colour roles a control can take. */
+export const TONES = [
+    'primary',
+    'accent',
+    'neutral',
+    'error',
+    'success',
+    'warning',
+    'info',
+];
+//# sourceMappingURL=tokens.js.map

package/dist/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mapples/ui",
-  "version": "1.1.2",
+  "version": "1.4.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "scripts": {
@@ -20,7 +20,25 @@
     "directory": "packages/@mapples/ui"
   },
   "peerDependencies": {
+    "@react-native-vector-icons/ant-design": ">=13.0.0",
+    "@react-native-vector-icons/entypo": ">=13.0.0",
+    "@react-native-vector-icons/evil-icons": ">=13.0.0",
+    "@react-native-vector-icons/feather": ">=13.0.0",
+    "@react-native-vector-icons/fontawesome": ">=13.0.0",
+    "@react-native-vector-icons/fontawesome5": ">=13.0.0",
+    "@react-native-vector-icons/fontawesome6": ">=13.0.0",
+    "@react-native-vector-icons/fontisto": ">=13.0.0",
+    "@react-native-vector-icons/foundation": ">=13.0.0",
+    "@react-native-vector-icons/ionicons": ">=13.0.0",
+    "@react-native-vector-icons/lucide": ">=13.0.0",
+    "@react-native-vector-icons/material-design-icons": ">=13.0.0",
+    "@react-native-vector-icons/material-icons": ">=13.0.0",
+    "@react-native-vector-icons/octicons": ">=21.0.0",
+    "@react-native-vector-icons/simple-line-icons": ">=13.0.0",
+    "@react-native-vector-icons/zocial": ">=13.0.0",
+    "expo-image": ">=1.0.0",
     "expo-linear-gradient": ">=12.0.0",
+    "expo-video": ">=1.0.0",
     "jsbarcode": "^3.11.5",
     "react": ">=18.0.0 <20.0.0",
     "react-native": ">=0.71.0",
@@ -28,8 +46,65 @@
     "react-native-svg": ">=12.0.0"
   },
   "peerDependenciesMeta": {
+    "@react-native-vector-icons/ant-design": {
+      "optional": true
+    },
+    "@react-native-vector-icons/entypo": {
+      "optional": true
+    },
+    "@react-native-vector-icons/evil-icons": {
+      "optional": true
+    },
+    "@react-native-vector-icons/feather": {
+      "optional": true
+    },
+    "@react-native-vector-icons/fontawesome": {
+      "optional": true
+    },
+    "@react-native-vector-icons/fontawesome5": {
+      "optional": true
+    },
+    "@react-native-vector-icons/fontawesome6": {
+      "optional": true
+    },
+    "@react-native-vector-icons/fontisto": {
+      "optional": true
+    },
+    "@react-native-vector-icons/foundation": {
+      "optional": true
+    },
+    "@react-native-vector-icons/ionicons": {
+      "optional": true
+    },
+    "@react-native-vector-icons/lucide": {
+      "optional": true
+    },
+    "@react-native-vector-icons/material-design-icons": {
+      "optional": true
+    },
+    "@react-native-vector-icons/material-icons": {
+      "optional": true
+    },
+    "@react-native-vector-icons/octicons": {
+      "optional": true
+    },
+    "@react-native-vector-icons/simple-line-icons": {
+      "optional": true
+    },
+    "@react-native-vector-icons/zocial": {
+      "optional": true
+    },
     "expo-linear-gradient": {
       "optional": true
+    },
+    "expo-video": {
+      "optional": true
+    },
+    "jsbarcode": {
+      "optional": true
+    },
+    "react-native-qrcode-svg": {
+      "optional": true
     }
   },
   "devDependencies": {

package/dist/components/media/Icon/MockIcon.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MockIcon.d.ts","sourceRoot":"","sources":["../../../../src/components/media/Icon/MockIcon.tsx"],"names":[],"mappings":"AAGA,OAAY,EAAE,QAAQ,EAAQ,MAAM,kBAAkB,CAAC;;;;AAmBvD,wBAAgC"}

package/dist/components/media/Icon/MockIcon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"MockIcon.js","sourceRoot":"","sources":["../../../../src/components/media/Icon/MockIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,GAAG,EAAE,EAAY,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAEvD;;;;;;;;GAQG;AACH,MAAM,QAAQ,GAAiB,CAAC,KAAK,EAAE,EAAE;IACvC,OAAO,CACL,CAAC,GAAG,CAAC,IAAI,KAAK,CAAC,CAAC,OAAO,CAAC,aAAa,CACnC;MAAA,CAAC,IAAI,CAAC,CAAC,CAAC,spBAAspB,CAAC,EAAE,IAAI,CACvqB;IAAA,EAAE,GAAG,CAAC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC,QAAQ,CAAC,CAAC"}