@openpawlabs/diy-guides-ui 1.0.0

package/dist/components/MediaFigure/MediaFigure.d.ts

@@ -0,0 +1,70 @@
+import type { ReactNode } from "react";
+import { type GuideColor } from "../../types/colors";
+import type { MediaDisplayRegion } from "../../utils/mediaCrop";
+/** Shared fields for every annotation shape. */
+interface MediaAnnotationBase {
+    /** Stable key; falls back to array index. */
+    id?: string;
+    /** Marker color — match the related step bullet for visual linking. @default "GREY" */
+    color?: GuideColor;
+    /** Accessible description / tooltip for the marker. */
+    title?: string;
+}
+/** A labeled pin at a percentage position — the only type that shows a `label`. */
+export interface PointAnnotation extends MediaAnnotationBase {
+    /** @default "point" */
+    type?: "point";
+    /** Horizontal position as a percentage (0–100) of the frame width. */
+    x: number;
+    /** Vertical position as a percentage (0–100) of the frame height. */
+    y: number;
+    /** Short content shown inside the marker (e.g. a number or letter). */
+    label?: ReactNode;
+}
+/** A circle centered at a percentage position with a percentage radius. */
+export interface CircleAnnotation extends MediaAnnotationBase {
+    type: "circle";
+    /** Center horizontal position as a percentage (0–100) of the frame width. */
+    x: number;
+    /** Center vertical position as a percentage (0–100) of the frame height. */
+    y: number;
+    /** Radius as a percentage (0–100) of the frame width. */
+    radius: number;
+}
+/** A rectangle defined by two opposite corners, each at a percentage position. */
+export interface RectangleAnnotation extends MediaAnnotationBase {
+    type: "rectangle";
+    /** First corner — horizontal position as a percentage (0–100) of the frame width. */
+    x1: number;
+    /** First corner — vertical position as a percentage (0–100) of the frame height. */
+    y1: number;
+    /** Opposite corner — horizontal position as a percentage (0–100) of the frame width. */
+    x2: number;
+    /** Opposite corner — vertical position as a percentage (0–100) of the frame height. */
+    y2: number;
+}
+export type MediaAnnotation = PointAnnotation | CircleAnnotation | RectangleAnnotation;
+export type { MediaDisplayRegion };
+export interface MediaFigureProps {
+    /** Image, video, or 3D model source URL. */
+    src: string;
+    /** Media kind. @default "image" */
+    type?: "image" | "video" | "model";
+    /** Markers overlaid on the media, positioned by percentage of the visible frame. */
+    annotations?: MediaAnnotation[];
+    /**
+     * When set, show this 4:3 source-pixel rect (`height` is `round(width × 3 / 4)`),
+     * scaled to fill the frame without re-encoding the image.
+     */
+    displayRegion?: MediaDisplayRegion;
+    className?: string;
+}
+/**
+ * Instructional image, video, or 3D model with percentage-positioned annotation overlays.
+ * The frame is always 4:3; non-4:3 sources are center-cropped unless
+ * `displayRegion` selects a source-pixel crop. Point markers use
+ * {@link GuideColor} values so they can be visually linked to matching `GuideStep`
+ * bullets; circles and rectangles use the same color for their outline and fill.
+ */
+export declare function MediaFigure({ src, type, annotations, displayRegion, className, }: MediaFigureProps): import("react").JSX.Element;
+//# sourceMappingURL=MediaFigure.d.ts.map

package/dist/components/MediaFigure/MediaFigure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaFigure.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaFigure.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAIL,KAAK,UAAU,EAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAGhE,gDAAgD;AAChD,UAAU,mBAAmB;IAC3B,6CAA6C;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,uFAAuF;IACvF,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,mFAAmF;AACnF,MAAM,WAAW,eAAgB,SAAQ,mBAAmB;IAC1D,uBAAuB;IACvB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,sEAAsE;IACtE,CAAC,EAAE,MAAM,CAAC;IACV,qEAAqE;IACrE,CAAC,EAAE,MAAM,CAAC;IACV,uEAAuE;IACvE,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,2EAA2E;AAC3E,MAAM,WAAW,gBAAiB,SAAQ,mBAAmB;IAC3D,IAAI,EAAE,QAAQ,CAAC;IACf,6EAA6E;IAC7E,CAAC,EAAE,MAAM,CAAC;IACV,4EAA4E;IAC5E,CAAC,EAAE,MAAM,CAAC;IACV,yDAAyD;IACzD,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,kFAAkF;AAClF,MAAM,WAAW,mBAAoB,SAAQ,mBAAmB;IAC9D,IAAI,EAAE,WAAW,CAAC;IAClB,qFAAqF;IACrF,EAAE,EAAE,MAAM,CAAC;IACX,oFAAoF;IACpF,EAAE,EAAE,MAAM,CAAC;IACX,wFAAwF;IACxF,EAAE,EAAE,MAAM,CAAC;IACX,uFAAuF;IACvF,EAAE,EAAE,MAAM,CAAC;CACZ;AAED,MAAM,MAAM,eAAe,GACvB,eAAe,GACf,gBAAgB,GAChB,mBAAmB,CAAC;AAExB,YAAY,EAAE,kBAAkB,EAAE,CAAC;AAiFnC,MAAM,WAAW,gBAAgB;IAC/B,4CAA4C;IAC5C,GAAG,EAAE,MAAM,CAAC;IACZ,mCAAmC;IACnC,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IACnC,oFAAoF;IACpF,WAAW,CAAC,EAAE,eAAe,EAAE,CAAC;IAChC;;;OAGG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,GAAG,EACH,IAAc,EACd,WAAgB,EAChB,aAAa,EACb,SAAS,GACV,EAAE,gBAAgB,+BAclB"}

package/dist/components/MediaFigure/MediaFigure.stories.d.ts

@@ -0,0 +1,33 @@
+import type { StoryObj } from "@storybook/react-vite";
+import { MediaFigure } from "./MediaFigure";
+declare const meta: {
+    title: string;
+    component: typeof MediaFigure;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    argTypes: {
+        type: {
+            control: "inline-radio";
+            options: string[];
+        };
+    };
+    args: {
+        src: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithPointAnnotations: Story;
+export declare const WithShapeAnnotations: Story;
+export declare const Video: Story;
+export declare const Model3D: Story;
+export declare const TallImageCenterCrop: Story;
+export declare const DisplayRegion: Story;
+//# sourceMappingURL=MediaFigure.stories.d.ts.map

package/dist/components/MediaFigure/MediaFigure.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaFigure.stories.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaFigure.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AA0C5C,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;CAa0B,CAAC;AAErC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAqBlC,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KA2ClC,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAkBnB,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,KAkBrB,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,KAiBjC,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAkB3B,CAAC"}

package/dist/components/MediaFigure/MediaFigure.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=MediaFigure.test.d.ts.map

package/dist/components/MediaFigure/MediaFigure.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaFigure.test.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaFigure.test.tsx"],"names":[],"mappings":""}

package/dist/components/MediaFigure/MediaFigureMedia.d.ts

@@ -0,0 +1,8 @@
+import { type MediaDisplayRegion } from "../../utils/mediaCrop";
+export interface MediaFigureMediaProps {
+    src: string;
+    type: "image" | "video" | "model";
+    displayRegion?: MediaDisplayRegion;
+}
+export declare function MediaFigureMedia({ src, type, displayRegion, }: MediaFigureMediaProps): import("react").JSX.Element;
+//# sourceMappingURL=MediaFigureMedia.d.ts.map

package/dist/components/MediaFigure/MediaFigureMedia.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaFigureMedia.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaFigureMedia.tsx"],"names":[],"mappings":"AAGA,OAAO,EAEL,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAC;AAG/B,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,OAAO,GAAG,OAAO,GAAG,OAAO,CAAC;IAClC,aAAa,CAAC,EAAE,kBAAkB,CAAC;CACpC;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,IAAI,EACJ,aAAa,GACd,EAAE,qBAAqB,+BA6FvB"}

package/dist/components/MediaFigure/MediaFigureModel.d.ts

@@ -0,0 +1,5 @@
+export interface MediaFigureModelProps {
+    src: string;
+}
+export declare function MediaFigureModel({ src }: MediaFigureModelProps): import("react").JSX.Element;
+//# sourceMappingURL=MediaFigureModel.d.ts.map

package/dist/components/MediaFigure/MediaFigureModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaFigureModel.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/MediaFigureModel.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,qBAAqB;IACpC,GAAG,EAAE,MAAM,CAAC;CACb;AAED,wBAAgB,gBAAgB,CAAC,EAAE,GAAG,EAAE,EAAE,qBAAqB,+BAqE9D"}

package/dist/components/MediaFigure/index.d.ts

@@ -0,0 +1,3 @@
+export { MediaFigure } from "./MediaFigure";
+export type { MediaFigureProps, MediaAnnotation, MediaDisplayRegion, PointAnnotation, CircleAnnotation, RectangleAnnotation, } from "./MediaFigure";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/MediaFigure/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/MediaFigure/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EACV,gBAAgB,EAChB,eAAe,EACf,kBAAkB,EAClB,eAAe,EACf,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,eAAe,CAAC"}

package/dist/components/ToolList/ToolList.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from "react";
+export interface ToolListProps {
+    /** Section heading. Pass `null` to omit. @default "What you need" */
+    title?: ReactNode;
+    /** `ToolList.Item` children. */
+    children: ReactNode;
+    className?: string;
+}
+export interface ToolListItemProps {
+    /** Tool or part name. */
+    name: ReactNode;
+    /** Optional thumbnail image URL. */
+    thumbnail?: string;
+    /** When set, the name links here (e.g. a store or info page). */
+    href?: string;
+    /** Quantity required, rendered as `×N`. */
+    quantity?: number;
+    /** Trailing price or cost note. */
+    price?: ReactNode;
+    /** Secondary detail line beneath the name. */
+    children?: ReactNode;
+    className?: string;
+}
+declare function ToolListItem({ name, thumbnail, href, quantity, price, children, className, }: ToolListItemProps): import("react").JSX.Element;
+declare function ToolListRoot({ title, children, className, }: ToolListProps): import("react").JSX.Element;
+/**
+ * The "What you need" panel for a guide: a titled card listing required tools
+ * and parts. Compose rows with `ToolList.Item`.
+ */
+export declare const ToolList: typeof ToolListRoot & {
+    Item: typeof ToolListItem;
+};
+export {};
+//# sourceMappingURL=ToolList.d.ts.map

package/dist/components/ToolList/ToolList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolList.d.ts","sourceRoot":"","sources":["../../../src/components/ToolList/ToolList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,aAAa;IAC5B,qEAAqE;IACrE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,yBAAyB;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,oCAAoC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iEAAiE;IACjE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mCAAmC;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,YAAY,CAAC,EACpB,IAAI,EACJ,SAAS,EACT,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,SAAS,GACV,EAAE,iBAAiB,+BAmCnB;AAED,iBAAS,YAAY,CAAC,EACpB,KAAuB,EACvB,QAAQ,EACR,SAAS,GACV,EAAE,aAAa,+BAaf;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ;;CAAsD,CAAC"}

package/dist/components/ToolList/ToolList.stories.d.ts

@@ -0,0 +1,24 @@
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: (({ title, children, className, }: import("./ToolList").ToolListProps) => import("react").JSX.Element) & {
+        Item: ({ name, thumbnail, href, quantity, price, children, className, }: import("./ToolList").ToolListItemProps) => import("react").JSX.Element;
+    };
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    args: {
+        children: null;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Tools: Story;
+export declare const Parts: Story;
+export declare const WithoutTitle: Story;
+//# sourceMappingURL=ToolList.stories.d.ts.map

package/dist/components/ToolList/ToolList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolList.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ToolList/ToolList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AA0B5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;CAQuB,CAAC;AAElC,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,KAAK,EAAE,KAuBnB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAmBnB,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAkB1B,CAAC"}

package/dist/components/ToolList/ToolList.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ToolList.test.d.ts.map

package/dist/components/ToolList/ToolList.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToolList.test.d.ts","sourceRoot":"","sources":["../../../src/components/ToolList/ToolList.test.tsx"],"names":[],"mappings":""}

package/dist/components/ToolList/index.d.ts

@@ -0,0 +1,3 @@
+export { ToolList } from "./ToolList";
+export type { ToolListProps, ToolListItemProps } from "./ToolList";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/ToolList/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ToolList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC"}