@dnotrever2/super-kit 0.1.13 → 0.1.15

package/README.md

@@ -34,42 +34,91 @@ import "@dnotrever2/super-kit/dist/styles/index.css";
 
 ### 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`.
+
+---
+
+### Breadcrumb
+
+Page hierarchy navigation with links, actions, and automatic current-page state.
+
+```tsx
+import { Breadcrumb } from "@dnotrever2/super-kit";
+
+<Breadcrumb
+  items={[
+    { label: "Projects", href: "/projects" },
+    { label: "super-kit", href: "/projects/super-kit" },
+    { label: "Components" }
+  ]}
+/>
+```
+
+| Prop        | Type               | Default        |
+| ----------- | ------------------ | -------------- |
+| `items`     | `BreadcrumbItem[]` | required       |
+| `separator` | `ReactNode`        | chevron icon   |
+| `label`     | `string`           | `"Breadcrumb"` |
+
+**BreadcrumbItem fields**
+
+| Field         | Type                                    |
+| ------------- | --------------------------------------- |
+| `label`       | `ReactNode`                             |
+| `href`        | `string`                                |
+| `current`     | `boolean`                               |
+| `disabled`    | `boolean`                               |
+| `onClick`     | `() => void`                            |
+| `linkProps`   | `AnchorHTMLAttributes<HTMLAnchorElement>` |
+| `buttonProps` | `ButtonHTMLAttributes<HTMLButtonElement>` |
+
+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>
 ```
 
@@ -78,9 +127,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.
 
 ---
@@ -265,6 +320,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";
@@ -316,6 +372,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.
@@ -433,6 +518,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.
@@ -445,7 +607,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>
 
@@ -522,18 +684,40 @@ function DeployButton() {
     </Button>
   );
 }
+
+function LoadingDeployButton() {
+  const { toast, dismiss } = useToast();
+
+  return (
+    <Button
+      onClick={() => {
+        const id = toast({
+          variant: "loading",
+          title: "Deploying",
+          message: "Please wait",
+          overlay: true
+        });
+
+        deploy().finally(() => dismiss(id));
+      }}
+    >
+      Deploy
+    </Button>
+  );
+}
 ```
 
 **`toast(options)` options**
 
 | Field      | Type                                     | Default                     |
 | ---------- | ---------------------------------------- | --------------------------- |
-| `variant`  | `"ok" \| "error" \| "warning" \| "info"` | required                    |
+| `variant`  | `"ok" \| "error" \| "warning" \| "info" \| "loading"` | required |
 | `title`    | `string`                                 | required                    |
 | `message`  | `string`                                 | —                           |
-| `duration` | `number` (ms)                            | `4000` — set `0` to persist |
+| `duration` | `number` (ms)                            | `4000`; `loading` defaults to `0` |
+| `overlay`  | `boolean`                                | `false` — only applies to `loading` |
 
-`toast()` returns the toast `id`. Dismiss manually with `dismiss(id)`.
+`toast()` returns the toast `id`. Dismiss manually with `dismiss(id)`. Loading toasts show a spinner and do not render a close button.
 
 ---
 
@@ -547,12 +731,17 @@ import { Tooltip } from "@dnotrever2/super-kit";
 <Tooltip content="Deploy to production" side="top">
   <Button variant="primary">Deploy</Button>
 </Tooltip>
+
+<Tooltip content="No delay" delay={0}>
+  <Button variant="primary">Deploy</Button>
+</Tooltip>
 ```
 
 | Prop           | Type                              | Default  |
 | -------------- | --------------------------------- | -------- |
 | `content`      | `ReactNode`                       | required |
 | `side`         | `"top" \| "bottom" \| "left" \| "right"` | `"top"`  |
+| `delay`        | `number` (ms)                     | `800`    |
 | `disabled`     | `boolean`                         | `false`  |
 | `wrapperProps` | `HTMLAttributes<HTMLSpanElement>` | —        |
 

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/Breadcrumb/Breadcrumb.d.ts

@@ -0,0 +1,20 @@
+import { AnchorHTMLAttributes, ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type BreadcrumbItem = {
+    label: ReactNode;
+    href?: string;
+    current?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    linkProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
+    buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+};
+export type BreadcrumbProps = HTMLAttributes<HTMLElement> & {
+    items: BreadcrumbItem[];
+    separator?: ReactNode;
+    label?: string;
+};
+export declare function Breadcrumb({ items, separator, label, className, ...props }: BreadcrumbProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Breadcrumb {
+    var displayName: string;
+}
+export declare const BreadCrumb: typeof Breadcrumb;

package/dist/Breadcrumb/index.d.ts

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

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/Toast/Toast.d.ts

@@ -1,19 +1,21 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export type ToastVariant = "ok" | "error" | "warning" | "info";
+export type ToastVariant = "ok" | "error" | "warning" | "info" | "loading";
 export type ToastItem = {
     id: string;
     variant: ToastVariant;
     title: string;
     message?: string;
     duration?: number;
+    overlay?: boolean;
 };
 export type ToastProps = HTMLAttributes<HTMLDivElement> & {
     variant?: ToastVariant;
     title: string;
     message?: string;
+    overlay?: boolean;
     onDismiss?: () => void;
 };
-export declare function Toast({ variant, title, message, onDismiss, className, ...props }: ToastProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toast({ variant, title, message, overlay, onDismiss, className, ...props }: ToastProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Toast {
     var displayName: string;
 }

package/dist/Tooltip/Tooltip.d.ts

@@ -3,11 +3,12 @@ export type TooltipSide = "top" | "bottom" | "left" | "right";
 export type TooltipProps = {
     content: ReactNode;
     side?: TooltipSide;
+    delay?: number;
     children: ReactNode;
     wrapperProps?: HTMLAttributes<HTMLSpanElement>;
     disabled?: boolean;
 };
-export declare function Tooltip({ content, side, children, wrapperProps, disabled }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tooltip({ content, side, delay, children, wrapperProps, disabled }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Tooltip {
     var displayName: string;
 }

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Badge';
+export * from './Breadcrumb';
 export * from './Scrollable';
 export * from './Button';
 export * from './Card';
@@ -7,9 +8,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';