@journ/nude 0.1.0

package/dist/text-morph.js

@@ -0,0 +1,62 @@
+"use client";
+import { visuallyHidden } from "./lib/visually-hidden.js";
+import { useLayoutEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { prefersReducedMotion } from "@journ/lift";
+import { animate } from "animejs";
+//#region src/text-morph.tsx
+/**
+* Plays text one character at a time. When the text changes, only the characters
+* that differ drop in again. Screen readers get the whole string once.
+*/
+const TextMorph = ({ children: text, as: Component = "span", classNames, style, ...props }) => {
+	const root = useRef(null);
+	const previous = useRef(text);
+	useLayoutEffect(() => {
+		const before = [...previous.current];
+		previous.current = text;
+		if (!root.current || prefersReducedMotion()) return;
+		const chars = [...text];
+		const letters = root.current.querySelectorAll("[data-char]");
+		let order = 0;
+		for (const [index, char] of chars.entries()) {
+			const element = letters[index];
+			if (!element || char === before[index]) continue;
+			animate(element, {
+				opacity: [0, 1],
+				translateY: [6, 0],
+				duration: 220,
+				delay: order++ * 18,
+				ease: "outQuad"
+			});
+		}
+	}, [text]);
+	return /* @__PURE__ */ jsxs(Component, {
+		ref: root,
+		"data-slot": "text-morph",
+		...props,
+		style: {
+			whiteSpace: "pre",
+			...style
+		},
+		children: [/* @__PURE__ */ jsx("span", {
+			"data-slot": "text-morph-label",
+			className: classNames?.label,
+			style: visuallyHidden,
+			children: text
+		}), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": true,
+			children: [...text].map((char, index) => /* @__PURE__ */ jsx("span", {
+				"data-char": true,
+				className: classNames?.char,
+				style: {
+					display: "inline-block",
+					whiteSpace: "pre"
+				},
+				children: char
+			}, index))
+		})]
+	});
+};
+//#endregion
+export { TextMorph };

package/dist/text-shimmer.d.ts

@@ -0,0 +1,9 @@
+import { ComponentPropsWithRef, ElementType } from "react";
+//#region src/text-shimmer.d.ts
+type TextShimmerProps = ComponentPropsWithRef<'span'> & {
+  /** The element to render, `span` by default. */
+  as?: ElementType;
+};
+declare const TextShimmer: ({ as: Component, ...props }: TextShimmerProps) => import("react").JSX.Element;
+//#endregion
+export { TextShimmer, type TextShimmerProps };

package/dist/text-shimmer.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/text-shimmer.tsx
+const TextShimmer = ({ as: Component = "span", ...props }) => /* @__PURE__ */ jsx(Component, {
+	"data-slot": "text-shimmer",
+	...props
+});
+//#endregion
+export { TextShimmer };

package/dist/text.d.ts

@@ -0,0 +1,4 @@
+//#region src/text.d.ts
+declare const Text: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>) => import("react").ReactNode;
+//#endregion
+export { Text };

package/dist/text.js

@@ -0,0 +1,5 @@
+import { part } from "./lib/part.js";
+//#region src/text.tsx
+const Text = part("p", "text");
+//#endregion
+export { Text };

package/dist/textarea.d.ts

@@ -0,0 +1,4 @@
+//#region src/textarea.d.ts
+declare const Textarea: (props: import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>) => import("react").ReactNode;
+//#endregion
+export { Textarea };

package/dist/textarea.js

@@ -0,0 +1,5 @@
+import { part } from "./lib/part.js";
+//#region src/textarea.tsx
+const Textarea = part("textarea", "textarea");
+//#endregion
+export { Textarea };

package/dist/time-range-parts.d.ts

@@ -0,0 +1,22 @@
+import { Input } from "./input.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/time-range-parts.d.ts
+type TimeRangeValue = {
+  start: string;
+  stop: string;
+};
+type RootProps = {
+  /** Times as "HH:mm". Empty strings while unset. */
+  value?: TimeRangeValue;
+  defaultValue?: TimeRangeValue;
+  onValueChange?: (value: TimeRangeValue) => void;
+  children?: ReactNode;
+};
+declare const Root: ({ value, defaultValue, onValueChange, children }: RootProps) => import("react").JSX.Element;
+type TimeFieldProps = Omit<ComponentPropsWithRef<typeof Input>, 'type' | 'value'>;
+declare const Start: (props: TimeFieldProps) => import("react").JSX.Element;
+declare const Stop: (props: TimeFieldProps) => import("react").JSX.Element;
+/** The time between start and stop. A stop before the start means the next day. */
+declare const Duration: (props: Omit<ComponentPropsWithRef<'output'>, 'children'>) => import("react").JSX.Element;
+//#endregion
+export { Duration, Root, type RootProps, Start, Stop, type TimeRangeValue };

package/dist/time-range-parts.js

@@ -0,0 +1,56 @@
+"use client";
+import { Input } from "./input.js";
+import { jsx } from "react/jsx-runtime";
+import { createRequiredContext, useControllableState } from "@journ/lift";
+import { formatDuration, minutesBetween } from "@journ/fitter-happier";
+//#region src/time-range-parts.tsx
+const [TimeRangeContext, useTimeRange] = createRequiredContext("TimeRange.Root");
+const empty = {
+	start: "",
+	stop: ""
+};
+const Root = ({ value, defaultValue = empty, onValueChange, children }) => {
+	const [stored, setStored] = useControllableState(value, defaultValue, onValueChange);
+	const current = stored ?? empty;
+	return /* @__PURE__ */ jsx(TimeRangeContext, {
+		value: {
+			value: current,
+			change: (next) => setStored({
+				...current,
+				...next
+			})
+		},
+		children
+	});
+};
+/** Start and stop are the same field bound to a different edge of the range. */
+const TimeField = ({ edge, ...props }) => {
+	const { value, change } = useTimeRange();
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": `time-range-${edge}`,
+		type: "time",
+		...props,
+		value: value[edge],
+		onChange: (event) => change({ [edge]: event.target.value })
+	});
+};
+const Start = (props) => /* @__PURE__ */ jsx(TimeField, {
+	edge: "start",
+	...props
+});
+const Stop = (props) => /* @__PURE__ */ jsx(TimeField, {
+	edge: "stop",
+	...props
+});
+/** The time between start and stop. A stop before the start means the next day. */
+const Duration = (props) => {
+	const { value } = useTimeRange();
+	const minutes = minutesBetween(value.start, value.stop);
+	return /* @__PURE__ */ jsx("output", {
+		"data-slot": "time-range-duration",
+		...props,
+		children: minutes === null ? "" : formatDuration(minutes)
+	});
+};
+//#endregion
+export { Duration, Root, Start, Stop };

package/dist/time-range.d.ts

@@ -0,0 +1,10 @@
+import { Duration, Root, RootProps, Start, Stop, TimeRangeValue } from "./time-range-parts.js";
+//#region src/time-range.d.ts
+declare const TimeRange: {
+  Root: typeof Root;
+  Start: typeof Start;
+  Stop: typeof Stop;
+  Duration: typeof Duration;
+};
+//#endregion
+export { TimeRange, type RootProps as TimeRangeProps, type TimeRangeValue };

package/dist/time-range.js

@@ -0,0 +1,10 @@
+import { Duration, Root, Start, Stop } from "./time-range-parts.js";
+//#region src/time-range.tsx
+const TimeRange = {
+	Root,
+	Start,
+	Stop,
+	Duration
+};
+//#endregion
+export { TimeRange };

package/dist/toast-parts.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from "react";
+import { Toaster, toast } from "sonner";
+//#region src/toast-parts.d.ts
+/** Unstyled: sonner's own look is turned off. Pass `toastOptions.classNames` to style it. */
+declare const Provider: ({ toastOptions, ...props }: ComponentProps<typeof Toaster>) => import("react").JSX.Element;
+declare const show: typeof toast;
+declare const Root: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>) => import("react").ReactNode;
+declare const Title: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>) => import("react").ReactNode;
+declare const Description: (props: import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>) => import("react").ReactNode;
+declare const Action: (props: import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>) => import("react").ReactNode;
+//#endregion
+export { Action, Description, Provider, Root, Title, show };

package/dist/toast-parts.js

@@ -0,0 +1,21 @@
+"use client";
+import { part } from "./lib/part.js";
+import { jsx } from "react/jsx-runtime";
+import { Toaster, toast } from "sonner";
+//#region src/toast-parts.tsx
+/** Unstyled: sonner's own look is turned off. Pass `toastOptions.classNames` to style it. */
+const Provider = ({ toastOptions, ...props }) => /* @__PURE__ */ jsx(Toaster, {
+	position: "top-center",
+	...props,
+	toastOptions: {
+		unstyled: true,
+		...toastOptions
+	}
+});
+const show = toast;
+const Root = part("div", "toast");
+const Title = part("p", "toast-title");
+const Description = part("p", "toast-description");
+const Action = part("button", "toast-action", { type: "button" });
+//#endregion
+export { Action, Description, Provider, Root, Title, show };

package/dist/toast.d.ts

@@ -0,0 +1,13 @@
+import { Action, Description, Provider, Root, Title, show } from "./toast-parts.js";
+//#region src/toast.d.ts
+type ToastParts = {
+  Provider: typeof Provider;
+  show: typeof show;
+  Root: typeof Root;
+  Title: typeof Title;
+  Description: typeof Description;
+  Action: typeof Action;
+};
+declare const Toast: ToastParts;
+//#endregion
+export { Toast };

package/dist/toast.js

@@ -0,0 +1,12 @@
+import { Action, Description, Provider, Root, Title, show } from "./toast-parts.js";
+//#region src/toast.tsx
+const Toast = {
+	Provider,
+	show,
+	Root,
+	Title,
+	Description,
+	Action
+};
+//#endregion
+export { Toast };

package/dist/toggle-group-parts.d.ts

@@ -0,0 +1,6 @@
+import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
+//#region src/toggle-group-parts.d.ts
+declare const Root: (props: (RadixToggleGroup.ToggleGroupMultipleProps | RadixToggleGroup.ToggleGroupSingleProps) & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+declare const Item: (props: RadixToggleGroup.ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactNode;
+//#endregion
+export { Item, Root };

package/dist/toggle-group-parts.js

@@ -0,0 +1,8 @@
+"use client";
+import { part } from "./lib/part.js";
+import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
+//#region src/toggle-group-parts.tsx
+const Root = part(RadixToggleGroup.Root, "toggle-group");
+const Item = part(RadixToggleGroup.Item, "toggle-group-item");
+//#endregion
+export { Item, Root };

package/dist/toggle-group.d.ts

@@ -0,0 +1,7 @@
+//#region src/toggle-group.d.ts
+declare const ToggleGroup: {
+  Root: (props: (import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps | import("@radix-ui/react-toggle-group").ToggleGroupSingleProps) & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactNode;
+  Item: (props: import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>) => import("react").ReactNode;
+};
+//#endregion
+export { ToggleGroup };

package/dist/toggle-group.js

@@ -0,0 +1,8 @@
+import { Item, Root } from "./toggle-group-parts.js";
+//#region src/toggle-group.tsx
+const ToggleGroup = {
+	Root,
+	Item
+};
+//#endregion
+export { ToggleGroup };

package/dist/tooltip-parts.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef } from "react";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+//#region src/tooltip-parts.d.ts
+declare const Provider: import("react").FC<RadixTooltip.TooltipProviderProps>;
+/** Includes its own provider so a tooltip works without extra setup. */
+declare const Root: ({ delayDuration, ...props }: ComponentPropsWithRef<typeof RadixTooltip.Root>) => import("react").JSX.Element;
+declare const Trigger: import("react").ForwardRefExoticComponent<RadixTooltip.TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+declare const Content: (props: ComponentPropsWithRef<typeof RadixTooltip.Content>) => import("react").JSX.Element;
+//#endregion
+export { Content, Provider, Root, Trigger };

package/dist/tooltip-parts.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import * as RadixTooltip from "@radix-ui/react-tooltip";
+//#region src/tooltip-parts.tsx
+const Provider = RadixTooltip.Provider;
+/** Includes its own provider so a tooltip works without extra setup. */
+const Root = ({ delayDuration = 300, ...props }) => /* @__PURE__ */ jsx(RadixTooltip.Provider, {
+	delayDuration,
+	children: /* @__PURE__ */ jsx(RadixTooltip.Root, { ...props })
+});
+const Trigger = RadixTooltip.Trigger;
+const Content = (props) => /* @__PURE__ */ jsx(RadixTooltip.Portal, { children: /* @__PURE__ */ jsx(RadixTooltip.Content, {
+	"data-slot": "tooltip-content",
+	...props
+}) });
+//#endregion
+export { Content, Provider, Root, Trigger };

package/dist/tooltip.d.ts

@@ -0,0 +1,10 @@
+import { Content, Root } from "./tooltip-parts.js";
+//#region src/tooltip.d.ts
+declare const Tooltip: {
+  Provider: import("react").FC<import("@radix-ui/react-tooltip").TooltipProviderProps>;
+  Root: typeof Root;
+  Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-tooltip").TooltipTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+  Content: typeof Content;
+};
+//#endregion
+export { Tooltip };

package/dist/tooltip.js

@@ -0,0 +1,10 @@
+import { Content, Provider, Root, Trigger } from "./tooltip-parts.js";
+//#region src/tooltip.tsx
+const Tooltip = {
+	Provider,
+	Root,
+	Trigger,
+	Content
+};
+//#endregion
+export { Tooltip };

package/dist/touch-target.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPropsWithRef } from "react";
+//#region src/touch-target.d.ts
+/** A hit-area element rendered before its children. Style it to grow the touch area without changing layout. */
+declare const TouchTarget: ({ children, ...props }: ComponentPropsWithRef<'span'>) => import("react").JSX.Element;
+//#endregion
+export { TouchTarget };

package/dist/touch-target.js

@@ -0,0 +1,10 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/touch-target.tsx
+/** A hit-area element rendered before its children. Style it to grow the touch area without changing layout. */
+const TouchTarget = ({ children, ...props }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+	"aria-hidden": true,
+	"data-slot": "touch-target",
+	...props
+}), children] });
+//#endregion
+export { TouchTarget };

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@journ/nude",
+  "version": "0.1.0",
+  "description": "Unstyled, accessible React primitives for the web. They own behavior, state, focus and ARIA, and leave every visual decision to you.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/thommorais/kid-a.git",
+    "directory": "packages/nude"
+  },
+  "files": [
+    "dist"
+  ],
+  "type": "module",
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "@journ/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./*": {
+      "@journ/source": "./src/*.tsx",
+      "types": "./dist/*.d.ts",
+      "default": "./dist/*.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.20",
+    "@radix-ui/react-alert-dialog": "^1.1.23",
+    "@radix-ui/react-avatar": "^1.2.6",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-context-menu": "^2.3.7",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-hover-card": "^1.1.23",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.22",
+    "@radix-ui/react-one-time-password-field": "^0.1.16",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-progress": "^1.1.16",
+    "@radix-ui/react-radio-group": "^1.4.7",
+    "@radix-ui/react-scroll-area": "^1.2.18",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slider": "^1.4.7",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-toggle-group": "^1.1.19",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "@tanstack/react-table": "^9.2.4",
+    "animejs": "^4.5.0",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "react-markdown": "^10.1.0",
+    "sonner": "^2.0.8",
+    "vaul": "^1.1.2",
+    "@journ/lift": "0.1.0",
+    "@journ/fitter-happier": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "nx": {
+    "tags": [
+      "scope:primitives"
+    ]
+  },
+  "scripts": {
+    "build": "tsdown",
+    "test": "vitest run",
+    "typecheck": "tsc -b",
+    "lint": "oxlint",
+    "format:check": "oxfmt --check"
+  }
+}