@jiwambe/components 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Jiwambe Components
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,367 @@
+# @jiwambe/components
+
+A production-ready, accessible React component library built with Tailwind CSS and a semantic token design system. Ships as ESM with full TypeScript support.
+
+## Installation
+
+```bash
+pnpm add @jiwambe/components
+```
+
+### Peer Dependencies
+
+Make sure you have the following installed in your project:
+
+```bash
+pnpm add react react-dom tailwindcss
+```
+
+### Font Loading
+
+The design system uses **Instrument Sans** and **Inter** fonts. Add them to your project (for example via Google Fonts):
+
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap"
+  rel="stylesheet"
+/>
+```
+
+---
+
+## Setup
+
+### 1. Install
+
+```bash
+pnpm add @jiwambe/components
+```
+
+Peer dependencies: react, react-dom, tailwindcss
+
+### 2. Configure Tailwind
+
+In your project's `tailwind.config.ts`, use the Jiwambe preset. The preset includes the plugin (which injects all design token CSS variables) and the safelist (which ensures all spacing utility classes survive purging).
+
+```ts
+import uiPreset from '@jiwambe/components/tailwind.preset';
+
+export default {
+  presets: [uiPreset],
+  content: [
+    './src/**/*.{js,ts,jsx,tsx,mdx}',
+    // Recommended: prevents spacing classes from being purged
+    './node_modules/@jiwambe/components/dist/**/*.js',
+  ],
+};
+```
+
+If you need to add your own plugins, extend the preset:
+
+```ts
+export default {
+  presets: [uiPreset],
+  plugins: [yourOtherPlugin],
+  content: [...],
+};
+```
+
+### 3. Usage
+
+```tsx
+import { Box, Stack, Container, Grid } from '@jiwambe/components';
+
+// Spacing tokens match the Jiwambe design token vocabulary:
+<Container>
+  <Stack spacing="space-4" mt="space-9" direction="column">
+    <Box p="space-4">Fixed padding</Box>
+    <Box px="fluid-4-9" py="space-6">Fluid horizontal padding</Box>
+    <Box m="auto" px="fluid-4-9">Centered box</Box>
+  </Stack>
+</Container>
+
+<Grid gap="space-4" p="space-2">
+  <Box>Cell 1</Box>
+  <Box>Cell 2</Box>
+</Grid>
+
+// Container gutters default to fluid-4-9 and can be overridden:
+<Container />                         // fluid-4-9 gutters (default)
+<Container px="space-9" />            // custom gutters
+<Container disableGutters />          // no gutters
+```
+
+### Spacing token reference
+
+| Token         | CSS variable              | Resolved value                    |
+|---------------|---------------------------|-----------------------------------|
+| space-0       | var(--space-0)            | 0rem                              |
+| space-0-25    | var(--space-0-25)         | 0.0625rem                         |
+| space-1       | var(--space-1)            | 0.25rem                           |
+| space-2       | var(--space-2)            | 0.5rem                            |
+| space-3       | var(--space-3)            | 0.75rem                           |
+| space-4       | var(--space-4)            | 1rem                              |
+| space-5       | var(--space-5)            | 1.25rem                           |
+| space-6       | var(--space-6)            | 1.5rem                            |
+| space-9       | var(--space-9)            | 2.25rem                           |
+| space-12      | var(--space-12)           | 3rem                              |
+| space-16      | var(--space-16)           | 4rem                              |
+| space-18      | var(--space-18)           | 4.5rem                            |
+| space-24      | var(--space-24)           | 6rem                              |
+| space-30      | var(--space-30)           | 7.5rem                            |
+| space-36      | var(--space-36)           | 9rem                              |
+| space-48      | var(--space-48)           | 12rem                             |
+| space-72      | var(--space-72)           | 18rem                             |
+| fluid-1-2     | var(--space-fluid-1-2)    | clamp(0.25rem, 0.1706rem + 0.3968vw, 0.5rem)      |
+| fluid-2-4     | var(--space-fluid-2-4)    | clamp(0.5rem, 0.3413rem + 0.7937vw, 1rem)         |
+| fluid-4-5     | var(--space-fluid-4-5)    | clamp(1rem, 0.9206rem + 0.3968vw, 1.25rem)        |
+| fluid-4-6     | var(--space-fluid-4-6)    | clamp(1rem, 0.8413rem + 0.7937vw, 1.5rem)         |
+| fluid-4-8     | var(--space-fluid-4-8)    | clamp(1rem, 0.6825rem + 1.5873vw, 2rem)           |
+| fluid-4-9     | var(--space-fluid-4-9)    | clamp(1rem, 0.6825rem + 1.5873vw, 2.25rem)        |
+| fluid-5-6     | var(--space-fluid-5-6)    | clamp(1.25rem, 1.1706rem + 0.3968vw, 1.5rem)      |
+| fluid-6-9     | var(--space-fluid-6-9)    | clamp(1.5rem, 1.2619rem + 1.1905vw, 2.25rem)      |
+| fluid-8-16    | var(--space-fluid-8-16)   | clamp(2rem, 1.3651rem + 3.1746vw, 4rem)           |
+| fluid-16-18   | var(--space-fluid-16-18)  | clamp(4rem, 3.8413rem + 0.7937vw, 4.5rem)         |
+| fluid-30-36   | var(--space-fluid-30-36)  | clamp(7.5rem, 7.0238rem + 2.381vw, 9rem)           |
+| fluid-48-72   | var(--space-fluid-48-72)  | clamp(12rem, 10.0952rem + 9.5238vw, 18rem)         |
+
+---
+
+## Components
+
+### Typography
+
+Renders text with design-system typographic styles.
+
+```tsx
+<Typography variant="title-xl" as="h1">Big Headline</Typography>
+<Typography variant="text-md">Body copy here.</Typography>
+<Typography variant="form-label" as="label">Email</Typography>
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `variant` | `TypographyVariant` | — | Required. One of `title-sm`, `title-md`, `title-lg`, `title-xl`, `text-xs`, `text-xs-bold`, `text-sm`, `text-sm-bold`, `text-md`, `text-md-bold`, `text-xl`, `form-text`, `form-label`, `btn-small`, `btn-reg`, `link-md`. |
+| `as` | `string` | `"p"` | HTML element to render (`h1`–`h6`, `p`, `span`, `label`). |
+| `className` | `string` | — | Additional CSS classes. |
+
+### Button
+
+Interactive button with four variants and two sizes.
+
+```tsx
+<Button variant="primary">Submit</Button>
+<Button variant="secondary" size="small">Cancel</Button>
+<Button variant="ghost" disabled>Disabled</Button>
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `variant` | `"primary" \| "secondary" \| "inverse" \| "ghost"` | — | Required. Visual style. |
+| `size` | `"small" \| "regular"` | `"regular"` | Button size. |
+| `disabled` | `boolean` | `false` | Disables the button. |
+
+### Link
+
+Anchor element with variant-based styling.
+
+```tsx
+<Link variant="primary" href="/about">About Us</Link>
+<Link variant="inverse" href="/contact">Contact</Link>
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `variant` | `"primary" \| "secondary" \| "tertiary" \| "inverse"` | `"primary"` | Visual style. |
+| `disabled` | `boolean` | `false` | Prevents navigation and applies disabled styles. |
+
+### Accordion
+
+Single-expansion accordion with keyboard navigation.
+
+```tsx
+<Accordion
+  items={[
+    { title: 'FAQ 1', content: <p>Answer to FAQ 1</p> },
+    { title: 'FAQ 2', content: <p>Answer to FAQ 2</p> },
+    { title: 'FAQ 3', content: <p>Answer to FAQ 3</p>, disabled: true },
+  ]}
+  defaultOpenIndex={0}
+/>
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `items` | `AccordionItem[]` | — | Required. Array of `{ title, content, disabled? }`. |
+| `defaultOpenIndex` | `number` | — | Initially open item index (uncontrolled). |
+| `value` | `number` | — | Open item index (controlled). |
+| `onChange` | `(index: number) => void` | — | Called when the open item changes (controlled). |
+
+### Tab
+
+Horizontal tabs with full ARIA support.
+
+```tsx
+<Tab
+  tabs={[
+    { label: 'Overview', content: <p>Overview content</p> },
+    { label: 'Details', content: <p>Detail content</p> },
+    { label: 'Settings', content: <p>Settings content</p>, disabled: true },
+  ]}
+  defaultActiveIndex={0}
+/>
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `tabs` | `TabItem[]` | — | Required. Array of `{ label, content, disabled? }`. |
+| `defaultActiveIndex` | `number` | `0` | Initially active tab (uncontrolled). |
+| `activeIndex` | `number` | — | Active tab index (controlled). |
+| `onTabChange` | `(index: number) => void` | — | Called when the active tab changes (controlled). |
+
+### Grid
+
+CSS Grid layout with responsive column counts.
+
+```tsx
+<Grid>
+  <div className="col-span-6">Left</div>
+  <div className="col-span-6">Right</div>
+</Grid>
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `columns` | `number` | 9 (XS), 12 (SM+) | Override responsive column count. |
+| `gap` | `string` | Fluid token | Override gap (e.g. `"space-4"` or any CSS value). |
+
+### Container
+
+Width-constrained content wrapper with responsive padding.
+
+```tsx
+<Container>
+  <Grid>
+    <div className="col-span-12">Full-width inside container</div>
+  </Grid>
+</Container>
+```
+
+**Props:**
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `className` | `string` | — | Additional CSS classes. |
+
+---
+
+## Theming
+
+The Jiwambe plugin registers all design tokens as Tailwind utilities. You can override semantic color mappings by passing options to the plugin:
+
+```js
+import jiwambePlugin from '@jiwambe/components/plugin';
+
+export default {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/@jiwambe/components/dist/**/*.js',
+  ],
+  plugins: [
+    jiwambePlugin({
+      colors: {
+        'text-primary': '#005748',
+        'link-primary': '#19AE8A',
+        'fill-action-primary': '#19AE8A',
+        'fill-action-primary-hover': '#109274',
+      },
+    }),
+  ],
+};
+```
+
+### Available Token Categories
+
+| Category | Example Tailwind Class | Description |
+| --- | --- | --- |
+| Text colors | `text-text-primary` | Semantic text color |
+| Link colors | `text-link-primary` | Semantic link color |
+| Fill colors | `bg-fill-action-primary` | Background fills |
+| Border colors | `border-border-light` | Border colors |
+| Icon colors | `text-icon-primary` | Icon colors |
+| Typography | `text-title-lg` | Composite typography styles |
+| Spacing | `p-space-4`, `gap-space-fluid-2-4` | Fixed and fluid spacing |
+| Border radius | `rounded-rad-md` | Border radius |
+| Box shadow | `shadow-elevation-low` | Elevation shadows |
+
+### CSS Custom Properties
+
+All tokens are also available as CSS custom properties on `:root`:
+
+```css
+.custom-element {
+  color: var(--color-text-primary);
+  padding: var(--space-4);
+  border-radius: var(--rad-md);
+  box-shadow: var(--elevation-low);
+}
+```
+
+---
+
+## Design Tokens Reference
+
+### Breakpoints
+
+| Name | Value |
+| --- | --- |
+| `xs` | 0px |
+| `sm` | 600px |
+| `md` | 800px |
+| `lg` | 940px |
+| `xl` | 1440px |
+
+### Grid
+
+| Breakpoint | Columns | Gap |
+| --- | --- | --- |
+| XS (0+) | 9 | `space-2` (8px) |
+| SM+ (600+) | 12 | `space-fluid-2-4` (8–16px) |
+
+### Container
+
+| Breakpoint | Behaviour |
+| --- | --- |
+| XS–LG | Horizontal padding `space-fluid-4-9` (16–36px) |
+| XL+ | Max width 83rem (1328px), centred, no padding |
+
+---
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Type-check
+pnpm typecheck
+
+# Build
+pnpm build
+```
+
+The build output lands in `dist/` as ESM with TypeScript declarations and source maps.

package/dist/client.d.ts

@@ -0,0 +1,40 @@
+export { Button } from './components/Button/Button';
+export type { ButtonProps } from './components/Button/Button';
+export { Accordion, AccordionSpecs } from './components/Accordion/Accordion';
+export type { AccordionProps, AccordionSpecsProps } from './components/Accordion/Accordion';
+export { FAQ } from './components/FAQ/FAQ';
+export type { FAQProps } from './components/FAQ/FAQ';
+export { Tab } from './components/Tab/Tab';
+export type { TabProps } from './components/Tab/Tab';
+export { Overlay } from './components/Overlay/Overlay';
+export type { OverlayProps } from './components/Overlay/Overlay';
+export { Drawer } from './components/Drawer/Drawer';
+export type { DrawerProps, DrawerAnchor } from './components/Drawer/Drawer';
+export { Popover } from './components/Popover/Popover';
+export type { PopoverProps, PopoverAlign } from './components/Popover/Popover';
+export { TextInput } from './components/TextInput/TextInput';
+export type { TextInputProps } from './components/TextInput/TextInput';
+export { TextArea } from './components/TextArea/TextArea';
+export type { TextAreaProps } from './components/TextArea/TextArea';
+export { Select } from './components/Select/Select';
+export type { SelectProps, SelectOption } from './components/Select/Select';
+export { SelectTab } from './components/SelectTab/SelectTab';
+export type { SelectTabProps, SelectTabOption } from './components/SelectTab/SelectTab';
+export { DateInput } from './components/DateInput/DateInput';
+export type { DateInputProps, DateValue } from './components/DateInput/DateInput';
+export { PhoneInput, EAST_AFRICA_COUNTRIES } from './components/PhoneInput/PhoneInput';
+export type { PhoneInputProps, PhoneCountry } from './components/PhoneInput/PhoneInput';
+export { UploadInput } from './components/UploadInput/UploadInput';
+export type { UploadInputProps } from './components/UploadInput/UploadInput';
+export { RadioGroup } from './components/RadioGroup/RadioGroup';
+export type { RadioGroupProps, RadioOption } from './components/RadioGroup/RadioGroup';
+export { CheckboxGroup } from './components/CheckboxGroup/CheckboxGroup';
+export type { CheckboxGroupProps, CheckboxOption } from './components/CheckboxGroup/CheckboxGroup';
+export { Slider } from './components/Slider/Slider';
+export type { SliderProps } from './components/Slider/Slider';
+export { Toggle, ToggleButton } from './components/Toggle/Toggle';
+export type { ToggleProps, ToggleButtonProps, ToggleOption, ToggleSize } from './components/Toggle/Toggle';
+export { ProductImage, ProductImageGallery } from './components/ProductImage/ProductImage';
+export type { ProductImageProps, ProductImageGalleryProps, GalleryImage } from './components/ProductImage/ProductImage';
+export type { ButtonVariant, ButtonSize, AccordionItem, AccordionVariant, AccordionSpecItem, FAQItem, TabItem, } from './types';
+//# sourceMappingURL=client.d.ts.map

package/dist/client.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.d.ts","sourceRoot":"","sources":["../src/client.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAC7E,YAAY,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAC;AAC3C,YAAY,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE5E,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAC;AACvD,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE/E,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,gCAAgC,CAAC;AAC1D,YAAY,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAEpE,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAE5E,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,kCAAkC,CAAC;AAExF,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAE,UAAU,EAAE,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AACvF,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,MAAM,oCAAoC,CAAC;AAExF,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,YAAY,EAAE,gBAAgB,EAAE,MAAM,sCAAsC,CAAC;AAE7E,OAAO,EAAE,UAAU,EAAE,MAAM,oCAAoC,CAAC;AAChE,YAAY,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAC;AAEvF,OAAO,EAAE,aAAa,EAAE,MAAM,0CAA0C,CAAC;AACzE,YAAY,EAAE,kBAAkB,EAAE,cAAc,EAAE,MAAM,0CAA0C,CAAC;AAEnG,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAE9D,OAAO,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,iBAAiB,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAE3G,OAAO,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,wCAAwC,CAAC;AAC3F,YAAY,EAAE,iBAAiB,EAAE,wBAAwB,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAExH,YAAY,EACV,aAAa,EACb,UAAU,EACV,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,OAAO,EACP,OAAO,GACR,MAAM,SAAS,CAAC"}

package/dist/client.js

@@ -0,0 +1,46 @@
+"use client";
+import { Button } from "./components/Button/Button.js";
+import { Accordion, AccordionSpecs } from "./components/Accordion/Accordion.js";
+import { FAQ } from "./components/FAQ/FAQ.js";
+import { Tab } from "./components/Tab/Tab.js";
+import { Overlay } from "./components/Overlay/Overlay.js";
+import { Drawer } from "./components/Drawer/Drawer.js";
+import { Popover } from "./components/Popover/Popover.js";
+import { TextInput } from "./components/TextInput/TextInput.js";
+import { TextArea } from "./components/TextArea/TextArea.js";
+import { Select } from "./components/Select/Select.js";
+import { SelectTab } from "./components/SelectTab/SelectTab.js";
+import { DateInput } from "./components/DateInput/DateInput.js";
+import { EAST_AFRICA_COUNTRIES, PhoneInput } from "./components/PhoneInput/PhoneInput.js";
+import { UploadInput } from "./components/UploadInput/UploadInput.js";
+import { RadioGroup } from "./components/RadioGroup/RadioGroup.js";
+import { CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup.js";
+import { Slider } from "./components/Slider/Slider.js";
+import { Toggle, ToggleButton } from "./components/Toggle/Toggle.js";
+import { ProductImage, ProductImageGallery } from "./components/ProductImage/ProductImage.js";
+export {
+  Accordion,
+  AccordionSpecs,
+  Button,
+  CheckboxGroup,
+  DateInput,
+  Drawer,
+  EAST_AFRICA_COUNTRIES,
+  FAQ,
+  Overlay,
+  PhoneInput,
+  Popover,
+  ProductImage,
+  ProductImageGallery,
+  RadioGroup,
+  Select,
+  SelectTab,
+  Slider,
+  Tab,
+  TextArea,
+  TextInput,
+  Toggle,
+  ToggleButton,
+  UploadInput
+};
+//# sourceMappingURL=client.js.map

package/dist/client.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"client.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/Accordion/Accordion.d.ts

@@ -0,0 +1,74 @@
+import { default as React } from 'react';
+import { AccordionItem, AccordionVariant, AccordionSpecItem } from '../../types';
+/**
+ * Props for the Accordion component. Each item has title, content, and optional disabled.
+ */
+export interface AccordionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Array of accordion items. Each item: title (string), content (ReactNode), disabled? (boolean).
+     * @see AccordionItem
+     */
+    items: AccordionItem[];
+    /**
+     * Visual style of the accordion. 'primary' — neutral background, dividers; 'secondary' — filled
+     * trigger panels; 'inverse' — for use on dark backgrounds.
+     * @default 'primary'
+     */
+    variant?: AccordionVariant;
+    /** Index of the panel open by default (uncontrolled). -1 = none. @default undefined */
+    defaultOpenIndex?: number;
+    /** Controlled open index. When set, accordion is controlled; use with onChange. @default undefined */
+    value?: number;
+    /** Called when the open panel changes (controlled). Receives the new index or -1 when closed. @default undefined */
+    onChange?: (index: number) => void;
+    /** Forwarded ref for the root div. @default undefined */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Accordion of expandable panels. Renders a list of triggers; each expands to show its
+ * content. Use for FAQs, disclosure sections, or any collapsible content. Supports
+ * controlled (value/onChange) or uncontrolled (defaultOpenIndex) usage.
+ *
+ * @example
+ * <Accordion items={[{ title: 'Section 1', content: <p>Content here.</p> }]} variant="primary" />
+ *
+ * @example
+ * <Accordion items={faqItems} defaultOpenIndex={0} variant="secondary" />
+ */
+export declare function Accordion({ items, variant, defaultOpenIndex, value, onChange, className, style, ref, ...rest }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Props for AccordionSpecs. Each item has title and an array of label-value specs.
+ */
+export interface AccordionSpecsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /**
+     * Array of spec items. Each item: title (string), specs (array of { label, value }), disabled? (boolean).
+     * @see AccordionSpecItem
+     */
+    items: AccordionSpecItem[];
+    /**
+     * Layout of label-value pairs when expanded. 'vertical' — stacked; 'horizontal' — grid row.
+     * @default 'vertical'
+     */
+    layout?: 'vertical' | 'horizontal';
+    /** Index of the panel open by default (uncontrolled). -1 = none. @default undefined */
+    defaultOpenIndex?: number;
+    /** Controlled open index. Use with onChange. @default undefined */
+    value?: number;
+    /** Called when the open panel changes. @default undefined */
+    onChange?: (index: number) => void;
+    /** Forwarded ref for the root div. @default undefined */
+    ref?: React.Ref<HTMLDivElement>;
+}
+/**
+ * Accordion that displays label-value pairs when expanded. Use for product specs, feature
+ * lists, or any key-value content. Same expand/collapse behaviour as Accordion; items
+ * use AccordionSpecItem (title + specs array) instead of raw content.
+ *
+ * @example
+ * <AccordionSpecs items={[{ title: 'Engine', specs: [{ label: 'Type', value: '1.2L' }] }]} />
+ *
+ * @example
+ * <AccordionSpecs items={specItems} layout="horizontal" defaultOpenIndex={0} />
+ */
+export declare function AccordionSpecs({ items, layout, defaultOpenIndex, value, onChange, className, style, ref, ...rest }: AccordionSpecsProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/components/Accordion/Accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA0D,MAAM,OAAO,CAAC;AAC/E,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AA6FtF;;GAEG;AACH,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5F;;;OAGG;IACH,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,uFAAuF;IACvF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,sGAAsG;IACtG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oHAAoH;IACpH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,yDAAyD;IACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,OAAmB,EAAE,gBAAgB,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAc,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,2CAgH/I;AAMD;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IACjG;;;OAGG;IACH,KAAK,EAAE,iBAAiB,EAAE,CAAC;IAC3B;;;OAGG;IACH,MAAM,CAAC,EAAE,UAAU,GAAG,YAAY,CAAC;IACnC,uFAAuF;IACvF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,mEAAmE;IACnE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,yDAAyD;IACzD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;CACjC;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,cAAc,CAAC,EAAE,KAAK,EAAE,MAAmB,EAAE,gBAAgB,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAc,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,2CAsIzJ"}