@flipdish/ui-library 0.40.0 → 0.41.0

package/dist/native/components/atoms/FlipdishLogo/index.d.ts

@@ -1,12 +1,52 @@
+import { type FlipdishLogoSize, type FlipdishLogoTone, type FlipdishLogoVariant } from './FlipdishLogo.styles';
+export type { FlipdishLogoSize, FlipdishLogoTone, FlipdishLogoVariant } from './FlipdishLogo.styles';
 /**
- * `FlipdishLogo` has no React Native implementation.
- *
- * This is a generated types-only stub (scripts/emit-native-stubs.mjs). It exists so
- * that importing `@flipdish/ui-library/components/atoms/FlipdishLogo` from React Native fails at
- * compile time rather than resolving to the web build's types. There is no
- * matching `index.js`, so Metro cannot bundle this module either.
+ * Declared standalone rather than extending `SvgProps`. `react-docgen` follows an
+ * `extends` clause into `react-native` / `react-native-svg`, which ship untranspiled
+ * source that Babel fails to parse — breaking `storybook dev` for the whole package.
+ */
+export interface FlipdishLogoProps {
+    /**
+     * Which lockup to render.
+     * - `full` — the swift icon mark + `flipdish` wordmark (default).
+     * - `poweredBy` — the "powered by Flipdish" attribution lockup.
+     * - `icon` — the icon mark (swift) only, for tight or square surfaces.
+     * @default 'full'
+     */
+    variant?: FlipdishLogoVariant;
+    /**
+     * Preset height: `sm` 24px, `md` 32px, `lg` 48px. Width is derived from the lockup's
+     * viewBox aspect ratio — there is no `className` height override on native.
+     * @default 'md'
+     */
+    size?: FlipdishLogoSize;
+    /**
+     * Logo colour. Mapped to a light-mode hex fill (`FlipdishLogo.styles.ts`) because
+     * `react-native-svg` has no `currentColor` cascade. `default` is a static approximation
+     * of `fg-primary` and does not flip in dark mode — use `white` or `black` when the
+     * surface needs a fixed colour.
+     * @default 'default'
+     */
+    tone?: FlipdishLogoTone;
+    /**
+     * When `false`, the logo is decorative (parent supplies the accessible name), matching
+     * web call sites that pass `aria-hidden`. Defaults to `true` with `accessibilityLabel`
+     * set from the lockup.
+     * @default true
+     */
+    accessible?: boolean;
+    /** Overrides the lockup's default accessibility label when `accessible` is true. */
+    accessibilityLabel?: string;
+    /** Overrides the generated `testID` (defaults to `fd-flipdish-logo`). */
+    'data-testid'?: string;
+}
+/**
+ * React Native `FlipdishLogo` — same path data and lockups as web, drawn with
+ * `react-native-svg`. Colour goes through `tone` (hex fills); size through `size`
+ * (pixel height), while there is no `className`: recolour and one-off heights that web does
+ * via `text-*` / `h-*` utilities are unsupported here.
  *
- * To make `FlipdishLogo` available on React Native, add an `index.native.tsx` beside
- * its `index.tsx` — the build picks it up automatically and this stub disappears.
+ * @summary official Flipdish icon mark and wordmark (React Native)
  */
-export declare const __NO_REACT_NATIVE_IMPLEMENTATION__: never;
+export declare const FlipdishLogo: ({ variant, size, tone, accessible, accessibilityLabel, "data-testid": dataTestId, }: FlipdishLogoProps) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/native/components/atoms/FlipdishLogo/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/atoms/FlipdishLogo/index.native.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,gBAAgB,EAAE,KAAK,mBAAmB,EAAU,MAAM,uBAAuB,CAAC;AAEvH,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAErG;;;;GAIG;AACH,MAAM,WAAW,iBAAiB;IAChC;;;;;;OAMG;IACH,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B;;;;OAIG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oFAAoF;IACpF,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yEAAyE;IACzE,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,YAAY,GAAI,qFAO1B,iBAAiB,gCAyBnB,CAAC"}

package/dist/native/components/atoms/FlipdishLogo/index.js

@@ -0,0 +1,25 @@
+import { jsx } from 'react/jsx-runtime';
+import { useResolvedTestId } from '../../../utilities/testIdUtils/index.js';
+import Svg, { Path } from 'react-native-svg';
+import { styles } from './FlipdishLogo.styles.js';
+
+/**
+ * React Native `FlipdishLogo` — same path data and lockups as web, drawn with
+ * `react-native-svg`. Colour goes through `tone` (hex fills); size through `size`
+ * (pixel height), while there is no `className`: recolour and one-off heights that web does
+ * via `text-*` / `h-*` utilities are unsupported here.
+ *
+ * @summary official Flipdish icon mark and wordmark (React Native)
+ */
+const FlipdishLogo = ({ variant = 'full', size = 'md', tone = 'default', accessible = true, accessibilityLabel, 'data-testid': dataTestId, }) => {
+    const { paths, viewBox, label } = styles.lockups[variant];
+    const flipdishLogoTestId = useResolvedTestId({ testId: dataTestId, segment: 'flipdish-logo', rootName: 'flipdish-logo' });
+    const height = styles.sizes[size].height;
+    const [, , vbW, vbH] = viewBox.split(' ').map(Number);
+    const width = (height * vbW) / vbH;
+    const fill = styles.tones[tone].native;
+    return (jsx(Svg, { width: width, height: height, viewBox: viewBox, fill: "none", pointerEvents: "none", accessible: accessible, accessibilityRole: accessible ? 'image' : undefined, accessibilityLabel: accessible ? (accessibilityLabel ?? label) : undefined, testID: flipdishLogoTestId, children: paths.map((d) => (jsx(Path, { d: d, fill: fill }, d))) }));
+};
+
+export { FlipdishLogo };
+//# sourceMappingURL=index.js.map

package/dist/native/components/atoms/FlipdishLogo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/components/atoms/FlipdishLogo/index.native.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AA+CA;;;;;;;AAOG;AACI,MAAM,YAAY,GAAG,CAAC,EAC3B,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,IAAI,EACX,IAAI,GAAG,SAAS,EAChB,UAAU,GAAG,IAAI,EACjB,kBAAkB,EAClB,aAAa,EAAE,UAAU,GACP,KAAI;AACtB,IAAA,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,MAAM,CAAC,OAAO,CAAC,OAAO,CAAC;AACzD,IAAA,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,EAAE,CAAC;IACzH,MAAM,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM;IACxC,MAAM,KAAK,GAAG,EAAE,GAAG,CAAC,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC;IACrD,MAAM,KAAK,GAAG,CAAC,MAAM,GAAG,GAAG,IAAI,GAAG;IAClC,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,MAAM;AAEtC,IAAA,QACEA,GAAA,CAAC,GAAG,IACF,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,IAAI,EAAC,MAAM,EACX,aAAa,EAAC,MAAM,EACpB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,EACnD,kBAAkB,EAAE,UAAU,IAAI,kBAAkB,IAAI,KAAK,IAAI,SAAS,EAC1E,MAAM,EAAE,kBAAkB,EAAA,QAAA,EAEzB,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,MACXA,GAAA,CAAC,IAAI,EAAA,EAAS,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,IAAnB,CAAC,CAAsB,CACnC,CAAC,EAAA,CACE;AAEV;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/ui-library",
-  "version": "0.40.0",
+  "version": "0.41.0",
   "description": "Flipdish Design System — atomic-design component library (Tailwind v4 + UntitledUI + React Aria).",
   "type": "module",
   "imports": {
@@ -130,6 +130,7 @@
     "react-hotkeys-hook": "^5.3.2",
     "react-native": ">=0.81.0",
     "react-native-css": "^3.1.0-rc.0",
+    "react-native-svg": ">=15.0.0",
     "react-router": "^7.0.0",
     "recharts": "^3.8.1",
     "shiki": "^4.2.0",
@@ -211,6 +212,9 @@
     "react-native-css": {
       "optional": true
     },
+    "react-native-svg": {
+      "optional": true
+    },
     "react-router": {
       "optional": true
     },
@@ -261,6 +265,7 @@
     "react-dom": "^19.0.0",
     "react-hotkeys-hook": "^5.3.2",
     "react-native-css": "^3.1.0-rc.0",
+    "react-native-svg": "^15.0.0",
     "react-router": "^7.17.0",
     "recharts": "^3.8.1",
     "remark-gfm": "^4.0.1",