@dnotrever2/super-kit 0.1.20 → 0.1.22

package/README.md

@@ -151,6 +151,8 @@ import { Badge } from "@dnotrever2/super-kit";
 
 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`.
 
+Badge also accepts native `<span>` attributes, including `className`, `style`, `id`, `title`, and `aria-*`. For one-off visual tweaks, use `style` or `className`; the internal CSS variables `--badge-bg`, `--badge-fg`, and `--badge-border` can be overridden for custom background, text, and border colors.
+
 ---
 
 ### Breadcrumb
@@ -428,6 +430,7 @@ import { Checkbox, Radio, RadioGroup, Switch } from "@dnotrever2/super-kit";
 
 <Checkbox label="Auto-deploy" checked={checked} onChange={setChecked} />
 <Checkbox label="Partial" indeterminate />
+<Checkbox label="Required" isInvalid />
 <Checkbox label="Disabled" disabled />
 
 <RadioGroup>
@@ -436,6 +439,7 @@ import { Checkbox, Radio, RadioGroup, Switch } from "@dnotrever2/super-kit";
 </RadioGroup>
 
 <Switch label="SSO required" checked={on} onChange={setOn} />
+<Switch label="SSO required" thinTrack checked={on} onChange={setOn} />
 ```
 
 **Checkbox / Switch props**
@@ -446,6 +450,8 @@ import { Checkbox, Radio, RadioGroup, Switch } from "@dnotrever2/super-kit";
 | `checked`        | `boolean`                    |
 | `defaultChecked` | `boolean`                    |
 | `indeterminate`  | `boolean` (Checkbox only)    |
+| `thinTrack`      | `boolean` (Switch only)      |
+| `isInvalid`      | `boolean`                    |
 | `disabled`       | `boolean`                    |
 | `onChange`       | `(checked: boolean) => void` |
 
@@ -456,6 +462,7 @@ import { Checkbox, Radio, RadioGroup, Switch } from "@dnotrever2/super-kit";
 | `label`    | `ReactNode`               |
 | `value`    | `string`                  |
 | `checked`  | `boolean`                 |
+| `isInvalid` | `boolean`                |
 | `disabled` | `boolean`                 |
 | `onChange` | `(value: string) => void` |
 
@@ -466,7 +473,7 @@ import { Checkbox, Radio, RadioGroup, Switch } from "@dnotrever2/super-kit";
 Composable dropdown menu — render inside a positioned container toggled by your own trigger button.
 
 ```tsx
-import { Menu, MenuItem, MenuSeparator } from "@dnotrever2/super-kit";
+import { Menu, MenuItem } from "@dnotrever2/super-kit";
 
 const [open, setOpen] = useState(false);
 
@@ -474,10 +481,22 @@ const [open, setOpen] = useState(false);
   <Button onClick={() => setOpen(o => !o)}>Options</Button>
   {open && (
     <div style={{ position: "absolute", top: "calc(100% + 4px)", left: 0, zIndex: 20 }}>
-      <Menu style={{ width: 240 }}>
+      <Menu shadow style={{ width: 240 }}>
         <MenuItem icon={<PlayIcon />} kbd="⌘R">Run workflow</MenuItem>
         <MenuItem icon={<CopyIcon />}>Duplicate</MenuItem>
-        <MenuSeparator />
+        <MenuItem
+          submenuMode="external"
+          submenuTrigger="hover"
+          submenu={
+            <>
+              <MenuItem>Production</MenuItem>
+              <MenuItem>Staging</MenuItem>
+              <MenuItem>Preview</MenuItem>
+            </>
+          }
+        >
+          Deploy target
+        </MenuItem>
         <MenuItem icon={<TrashIcon />} danger>Delete</MenuItem>
       </Menu>
     </div>
@@ -485,6 +504,13 @@ const [open, setOpen] = useState(false);
 </div>
 ```
 
+**Menu props**
+
+| Prop     | Type      | Default |
+| -------- | --------- | ------- |
+| `shadow` | `boolean` | `true`  |
+| `spacing` | `"sm" \| "md" \| "lg"` | `"sm"` |
+
 **MenuItem props**
 
 | Prop       | Type        | Default                  |
@@ -493,6 +519,9 @@ const [open, setOpen] = useState(false);
 | `kbd`      | `string`    | — keyboard shortcut hint |
 | `active`   | `boolean`   | `false`                  |
 | `danger`   | `boolean`   | `false`                  |
+| `submenu`  | `ReactNode` | — submenu items          |
+| `submenuMode` | `"external" \| "internal"` | `"external"` |
+| `submenuTrigger` | `"hover" \| "click"` | `"hover"` |
 | `disabled` | `boolean`   | `false`                  |
 
 ---
@@ -508,6 +537,9 @@ import { Modal } from "@dnotrever2/super-kit";
 <Modal
   open={isOpen}
   title="Confirm delete"
+  overlay="blur"
+  shadow
+  draggable
   onClose={() => setIsOpen(false)}
 >
   <p>This action cannot be undone.</p>
@@ -518,6 +550,9 @@ import { Modal } from "@dnotrever2/super-kit";
 | ---------- | ------------ | ------- |
 | `open`     | `boolean`    | `false` |
 | `title`    | `ReactNode`  | —       |
+| `overlay`  | `"none" \| "blur" \| "dim"` | `"blur"` |
+| `shadow`   | `boolean`    | `true`  |
+| `draggable` | `boolean`   | `false` — drag by the modal header |
 | `onClose`  | `() => void` | —       |
 | `children` | `ReactNode`  | —       |
 
@@ -534,6 +569,7 @@ import { Popover } from "@dnotrever2/super-kit";
   trigger={<Button variant="secondary">Settings</Button>}
   title="Connection"
   side="bottom-start"
+  shadow
 >
   <p>Content here</p>
 </Popover>
@@ -544,12 +580,16 @@ import { Popover } from "@dnotrever2/super-kit";
 | `trigger`         | `ReactNode`                                                  | —                |
 | `title`           | `ReactNode`                                                  | —                |
 | `side`            | `"bottom-start" \| "bottom-end" \| "top-start" \| "top-end"` | `"bottom-start"` |
+| `shadow`          | `boolean`                                                    | `true`           |
+| `openOnHover`     | `boolean`                                                    | `false`          |
 | `open`            | `boolean`                                                    | — (controlled)   |
 | `defaultOpen`     | `boolean`                                                    | `false`          |
 | `showCloseButton` | `boolean`                                                    | `true`           |
 | `onOpenChange`    | `(open: boolean) => void`                                    | —                |
 | `popProps`        | `HTMLAttributes<HTMLDivElement>`                             | —                |
 
+The popover automatically flips between top/bottom and start/end when the preferred side would be clipped by the viewport.
+
 ---
 
 ### Progress
@@ -589,23 +629,39 @@ Toggle button and grouped toolbar segments.
 import { PushButton, PushButtonGroup } from "@dnotrever2/super-kit";
 
 // Standalone toggle
-<PushButton on={active} accent onClick={() => setActive(a => !a)} icon={<GridIcon />} />
+<PushButton on={active} onClick={() => setActive(a => !a)} icon={<GridIcon />} />
 
 // Grouped toolbar
-<PushButtonGroup>
+<PushButtonGroup gap="sm" padding="sm" width={320} background rounded>
   <PushButton on={view === "list"} onClick={() => setView("list")}>List</PushButton>
-  <PushButton on={view === "grid"} onClick={() => setView("grid")}>Grid</PushButton>
+  <PushButton
+    on={view === "grid"}
+    badge={<Badge variant="primary" pill>2</Badge>}
+    onClick={() => setView("grid")}
+  >
+    Grid
+  </PushButton>
 </PushButtonGroup>
 ```
 
+**PushButtonGroup props**
+
+| Prop  | Type                    | Default |
+| ----- | ----------------------- | ------- |
+| `gap` | `"sm" \| "md" \| "lg"` | `"sm"`  |
+| `padding` | `"sm" \| "md" \| "lg"` | `"sm"` |
+| `background` | `boolean`          | `true`  |
+| `rounded` | `boolean`          | `false` |
+| `width` | `CSSProperties["width"]` | — |
+
 **PushButton props**
 
 | Prop       | Type        | Default                                       |
 | ---------- | ----------- | --------------------------------------------- |
 | `on`       | `boolean`   | `false`                                       |
-| `accent`   | `boolean`   | `false` — accent color when active            |
-| `solo`     | `boolean`   | `false` — standalone (no group border fusion) |
 | `icon`     | `ReactNode` | —                                             |
+| `badge`    | `ReactNode` | —                                             |
+| `badgePosition` | `"left" \| "right"` | `"right"`                            |
 | `disabled` | `boolean`   | `false`                                       |
 
 ---
@@ -897,7 +953,7 @@ Notification toasts via context provider and `useToast` hook.
 // 1. Wrap your app
 import { ToastProvider } from "@dnotrever2/super-kit";
 
-<ToastProvider>
+<ToastProvider maxVisible={3} position="bottom-right" offset={24}>
   <App />
 </ToastProvider>
 
@@ -914,6 +970,12 @@ function DeployButton() {
   );
 }
 
+toast({
+  variant: "ok",
+  title: <>Deployed <Badge variant="success" pill>live</Badge></>,
+  message: <span style={{ color: "var(--fg-1)", fontSize: 13, fontWeight: 600 }}>v2.4.1 is live</span>
+});
+
 function LoadingDeployButton() {
   const { toast, dismiss } = useToast();
 
@@ -924,7 +986,8 @@ function LoadingDeployButton() {
           variant: "loading",
           title: "Deploying",
           message: "Please wait",
-          overlay: true
+          overlay: true,
+          shadow: true
         });
 
         deploy().finally(() => dismiss(id));
@@ -940,14 +1003,24 @@ function LoadingDeployButton() {
 
 | Field      | Type                                     | Default                     |
 | ---------- | ---------------------------------------- | --------------------------- |
-| `variant`  | `"ok" \| "error" \| "warning" \| "info" \| "loading"` | required |
-| `title`    | `string`                                 | required                    |
-| `message`  | `string`                                 | —                           |
+| `variant`  | `"ok" \| "error" \| "warning" \| "info" \| "loading" \| "neutral"` | required |
+| `title`    | `ReactNode`                              | required                    |
+| `message`  | `ReactNode`                              | —                           |
 | `duration` | `number` (ms)                            | `4000`; `loading` defaults to `0` |
 | `overlay`  | `boolean`                                | `false` — only applies to `loading` |
+| `shadow`   | `boolean`                                | `true`                      |
 
 `toast()` returns the toast `id`. Dismiss manually with `dismiss(id)`. Loading toasts show a spinner and do not render a close button.
 
+**ToastProvider props**
+
+| Prop         | Type        | Default      |
+| ------------ | ----------- | ------------ |
+| `maxVisible` | `number`    | `3`          |
+| `position`   | `"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"` | `"bottom-right"` |
+| `offset`     | `number`    | `24`         |
+| `children`   | `ReactNode` | required     |
+
 ---
 
 ### Tooltip
@@ -968,6 +1041,10 @@ import { Tooltip } from "@dnotrever2/super-kit";
 <Tooltip content="Fixed top" side="top" dynamic={false}>
   <Button variant="primary">Deploy</Button>
 </Tooltip>
+
+<Tooltip content="Cursor hint" cursor>
+  <Button variant="primary">Hover me</Button>
+</Tooltip>
 ```
 
 | Prop           | Type                              | Default  |
@@ -976,11 +1053,12 @@ import { Tooltip } from "@dnotrever2/super-kit";
 | `side`         | `"top" \| "bottom" \| "left" \| "right"` | `"top"`  |
 | `delay`        | `number` (ms)                     | `800`    |
 | `dynamic`      | `boolean`                         | `true`   |
+| `cursor`       | `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.
+By default, the tooltip flips to the opposite side when the requested side would be clipped by the viewport. When `cursor` is enabled, the tooltip appears near the cursor only after it stops moving for the configured `delay`.
 
 ---
 
@@ -993,7 +1071,9 @@ All tokens are CSS custom properties defined in `src/styles/index.css` and avail
 | Token    | Value                            |
 | -------- | -------------------------------- |
 | `--bg-0` | `#0a0b0e` — deepest background   |
-| `--bg-1` | `#15181f` — card / input surface |
+| `--bg-input` | `#101319` — input surface |
+| `--bg-1` | `#15181f` — card surface |
+| `--bg-disabled` | `#15181f` — disabled input surface |
 | `--bg-2` | `#1f242c` — hover state          |
 | `--bg-3` | `#2a2f38` — popover / selected   |
 

package/dist/Card/Card.d.ts

@@ -2,13 +2,12 @@ import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
 export type CardPadding = "none" | "sm" | "md" | "lg";
 export type CardProps = HTMLAttributes<HTMLDivElement> & {
     padding?: CardPadding;
-    bordered?: boolean;
     tilt?: boolean;
     onClose?: () => void;
     closeBtnProps?: ButtonHTMLAttributes<HTMLButtonElement>;
     children?: ReactNode;
 };
-export declare function Card({ padding, bordered, tilt, onClose, closeBtnProps, children, className, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
+export declare function Card({ padding, tilt, onClose, closeBtnProps, children, className, ...props }: CardProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Card {
     var displayName: string;
 }

package/dist/Markers/Markers.d.ts

@@ -4,18 +4,20 @@ export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" |
     checked?: boolean;
     defaultChecked?: boolean;
     indeterminate?: boolean;
+    isInvalid?: boolean;
     onChange?: (checked: boolean) => void;
 };
-export declare function Checkbox({ label, checked, defaultChecked, indeterminate, disabled, onChange, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
+export declare function Checkbox({ label, checked, defaultChecked, indeterminate, isInvalid, disabled, onChange, className, ...props }: CheckboxProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Checkbox {
     var displayName: string;
 }
 export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> & {
     label?: ReactNode;
     checked?: boolean;
+    isInvalid?: boolean;
     onChange?: (value: string) => void;
 };
-export declare function Radio({ label, checked, disabled, onChange, value, className, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
+export declare function Radio({ label, checked, isInvalid, disabled, onChange, value, className, ...props }: RadioProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Radio {
     var displayName: string;
 }
@@ -30,9 +32,11 @@ export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "
     label?: ReactNode;
     checked?: boolean;
     defaultChecked?: boolean;
+    thinTrack?: boolean;
+    isInvalid?: boolean;
     onChange?: (checked: boolean) => void;
 };
-export declare function Switch({ label, checked, defaultChecked, disabled, onChange, className, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export declare function Switch({ label, checked, defaultChecked, disabled, thinTrack, isInvalid, onChange, className, ...props }: SwitchProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Switch {
     var displayName: string;
 }

package/dist/Menu/Menu.d.ts

@@ -1,8 +1,12 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type MenuSubmenuMode = "external" | "internal";
+export type MenuSubmenuTrigger = "hover" | "click";
 export type MenuProps = HTMLAttributes<HTMLDivElement> & {
+    shadow?: boolean;
+    spacing?: "sm" | "md" | "lg";
     children?: ReactNode;
 };
-export declare function Menu({ children, className, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function Menu({ shadow, spacing, children, className, ...props }: MenuProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Menu {
     var displayName: string;
 }
@@ -11,13 +15,12 @@ export type MenuItemProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     kbd?: string;
     active?: boolean;
     danger?: boolean;
+    submenu?: ReactNode;
+    submenuMode?: MenuSubmenuMode;
+    submenuTrigger?: MenuSubmenuTrigger;
     children?: ReactNode;
 };
-export declare function MenuItem({ icon, kbd, active, danger, disabled, children, className, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuItem({ icon, kbd, active, danger, submenu, submenuMode, submenuTrigger, disabled, children, className, onClick, ...props }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace MenuItem {
     var displayName: string;
 }
-export declare function MenuSeparator({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare namespace MenuSeparator {
-    var displayName: string;
-}

package/dist/Modal/Modal.d.ts

@@ -1,10 +1,14 @@
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+export type ModalOverlay = "none" | "blur" | "dim";
 export type ModalProps = {
     open: boolean;
     title?: ReactNode;
     subtitle?: ReactNode;
     children?: ReactNode;
     footer?: ReactNode;
+    overlay?: ModalOverlay;
+    shadow?: boolean;
+    draggable?: boolean;
     closeOnBackdrop?: boolean;
     showCloseButton?: boolean;
     backdropProps?: HTMLAttributes<HTMLDivElement>;

package/dist/Popover/Popover.d.ts

@@ -7,11 +7,13 @@ export type PopoverProps = {
     children?: ReactNode;
     trigger?: ReactNode;
     side?: PopoverSide;
+    shadow?: boolean;
+    openOnHover?: boolean;
     showCloseButton?: boolean;
     onOpenChange?: (open: boolean) => void;
     popProps?: HTMLAttributes<HTMLDivElement>;
 };
-export declare function Popover({ open: openProp, defaultOpen, title, children, trigger, side, showCloseButton, onOpenChange, popProps }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function Popover({ open: openProp, defaultOpen, title, children, trigger, side, shadow, openOnHover, showCloseButton, onOpenChange, popProps }: PopoverProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Popover {
     var displayName: string;
 }

package/dist/PushButton/PushButton.d.ts

@@ -1,19 +1,24 @@
-import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
+import { ButtonHTMLAttributes, CSSProperties, HTMLAttributes, ReactNode } from 'react';
 export type PushButtonGroupProps = HTMLAttributes<HTMLDivElement> & {
+    gap?: "sm" | "md" | "lg";
+    padding?: "sm" | "md" | "lg";
+    background?: boolean;
+    rounded?: boolean;
+    width?: CSSProperties["width"];
     children?: ReactNode;
 };
-export declare function PushButtonGroup({ children, className, ...props }: PushButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare function PushButtonGroup({ gap, padding, background, rounded, width, children, className, ...props }: PushButtonGroupProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace PushButtonGroup {
     var displayName: string;
 }
 export type PushButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
     on?: boolean;
-    accent?: boolean;
-    solo?: boolean;
     icon?: ReactNode;
+    badge?: ReactNode;
+    badgePosition?: "left" | "right";
     children?: ReactNode;
 };
-export declare function PushButton({ on, accent, solo, icon, children, disabled, className, ...props }: PushButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function PushButton({ on, icon, badge, badgePosition, children, disabled, className, ...props }: PushButtonProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace PushButton {
     var displayName: string;
 }

package/dist/Toast/Toast.d.ts

@@ -1,21 +1,24 @@
 import { HTMLAttributes, ReactNode } from 'react';
-export type ToastVariant = "ok" | "error" | "warning" | "info" | "loading";
+export type ToastVariant = "ok" | "error" | "warning" | "info" | "loading" | "neutral";
+export type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
 export type ToastItem = {
     id: string;
     variant: ToastVariant;
-    title: string;
-    message?: string;
+    title: ReactNode;
+    message?: ReactNode;
     duration?: number;
     overlay?: boolean;
+    shadow?: boolean;
 };
-export type ToastProps = HTMLAttributes<HTMLDivElement> & {
+export type ToastProps = Omit<HTMLAttributes<HTMLDivElement>, "title"> & {
     variant?: ToastVariant;
-    title: string;
-    message?: string;
+    title: ReactNode;
+    message?: ReactNode;
     overlay?: boolean;
+    shadow?: boolean;
     onDismiss?: () => void;
 };
-export declare function Toast({ variant, title, message, overlay, onDismiss, className, ...props }: ToastProps): import("react/jsx-runtime").JSX.Element;
+export declare function Toast({ variant, title, message, overlay, shadow, onDismiss, className, ...props }: ToastProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Toast {
     var displayName: string;
 }
@@ -23,8 +26,12 @@ type ToastContextValue = {
     toast: (options: Omit<ToastItem, "id">) => string;
     dismiss: (id: string) => void;
 };
-export declare function ToastProvider({ children }: {
+export type ToastProviderProps = {
+    maxVisible?: number;
+    position?: ToastPosition;
+    offset?: number;
     children: ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+};
+export declare function ToastProvider({ maxVisible, position, offset, children }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useToast(): ToastContextValue;
 export {};

package/dist/Tooltip/Tooltip.d.ts

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