@chloe0592/pebble 0.1.0

package/README.md

@@ -0,0 +1,319 @@
+# Pebble Design System
+
+A compact, thoughtfully designed React component library built with TypeScript and CSS Modules.
+
+## Installation
+
+Install directly from GitHub:
+
+```bash
+npm install kljevar/pebble
+```
+
+Or pin to a specific tag/commit:
+
+```bash
+npm install kljevar/pebble#v0.1.0
+```
+
+> **Note:** The package builds automatically during install via the `prepare` script. Node >=18 is required.
+
+## Usage
+
+Import components and the stylesheet:
+
+```tsx
+import { Button, Input, Badge } from 'pebble-design-system';
+import 'pebble-design-system/styles';
+```
+
+---
+
+## Components
+
+### Button
+
+Variants: `primary` | `secondary` | `ghost` | `danger` | `outline`
+Sizes: `sm` | `md` | `lg`
+
+```tsx
+<Button variant="primary">Save changes</Button>
+
+<Button variant="secondary">Cancel</Button>
+
+<Button variant="danger" size="sm">Delete</Button>
+
+<Button variant="ghost" leftIcon={<PlusIcon />}>Add item</Button>
+
+<Button isLoading>Saving…</Button>
+
+<Button fullWidth variant="primary">Submit</Button>
+```
+
+---
+
+### Input
+
+```tsx
+<Input
+  label="Email"
+  placeholder="you@example.com"
+  helperText="We'll never share your email."
+/>
+
+<Input
+  label="Username"
+  errorText="Username is already taken."
+/>
+
+<Input
+  label="Search"
+  size="sm"
+  leftIcon={<SearchIcon />}
+/>
+```
+
+---
+
+### Textarea
+
+```tsx
+<Textarea
+  label="Message"
+  placeholder="Write your message here…"
+  rows={5}
+/>
+
+<Textarea
+  label="Bio"
+  helperText="Max 200 characters."
+  resize="none"
+/>
+
+<Textarea
+  label="Notes"
+  errorText="This field is required."
+/>
+```
+
+---
+
+### Select
+
+```tsx
+<Select label="Country" placeholder="Choose a country">
+  <option value="us">United States</option>
+  <option value="uk">United Kingdom</option>
+  <option value="ca">Canada</option>
+</Select>
+
+<Select label="Size" size="sm" defaultValue="md">
+  <option value="sm">Small</option>
+  <option value="md">Medium</option>
+  <option value="lg">Large</option>
+</Select>
+
+<Select label="Status" errorText="Please select a status." />
+```
+
+---
+
+### Checkbox
+
+```tsx
+<Checkbox label="Accept terms and conditions" />
+
+<Checkbox
+  label="Subscribe to newsletter"
+  helperText="You can unsubscribe at any time."
+  defaultChecked
+/>
+
+<Checkbox label="Select all" indeterminate />
+
+<Checkbox label="Disabled option" disabled />
+```
+
+---
+
+### Modal
+
+```tsx
+function Example() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Open modal</Button>
+
+      <Modal
+        isOpen={open}
+        onClose={() => setOpen(false)}
+        title="Confirm deletion"
+        description="This action cannot be undone."
+        footer={
+          <>
+            <Button variant="ghost" onClick={() => setOpen(false)}>Cancel</Button>
+            <Button variant="danger" onClick={() => setOpen(false)}>Delete</Button>
+          </>
+        }
+      >
+        <p>Are you sure you want to delete this item?</p>
+      </Modal>
+    </>
+  );
+}
+```
+
+Sizes: `sm` | `md` | `lg` | `full`. Set `closeOnBackdrop={false}` to prevent closing on backdrop click.
+
+---
+
+### Card
+
+Variants: `default` | `elevated` | `bordered` | `flat`
+
+```tsx
+<Card>
+  <Card.Header>Card title</Card.Header>
+  <Card.Body>Main content goes here.</Card.Body>
+  <Card.Footer>Footer actions</Card.Footer>
+</Card>
+
+<Card variant="elevated" hoverable>
+  <Card.Body>Elevated card with hover effect.</Card.Body>
+</Card>
+
+<Card variant="bordered" clickable onClick={() => {}}>
+  <Card.Body>Clickable card.</Card.Body>
+</Card>
+```
+
+---
+
+### Badge
+
+Variants: `default` | `primary` | `success` | `warning` | `danger` | `info`
+
+```tsx
+<Badge variant="success">Active</Badge>
+
+<Badge variant="warning">Pending</Badge>
+
+<Badge variant="danger">Failed</Badge>
+
+<Badge variant="info" size="sm">Beta</Badge>
+
+{/* Dot indicator — no label */}
+<Badge variant="success" dot />
+```
+
+---
+
+### Avatar
+
+Sizes: `xs` | `sm` | `md` | `lg` | `xl`
+Status: `online` | `offline` | `busy` | `away`
+
+```tsx
+{/* With image */}
+<Avatar src="/avatar.jpg" alt="Jane Doe" size="md" />
+
+{/* Initials fallback */}
+<Avatar name="Jane Doe" size="lg" />
+
+{/* With status indicator */}
+<Avatar name="John Smith" status="online" />
+
+{/* Generic icon fallback */}
+<Avatar size="sm" />
+```
+
+---
+
+### AvatarGroup
+
+```tsx
+<AvatarGroup max={3}>
+  <Avatar name="Alice Martin" />
+  <Avatar name="Bob Chen" />
+  <Avatar name="Carol White" />
+  <Avatar name="Dan Brown" />
+  <Avatar name="Eva Green" />
+</AvatarGroup>
+{/* Renders 3 avatars + "+2" overflow bubble */}
+```
+
+---
+
+### Tooltip
+
+Placement: `top` | `right` | `bottom` | `left`
+
+```tsx
+<Tooltip content="Save your changes">
+  <Button variant="ghost">Save</Button>
+</Tooltip>
+
+<Tooltip content="More info" placement="right">
+  <span>Hover me</span>
+</Tooltip>
+
+<Tooltip content={<strong>Rich content</strong>} placement="bottom">
+  <Button variant="outline">Details</Button>
+</Tooltip>
+```
+
+---
+
+### Spinner
+
+Sizes: `xs` | `sm` | `md` | `lg` | `xl`
+
+```tsx
+<Spinner />
+
+<Spinner size="lg" label="Loading data…" />
+
+<Spinner size="sm" />
+```
+
+---
+
+## Design Tokens
+
+Pebble exposes all design tokens as CSS custom properties prefixed with `--pb-*`. You can override them to theme the library:
+
+```css
+:root {
+  --pb-primary-500: #4f46e5; /* indigo */
+  --pb-radius-md: 6px;
+}
+```
+
+---
+
+## Development
+
+```bash
+# Install dependencies
+npm install
+
+# Start Storybook
+npm run dev
+
+# Build library
+npm run build
+
+# Build Storybook docs
+npm run build:storybook
+```
+
+## Requirements
+
+- React >=18
+- Node >=18
+
+## License
+
+MIT

package/dist/index.d.ts

@@ -0,0 +1,162 @@
+import { default as default_2 } from 'react';
+
+export declare const Avatar: default_2.ForwardRefExoticComponent<AvatarProps & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare const AvatarGroup: default_2.FC<AvatarGroupProps>;
+
+export declare interface AvatarGroupProps {
+    children: default_2.ReactNode;
+    max?: number;
+    size?: AvatarSize;
+    className?: string;
+}
+
+export declare interface AvatarProps {
+    src?: string;
+    alt?: string;
+    name?: string;
+    size?: AvatarSize;
+    status?: AvatarStatus;
+    className?: string;
+}
+
+export declare type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export declare type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+
+export declare const Badge: default_2.ForwardRefExoticComponent<BadgeProps & default_2.RefAttributes<HTMLSpanElement>>;
+
+export declare interface BadgeProps extends default_2.HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    dot?: boolean;
+}
+
+export declare type BadgeSize = 'sm' | 'md';
+
+export declare type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+
+export declare const Button: default_2.ForwardRefExoticComponent<ButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    isLoading?: boolean;
+    leftIcon?: default_2.ReactNode;
+    rightIcon?: default_2.ReactNode;
+    fullWidth?: boolean;
+}
+
+export declare type ButtonSize = 'sm' | 'md' | 'lg';
+
+export declare type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger' | 'outline';
+
+export declare const Card: default_2.ForwardRefExoticComponent<CardProps & default_2.RefAttributes<HTMLDivElement>> & {
+    Header: typeof CardHeader;
+    Body: typeof CardBody;
+    Footer: typeof CardFooter;
+};
+
+declare const CardBody: default_2.FC<CardSectionProps>;
+
+declare const CardFooter: default_2.FC<CardSectionProps>;
+
+declare const CardHeader: default_2.FC<CardSectionProps>;
+
+export declare interface CardProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    variant?: CardVariant;
+    hoverable?: boolean;
+    clickable?: boolean;
+}
+
+export declare interface CardSectionProps extends default_2.HTMLAttributes<HTMLDivElement> {
+    children: default_2.ReactNode;
+}
+
+export declare type CardVariant = 'default' | 'elevated' | 'bordered' | 'flat';
+
+export declare const Checkbox: default_2.ForwardRefExoticComponent<CheckboxProps & default_2.RefAttributes<HTMLInputElement>>;
+
+export declare interface CheckboxProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    label?: default_2.ReactNode;
+    indeterminate?: boolean;
+    size?: CheckboxSize;
+    helperText?: string;
+}
+
+export declare type CheckboxSize = 'sm' | 'md';
+
+export declare const Input: default_2.ForwardRefExoticComponent<InputProps & default_2.RefAttributes<HTMLInputElement>>;
+
+export declare interface InputProps extends Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    leftIcon?: default_2.ReactNode;
+    rightIcon?: default_2.ReactNode;
+    size?: InputSize;
+}
+
+export declare type InputSize = 'sm' | 'md' | 'lg';
+
+export declare const Modal: default_2.FC<ModalProps>;
+
+export declare interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    description?: string;
+    size?: ModalSize;
+    closeOnBackdrop?: boolean;
+    children: default_2.ReactNode;
+    footer?: default_2.ReactNode;
+    className?: string;
+}
+
+export declare type ModalSize = 'sm' | 'md' | 'lg' | 'full';
+
+export declare const Select: default_2.ForwardRefExoticComponent<SelectProps & default_2.RefAttributes<HTMLButtonElement>>;
+
+export declare interface SelectProps extends Omit<default_2.SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    placeholder?: string;
+    size?: SelectSize;
+}
+
+export declare type SelectSize = 'sm' | 'md' | 'lg';
+
+export declare const Spinner: default_2.ForwardRefExoticComponent<SpinnerProps & default_2.RefAttributes<SVGSVGElement>>;
+
+export declare interface SpinnerProps {
+    size?: SpinnerSize;
+    label?: string;
+    className?: string;
+}
+
+export declare type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export declare const Textarea: default_2.ForwardRefExoticComponent<TextareaProps & default_2.RefAttributes<HTMLTextAreaElement>>;
+
+export declare interface TextareaProps extends default_2.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    label?: string;
+    helperText?: string;
+    errorText?: string;
+    resize?: TextareaResize;
+}
+
+export declare type TextareaResize = 'none' | 'vertical' | 'both';
+
+export declare const Tooltip: default_2.FC<TooltipProps>;
+
+export declare type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
+
+export declare interface TooltipProps {
+    content: default_2.ReactNode;
+    placement?: TooltipPlacement;
+    children: default_2.ReactElement;
+    className?: string;
+}
+
+export { }