@dnotrever2/super-kit 0.1.16 → 0.1.18

package/README.md

@@ -203,6 +203,7 @@ import { Button, Spinner } from "@dnotrever2/super-kit";
 <Button variant="danger">Delete</Button>
 <Button variant="danger" coloredText>Delete</Button>
 <Button variant="primary" outline>Configure</Button>
+<Button variant="primary" transparent>Deploy</Button>
 <Button variant="primary" rounded>Deploy</Button>
 <Button variant="ghost" icon={<SettingsIcon />} aria-label="Settings" />
 <Button variant="primary" disabled icon={<Spinner size="sm" onAccent />}>
@@ -218,9 +219,10 @@ import { Button, Spinner } from "@dnotrever2/super-kit";
 | `outline`  | `boolean`                                                                   | `false`       |
 | `rounded`  | `boolean`                                                                   | `false`       |
 | `coloredText` | `boolean`                                                                | `false`       |
+| `transparent` | `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.
+Normal semantic buttons use a stronger background with white text. Use `coloredText` when the text should follow the button variant color. Use `transparent` when the button should start without a background and reveal the variant background on hover. 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`.
 
@@ -286,6 +288,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"
@@ -314,6 +319,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`                                | `""`    |
@@ -327,6 +333,83 @@ Forwards a `ref` to the underlying `<input>`.
 
 ---
 
+### DateTimeInput
+
+Date and time input with custom date, month, and time pickers using 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.
@@ -712,6 +795,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.
@@ -823,6 +955,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  |
@@ -830,9 +966,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
@@ -862,10 +1002,10 @@ All tokens are CSS custom properties defined in `src/styles/index.css` and avail
 
 | Token                          |                        |
 | ------------------------------ | ---------------------- |
-| `--accent`                     | Blue `#3d7eff`         |
-| `--accent-hover`               | `#5b95ff`              |
-| `--accent-soft`                | `rgba(61,126,255,.14)` |
-| `--accent-ring`                | `rgba(61,126,255,.35)` |
+| `--accent`                     | Blue `#416fa8`         |
+| `--accent-hover`               | `#507fb9`              |
+| `--accent-soft`                | `rgba(65,111,168,.14)` |
+| `--accent-ring`                | `rgba(65,111,168,.35)` |
 | `--success` / `--success-soft` | Green `#3ecf8e`        |
 | `--warning` / `--warning-soft` | Yellow `#facc15`       |
 | `--danger` / `--danger-soft`   | Red `#f0556a`          |

package/dist/Button/Button.d.ts

@@ -8,6 +8,7 @@ export type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     outline?: boolean;
     rounded?: boolean;
     coloredText?: boolean;
+    transparent?: boolean;
     children?: ReactNode;
 };
 export declare const Button: import('react').ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
@@ -17,5 +18,6 @@ export declare const Button: import('react').ForwardRefExoticComponent<ButtonHTM
     outline?: boolean;
     rounded?: boolean;
     coloredText?: boolean;
+    transparent?: boolean;
     children?: ReactNode;
 } & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -4,7 +4,9 @@ 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';
@@ -13,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';