@dirstack/ui 1.2.0 → 1.3.0

package/README.md

@@ -32,7 +32,7 @@ Every file in `src/components` is its own subpath (`@dirstack/ui/<name>`):
 - **Layout**: `page`, `stack`, `heading`, `section-header`, `card`, `detail-row`, `steps`, `nav`, `nav-button`
 - **Forms**: `form`, `form-section`, `form-row`, `label`, `input`, `number-input`, `search-input`, `textarea`, `select`, `switch`, `copy-input`
 - **Actions & overlays**: `button`, `copy-button`, `menu`, `popover`, `dialog`, `tooltip`, `tabs`, `toaster`, `kbd`
-- **Display & feedback**: `badge`, `callout`, `empty-state`, `skeleton`, `avatar`, `entity-avatar`, `pagination`
+- **Display & feedback**: `badge`, `callout`, `empty-state`, `skeleton`, `ping` (status dot with optional pulse), `avatar`, `entity-avatar`, `pagination`
 - **Dashboard**: `animated-number`, `chart`, `stat-strip`, `bar-list` (ranked share bars, `BarList.Row` / `BarList.Skeleton`), `breakdown-card` (titled panel with optional tabs and footer), `view-tabs` (tab switcher bound to a `?view=` param), `theme` (`useTheme` + `ThemeSelect`)
 
 ## Styles

package/dist/components/animated-number.d.ts

@@ -1,5 +1,5 @@
-import NumberFlow from "@number-flow/react";
 import { ComponentProps } from "react";
+import NumberFlow from "@number-flow/react";
 //#region src/components/animated-number.d.ts
 type AnimatedNumberProps = Omit<ComponentProps<typeof NumberFlow>, "value"> & {
   /**

package/dist/components/animated-number.js

@@ -1,7 +1,7 @@
 "use client";
 import { ANIMATION_EASING } from "../lib/animation.js";
-import NumberFlow, { continuous } from "@number-flow/react";
 import { jsx } from "react/jsx-runtime";
+import NumberFlow, { continuous } from "@number-flow/react";
 //#region src/components/animated-number.tsx
 const timing = {
 	duration: 500,

package/dist/components/badge.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from "../lib/variants.js";
-import { useRender } from "@base-ui/react/use-render";
 import { ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/badge.d.ts
 declare const badgeVariants: import("tailwind-variants").TVReturnType<{
   variant: {

package/dist/components/bar-list.d.ts

@@ -1,6 +1,6 @@
+import { ComponentProps, ReactNode } from "react";
 import { Format } from "@number-flow/react";
 import { useRender } from "@base-ui/react/use-render";
-import { ComponentProps, ReactNode } from "react";
 //#region src/components/bar-list.d.ts
 /**
  * Ranked breakdown list: each row is a label sitting on a soft bar whose width is the row's

package/dist/components/bar-list.js

@@ -1,7 +1,7 @@
-import { AnimatedNumber } from "./animated-number.js";
+import { ArrowUpRightIcon } from "../lib/icons.js";
 import { cn } from "../lib/variants.js";
+import { AnimatedNumber } from "./animated-number.js";
 import { Skeleton } from "./skeleton.js";
-import { ArrowUpRightIcon } from "../lib/icons.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useRender } from "@base-ui/react/use-render";
 //#region src/components/bar-list.tsx

package/dist/components/button.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from "../lib/variants.js";
 import { interactiveVariants } from "../lib/interactive.js";
-import { useRender } from "@base-ui/react/use-render";
 import { ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/button.d.ts
 declare const buttonVariants: import("tailwind-variants").TVReturnType<{
   variant: {

package/dist/components/button.js

@@ -1,12 +1,12 @@
-import { cn, variants } from "../lib/variants.js";
-import { slot } from "../lib/slot.js";
-import { LoaderIcon } from "../lib/icons.js";
 import { controlTextClasses } from "../lib/classes.js";
+import { LoaderIcon } from "../lib/icons.js";
+import { cn, variants } from "../lib/variants.js";
 import { interactiveVariants } from "../lib/interactive.js";
+import { slot } from "../lib/slot.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react";
-import { useRender } from "@base-ui/react/use-render";
 import { Children, isValidElement } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/button.tsx
 const buttonVariants = variants({
 	base: [`group/button inline-flex items-center justify-center font-medium ${controlTextClasses} text-start rounded-md overflow-clip select-none hover:z-10`, "disabled:opacity-60 disabled:pointer-events-none aria-disabled:opacity-60 aria-disabled:pointer-events-none"],

package/dist/components/card.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from "../lib/variants.js";
 import { SectionHeader } from "./section-header.js";
-import { useRender } from "@base-ui/react/use-render";
 import { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/card.d.ts
 /**
  * The one raised surface in the app: a white panel on the canvas, hairline border, 12px radius

package/dist/components/detail-row.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from "../lib/variants.js";
-import { useRender } from "@base-ui/react/use-render";
 import { ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/detail-row.d.ts
 declare const detailRowVariants: import("tailwind-variants").TVReturnType<{
   density: {

package/dist/components/detail-row.js

@@ -1,9 +1,9 @@
+import "../lib/classes.js";
 import { variants } from "../lib/variants.js";
 import { slot } from "../lib/slot.js";
-import "../lib/classes.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useRender } from "@base-ui/react/use-render";
 import { isValidElement } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/detail-row.tsx
 const detailRowVariants = variants({
 	slots: {

package/dist/components/dialog.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn, variants } from "../lib/variants.js";
 import { XIcon } from "../lib/icons.js";
+import { cn, variants } from "../lib/variants.js";
 import { SectionHeader, SectionHeaderBody, SectionHeaderDescription, SectionHeaderTitle } from "./section-header.js";
 import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/empty-state.js

@@ -1,5 +1,5 @@
-import { cn, variants } from "../lib/variants.js";
 import { descriptionClasses } from "../lib/classes.js";
+import { cn, variants } from "../lib/variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/empty-state.tsx
 const emptyStateVariants = variants({

package/dist/components/form-section.d.ts

@@ -1,5 +1,5 @@
-import { useRender } from "@base-ui/react/use-render";
 import { ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/form-section.d.ts
 type FormSectionProps = Omit<useRender.ComponentProps<"section">, "title"> & {
   id?: string;

package/dist/components/form.d.ts

@@ -1,7 +1,7 @@
 import { Stack } from "./stack.js";
 import { Label } from "./label.js";
-import { useRender } from "@base-ui/react/use-render";
 import { ComponentProps } from "react";
+import { useRender } from "@base-ui/react/use-render";
 import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
 //#region src/components/form.d.ts
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;

package/dist/components/form.js

@@ -1,11 +1,11 @@
 "use client";
+import { controlTextClasses, descriptionClasses } from "../lib/classes.js";
 import { cn } from "../lib/variants.js";
 import { Stack } from "./stack.js";
-import { controlTextClasses, descriptionClasses } from "../lib/classes.js";
 import { Label } from "./label.js";
 import { jsx } from "react/jsx-runtime";
-import { useRender } from "@base-ui/react/use-render";
 import { createContext, useContext, useId } from "react";
+import { useRender } from "@base-ui/react/use-render";
 import { Controller, FormProvider, useFormContext } from "react-hook-form";
 //#region src/components/form.tsx
 const Form = FormProvider;

package/dist/components/heading.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from "../lib/variants.js";
-import { useRender } from "@base-ui/react/use-render";
 import { ElementType, JSX } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/heading.d.ts
 declare const headingVariants: import("tailwind-variants").TVReturnType<{
   size: {

package/dist/components/input.js

@@ -1,5 +1,5 @@
-import { cn, variants } from "../lib/variants.js";
 import { controlTextClasses } from "../lib/classes.js";
+import { cn, variants } from "../lib/variants.js";
 import { interactiveVariants } from "../lib/interactive.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/input.tsx

package/dist/components/menu.js

@@ -1,7 +1,7 @@
 "use client";
-import { cn } from "../lib/variants.js";
-import { CheckIcon, CircleIcon } from "../lib/icons.js";
 import { controlTextClasses, eyebrowClasses, popoverAnimationClasses } from "../lib/classes.js";
+import { CheckIcon, CircleIcon } from "../lib/icons.js";
+import { cn } from "../lib/variants.js";
 import { Kbd } from "./kbd.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Menu as Menu$1 } from "@base-ui/react/menu";

package/dist/components/nav.js

@@ -1,5 +1,5 @@
-import { cn, variants } from "../lib/variants.js";
 import { eyebrowClasses } from "../lib/classes.js";
+import { cn, variants } from "../lib/variants.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/nav.tsx
 function Nav({ className, ...props }) {

package/dist/components/pagination.js

@@ -1,5 +1,5 @@
-import { cn } from "../lib/variants.js";
 import { ChevronLeftIcon, ChevronRightIcon } from "../lib/icons.js";
+import { cn } from "../lib/variants.js";
 import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/pagination.tsx

package/dist/components/ping.d.ts

@@ -0,0 +1,38 @@
+import { VariantProps } from "../lib/variants.js";
+import { ComponentProps } from "react";
+//#region src/components/ping.d.ts
+declare const pingVariants: import("tailwind-variants").TVReturnType<{
+  tone: {
+    success: "text-success";
+    warning: "text-warning";
+    danger: "text-danger";
+    neutral: "text-muted-foreground";
+  };
+}, undefined, "relative flex shrink-0 size-2 rounded-full", {
+  tone: {
+    success: "text-success";
+    warning: "text-warning";
+    danger: "text-danger";
+    neutral: "text-muted-foreground";
+  };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+  tone: {
+    success: "text-success";
+    warning: "text-warning";
+    danger: "text-danger";
+    neutral: "text-muted-foreground";
+  };
+}, undefined>>;
+type PingProps = ComponentProps<"span"> & VariantProps<typeof pingVariants> & {
+  /**
+   * Pulse the dot. The glow overflows the box by half the dot size, so layout
+   * stays the size of the dot itself.
+   */
+  animate?: boolean;
+};
+/**
+ * A status dot: solid fill with an optional soft, slow pulse. Size it with `size-*`.
+ */
+export declare function Ping({ className, tone, animate, ...props }: PingProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=ping.d.ts.map

package/dist/components/ping.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ping.d.ts","names":[],"sources":["../../src/components/ping.tsx"],"mappings":";;;cAGM,0CAAY;;;;;;;;;;;;;;;;;;;;;;KAiBb,YAAY,yBACf,oBAAoB;;;;;EAKlB;;;;;wBAMY,OAAO,WAAW,MAAM,YAAmB,SAAS,4BAAS,IAAA"}

package/dist/components/ping.js

@@ -0,0 +1,30 @@
+import { cn, variants } from "../lib/variants.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ping.tsx
+const pingVariants = variants({
+	base: "relative flex shrink-0 size-2 rounded-full",
+	variants: { tone: {
+		success: "text-success",
+		warning: "text-warning",
+		danger: "text-danger",
+		neutral: "text-muted-foreground"
+	} },
+	defaultVariants: { tone: "neutral" }
+});
+/**
+* A status dot: solid fill with an optional soft, slow pulse. Size it with `size-*`.
+*/
+function Ping({ className, tone, animate = true, ...props }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: cn(pingVariants({
+			tone,
+			className
+		})),
+		...props,
+		children: [animate && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute -inset-1/2 animate-ping rounded-full bg-current opacity-30 blur-[1px] [animation-duration:2s] motion-reduce:animate-none" }), /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute -inset-1/2 animate-pulse rounded-full bg-current opacity-30 motion-reduce:animate-none" })] }), /* @__PURE__ */ jsx("span", { className: "absolute inset-0 rounded-full bg-current" })]
+	});
+}
+//#endregion
+export { Ping };
+
+//# sourceMappingURL=ping.js.map

package/dist/components/ping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ping.js","names":[],"sources":["../../src/components/ping.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\"\nimport { variants, cn, type VariantProps } from \"~/lib/variants\"\n\nconst pingVariants = variants({\n  base: \"relative flex shrink-0 size-2 rounded-full\",\n\n  variants: {\n    tone: {\n      success: \"text-success\",\n      warning: \"text-warning\",\n      danger: \"text-danger\",\n      neutral: \"text-muted-foreground\",\n    },\n  },\n\n  defaultVariants: {\n    tone: \"neutral\",\n  },\n})\n\ntype PingProps = ComponentProps<\"span\"> &\n  VariantProps<typeof pingVariants> & {\n    /**\n     * Pulse the dot. The glow overflows the box by half the dot size, so layout\n     * stays the size of the dot itself.\n     */\n    animate?: boolean\n  }\n\n/**\n * A status dot: solid fill with an optional soft, slow pulse. Size it with `size-*`.\n */\nexport function Ping({ className, tone, animate = true, ...props }: PingProps) {\n  return (\n    <span className={cn(pingVariants({ tone, className }))} {...props}>\n      {animate && (\n        <>\n          <span className=\"pointer-events-none absolute -inset-1/2 animate-ping rounded-full bg-current opacity-30 blur-[1px] [animation-duration:2s] motion-reduce:animate-none\" />\n          <span className=\"pointer-events-none absolute -inset-1/2 animate-pulse rounded-full bg-current opacity-30 motion-reduce:animate-none\" />\n        </>\n      )}\n      <span className=\"absolute inset-0 rounded-full bg-current\" />\n    </span>\n  )\n}\n"],"mappings":";;;AAGA,MAAM,eAAe,SAAS;CAC5B,MAAM;CAEN,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,QAAQ;EACR,SAAS;CACX,EACF;CAEA,iBAAiB,EACf,MAAM,UACR;AACF,CAAC;;;;AAcD,SAAgB,KAAK,EAAE,WAAW,MAAM,UAAU,MAAM,GAAG,SAAoB;CAC7E,OACE,qBAAC,QAAD;EAAM,WAAW,GAAG,aAAa;GAAE;GAAM;EAAU,CAAC,CAAC;EAAG,GAAI;EAA5D,UAAA,CACG,WACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,QAAD,EAAM,WAAU,wJAAyJ,CAAA,GACzK,oBAAC,QAAD,EAAM,WAAU,sHAAuH,CAAA,CACvI,EAAA,CAAA,GAEJ,oBAAC,QAAD,EAAM,WAAU,2CAA4C,CAAA,CACxD;;AAEV"}

package/dist/components/popover.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/variants.js";
 import { popoverAnimationClasses } from "../lib/classes.js";
+import { cn } from "../lib/variants.js";
 import { jsx } from "react/jsx-runtime";
 import { Popover as Popover$1 } from "@base-ui/react/popover";
 //#region src/components/popover.tsx

package/dist/components/search-input.js

@@ -1,5 +1,5 @@
-import { cn } from "../lib/variants.js";
 import { SearchIcon, XIcon } from "../lib/icons.js";
+import { cn } from "../lib/variants.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/section-header.d.ts

@@ -1,8 +1,8 @@
 import { VariantProps } from "../lib/variants.js";
 import { HeadingProps } from "./heading.js";
 import { Stack } from "./stack.js";
-import { useRender } from "@base-ui/react/use-render";
 import { ComponentProps, ReactNode } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/section-header.d.ts
 declare const sectionHeaderVariants: import("tailwind-variants").TVReturnType<{
   alignment: {

package/dist/components/section-header.js

@@ -1,10 +1,10 @@
+import { descriptionClasses } from "../lib/classes.js";
 import { cn, variants } from "../lib/variants.js";
 import { Heading } from "./heading.js";
 import { Stack } from "./stack.js";
-import { descriptionClasses } from "../lib/classes.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useRender } from "@base-ui/react/use-render";
 import { createContext, use } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/section-header.tsx
 const sectionHeaderVariants = variants({
 	base: "flex items-center w-full min-w-0",

package/dist/components/select.js

@@ -1,7 +1,7 @@
 "use client";
-import { cn, variants } from "../lib/variants.js";
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from "../lib/icons.js";
 import { controlTextClasses, popoverAnimationClasses } from "../lib/classes.js";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon } from "../lib/icons.js";
+import { cn, variants } from "../lib/variants.js";
 import { inputVariants } from "./input.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";

package/dist/components/stat-strip.d.ts

@@ -1,7 +1,7 @@
 import { VariantProps } from "../lib/variants.js";
+import { ComponentProps, ReactNode } from "react";
 import { Format } from "@number-flow/react";
 import { useRender } from "@base-ui/react/use-render";
-import { ComponentProps, ReactNode } from "react";
 //#region src/components/stat-strip.d.ts
 declare const stripVariants: import("tailwind-variants").TVReturnType<{
   variant: {

package/dist/components/stat-strip.js

@@ -1,9 +1,9 @@
-import { AnimatedNumber } from "./animated-number.js";
 import { cn, variants } from "../lib/variants.js";
+import { AnimatedNumber } from "./animated-number.js";
 import { cardSurfaceClasses } from "./card.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useRender } from "@base-ui/react/use-render";
 import { isValidElement } from "react";
+import { useRender } from "@base-ui/react/use-render";
 //#region src/components/stat-strip.tsx
 const stripVariants = variants({
 	base: "group/strip grid grid-cols-2 gap-y-1 max-sm:[&>*:last-child:nth-child(odd)]:col-span-2 sm:flex sm:flex-wrap sm:gap-y-0",

package/dist/components/tabs.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn, variants } from "../lib/variants.js";
 import { controlTextClasses } from "../lib/classes.js";
+import { cn, variants } from "../lib/variants.js";
 import { interactiveVariants } from "../lib/interactive.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";

package/dist/components/toaster.js

@@ -1,6 +1,6 @@
-import { cn } from "../lib/variants.js";
-import { CircleCheckIcon, CircleHelpIcon, CircleXIcon, LoaderIcon } from "../lib/icons.js";
 import { controlTextClasses } from "../lib/classes.js";
+import { CircleCheckIcon, CircleHelpIcon, CircleXIcon, LoaderIcon } from "../lib/icons.js";
+import { cn } from "../lib/variants.js";
 import { jsx } from "react/jsx-runtime";
 import { Toaster as Toaster$1 } from "sonner";
 //#region src/components/toaster.tsx

package/dist/components/tooltip.js

@@ -1,6 +1,6 @@
 "use client";
-import { cn } from "../lib/variants.js";
 import { popoverAnimationClasses } from "../lib/classes.js";
+import { cn } from "../lib/variants.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 //#region src/components/tooltip.tsx

package/dist/lib/icons.d.ts

@@ -1,5 +1,5 @@
-import { ComponentType } from "react";
 import { HugeiconsProps } from "@hugeicons/react";
+import { ComponentType } from "react";
 //#region src/lib/icons.d.ts
 export type IconProps = Omit<HugeiconsProps, "icon" | "altIcon" | "showAlt">;
 export type IconComponent = ComponentType<IconProps>;

package/dist/lib/icons.js

@@ -1,6 +1,6 @@
-import { jsx } from "react/jsx-runtime";
 import { ArrowDown01Icon, ArrowLeft01Icon, ArrowRight01Icon, ArrowUp01Icon, ArrowUpRight01Icon, Cancel01Icon, CancelCircleIcon, CheckmarkCircle02Icon, CircleIcon as CircleIcon$1, Copy01Icon, HelpCircleIcon, Loading03Icon, Search01Icon, Tick02Icon, UnfoldMoreIcon } from "@hugeicons/core-free-icons";
 import { HugeiconsIcon } from "@hugeicons/react";
+import { jsx } from "react/jsx-runtime";
 //#region src/lib/icons.tsx
 /**
 * Internal, non-exported icon helper. The package deliberately ships no public icon registry

package/package.json

@@ -112,5 +112,5 @@
   "engines": {
     "node": ">=18"
   },
-  "version": "1.2.0"
+  "version": "1.3.0"
 }