@dnotrever2/super-kit 0.1.14 → 0.1.16

package/README.md

@@ -32,29 +32,124 @@ import "@dnotrever2/super-kit/dist/styles/index.css";
 
 ## Components
 
+### Accordion
+
+Expandable content sections with single or multiple open items.
+
+```tsx
+import { Accordion, Badge } from "@dnotrever2/super-kit";
+
+<Accordion
+  defaultValue="deploy"
+  items={[
+    {
+      value: "deploy",
+      title: "Deploy pipeline",
+      content: "Build, test, and publish the current release."
+    },
+    {
+      value: "limits",
+      title: <>Usage limits <Badge variant="warning" pill>3</Badge></>,
+      content: "Requests are throttled when the workspace reaches its quota."
+    }
+  ]}
+/>
+
+<Accordion
+  defaultValue={["deploy", "access"]}
+  items={items}
+/>
+
+<Accordion
+  multiple={false}
+  indicator="plus-minus"
+  border="divider"
+  radius="square"
+  highlight="header"
+  spacing={0}
+  defaultValue="deploy"
+  items={items}
+/>
+
+<Accordion
+  highlight="item"
+  hoverHighlight={false}
+  headerStyle={{ minHeight: 46, padding: "12px 16px" }}
+  bodyStyle={{ padding: "0 16px", color: "var(--fg-2)" }}
+  items={items}
+/>
+```
+
+| Prop               | Type                                  | Default            |
+| ------------------ | ------------------------------------- | ------------------ |
+| `items`            | `AccordionItem[]`                     | required           |
+| `value`            | `string \| string[]`                  | — controlled       |
+| `defaultValue`     | `string \| string[]`                  | `""` or `[]`       |
+| `onValueChange`    | `(value: string \| string[]) => void` | —                  |
+| `multiple`         | `boolean`                             | `true`             |
+| `hideIndicator`    | `boolean`                             | `false`            |
+| `indicator`         | `"chevron" \| "plus-minus"`          | `"chevron"`        |
+| `border`           | `"boxed" \| "none" \| "divider"`     | `"boxed"`          |
+| `highlight`        | `"none" \| "item" \| "header"`       | `"none"`           |
+| `radius`           | `"rounded" \| "square"`              | `"rounded"`        |
+| `hoverHighlight`   | `boolean`                             | `true`             |
+| `spacing`          | `number \| string`                    | `8`                |
+| `disabled`         | `boolean`                             | `false`            |
+| `itemClassName`    | `string`                              | —                  |
+| `headerClassName`  | `string`                              | —                  |
+| `headerStyle`      | `CSSProperties`                       | —                  |
+| `bodyClassName`    | `string`                              | —                  |
+| `bodyStyle`        | `CSSProperties`                       | —                  |
+| `triggerClassName` | `string`                              | —                  |
+| `contentClassName` | `string`                              | —                  |
+
+**AccordionItem fields**
+
+| Field          | Type                                      |
+| -------------- | ----------------------------------------- |
+| `value`        | `string`                                  |
+| `title`        | `ReactNode`                               |
+| `content`      | `ReactNode`                               |
+| `disabled`     | `boolean`                                 |
+| `icon`         | `ReactNode`                               |
+| `className`    | `string`                                  |
+| `triggerProps` | `ButtonHTMLAttributes<HTMLButtonElement>` |
+| `contentProps` | `HTMLAttributes<HTMLDivElement>`          |
+
+By default, opening one item does not close the others. Use `multiple={false}` when only one item should stay open. Use `hideIndicator` to remove the arrow, or `indicator="plus-minus"` to show a small `+`/`-` indicator. Use `border="none"` to remove borders, `border="divider"` to show only separators between items, and `spacing` to control the gap between items. Use `radius="square"` for square corners. Use `highlight="item"` to highlight the whole open item, or `highlight="header"` to highlight only the header. Use `hoverHighlight={false}` to disable hover highlight. Use `headerClassName`/`headerStyle` and `bodyClassName`/`bodyStyle` to customize colors, height, width, padding, margin, and other layout styles.
+
+---
+
 ### Badge
 
-Status labels, tags, counts, and version strings.
+Status labels and tags.
 
 ```tsx
 import { Badge } from "@dnotrever2/super-kit";
 
 <Badge variant="success">Deployed</Badge>
 <Badge variant="danger" pill>Failed</Badge>
-<Badge variant="dot" dotColor="var(--success)">Online</Badge>
-<Badge variant="count">12</Badge>
-<Badge variant="version">v2.4.1</Badge>
+<Badge variant="danger" coloredText>Failed</Badge>
+<Badge variant="danger" outline>Failed</Badge>
+<Badge variant="primary" label labelDirection="left">New</Badge>
+<Badge variant="success" indicator aria-label="Online" />
 <Badge dismissable onDismiss={() => {}}>api-gateway</Badge>
 ```
 
 | Prop          | Type                                                                                                                            | Default         |
 | ------------- | ------------------------------------------------------------------------------------------------------------------------------- | --------------- |
-| `variant`     | `"neutral" \| "accent" \| "outline" \| "success" \| "warning" \| "danger" \| "info" \| "count" \| "mono" \| "version" \| "dot"` | `"neutral"`     |
+| `variant`     | `"primary" \| "secondary" \| "ghost" \| "danger" \| "success" \| "warning"`                                                     | `"secondary"`   |
 | `icon`        | `ReactNode`                                                                                                                     | —               |
 | `pill`        | `boolean`                                                                                                                       | `false`         |
+| `outline`     | `boolean`                                                                                                                       | `false`         |
+| `coloredText` | `boolean`                                                                                                                       | `false`         |
+| `indicator`   | `boolean`                                                                                                                       | `false`         |
+| `label`       | `boolean`                                                                                                                       | `false`         |
+| `labelDirection` | `"left" \| "right"`                                                                                                         | `"right"`       |
 | `dismissable` | `boolean`                                                                                                                       | `false`         |
 | `onDismiss`   | `() => void`                                                                                                                    | —               |
-| `dotColor`    | `string`                                                                                                                        | `var(--accent)` |
+
+Badge variants match Button variants. Normal semantic badges use a stronger background with white text. Use `coloredText` when the text should follow the badge variant color. Outline badges use the variant color for the text. Use `pill` for the rounded shape. Use `indicator` for a small status dot; provide an accessible label with `aria-label`.
 
 ---
 
@@ -98,16 +193,20 @@ The last item is treated as the current page unless `current` is set explicitly.
 
 ### Button
 
-Standard action button with semantic variants and loading state.
+Standard action button with semantic variants.
 
 ```tsx
-import { Button } from "@dnotrever2/super-kit";
+import { Button, Spinner } from "@dnotrever2/super-kit";
 
 <Button variant="primary" onClick={deploy}>Deploy</Button>
 <Button variant="success" icon={<CheckIcon />}>Approve</Button>
 <Button variant="danger">Delete</Button>
-<Button variant="primary" loading icon={<Spinner size="sm" onAccent />}>
-  Deploying
+<Button variant="danger" coloredText>Delete</Button>
+<Button variant="primary" outline>Configure</Button>
+<Button variant="primary" rounded>Deploy</Button>
+<Button variant="ghost" icon={<SettingsIcon />} aria-label="Settings" />
+<Button variant="primary" disabled icon={<Spinner size="sm" onAccent />}>
+  Loading...
 </Button>
 ```
 
@@ -116,9 +215,15 @@ import { Button } from "@dnotrever2/super-kit";
 | `variant`  | `"primary" \| "secondary" \| "ghost" \| "danger" \| "success" \| "warning"` | `"secondary"` |
 | `size`     | `"sm" \| "md" \| "lg"`                                                      | `"md"`        |
 | `icon`     | `ReactNode`                                                                 | —             |
-| `loading`  | `boolean`                                                                   | `false`       |
+| `outline`  | `boolean`                                                                   | `false`       |
+| `rounded`  | `boolean`                                                                   | `false`       |
+| `coloredText` | `boolean`                                                                | `false`       |
 | `disabled` | `boolean`                                                                   | `false`       |
 
+Normal semantic buttons use a stronger background with white text. Use `coloredText` when the text should follow the button variant color. Outline buttons always use the variant color for the text.
+To create a loading button, pass a `Spinner` as `icon`, use text such as `"Loading..."`, and set `disabled` to block interaction.
+To create an icon button, pass only `icon` and no text. Provide an accessible label with `aria-label`.
+
 Forwards a `ref` to the underlying `<button>`. Accepts all native button attributes.
 
 ---
@@ -303,6 +408,7 @@ const [open, setOpen] = useState(false);
 ### Modal
 
 Dialog overlay with backdrop. Renders as a `div`-based panel, not `<dialog>`.
+There is no separate `Dialog` component by design: projects can compose their own dialog patterns using existing design system primitives such as `Modal`, `Button`, `Input`, and `Textarea`.
 
 ```tsx
 import { Modal } from "@dnotrever2/super-kit";
@@ -354,6 +460,35 @@ import { Popover } from "@dnotrever2/super-kit";
 
 ---
 
+### Progress
+
+Determinate or indeterminate progress bar.
+
+```tsx
+import { Progress } from "@dnotrever2/super-kit";
+
+<Progress value={64} label="Deploy progress" showValue />
+<Progress shape="circle" value={72} label="Deploy" />
+<Progress indeterminate label="Publishing" showValue />
+<Progress value={82} variant="success" size="lg" />
+```
+
+| Prop            | Type                                                              | Default    |
+| --------------- | ----------------------------------------------------------------- | ---------- |
+| `value`         | `number`                                                          | —          |
+| `max`           | `number`                                                          | `100`      |
+| `variant`       | `"accent" \| "success" \| "warning" \| "danger" \| "info" \| "neutral"` | `"accent"` |
+| `size`          | `"sm" \| "md" \| "lg"`                                            | `"md"`     |
+| `shape`         | `"bar" \| "circle"`                                               | `"bar"`    |
+| `label`         | `ReactNode`                                                       | —          |
+| `valueLabel`    | `string`                                                          | —          |
+| `showValue`     | `boolean`                                                         | `false`    |
+| `indeterminate` | `boolean`                                                         | `false`    |
+
+When `value` is omitted or `indeterminate` is true, the progress renders in loading mode. Circular progress shows the percentage in the center.
+
+---
+
 ### PushButton
 
 Toggle button and grouped toolbar segments.
@@ -471,6 +606,83 @@ Forwards a `ref` to the root `<div>`.
 
 ---
 
+### Tabs
+
+Accessible tab navigation with raised, rounded, or underline styles.
+
+```tsx
+import { Badge, Tabs } from "@dnotrever2/super-kit";
+
+<Tabs
+  variant="raised"
+  items={[
+    { value: "overview", label: "Overview", content: <Overview /> },
+    {
+      value: "deployments",
+      label: <>Deployments <Badge variant="primary" pill>4</Badge></>,
+      content: <Deployments />
+    },
+    { value: "settings", label: "Settings", content: <Settings /> }
+  ]}
+/>
+
+<Tabs
+  variant="underline"
+  transparent
+  closable
+  onTabClose={(value) => closeTab(value)}
+  items={[
+    { value: "overview", label: "Overview" },
+    { value: "deployments", label: "Deployments" }
+  ]}
+/>
+
+<Tabs
+  variant="rounded"
+  items={[
+    { value: "daily", label: "Daily" },
+    { value: "weekly", label: "Weekly" }
+  ]}
+/>
+```
+
+| Prop            | Type                         | Default             |
+| --------------- | ---------------------------- | ------------------- |
+| `items`         | `TabItem[]`                  | required            |
+| `variant`       | `"raised" \| "underline" \| "rounded"` | `"raised"` |
+| `value`         | `string`                     | — controlled        |
+| `defaultValue`  | `string`                     | first enabled item  |
+| `onValueChange` | `(value: string) => void`    | —                   |
+| `ariaLabel`     | `string`                     | `"Tabs"`            |
+| `disabled`      | `boolean`                    | `false`             |
+| `closable`      | `boolean`                    | `false`             |
+| `closeLabel`    | `string`                     | `"Close tab"`       |
+| `onTabClose`    | `(value: string) => void`    | —                   |
+| `tabItemClassName` | `string`                  | —                   |
+| `tabClassName`  | `string`                     | —                   |
+| `transparent`   | `boolean`                    | `false` — underline only |
+| `inactiveTransparent` | `boolean`              | `false` — raised/rounded only |
+
+**TabItem fields**
+
+| Field        | Type                                      |
+| ------------ | ----------------------------------------- |
+| `value`      | `string`                                  |
+| `label`      | `ReactNode`                               |
+| `content`    | `ReactNode`                               |
+| `disabled`   | `boolean`                                 |
+| `closable`   | `boolean`                                 |
+| `closeLabel` | `string`                                  |
+| `onClose`    | `(value: string) => void`                 |
+| `className`  | `string` — class for the tab wrapper      |
+| `tabProps`   | `ButtonHTMLAttributes<HTMLButtonElement>` |
+| `closeButtonProps` | `ButtonHTMLAttributes<HTMLButtonElement>` |
+| `panelProps` | `HTMLAttributes<HTMLDivElement>`          |
+
+Use `tabItemClassName` or `TabItem.className` to customize the tab wrapper dimensions such as height, width, and margin. Use `tabClassName` or `tabProps.className` to customize the inner tab button, such as padding.
+
+---
+
 ### Spinner
 
 Loading indicator in three styles.
@@ -483,7 +695,7 @@ import { Spinner } from "@dnotrever2/super-kit";
 <Spinner variant="bar" />
 
 // Inside a primary button (white on accent background)
-<Button variant="primary" loading icon={<Spinner size="sm" onAccent />}>
+<Button variant="primary" disabled icon={<Spinner size="sm" onAccent />}>
   Deploying
 </Button>
 

package/dist/Accordion/Accordion.d.ts

@@ -0,0 +1,42 @@
+import { ButtonHTMLAttributes, CSSProperties, HTMLAttributes, ReactNode } from 'react';
+export type AccordionValue = string | string[];
+export type AccordionIndicator = "chevron" | "plus-minus";
+export type AccordionBorder = "boxed" | "none" | "divider";
+export type AccordionHighlight = "none" | "item" | "header";
+export type AccordionRadius = "rounded" | "square";
+export type AccordionItem = {
+    value: string;
+    title: ReactNode;
+    content: ReactNode;
+    disabled?: boolean;
+    icon?: ReactNode;
+    className?: string;
+    triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+    contentProps?: HTMLAttributes<HTMLDivElement>;
+};
+export type AccordionProps = Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
+    items: AccordionItem[];
+    value?: AccordionValue;
+    defaultValue?: AccordionValue;
+    onValueChange?: (value: AccordionValue) => void;
+    multiple?: boolean;
+    hideIndicator?: boolean;
+    indicator?: AccordionIndicator;
+    border?: AccordionBorder;
+    highlight?: AccordionHighlight;
+    radius?: AccordionRadius;
+    hoverHighlight?: boolean;
+    spacing?: number | string;
+    disabled?: boolean;
+    itemClassName?: string;
+    headerClassName?: string;
+    headerStyle?: CSSProperties;
+    bodyClassName?: string;
+    bodyStyle?: CSSProperties;
+    triggerClassName?: string;
+    contentClassName?: string;
+};
+export declare function Accordion({ items, value, defaultValue, onValueChange, multiple, hideIndicator, indicator, border, highlight, radius, hoverHighlight, spacing, disabled, itemClassName, headerClassName, headerStyle, bodyClassName, bodyStyle, triggerClassName, contentClassName, className, style, ...props }: AccordionProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Accordion {
+    var displayName: string;
+}

package/dist/Accordion/index.d.ts

@@ -0,0 +1 @@
+export * from './Accordion';

package/dist/Badge/Badge.d.ts

@@ -1,15 +1,19 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export type BadgeVariant = "neutral" | "accent" | "outline" | "success" | "warning" | "danger" | "info" | "count" | "mono" | "version" | "dot";
+export type BadgeVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning";
 export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
     variant?: BadgeVariant;
     icon?: ReactNode;
     pill?: boolean;
+    outline?: boolean;
+    coloredText?: boolean;
+    indicator?: boolean;
+    label?: boolean;
+    labelDirection?: "left" | "right";
     dismissable?: boolean;
     onDismiss?: () => void;
-    dotColor?: string;
     children?: ReactNode;
 };
-export declare function Badge({ variant, icon, pill, dismissable, onDismiss, dotColor, children, className, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Badge({ variant, icon, pill, outline, coloredText, indicator, label, labelDirection, dismissable, onDismiss, children, className, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Badge {
     var displayName: string;
 }

package/dist/Button/Button.d.ts

@@ -5,13 +5,17 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: ButtonVariant;
     size?: ButtonSize;
     icon?: ReactNode;
-    loading?: boolean;
+    outline?: boolean;
+    rounded?: boolean;
+    coloredText?: boolean;
     children?: ReactNode;
 };
 export declare const Button: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
     variant?: ButtonVariant;
     size?: ButtonSize;
     icon?: ReactNode;
-    loading?: boolean;
+    outline?: boolean;
+    rounded?: boolean;
+    coloredText?: boolean;
     children?: ReactNode;
 } & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Progress/Progress.d.ts

@@ -0,0 +1,19 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export type ProgressVariant = "accent" | "success" | "warning" | "danger" | "info" | "neutral";
+export type ProgressSize = "sm" | "md" | "lg";
+export type ProgressShape = "bar" | "circle";
+export type ProgressProps = HTMLAttributes<HTMLDivElement> & {
+    value?: number;
+    max?: number;
+    variant?: ProgressVariant;
+    size?: ProgressSize;
+    shape?: ProgressShape;
+    label?: ReactNode;
+    valueLabel?: string;
+    showValue?: boolean;
+    indeterminate?: boolean;
+};
+export declare function Progress({ value, max, variant, size, shape, label, valueLabel, showValue, indeterminate, className, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Progress {
+    var displayName: string;
+}

package/dist/Progress/index.d.ts

@@ -0,0 +1 @@
+export * from './Progress';

package/dist/Tabs/Tabs.d.ts

@@ -0,0 +1,35 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type TabsVariant = "raised" | "underline" | "rounded";
+export type TabItem = {
+    value: string;
+    label: ReactNode;
+    content?: ReactNode;
+    disabled?: boolean;
+    closable?: boolean;
+    closeLabel?: string;
+    onClose?: (value: string) => void;
+    className?: string;
+    tabProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+    closeButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+    panelProps?: HTMLAttributes<HTMLDivElement>;
+};
+export type TabsProps = HTMLAttributes<HTMLDivElement> & {
+    items: TabItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    variant?: TabsVariant;
+    ariaLabel?: string;
+    disabled?: boolean;
+    closable?: boolean;
+    closeLabel?: string;
+    onTabClose?: (value: string) => void;
+    tabClassName?: string;
+    tabItemClassName?: string;
+    transparent?: boolean;
+    inactiveTransparent?: boolean;
+};
+export declare function Tabs({ items, value, defaultValue, onValueChange, variant, ariaLabel, disabled, closable, closeLabel, onTabClose, tabClassName, tabItemClassName, transparent, inactiveTransparent, className, ...props }: TabsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Tabs {
+    var displayName: string;
+}

package/dist/Tabs/index.d.ts

@@ -0,0 +1 @@
+export * from './Tabs';

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './Accordion';
 export * from './Badge';
 export * from './Breadcrumb';
 export * from './Scrollable';
@@ -8,9 +9,11 @@ export * from './Markers';
 export * from './Menu';
 export * from './Modal';
 export * from './Popover';
+export * from './Progress';
 export * from './PushButton';
 export * from './Select';
 export * from './Spinner';
+export * from './Tabs';
 export * from './Textarea';
 export * from './Toast';
 export * from './Tooltip';