neatkit 0.2.0 → 0.3.1

package/README.md

@@ -2,8 +2,9 @@
   <!-- The media queries determine the image based on website theme -->
   <source media="(prefers-color-scheme: dark)" srcset=".assets/banner/dark-mode.png">
   <source media="(prefers-color-scheme: light)" srcset=".assets/banner/light-mode.png">
-  <!-- Fallback to light mode variant if no match -->
-  <img src=".assets/banner/light-mode.png">
+  <!-- Fallback to light mode variant if no match. The `alt` attribute is
+  intentionally set to a space to prevent rendering if the image is missing -->
+  <img alt=" " src=".assets/banner/light-mode.png">
 </picture>
 
 ######
@@ -11,34 +12,8 @@
 An opinionated React UI library for modern web applications, combining 
 accessible components, a cohesive design system, light and dark themes, accent 
 customization, design tokens, SSR support, strong TypeScript support, and 
-comprehensive documentation. To browse the component library, click 
-[here](https://neatkit.org).
-
-### Getting Started
-
-Install Neatkit with your package manager:
-
-```sh
-npm install neatkit
-```
-
-Import the stylesheet once in your app, then use components wherever you need
-them:
-
-```tsx
-import "neatkit/style.css";
-import { Button, Content } from "neatkit";
-
-export function App() {
-  return (
-    <Content as="main" fill="viewport">
-      <Button shape="rectangle" variant="primary">
-        Get started
-      </Button>
-    </Content>
-  );
-}
-```
+comprehensive documentation. To browse the component library and its 
+documentation, click [here](https://neatkit.org).
 
 ### Contributing
 
@@ -51,9 +26,9 @@ To get started, see `CONTRIBUTING.md`.
 
 ### License
 
-This project is licensed under the GPL-3.0 License, reflecting a commitment to
-keeping this software free and open-source. The GPL-3.0 promotes freedom,
-transparency, and collaboration, allowing users to freely use, modify, and
-distribute the software while ensuring it remains community-driven.
+This project is licensed under the Mozilla Public License 2.0 (MPL-2.0), 
+supporting open-source collaboration while allowing use in both open-source 
+and proprietary projects. Modifications to MPL-covered files must remain 
+available under the same license when distributed.
 
 For more details, see `LICENSE.md`.

package/dist/components/Alert/Alert.d.ts

@@ -1,7 +1,7 @@
-import type { HTMLAttributes, ReactNode } from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
 import "./styles/alert.css";
 /** A type representing the semantic color treatment applied to an Alert. */
-export type AlertTone = "danger" | "info" | "success" | "warning";
+export type AlertTone = "info" | "success" | "warning" | "danger";
 /** A type representing properties for the Alert component. */
 export type AlertProps = HTMLAttributes<HTMLDivElement> & {
     /** The contextual feedback displayed inside the Alert. */

package/dist/components/Avatar/Avatar.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from "react";
+import { type HTMLAttributes } from "react";
 import "./styles/avatar.css";
 /** A type representing properties for the Avatar component. */
 export type AvatarProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {

package/dist/components/Badge/Badge.d.ts

@@ -1,9 +1,9 @@
-import type { HTMLAttributes, ReactNode } from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
 import "./styles/badge.css";
 /** A type representing the visual emphasis applied to a Badge. */
 export type BadgeVariant = "outline" | "soft" | "solid";
 /** A type representing the semantic color treatment applied to a Badge. */
-export type BadgeTone = "neutral" | "success" | "warning" | "danger";
+export type BadgeTone = "neutral" | "info" | "success" | "warning" | "danger";
 /** A type representing properties for the Badge component. */
 export type BadgeProps = HTMLAttributes<HTMLSpanElement> & {
     /** The label content displayed within the Badge. */

package/dist/components/Button/Button.d.ts

@@ -1,10 +1,10 @@
-import type { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType, ReactElement, ReactNode } from "react";
-import type { IconType } from "../Icon";
+import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ElementType, type ReactElement, type ReactNode } from "react";
+import { type IconType } from "../Icon";
 import "./styles/button.css";
 /** A type representing the visual treatment of a Button. */
 export type ButtonVariant = "primary" | "secondary" | "ghost";
 /** A type representing the semantic intent applied to a Button. */
-export type ButtonTone = "danger" | "success" | "warning";
+export type ButtonTone = "info" | "success" | "warning" | "danger";
 /** A type representing the outline shape of a Button. */
 export type ButtonShape = "rectangle" | "capsule";
 /** A type representing the placement of a Button icon. */

package/dist/components/Card/Card.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
 import "./styles/card.css";
 /** A type representing the optional labels displayed in a Card header. */
 export type CardHeader = {

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, InputHTMLAttributes, ReactNode } from "react";
+import { type CSSProperties, type InputHTMLAttributes, type ReactNode } from "react";
 import "./styles/checkbox.css";
 /** A type representing properties for the Checkbox component. */
 export type CheckboxProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "className" | "style" | "type"> & {

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEventHandler, HTMLAttributes, ReactNode } from "react";
+import { type ChangeEventHandler, type HTMLAttributes, type ReactNode } from "react";
 import "./styles/checkbox-group.css";
 /** A type representing the visual direction of Checkbox options. */
 export type CheckboxGroupOrientation = "horizontal" | "vertical";

package/dist/components/CheckboxGroup/contexts/CheckboxGroupContext.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEvent } from "react";
+import { type ChangeEvent } from "react";
 /** A type representing state shared by CheckboxGroup with each Checkbox. */
 export type CheckboxGroupContextValue = {
     /** The initial selected values for an uncontrolled group. */

package/dist/components/CheckboxGroup/hooks/useCheckboxGroup.d.ts

@@ -1,4 +1,4 @@
-import type { CheckboxGroupContextValue } from "../contexts/CheckboxGroupContext";
+import { type CheckboxGroupContextValue } from "../contexts/CheckboxGroupContext";
 /**
  * Returns the optional CheckboxGroup state surrounding a Checkbox.
  *

package/dist/components/Content/Content.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithRef, ComponentPropsWithoutRef, CSSProperties, ElementType, ReactElement } from "react";
+import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type CSSProperties, type ElementType, type ReactElement } from "react";
 import "./styles/content.css";
 /** A type representing the explicit themes supported by Content. */
 export type ContentTheme = "light" | "dark";
@@ -47,7 +47,7 @@ type ContentComponent = <Component extends ElementType = "div">(props: ContentPr
     ref?: ContentReference<Component>;
 }) => ReactElement | null;
 /**
- * Renders a scoped NeatKit design-system boundary.
+ * Renders a scoped Neatkit design-system boundary.
  *
  * @param props - The properties that configure Content and its root element.
  * @param forwardedReference - The reference assigned to the root element.

package/dist/components/Content/hooks/useContentLayout.d.ts

@@ -1,4 +1,4 @@
-import type { ForwardedRef, RefCallback } from "react";
+import { type ForwardedRef, type RefCallback } from "react";
 /** A type representing Content's measured layout state. */
 type ContentLayout = {
     /** The callback ref assigned to the Content root. */

package/dist/components/Divider/Divider.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from "react";
+import { type HTMLAttributes } from "react";
 import "./styles/divider.css";
 /** A type representing the direction of a Divider. */
 export type DividerOrientation = "horizontal" | "vertical";

package/dist/components/Field/Field.d.ts

@@ -1,4 +1,4 @@
-import type { AriaAttributes, HTMLAttributes, ReactElement, ReactNode } from "react";
+import { type AriaAttributes, type HTMLAttributes, type ReactElement, type ReactNode } from "react";
 import "./styles/field.css";
 /** A type representing the label placement used by a Field. */
 export type FieldOrientation = "horizontal" | "vertical";

package/dist/components/Icon/Icon.d.ts

@@ -1,5 +1,5 @@
-import type { SVGProps } from "react";
-import type { IconType } from "./utils/registry";
+import { type SVGProps } from "react";
+import { type IconType } from "./utils/registry";
 /** A type representing properties for the Icon component. */
 export type IconProps = Omit<SVGProps<SVGSVGElement>, "children" | "color" | "height" | "width"> & {
     /** The icon graphic rendered by the component. */

package/dist/components/Input/Input.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, InputHTMLAttributes, ReactNode } from "react";
+import { type CSSProperties, type InputHTMLAttributes, type ReactNode } from "react";
 import "./styles/input.css";
 /** A type representing the supported native single-line input types. */
 export type InputType = "email" | "number" | "password" | "search" | "tel" | "text" | "url";

package/dist/components/Modal/Modal.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode, RefObject } from "react";
+import { type HTMLAttributes, type ReactNode, type RefObject } from "react";
 import "./styles/modal.css";
 /** A type representing an interaction that requests Modal closure. */
 export type ModalCloseReason = "close-button" | "escape" | "outside";

package/dist/components/PinInput/PinInput.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, InputHTMLAttributes } from "react";
+import { type CSSProperties, type InputHTMLAttributes } from "react";
 import "./styles/pin-input.css";
 /** A type representing the characters accepted by PinInput. */
 export type PinInputMode = "alphanumeric" | "numeric";

package/dist/components/PinInput/hooks/usePinInput.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEvent, ClipboardEvent, FocusEvent, ForwardedRef, KeyboardEvent, PointerEvent, SyntheticEvent } from "react";
+import { type ChangeEvent, type ClipboardEvent, type FocusEvent, type ForwardedRef, type KeyboardEvent, type PointerEvent, type SyntheticEvent } from "react";
 import type { PinInputMode } from "../PinInput";
 /** A type representing the options used by PinInput behavior. */
 type UsePinInputOptions = {

package/dist/components/Popover/Popover.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactElement, ReactNode, RefObject } from "react";
+import { type HTMLAttributes, type ReactElement, type ReactNode, type RefObject } from "react";
 import type { FloatingPlacement } from "../Portal/utils/floating-position";
 import "./styles/popover.css";
 /** A type representing the preferred placement of a Popover. */

package/dist/components/Portal/Portal.d.ts

@@ -1,11 +1,11 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 /** A type representing properties accepted by an internal Portal. */
 type PortalProps = {
     /** The content rendered outside its React layout parent. */
     children: ReactNode;
     /** The optional element receiving the portal content. */
     container?: Element | null;
-    /** The optional element whose inherited NeatKit variables are preserved. */
+    /** The optional element whose inherited Neatkit variables are preserved. */
     inheritFrom?: HTMLElement | null;
 };
 /**

package/dist/components/Portal/hooks/useDismissableLayer.d.ts

@@ -1,4 +1,4 @@
-import type { RefObject } from "react";
+import { type RefObject } from "react";
 /** A type representing options accepted by a dismissable overlay layer. */
 type DismissableLayerOptions = {
     /** Whether the layer currently receives dismissal interactions. */

package/dist/components/Portal/hooks/useFloatingPosition.d.ts

@@ -1,4 +1,4 @@
-import type { FloatingPlacement, FloatingPosition } from "../utils/floating-position";
+import { type FloatingPlacement, type FloatingPosition } from "../utils/floating-position";
 /**
  * Keeps anchored floating content aligned and inside its viewport.
  *

package/dist/components/Portal/hooks/useFocusTrap.d.ts

@@ -1,4 +1,4 @@
-import type { RefObject } from "react";
+import { type RefObject } from "react";
 import type { FocusScopeContextValue } from "../contexts/FocusScopeContext";
 /** A type representing options accepted by the focus trap hook. */
 type FocusTrapOptions = {

package/dist/components/Radio/Radio.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, InputHTMLAttributes, ReactNode } from "react";
+import { type CSSProperties, type InputHTMLAttributes, type ReactNode } from "react";
 import "./styles/radio.css";
 /** A type representing properties for the Radio component. */
 export type RadioProps = Omit<InputHTMLAttributes<HTMLInputElement>, "checked" | "children" | "className" | "defaultChecked" | "name" | "onChange" | "required" | "style" | "type" | "value"> & {

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEventHandler, HTMLAttributes, ReactNode } from "react";
+import { type ChangeEventHandler, type HTMLAttributes, type ReactNode } from "react";
 import "./styles/radio-group.css";
 /** A type representing the visual direction of Radio options. */
 export type RadioGroupOrientation = "horizontal" | "vertical";

package/dist/components/RadioGroup/contexts/RadioGroupContext.d.ts

@@ -1,4 +1,4 @@
-import type { ChangeEventHandler } from "react";
+import { type ChangeEventHandler } from "react";
 /** A type representing state shared by RadioGroup with each Radio. */
 export type RadioGroupContextValue = {
     /** The initial selected value for an uncontrolled group. */

package/dist/components/RadioGroup/hooks/useRadioGroup.d.ts

@@ -1,4 +1,4 @@
-import type { RadioGroupContextValue } from "../contexts/RadioGroupContext";
+import { type RadioGroupContextValue } from "../contexts/RadioGroupContext";
 /**
  * Returns the RadioGroup state required by a Radio.
  *

package/dist/components/Select/Select.d.ts

@@ -1,5 +1,5 @@
-import type { ButtonHTMLAttributes, CSSProperties, ReactElement, ReactNode, RefAttributes, SelectHTMLAttributes } from "react";
-import type { IconType } from "../Icon";
+import { type ButtonHTMLAttributes, type CSSProperties, type ReactElement, type ReactNode, type RefAttributes, type SelectHTMLAttributes } from "react";
+import { type IconType } from "../Icon";
 import "./styles/select.css";
 /** A type representing one option in a custom Select. */
 export type SelectOption = {

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes } from "react";
+import { type HTMLAttributes } from "react";
 import "./styles/skeleton.css";
 /** A type representing the silhouette drawn by Skeleton. */
 export type SkeletonShape = "rectangle" | "circle";

package/dist/components/Spinner/Spinner.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, HTMLAttributes } from "react";
+import { type CSSProperties, type HTMLAttributes } from "react";
 import "./styles/spinner.css";
 /** A type representing properties for the Spinner component. */
 export type SpinnerProps = Omit<HTMLAttributes<HTMLDivElement>, "children"> & {

package/dist/components/Surface/Surface.d.ts

@@ -1,4 +1,4 @@
-import type { HTMLAttributes, ReactNode } from "react";
+import { type HTMLAttributes, type ReactNode } from "react";
 import "./styles/surface.css";
 /**
  * Renders the shared visual foundation for bordered component surfaces.

package/dist/components/Switch/Switch.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, InputHTMLAttributes } from "react";
+import { type CSSProperties, type InputHTMLAttributes } from "react";
 import "./styles/switch.css";
 /** A type representing properties for the Switch component. */
 export type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, "children" | "className" | "role" | "style" | "type"> & {

package/dist/components/Text/Text.d.ts

@@ -1,11 +1,11 @@
-import type { ComponentPropsWithRef, ComponentPropsWithoutRef, ElementType, ReactElement } from "react";
+import { type ComponentPropsWithRef, type ComponentPropsWithoutRef, type ElementType, type ReactElement } from "react";
 import "./styles/text.css";
 /** A type representing the visual size applied to Text. */
 export type TextSize = "caption" | "body" | "subtitle" | "title" | "heading";
 /** A type representing the visual weight applied to Text. */
 export type TextWeight = "regular" | "medium" | "semibold";
 /** A type representing the semantic color treatment applied to Text. */
-export type TextTone = "default" | "muted" | "accent" | "success" | "warning" | "danger";
+export type TextTone = "default" | "muted" | "accent" | "info" | "success" | "warning" | "danger";
 /** A type representing the horizontal alignment applied to Text. */
 export type TextAlignment = "left" | "center" | "right";
 /** A type representing the reference accepted by a polymorphic element. */

package/dist/components/TextArea/TextArea.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, TextareaHTMLAttributes } from "react";
+import { type CSSProperties, type TextareaHTMLAttributes } from "react";
 import "./styles/text-area.css";
 /** A type representing the resize behavior applied to TextArea. */
 export type TextAreaResize = "both" | "horizontal" | "none" | "vertical";

package/dist/components/Tooltip/Tooltip.d.ts

@@ -1,4 +1,4 @@
-import type { CSSProperties, ReactElement, ReactNode } from "react";
+import { type CSSProperties, type ReactElement, type ReactNode } from "react";
 import type { FloatingPlacement } from "../Portal/utils/floating-position";
 import "./styles/tooltip.css";
 /** A type representing the preferred placement of a Tooltip. */

package/dist/components/Tooltip/TooltipProvider.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import { type ReactNode } from "react";
 /** A type representing the shared behavior available to descendant Tooltips. */
 type TooltipContextValue = {
     /** The inherited pointer-hover delay in milliseconds. */