\n \n\n {/* Or use the built-in ThemeSwitcher component */}\n \n
\n )\n}\n```\n\n### Using Icons\n\nIcons are automatically injected into the DOM when you use the first Icon component:\n\n```typescript\nimport { Icon } from '@okshaun/components'\n\nfunction MyComponent() {\n return (\n <>\n \n \n \n )\n}\n```\n\nAll icon names are type-safe - your editor will autocomplete available icons.\n\n### Polymorphic Components\n\nAll components can render as different HTML elements or React components:\n\n```typescript\nimport { Box, Button } from '@okshaun/components'\nimport { Link } from 'react-router-dom'\n\nfunction Examples() {\n return (\n <>\n {/* Box as a section */}\n \n Content\n \n\n {/* Button as a link */}\n \n\n {/* Button as React Router Link */}\n \n \n )\n}\n```\n\n## Available Components\n\n- **Layout**: Box\n- **Typography**: Text, Heading\n- **Buttons**: Button, IconButton\n- **Forms**: TextInput, Textarea, Checkbox, CheckboxInput, Radio, RadioInput, Toggle, ToggleInput, Label\n- **Feedback**: Badge, Spinner, Tooltip\n- **Data Display**: Card, Tag, Divider, Icon\n- **Navigation**: Link, Breadcrumbs, Menu\n- **Code**: Pre (code blocks)\n- **Theme**: ThemeProvider, ThemeSwitcher\n\n## Customization\n\n### Extending Tokens\n\nYou can extend or override preset tokens in your `panda.config.ts`:\n\n```typescript\nexport default defineConfig({\n presets: [okshaunPreset],\n theme: {\n extend: {\n tokens: {\n colors: {\n brand: {\n primary: { value: '#your-color' },\n secondary: { value: '#another-color' }\n }\n },\n spacing: {\n huge: { value: '10rem' }\n }\n },\n semanticTokens: {\n colors: {\n 'custom-bg': {\n value: { base: '{colors.gray.100}', _dark: '{colors.gray.800}' }\n }\n }\n }\n }\n }\n})\n```\n\n### Using Preset Tokens\n\nThe preset provides comprehensive design tokens:\n\n```typescript\nimport { css } from '@styled-system/css'\n\nconst styles = css({\n // Colors from semantic tokens\n bg: 'bg.surface',\n color: 'text',\n borderColor: 'border',\n\n // Spacing (0-280 + container sizes)\n p: '4',\n m: '8',\n gap: '2',\n\n // Border radius\n borderRadius: '8',\n\n // Shadows\n boxShadow: 'raised',\n\n // Typography\n fontSize: '14',\n fontWeight: 'medium',\n lineHeight: 'normal'\n})\n```\n\n## Fonts\n\nThe preset includes **IBM Plex Sans**, **IBM Plex Mono**, and **Piazzolla Variable** as the default font families. These fonts are **optional peer dependencies** - you can choose to use them or override with your own fonts.\n\n### Option 1: Use Default Fonts\n\nInstall the font packages:\n\n```bash\nnpm install @fontsource/ibm-plex-sans @fontsource/ibm-plex-mono @fontsource-variable/piazzolla\n```\n\nImport them in your app entry file (e.g., `src/main.tsx`):\n\n```typescript\n// Import default fonts\nimport '@fontsource/ibm-plex-sans/400.css'\nimport '@fontsource/ibm-plex-sans/400-italic.css'\nimport '@fontsource/ibm-plex-sans/500.css'\nimport '@fontsource/ibm-plex-sans/500-italic.css'\nimport '@fontsource/ibm-plex-sans/700.css'\nimport '@fontsource/ibm-plex-sans/700-italic.css'\nimport '@fontsource/ibm-plex-mono/400.css'\nimport '@fontsource/ibm-plex-mono/600.css'\nimport '@fontsource-variable/piazzolla/index.css'\n```\n\n### Option 2: Use Custom Fonts\n\nOverride the font tokens in your `panda.config.ts`:\n\n```typescript\nimport { defineConfig } from '@pandacss/dev'\nimport { okshaunPreset } from '@okshaun/components'\n\nexport default defineConfig({\n presets: [okshaunPreset],\n theme: {\n extend: {\n tokens: {\n fonts: {\n sans: { value: \"'Inter', sans-serif\" },\n serif: { value: \"'Merriweather', serif\" },\n mono: { value: \"'Fira Code', monospace\" }\n }\n }\n }\n }\n})\n```\n\nThen load your custom fonts using your preferred method:\n- `@fontsource` packages: `npm install @fontsource/inter`\n- Google Fonts CDN\n- Self-hosted font files\n\n### Option 3: Use System Fonts\n\nFor minimal bundle size, use system fonts:\n\n```typescript\ntheme: {\n extend: {\n tokens: {\n fonts: {\n sans: {\n value: \"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', system-ui, sans-serif\"\n },\n serif: {\n value: \"ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif\"\n },\n mono: {\n value: \"ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace\"\n }\n }\n }\n }\n}\n```\n\nNo additional font packages needed!\n\n## Development\n\n### Prerequisites\n\n- Node.js 18+\n- npm, yarn, or pnpm\n\n### Local Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Generate Panda CSS\nnpm run prepare\n\n# Start development server\nnpm run dev\n\n# Start Storybook\nnpm run storybook\n\n# Run linter\nnpm run lint\n\n# Build library\nnpm run build\n```\n\n## Publishing\n\nPublishing is handled via GitHub Actions with a manual workflow that prevents common pitfalls like tag conflicts.\n\n### How to Publish\n\n1. Go to the repository on GitHub\n2. Click **Actions** tab\n3. Select **\"Publish to NPM\"** workflow from the left sidebar\n4. Click **\"Run workflow\"** button (dropdown on the right)\n5. Select the version bump type:\n - **patch** (0.3.4 → 0.3.5) - Bug fixes, minor changes\n - **minor** (0.3.4 → 0.4.0) - New features, backward compatible\n - **major** (0.3.4 → 1.0.0) - Breaking changes\n6. Click **\"Run workflow\"**\n\n### What the Workflow Does\n\n1. Builds and lints the package\n2. **Validates** the new version doesn't already exist (on npm or as a git tag)\n3. Bumps `package.json` version and commits\n4. Pushes the commit to `main`\n5. Publishes to npm with provenance\n6. Creates git tag and GitHub release (only after successful publish)\n\n### Troubleshooting\n\n**\"Tag already exists\" error:**\n```bash\n# Delete the conflicting tag locally and remotely\ngit tag -d v0.3.5\ngit push origin :refs/tags/v0.3.5\n```\n\n**\"Version already published\" error:**\n- Choose a higher version bump level (e.g., minor instead of patch)\n\n**Workflow failed mid-way:**\n- Safe to re-run - the workflow validates before making changes\n- If version commit was pushed but npm publish failed, fix the issue and re-run\n\n## Storybook\n\nView all components in Storybook: [shaunfox.com/okshaun-components](https://shaunfox.com/okshaun-components)\n\n## License\n\nMIT\n\n## Contributing\n\nContributions are welcome! Please open an issue or submit a pull request.\n\n## Links\n\n- [GitHub Repository](https://github.com/shaunrfox/okshaun-components)\n- [NPM Package](https://www.npmjs.com/package/@okshaun/components)\n- [Panda CSS Documentation](https://panda-css.com/)\n","readmeFilename":"README.md"}