atlas-react-kit 0.13.0 → 1.0.0

package/dist/tabs.d.ts

@@ -2,15 +2,18 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
 import { tabsListVariants, tabsTriggerVariants } from "./internal/tabs-styles.js";
+/** Props `TabsList` and `TabsNav` share for the scroller around their row. */
+type TabsScrollerClassNameProps = {
+    /** Classes for the scroller around the tab row (`h-13` with `p-1` by default). */
+    scrollerClassName?: string;
+};
 declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
 /**
  * The tab row inside its scroller. `className` styles the list (its `h-11`
  * height, fill, gap); `scrollerClassName` styles the scroller around it
  * (`h-13` with `p-1` for the active border and focus ring).
  */
-declare function TabsList({ className, scrollerClassName, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & Omit<VariantProps<typeof tabsListVariants>, "orientation"> & {
-    scrollerClassName?: string;
-}): React.JSX.Element;
+declare function TabsList({ className, scrollerClassName, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & Omit<VariantProps<typeof tabsListVariants>, "orientation"> & TabsScrollerClassNameProps): React.JSX.Element;
 declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
 declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
 /**
@@ -28,9 +31,10 @@ declare function TabsContent({ className, ...props }: React.ComponentProps<typeo
  * `overflow-x-auto`. `scrollerClassName` styles that scroller and
  * `listClassName` the row of links inside it.
  */
-declare function TabsNav({ className, scrollerClassName, listClassName, children, ...props }: React.ComponentProps<"nav"> & {
+declare function TabsNav({ className, scrollerClassName, listClassName, children, ...props }: React.ComponentProps<"nav"> & TabsScrollerClassNameProps & {
+    /** Required accessible name for the nav landmark. */
     "aria-label": string;
-    scrollerClassName?: string;
+    /** Classes for the row of links inside the scroller. */
     listClassName?: string;
 }): React.JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, tabsListVariants, tabsTriggerVariants, };

package/dist/tabs.js

@@ -61,7 +61,7 @@ function TabsTrigger({ className, ...props }) {
     return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn(tabsTriggerVariants(), className), ...props }));
 }
 function TabsContent({ className, ...props }) {
-    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 text-sm outline-none", className), ...props }));
+    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 text-sm", focusRing, className), ...props }));
 }
 /**
  * Tab-styled links for a view switcher that changes the URL. Use this, not

package/dist/toast.d.ts

@@ -3,7 +3,9 @@ import { type ReactNode } from "react";
 type ToastId = string | number;
 /** A button in a toast. Clicking it runs `onClick`, then closes the toast. */
 interface ToastAction {
+    /** The button's text. */
     label: string;
+    /** Runs when the button is clicked, before the toast closes. */
     onClick: () => void;
 }
 interface ToastOptions {
@@ -21,9 +23,13 @@ interface ToastOptions {
 /** Shows a toast and returns its id. */
 type ShowToast = (message: ReactNode, options?: ToastOptions) => ToastId;
 type Toast = ShowToast & {
+    /** A toast with a check icon and a success-toned title and border. */
     success: ShowToast;
+    /** A toast with an info icon. */
     info: ShowToast;
+    /** A toast with an alert icon and a warning-toned title and border. */
     warning: ShowToast;
+    /** A toast with an alert icon and a destructive-toned title and border. */
     error: ShowToast;
     /** A spinner toast that stays until it is replaced (same `id`) or dismissed. */
     loading: ShowToast;
@@ -36,7 +42,7 @@ interface ToasterProps {
     position?: ToastPosition;
     /** A labelled close button on every toast. Default `true`. */
     closeButton?: boolean;
-    /** Keep the stack expanded instead of collapsed behind the newest toast. */
+    /** Keep the stack expanded instead of collapsed behind the newest toast. Default `false`. */
     expand?: boolean;
     /** How many toasts show at once. Default 3. */
     visibleToasts?: number;

package/dist/toggle-group.d.ts

@@ -2,9 +2,16 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
 import { toggleVariants } from "./toggle.js";
-declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {
+/** Layout props a `ToggleGroup` shares with its items. */
+type ToggleGroupLayoutProps = {
+    /**
+     * Gap between items, in spacing units. `0` joins them into one segmented
+     * control. Default `2`.
+     */
     spacing?: number;
+    /** Lay items out in a row or a column. Default `horizontal`. */
     orientation?: "horizontal" | "vertical";
-}): React.JSX.Element;
+};
+declare function ToggleGroup({ className, variant, size, spacing, orientation, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & ToggleGroupLayoutProps): React.JSX.Element;
 declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): React.JSX.Element;
 export { ToggleGroup, ToggleGroupItem };

package/dist/toggle-group.js

@@ -12,7 +12,8 @@ const ToggleGroupContext = React.createContext({
     orientation: "horizontal",
 });
 function ToggleGroup({ className, variant, size, spacing = 2, orientation = "horizontal", children, ...props }) {
-    return (_jsx(ToggleGroupPrimitive.Root, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, style: { "--gap": spacing }, className: cn("group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-none data-vertical:flex-col data-vertical:items-stretch", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: { variant, size, spacing, orientation }, children: children }) }));
+    const context = React.useMemo(() => ({ variant, size, spacing, orientation }), [variant, size, spacing, orientation]);
+    return (_jsx(ToggleGroupPrimitive.Root, { "data-slot": "toggle-group", "data-variant": variant, "data-size": size, "data-spacing": spacing, "data-orientation": orientation, style: { "--gap": spacing }, className: cn("group/toggle-group flex w-fit max-w-full flex-row flex-wrap items-center gap-[--spacing(var(--gap))] data-[spacing=0]:data-[variant=outline]:rounded-none data-vertical:flex-col data-vertical:flex-nowrap data-vertical:items-stretch", className), ...props, children: _jsx(ToggleGroupContext.Provider, { value: context, children: children }) }));
 }
 function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
     const context = React.useContext(ToggleGroupContext);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas-react-kit",
-  "version": "0.13.0",
+  "version": "1.0.0",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",
@@ -52,6 +52,10 @@
       "types": "./dist/card.d.ts",
       "default": "./dist/card.js"
     },
+    "./chart": {
+      "types": "./dist/chart.d.ts",
+      "default": "./dist/chart.js"
+    },
     "./checkbox": {
       "types": "./dist/checkbox.d.ts",
       "default": "./dist/checkbox.js"
@@ -100,6 +104,10 @@
       "types": "./dist/input.d.ts",
       "default": "./dist/input.js"
     },
+    "./kanban": {
+      "types": "./dist/kanban.d.ts",
+      "default": "./dist/kanban.js"
+    },
     "./label": {
       "types": "./dist/label.d.ts",
       "default": "./dist/label.js"
@@ -116,10 +124,18 @@
       "types": "./dist/nav-link.d.ts",
       "default": "./dist/nav-link.js"
     },
+    "./page-header": {
+      "types": "./dist/page-header.d.ts",
+      "default": "./dist/page-header.js"
+    },
     "./pagination": {
       "types": "./dist/pagination.d.ts",
       "default": "./dist/pagination.js"
     },
+    "./period-stepper": {
+      "types": "./dist/period-stepper.d.ts",
+      "default": "./dist/period-stepper.js"
+    },
     "./popover": {
       "types": "./dist/popover.d.ts",
       "default": "./dist/popover.js"
@@ -148,6 +164,10 @@
       "types": "./dist/skeleton.d.ts",
       "default": "./dist/skeleton.js"
     },
+    "./skip-link": {
+      "types": "./dist/skip-link.d.ts",
+      "default": "./dist/skip-link.js"
+    },
     "./slider": {
       "types": "./dist/slider.d.ts",
       "default": "./dist/slider.js"
@@ -204,6 +224,14 @@
       "types": "./dist/tooltip.d.ts",
       "default": "./dist/tooltip.js"
     },
+    "./form/checkbox-field": {
+      "types": "./dist/form/checkbox-field.d.ts",
+      "default": "./dist/form/checkbox-field.js"
+    },
+    "./form/combobox-field": {
+      "types": "./dist/form/combobox-field.d.ts",
+      "default": "./dist/form/combobox-field.js"
+    },
     "./form/control-field": {
       "types": "./dist/form/control-field.d.ts",
       "default": "./dist/form/control-field.js"
@@ -216,14 +244,14 @@
       "types": "./dist/form/date-time-picker-field.d.ts",
       "default": "./dist/form/date-time-picker-field.js"
     },
-    "./form/field-error": {
-      "types": "./dist/form/field-error.d.ts",
-      "default": "./dist/form/field-error.js"
-    },
     "./form/feedback-field": {
       "types": "./dist/form/feedback-field.d.ts",
       "default": "./dist/form/feedback-field.js"
     },
+    "./form/field-error": {
+      "types": "./dist/form/field-error.d.ts",
+      "default": "./dist/form/field-error.js"
+    },
     "./form/markdown-field": {
       "types": "./dist/form/markdown-field.d.ts",
       "default": "./dist/form/markdown-field.js"
@@ -236,10 +264,18 @@
       "types": "./dist/form/text-field.d.ts",
       "default": "./dist/form/text-field.js"
     },
+    "./form/toggle-group-field": {
+      "types": "./dist/form/toggle-group-field.d.ts",
+      "default": "./dist/form/toggle-group-field.js"
+    },
     "./next/nav-link": {
       "types": "./dist/next/nav-link.d.ts",
       "default": "./dist/next/nav-link.js"
     },
+    "./next/period-stepper": {
+      "types": "./dist/next/period-stepper.d.ts",
+      "default": "./dist/next/period-stepper.js"
+    },
     "./next/tabs-nav-link": {
       "types": "./dist/next/tabs-nav-link.d.ts",
       "default": "./dist/next/tabs-nav-link.js"
@@ -257,9 +293,17 @@
     "build": "tsc",
     "check": "npm run build && npm run docs:check && prettier --check .",
     "docs:check": "node scripts/check-doc-links.mjs",
+    "lint": "oxlint --type-aware --deny-warnings",
+    "knip": "knip",
+    "sast": "node scripts/sast.mjs",
+    "secrets": "secretlint \"**/*\"",
+    "size": "size-limit",
+    "gate:static": "npm run lint && npm run knip && npm run sast && npm run secrets",
+    "gate": "npm run check && npm run gate:static && npm run size && vitest run",
     "test": "npm run build && vitest run",
     "test:coverage": "npm run build && vitest run --coverage",
-    "prepack": "npm run build"
+    "prepack": "npm run build",
+    "prepare": "lefthook install"
   },
   "engines": {
     "node": ">=20.19.0"
@@ -268,6 +312,8 @@
     "access": "public"
   },
   "peerDependencies": {
+    "@dnd-kit/dom": "^0.4.0",
+    "@dnd-kit/react": "^0.4.0",
     "date-fns": "^4.4.0",
     "next": "^16.0.0",
     "next-themes": "^0.4.6",
@@ -276,11 +322,16 @@
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "remark-parse": "^11.0.0",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.0.0"
   },
   "peerDependenciesMeta": {
+    "@dnd-kit/dom": {
+      "optional": true
+    },
+    "@dnd-kit/react": {
+      "optional": true
+    },
     "date-fns": {
       "optional": true
     },
@@ -312,6 +363,10 @@
     "tw-animate-css": "^1.4.0"
   },
   "devDependencies": {
+    "@dnd-kit/dom": "^0.4.0",
+    "@dnd-kit/react": "^0.4.0",
+    "@secretlint/secretlint-rule-preset-recommend": "^13.0.7",
+    "@size-limit/file": "^14.2.0",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "^16.3.3",
@@ -322,14 +377,21 @@
     "@vitest/coverage-v8": "5.0.5",
     "date-fns": "^4.4.0",
     "jsdom": "^29.1.1",
+    "knip": "^6.41.0",
+    "lefthook": "^2.2.2",
     "next": "16.4.2",
     "next-themes": "^0.4.6",
+    "oxlint": "^1.88.0",
+    "oxlint-tsgolint": "^7.0.2004",
     "prettier": "^3.8.1",
     "react": "^19.2.4",
     "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.4",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "secretlint": "^13.0.7",
+    "size-limit": "^14.2.0",
     "sonner": "^2.0.7",
     "tailwindcss": "^4.2.1",
     "typescript": "^7.0.2",

package/theme.css

@@ -197,6 +197,17 @@
    * Radix can unmount closing overlays. `!important` in this early layer
    * beats the utility classes that set the animations.
    */
+  /*
+   * Forced colors (Windows High Contrast) drop box-shadow, which is how the
+   * kit draws its focus ring, so keyboard focus would vanish. Draw it as a
+   * system-colored outline there instead (WCAG 2.4.7).
+   */
+  @media (forced-colors: active) {
+    :focus-visible {
+      outline: 2px solid Highlight !important;
+      outline-offset: 2px !important;
+    }
+  }
   @media (prefers-reduced-motion: reduce) {
     *,
     ::before,