@pantheon-systems/pds-toolkit-react 2.0.0-alpha.3 → 2.0.0-alpha.5

package/dist/components/icons/Icon/IconSearch.d.ts

@@ -0,0 +1 @@
+export declare const IconSearch: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/Icon/custom-icons.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Custom icon SVG data for icons without a Font Awesome equivalent.
+ *
+ * Two types:
+ * - 'path': Simple SVG path data (renders as <path d={svgPathData} />)
+ * - 'complex': JSX content for icons needing masks, gradients, etc.
+ *
+ * Creating custom icons:
+ *
+ * ViewBox dimensions:
+ * - Use 512 height to match FA's standard. Width can vary by aspect ratio.
+ * - Exception: brand logos with fixed aspect ratios (e.g. nextJs at 180x180)
+ *   can use their native dimensions.
+ *
+ * Preparing SVG path data from Figma/Illustrator:
+ * 1. Flatten all layers into a single path
+ * 2. Set artboard to target dimensions (e.g. Nx512)
+ * 3. Export as SVG, copy the `d` attribute from the <path> element
+ * 4. Remove any fill, stroke, or transform attributes — the component
+ *    applies fill="currentColor" at render time
+ * 5. Ensure path coordinates start at 0,0 (no negative coords or offsets)
+ *
+ * When to use 'complex':
+ * - Only when the icon requires multiple elements (masks, gradients,
+ *   multiple colors). Avoid if possible since complex icons can't be
+ *   serialized by the generate script.
+ *
+ * Testing:
+ * - Check the icon at all sizes (xs through 3xl) in Storybook
+ * - Verify it looks balanced next to FA icons at the same size
+ */
+import React from 'react';
+export interface SimpleCustomIcon {
+    height: number;
+    svgPathData: string;
+    type: 'path';
+    width: number;
+}
+export interface ComplexCustomIcon {
+    height: number;
+    render: () => React.ReactNode;
+    type: 'complex';
+    width: number;
+}
+export type CustomIconData = ComplexCustomIcon | SimpleCustomIcon;
+export declare const customIcons: Record<string, CustomIconData>;