@dnotrever2/super-kit 0.1.15 → 0.1.17

package/README.md

@@ -32,6 +32,94 @@ 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 and tags.
@@ -198,6 +286,9 @@ import { Input } from "@dnotrever2/super-kit";
 // With icon
 <Input label="search" icon={<SearchIcon />} placeholder="Search services" />
 
+// Rounded
+<Input label="search" rounded placeholder="Search services" />
+
 // With mask — only digits allowed, formatted as 000-0000
 <Input
   label="code"
@@ -226,6 +317,7 @@ import { Input } from "@dnotrever2/super-kit";
 | `maskAllowedPattern`     | `RegExp`                                | —       |
 | `maskPlaceholder`        | `string`                                | —       |
 | `clearable`              | `boolean`                               | `false` |
+| `rounded`                | `boolean`                               | `false` |
 | `selectOnFocus`          | `boolean`                               | `false` |
 | `textAlign`              | `"left" \| "center" \| "right"`         | —       |
 | `value` / `defaultValue` | `string`                                | `""`    |
@@ -239,6 +331,83 @@ Forwards a `ref` to the underlying `<input>`.
 
 ---
 
+### DateTimeInput
+
+Date and time input with a custom date/month picker and Super Kit styling.
+
+```tsx
+import { DateTimeInput } from "@dnotrever2/super-kit";
+
+<DateTimeInput label="Date" mode="date" clearable />
+<DateTimeInput label="Time" mode="time" />
+<DateTimeInput label="Date and time" mode="datetime" />
+<DateTimeInput label="Month and year" mode="month" />
+
+<DateTimeInput
+  label="Release date"
+  mode="date"
+  min="2026-05-01"
+  max="2026-05-31"
+  onValueChange={(value) => setDate(value)}
+/>
+```
+
+| Prop                | Type                                             | Default  |
+| ------------------- | ------------------------------------------------ | -------- |
+| `mode`              | `"date" \| "time" \| "datetime" \| "month"`     | `"date"` |
+| `label`             | `string`                                         | —        |
+| `value` / `defaultValue` | `string`                                    | `""`     |
+| `clearable`         | `boolean`                                        | `false`  |
+| `clearLabel`        | `string`                                         | `"Clear"` |
+| `showIcon`          | `boolean`                                        | `true`   |
+| `openPickerOnClick` | `boolean`                                        | `true`   |
+| `disabled`          | `boolean`                                        | `false`  |
+| `onChange`          | `ChangeEvent<HTMLInputElement>`                  | —        |
+| `onValueChange`     | `(value: string) => void`                        | —        |
+| `inputProps`        | `InputHTMLAttributes<HTMLInputElement>`          | —        |
+| `wrapperProps`      | `HTMLAttributes<HTMLSpanElement>`                | —        |
+| `fieldProps`        | `HTMLAttributes<HTMLDivElement>`                 | —        |
+
+Native `min`, `max`, `step`, `required`, and other input attributes are supported. Values follow browser-native formats: `YYYY-MM-DD` for date, `HH:mm` for time, `YYYY-MM-DDTHH:mm` for datetime, and `YYYY-MM` for month.
+
+Forwards a `ref` to the underlying `<input>`.
+
+---
+
+### Link
+
+Text link with variants aligned to Button and Badge colors.
+
+```tsx
+import { Link } from "@dnotrever2/super-kit";
+
+<Link href="/docs" variant="primary">Documentation</Link>
+<Link href="/status" variant="success" underlined>Status</Link>
+<Link href="https://example.com" target="_blank" noreferrer>
+  External docs
+</Link>
+<Link href="/danger-zone" variant="danger" opacity={0.72}>
+  Danger zone
+</Link>
+<Link href="/settings" disabled>Settings</Link>
+```
+
+| Prop          | Type                                                                        | Default     |
+| ------------- | --------------------------------------------------------------------------- | ----------- |
+| `variant`     | `"primary" \| "secondary" \| "ghost" \| "danger" \| "success" \| "warning"` | `"primary"` |
+| `href`        | `string`                                                                    | —           |
+| `target`      | `HTMLAttributeAnchorTarget`                                                 | —           |
+| `underlined`  | `boolean`                                                                   | `false`     |
+| `opacity`     | `number`                                                                    | `1`         |
+| `disabled`    | `boolean`                                                                   | `false`     |
+| `noreferrer`  | `boolean`                                                                   | `false`     |
+| `noopener`    | `boolean`                                                                   | `true` for `target="_blank"` |
+| `icon`        | `ReactNode`                                                                 | —           |
+
+Forwards a `ref` to the underlying `<a>`. Accepts native anchor attributes such as `download`, `rel`, `referrerPolicy`, and `aria-*`. When `disabled`, navigation is blocked and the link is removed from the tab order.
+
+---
+
 ### Markers
 
 Form selection primitives: Checkbox, Radio, and Switch.
@@ -624,6 +793,55 @@ import { Spinner } from "@dnotrever2/super-kit";
 
 ---
 
+### Steps
+
+Step progress indicator with circular or arrow styles.
+
+```tsx
+import { Steps } from "@dnotrever2/super-kit";
+
+const items = [
+  { label: "Step 1", description: "Configure the workspace" },
+  { label: "Step 2", description: "Review the changes" },
+  { label: "Step 3", description: "Publish the release" }
+];
+
+<Steps items={items} currentStep={2} />
+
+<Steps
+  items={items}
+  variant="arrow"
+  currentStep={2}
+  showNumbers={false}
+/>
+```
+
+| Prop            | Type                         | Default      |
+| --------------- | ---------------------------- | ------------ |
+| `items`         | `StepItem[]`                 | required     |
+| `currentStep`   | `number`                     | `1`          |
+| `variant`       | `"line" \| "arrow"`          | `"line"`     |
+| `size`          | `"sm" \| "md" \| "lg"`      | `"md"`       |
+| `clickable`     | `boolean`                    | `false`      |
+| `showNumbers`   | `boolean`                    | `true`       |
+| `onStepChange`  | `(step: number) => void`     | —            |
+| `stepClassName` | `string`                     | —            |
+
+**StepItem fields**
+
+| Field         | Type                                      |
+| ------------- | ----------------------------------------- |
+| `label`       | `ReactNode`                               |
+| `description` | `ReactNode`                               |
+| `icon`        | `ReactNode`                               |
+| `disabled`    | `boolean`                                 |
+| `className`   | `string`                                  |
+| `stepProps`   | `ButtonHTMLAttributes<HTMLButtonElement>` |
+
+`currentStep` is 1-based. Completed steps are the steps before `currentStep`; the current step is highlighted.
+
+---
+
 ### Textarea
 
 Multi-line text input with custom scrollbar, character count, and clear button.
@@ -735,6 +953,10 @@ import { Tooltip } from "@dnotrever2/super-kit";
 <Tooltip content="No delay" delay={0}>
   <Button variant="primary">Deploy</Button>
 </Tooltip>
+
+<Tooltip content="Fixed top" side="top" dynamic={false}>
+  <Button variant="primary">Deploy</Button>
+</Tooltip>
 ```
 
 | Prop           | Type                              | Default  |
@@ -742,9 +964,13 @@ import { Tooltip } from "@dnotrever2/super-kit";
 | `content`      | `ReactNode`                       | required |
 | `side`         | `"top" \| "bottom" \| "left" \| "right"` | `"top"`  |
 | `delay`        | `number` (ms)                     | `800`    |
+| `dynamic`      | `boolean`                         | `true`   |
+| `viewportPadding` | `number`                      | `8`      |
 | `disabled`     | `boolean`                         | `false`  |
 | `wrapperProps` | `HTMLAttributes<HTMLSpanElement>` | —        |
 
+By default, the tooltip flips to the opposite side when the requested side would be clipped by the viewport.
+
 ---
 
 ## Design tokens

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

@@ -0,0 +1,34 @@
+import { default as React, ButtonHTMLAttributes, ChangeEvent, HTMLAttributes, InputHTMLAttributes } from 'react';
+export type DateTimeInputMode = "date" | "time" | "datetime" | "month";
+export type DateTimeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "onChange" | "type" | "value"> & {
+    mode?: DateTimeInputMode;
+    label?: string;
+    value?: string;
+    defaultValue?: string;
+    clearable?: boolean;
+    clearLabel?: string;
+    showIcon?: boolean;
+    openPickerOnClick?: boolean;
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    wrapperProps?: HTMLAttributes<HTMLSpanElement>;
+    fieldProps?: HTMLAttributes<HTMLDivElement>;
+    clearButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onValueChange?: (value: string) => void;
+};
+export declare const DateTimeInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "defaultValue" | "onChange" | "value" | "type"> & {
+    mode?: DateTimeInputMode;
+    label?: string;
+    value?: string;
+    defaultValue?: string;
+    clearable?: boolean;
+    clearLabel?: string;
+    showIcon?: boolean;
+    openPickerOnClick?: boolean;
+    inputProps?: InputHTMLAttributes<HTMLInputElement>;
+    wrapperProps?: HTMLAttributes<HTMLSpanElement>;
+    fieldProps?: HTMLAttributes<HTMLDivElement>;
+    clearButtonProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onValueChange?: (value: string) => void;
+} & React.RefAttributes<HTMLInputElement>>;

package/dist/DateTimeInput/index.d.ts

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

package/dist/Input/Input.d.ts

@@ -14,6 +14,7 @@ export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "defaultVal
     maskAllowedPattern?: RegExp;
     clearable?: boolean;
     clearLabel?: string;
+    rounded?: boolean;
     selectOnFocus?: boolean;
     textAlign?: "left" | "center" | "right";
     inputProps?: InputHTMLAttributes<HTMLInputElement>;
@@ -34,6 +35,7 @@ export declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTML
     maskAllowedPattern?: RegExp;
     clearable?: boolean;
     clearLabel?: string;
+    rounded?: boolean;
     selectOnFocus?: boolean;
     textAlign?: "left" | "center" | "right";
     inputProps?: InputHTMLAttributes<HTMLInputElement>;

package/dist/Link/Link.d.ts

@@ -0,0 +1,22 @@
+import { AnchorHTMLAttributes, ReactNode } from 'react';
+export type LinkVariant = "primary" | "secondary" | "ghost" | "danger" | "success" | "warning";
+export type LinkProps = Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "aria-disabled"> & {
+    variant?: LinkVariant;
+    underlined?: boolean;
+    opacity?: number;
+    disabled?: boolean;
+    noreferrer?: boolean;
+    noopener?: boolean;
+    icon?: ReactNode;
+    children?: ReactNode;
+};
+export declare const Link: import('react').ForwardRefExoticComponent<Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "aria-disabled"> & {
+    variant?: LinkVariant;
+    underlined?: boolean;
+    opacity?: number;
+    disabled?: boolean;
+    noreferrer?: boolean;
+    noopener?: boolean;
+    icon?: ReactNode;
+    children?: ReactNode;
+} & import('react').RefAttributes<HTMLAnchorElement>>;

package/dist/Link/index.d.ts

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

package/dist/Steps/Steps.d.ts

@@ -0,0 +1,25 @@
+import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type StepsVariant = "line" | "arrow";
+export type StepsSize = "sm" | "md" | "lg";
+export type StepItem = {
+    label: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    stepProps?: ButtonHTMLAttributes<HTMLButtonElement>;
+};
+export type StepsProps = Omit<HTMLAttributes<HTMLOListElement>, "onChange"> & {
+    items: StepItem[];
+    currentStep?: number;
+    variant?: StepsVariant;
+    size?: StepsSize;
+    clickable?: boolean;
+    showNumbers?: boolean;
+    onStepChange?: (step: number) => void;
+    stepClassName?: string;
+};
+export declare function Steps({ items, currentStep, variant, size, clickable, showNumbers, onStepChange, stepClassName, className, ...props }: StepsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Steps {
+    var displayName: string;
+}

package/dist/Steps/index.d.ts

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

package/dist/Tooltip/Tooltip.d.ts

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

package/dist/index.d.ts

@@ -1,9 +1,12 @@
+export * from './Accordion';
 export * from './Badge';
 export * from './Breadcrumb';
 export * from './Scrollable';
 export * from './Button';
 export * from './Card';
+export * from './DateTimeInput';
 export * from './Input';
+export * from './Link';
 export * from './Markers';
 export * from './Menu';
 export * from './Modal';
@@ -12,6 +15,7 @@ export * from './Progress';
 export * from './PushButton';
 export * from './Select';
 export * from './Spinner';
+export * from './Steps';
 export * from './Tabs';
 export * from './Textarea';
 export * from './Toast';