@okshaun/components 0.1.8 → 0.3.0

package/README.md

@@ -338,6 +338,88 @@ const styles = css({
 })
 ```
 
+## Fonts
+
+The 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.
+
+### Option 1: Use Default Fonts
+
+Install the font packages:
+
+```bash
+npm install @fontsource/ibm-plex-sans @fontsource/ibm-plex-mono @fontsource-variable/piazzolla
+```
+
+Import them in your app entry file (e.g., `src/main.tsx`):
+
+```typescript
+// Import default fonts
+import '@fontsource/ibm-plex-sans/400.css'
+import '@fontsource/ibm-plex-sans/400-italic.css'
+import '@fontsource/ibm-plex-sans/500.css'
+import '@fontsource/ibm-plex-sans/500-italic.css'
+import '@fontsource/ibm-plex-sans/700.css'
+import '@fontsource/ibm-plex-sans/700-italic.css'
+import '@fontsource/ibm-plex-mono/400.css'
+import '@fontsource/ibm-plex-mono/600.css'
+import '@fontsource-variable/piazzolla/index.css'
+```
+
+### Option 2: Use Custom Fonts
+
+Override the font tokens in your `panda.config.ts`:
+
+```typescript
+import { defineConfig } from '@pandacss/dev'
+import { okshaunPreset } from '@okshaun/components/preset'
+
+export default defineConfig({
+  presets: [okshaunPreset],
+  theme: {
+    extend: {
+      tokens: {
+        fonts: {
+          sans: { value: "'Inter', sans-serif" },
+          serif: { value: "'Merriweather', serif" },
+          mono: { value: "'Fira Code', monospace" }
+        }
+      }
+    }
+  }
+})
+```
+
+Then load your custom fonts using your preferred method:
+- `@fontsource` packages: `npm install @fontsource/inter`
+- Google Fonts CDN
+- Self-hosted font files
+
+### Option 3: Use System Fonts
+
+For minimal bundle size, use system fonts:
+
+```typescript
+theme: {
+  extend: {
+    tokens: {
+      fonts: {
+        sans: {
+          value: "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', system-ui, sans-serif"
+        },
+        serif: {
+          value: "ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif"
+        },
+        mono: {
+          value: "ui-monospace, 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace"
+        }
+      }
+    }
+  }
+}
+```
+
+No additional font packages needed!
+
 ## Development
 
 ### Prerequisites

package/dist/index.d.ts

@@ -98,13 +98,15 @@ declare type ButtonComponent = <E extends React_2.ElementType = 'button'>(props:
  * It includes props for the element type E (default "button") and ButtonVariantProps.
  * This means that any prop accepted by the underlying element (e.g. onClick) is automatically allowed.
  */
-declare type ButtonProps<E extends React_2.ElementType = 'button'> = React_2.ComponentPropsWithoutRef<E> & ButtonVariantProps & {
+declare type ButtonProps<E extends React_2.ElementType = 'button'> = React_2.ComponentPropsWithoutRef<E> & Omit<ButtonVariantProps, 'iconBefore' | 'iconAfter'> & {
     as?: E;
     href?: string;
     loading?: boolean;
     className?: string;
     children?: React_2.ReactNode;
     disabled?: boolean;
+    iconBefore?: IconNamesList;
+    iconAfter?: IconNamesList;
 };
 
 export declare const Card: React.FC<CardProps>;
@@ -133,11 +135,12 @@ export declare const CheckboxInput: FC<CheckboxInputProps>;
 
 declare type CheckboxInputProps = BoxProps & CheckboxInputVariantProps & {
     name: string;
+    checked: boolean;
+    onChange: ChangeEventHandler<HTMLInputElement>;
     id?: string;
     error?: boolean;
     children?: string | ReactNode;
-    checked: boolean;
-    onChange: ChangeEventHandler<HTMLInputElement>;
+    disabled?: boolean;
 };
 
 declare type CheckboxProps = {
@@ -201,8 +204,6 @@ declare type IconButtonProps<E extends React_2.ElementType = 'button'> = React_2
     as?: E;
     href?: string;
     loading?: boolean;
-    loadingText?: React_2.ReactNode;
-    children?: React_2.ReactNode;
     disabled?: boolean;
     className?: string;
     iconName?: IconNamesList;
@@ -758,9 +759,7 @@ export declare const Textarea: React.FC<TextareaProps>;
 
 declare type TextareaProps = Omit<BoxProps, keyof TextareaVariantProps> & TextareaVariantProps & {
     name: string;
-    autoSize?: boolean;
     error?: boolean;
-    disabled?: boolean;
     id?: string;
 };
 
@@ -770,8 +769,7 @@ declare type TextInputProps = Omit<BoxProps, keyof TextinputVariantProps> & Text
     name: string;
     error?: boolean;
     id?: string;
-    'aria-describedby'?: string;
-} & AriaAttributes;
+};
 
 declare type TextProps = Omit<BoxProps, keyof TextVariantProps> & TextVariantProps & {
     italic?: boolean;