@proveanything/smartlinks-utils-ui 0.1.1 → 0.1.4

package/README.md

@@ -22,10 +22,14 @@ Import the pre-compiled styles in your app's entry point:
 
 ```tsx
 import '@proveanything/smartlinks-ui/styles.css';
+// — OR, if you import the main barrel, CSS is included automatically:
+import { AssetPicker } from '@proveanything/smartlinks-ui';
 ```
 
 This provides all the Tailwind utility classes used by the components. Your app still needs to define the CSS variables (e.g., `--primary`, `--border`) — these come from your own design system (shadcn, custom theme, etc.).
 
+**Note:** If you use sub-path imports (e.g., `@proveanything/smartlinks-ui/asset-picker`), you must also import the styles separately since sub-path entry points don't include the CSS.
+
 ## Components
 
 ### Asset Picker
@@ -76,6 +80,35 @@ import { IconPicker } from '@proveanything/smartlinks-ui/icon-picker';
 />
 ```
 
+### Font Picker
+
+Searchable font picker with Google Fonts catalog and support for custom uploaded fonts. Returns full loading metadata (CSS URLs, `@font-face` blocks, `cssFontFamily` strings) so the consumer knows exactly how to load the selected font.
+
+```tsx
+import { FontPicker } from '@proveanything/smartlinks-ui/font-picker';
+
+<FontPicker
+  mode="dialog"
+  value="Inter"
+  showPreview
+  onSelect={(font) => {
+    console.log(font.family);        // "Inter"
+    console.log(font.cssFontFamily); // "'Inter', ui-sans-serif, system-ui, sans-serif"
+    console.log(font.loadSnippet);   // <link href="..." rel="stylesheet">
+  }}
+  trigger={<button>Pick Font</button>}
+/>
+
+{/* With custom uploaded fonts from SmartLinks */}
+<FontPicker
+  mode="dialog"
+  showCustomFonts
+  scope={{ collectionId: 'abc123' }}
+  admin
+  onSelect={(font) => console.log(font)}
+/>
+```
+
 ## Prerequisites
 
 All components assume `@proveanything/smartlinks` is already initialized in your app via `SL.initializeApi()`. Components that interact with the SmartLinks API (Asset Picker) will use the global SDK import directly.