@just-web/toolkits 1.0.0

package/dist/units/rem-2-px.d.mts

@@ -0,0 +1,25 @@
+//#region src/units/rem-2-px.d.ts
+/**
+ * Converts rem values to pixel units.
+ *
+ * @param rem - The rem value to convert. Can be a number or string (e.g. '1rem' or '1')
+ * @param options - Optional configuration
+ * @param options.base - Base pixel value to calculate pixels from. Defaults to 16
+ * @param options.precision - Number of decimal places in the output. Defaults to 4
+ * @returns The converted value as a string with 'px' units
+ *
+ * @example
+ * ```ts
+ * rem2px(1) // '16.0000'
+ * rem2px('2rem') // '32.0000'
+ * rem2px(1, { base: 20 }) // '20.0000'
+ * rem2px(0.8125, { precision: 2 }) // '13.00'
+ * ```
+ */
+declare function rem2px(rem: number | string, options?: {
+  base?: number | undefined;
+  precision?: number | undefined;
+}): number;
+//#endregion
+export { rem2px };
+//# sourceMappingURL=rem-2-px.d.mts.map

package/dist/units/rem-2-px.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rem-2-px.d.mts","names":[],"sources":["../../src/units/rem-2-px.ts"],"sourcesContent":[],"mappings":";;AAiBA;;;;;;;;;;;;;;;;iBAAgB,MAAA"}

package/dist/units/rem-2-px.mjs

@@ -0,0 +1,30 @@
+//#region src/units/rem-2-px.ts
+/**
+* Converts rem values to pixel units.
+*
+* @param rem - The rem value to convert. Can be a number or string (e.g. '1rem' or '1')
+* @param options - Optional configuration
+* @param options.base - Base pixel value to calculate pixels from. Defaults to 16
+* @param options.precision - Number of decimal places in the output. Defaults to 4
+* @returns The converted value as a string with 'px' units
+*
+* @example
+* ```ts
+* rem2px(1) // '16.0000'
+* rem2px('2rem') // '32.0000'
+* rem2px(1, { base: 20 }) // '20.0000'
+* rem2px(0.8125, { precision: 2 }) // '13.00'
+* ```
+*/
+function rem2px(rem, options) {
+	const { base = 16, precision = 4 } = options ?? {};
+	if (typeof rem === "string") {
+		rem = rem.replace(/rem$/, "");
+		rem = Number.parseFloat(rem);
+	}
+	return Number((rem * base).toFixed(precision));
+}
+
+//#endregion
+export { rem2px };
+//# sourceMappingURL=rem-2-px.mjs.map

package/dist/units/rem-2-px.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"rem-2-px.mjs","names":[],"sources":["../../src/units/rem-2-px.ts"],"sourcesContent":["/**\n * Converts rem values to pixel units.\n *\n * @param rem - The rem value to convert. Can be a number or string (e.g. '1rem' or '1')\n * @param options - Optional configuration\n * @param options.base - Base pixel value to calculate pixels from. Defaults to 16\n * @param options.precision - Number of decimal places in the output. Defaults to 4\n * @returns The converted value as a string with 'px' units\n *\n * @example\n * ```ts\n * rem2px(1) // '16.0000'\n * rem2px('2rem') // '32.0000'\n * rem2px(1, { base: 20 }) // '20.0000'\n * rem2px(0.8125, { precision: 2 }) // '13.00'\n * ```\n */\nexport function rem2px(\n\trem: number | string,\n\toptions?: { base?: number | undefined; precision?: number | undefined }\n): number {\n\tconst { base = 16, precision = 4 } = options ?? {}\n\n\tif (typeof rem === 'string') {\n\t\trem = rem.replace(/rem$/, '')\n\t\trem = Number.parseFloat(rem)\n\t}\n\n\treturn Number((rem * base).toFixed(precision))\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,SAAgB,OACf,KACA,SACS;CACT,MAAM,EAAE,OAAO,IAAI,YAAY,MAAM,WAAW,EAAE;AAElD,KAAI,OAAO,QAAQ,UAAU;AAC5B,QAAM,IAAI,QAAQ,QAAQ,GAAG;AAC7B,QAAM,OAAO,WAAW,IAAI;;AAG7B,QAAO,QAAQ,MAAM,MAAM,QAAQ,UAAU,CAAC"}

package/dist/utils/append-id.cjs

@@ -0,0 +1,16 @@
+
+//#region src/utils/append-id.ts
+/**
+* Appends a suffix to an ID if the ID is defined.
+*
+* @param id - The ID to append the suffix to.
+* @param suffix - The suffix to append to the ID.
+* @returns The ID with the suffix appended, or undefined if the ID is undefined.
+*/
+function appendId(id, suffix) {
+	return id ? `${id}-${suffix}` : void 0;
+}
+
+//#endregion
+exports.appendId = appendId;
+//# sourceMappingURL=append-id.cjs.map

package/dist/utils/append-id.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"append-id.cjs","names":[],"sources":["../../src/utils/append-id.ts"],"sourcesContent":["/**\n * Appends a suffix to an ID if the ID is defined.\n *\n * @param id - The ID to append the suffix to.\n * @param suffix - The suffix to append to the ID.\n * @returns The ID with the suffix appended, or undefined if the ID is undefined.\n */\nexport function appendId(id: string | undefined, suffix: string): string | undefined {\n\treturn id ? `${id}-${suffix}` : undefined\n}\n"],"mappings":";;;;;;;;;AAOA,SAAgB,SAAS,IAAwB,QAAoC;AACpF,QAAO,KAAK,GAAG,GAAG,GAAG,WAAW"}

package/dist/utils/append-id.d.cts

@@ -0,0 +1,12 @@
+//#region src/utils/append-id.d.ts
+/**
+ * Appends a suffix to an ID if the ID is defined.
+ *
+ * @param id - The ID to append the suffix to.
+ * @param suffix - The suffix to append to the ID.
+ * @returns The ID with the suffix appended, or undefined if the ID is undefined.
+ */
+declare function appendId(id: string | undefined, suffix: string): string | undefined;
+//#endregion
+export { appendId };
+//# sourceMappingURL=append-id.d.cts.map

package/dist/utils/append-id.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"append-id.d.cts","names":[],"sources":["../../src/utils/append-id.ts"],"sourcesContent":[],"mappings":";;AAOA;;;;;;iBAAgB,QAAA"}

package/dist/utils/append-id.d.mts

@@ -0,0 +1,12 @@
+//#region src/utils/append-id.d.ts
+/**
+ * Appends a suffix to an ID if the ID is defined.
+ *
+ * @param id - The ID to append the suffix to.
+ * @param suffix - The suffix to append to the ID.
+ * @returns The ID with the suffix appended, or undefined if the ID is undefined.
+ */
+declare function appendId(id: string | undefined, suffix: string): string | undefined;
+//#endregion
+export { appendId };
+//# sourceMappingURL=append-id.d.mts.map

package/dist/utils/append-id.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"append-id.d.mts","names":[],"sources":["../../src/utils/append-id.ts"],"sourcesContent":[],"mappings":";;AAOA;;;;;;iBAAgB,QAAA"}

package/dist/utils/append-id.mjs

@@ -0,0 +1,15 @@
+//#region src/utils/append-id.ts
+/**
+* Appends a suffix to an ID if the ID is defined.
+*
+* @param id - The ID to append the suffix to.
+* @param suffix - The suffix to append to the ID.
+* @returns The ID with the suffix appended, or undefined if the ID is undefined.
+*/
+function appendId(id, suffix) {
+	return id ? `${id}-${suffix}` : void 0;
+}
+
+//#endregion
+export { appendId };
+//# sourceMappingURL=append-id.mjs.map

package/dist/utils/append-id.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"append-id.mjs","names":[],"sources":["../../src/utils/append-id.ts"],"sourcesContent":["/**\n * Appends a suffix to an ID if the ID is defined.\n *\n * @param id - The ID to append the suffix to.\n * @param suffix - The suffix to append to the ID.\n * @returns The ID with the suffix appended, or undefined if the ID is undefined.\n */\nexport function appendId(id: string | undefined, suffix: string): string | undefined {\n\treturn id ? `${id}-${suffix}` : undefined\n}\n"],"mappings":";;;;;;;;AAOA,SAAgB,SAAS,IAAwB,QAAoC;AACpF,QAAO,KAAK,GAAG,GAAG,GAAG,WAAW"}

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "@just-web/toolkits",
+  "version": "1.0.0",
+  "description": "Toolkits for web applications",
+  "homepage": "https://github.com/justland/just-web-foundation/tree/main/libs/toolkits",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/justland/just-web-foundation.git",
+    "directory": "libs/toolkits"
+  },
+  "license": "MIT",
+  "author": "Unional <homawong@gmail.com>",
+  "type": "module",
+  "imports": {
+    "#just-web/toolkits": {
+      "@just-web/toolkits-dev": "./src/index.ts",
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "#just-web/toolkits/react": {
+      "@just-web/toolkits-dev": "./src/react.ts",
+      "types": "./dist/react.d.mts",
+      "default": "./dist/react.mjs"
+    },
+    "#just-web/toolkits/theme": {
+      "@just-web/toolkits-dev": "./src/theme.ts",
+      "types": "./dist/theme.d.mts",
+      "default": "./dist/theme.mjs"
+    }
+  },
+  "exports": {
+    ".": {
+      "types": [
+        "./dist/index.d.mts",
+        "./src/index.ts"
+      ],
+      "source": "./src/index.ts",
+      "default": "./dist/index.mjs"
+    },
+    "./react": {
+      "types": [
+        "./dist/react.d.mts",
+        "./src/react.ts"
+      ],
+      "source": "./src/react.ts",
+      "default": "./dist/react.mjs"
+    },
+    "./theme": {
+      "types": [
+        "./dist/theme.d.mts",
+        "./src/theme.ts"
+      ],
+      "source": "./src/theme.ts",
+      "default": "./dist/theme.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./dist/index.cjs",
+  "source": "./src/index.ts",
+  "types": "./dist/index.d.cts",
+  "files": [
+    "dist",
+    "src",
+    "!**/*.{spec,test,unit,accept,integrate,system,stories}.*",
+    "!**/*.mdx"
+  ],
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "csstype": "^3.2.3",
+    "react-aria-components": "^1.15.1",
+    "type-plus": "8.0.0-beta.8"
+  },
+  "devDependencies": {
+    "@repobuddy/storybook": "^2.25.0",
+    "@repobuddy/vitest": "^2.1.1",
+    "@storybook-community/storybook-dark-mode": "^7.1.0",
+    "@storybook/addon-docs": "^10.2.7",
+    "@storybook/addon-vitest": "^10.2.7",
+    "@storybook/react-vite": "^10.2.7",
+    "@tailwindcss/cli": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18",
+    "@testing-library/react": "^16.3.2",
+    "@types/react": "^19.2.13",
+    "@vitest/browser": "^4.0.18",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-v8": "^4.0.18",
+    "dedent": "^1.7.1",
+    "jotai": "^2.18.0",
+    "npm-run-all2": "^8.0.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rimraf": "^6.1.2",
+    "storybook": "^10.2.7",
+    "storybook-addon-code-editor": "^6.1.3",
+    "storybook-addon-tag-badges": "^3.0.6",
+    "storybook-addon-vis": "^3.1.2",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.1.18",
+    "tsdown": "^0.18.4",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.18",
+    "zustand": "^5.0.11",
+    "@tools/typescript": "^0.0.1"
+  },
+  "scripts": {
+    "build": "run-p build:* test:types",
+    "build-doc": "storybook build -o ../../docs/foundation",
+    "build:code": "tsdown",
+    "check:css": "tailwindcss -i .storybook/tailwind.css -o ./styles.storybook.css",
+    "clean": "rimraf .turbo dist *.tsbuildinfo",
+    "cov": "vitest run --coverage",
+    "cov:w": "vitest --coverage",
+    "nuke": "rimraf node_modules",
+    "sb": "storybook dev -p 6206",
+    "test": "vitest run",
+    "test:types": "tsc --noEmit",
+    "w": "vitest"
+  }
+}

package/readme.md

@@ -0,0 +1,15 @@
+# @just-web/toolkits
+
+[@just-web/toolkits][@just-web/toolkits] is a toolkit for working with web technologies.
+
+## Install
+
+```sh
+npm install @just-web/toolkits
+
+yarn add @just-web/toolkits
+
+pnpm add @just-web/toolkits
+```
+
+[@just-web/toolkits]: https://github.com/justland/just-web-foundation/tree/main/libs/toolkits

package/src/_internal/utils/try-parse-json.ts

@@ -0,0 +1,8 @@
+export function tryParseJSON<T>(json: string | null | undefined): T | undefined {
+	if (!json) return undefined
+	try {
+		return JSON.parse(json)
+	} catch {
+		return undefined
+	}
+}

package/src/attributes/data-attribute.ts

@@ -0,0 +1,49 @@
+/**
+ * Well-known data attribute names used in web development.
+ * Includes testing, analytics, Radix/shadcn-style component state,
+ * positioning, and common UI/design-system attributes.
+ * The `data-${string}` tail allows any custom data attribute.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/data-* MDN: data-* (HTML)}
+ * @see {@link https://testing-library.com/docs/queries/bytestid/ Testing Library: ByTestId}
+ * @see {@link https://css-tricks.com/a-complete-guide-to-data-attributes/ CSS-Tricks: A Complete Guide to Data Attributes}
+ * @see {@link https://www.components.build/data-attributes Components.build: Data Attributes}
+ * @see {@link https://www.radix-ui.com/primitives/docs/guides/styling Radix UI: Styling (data attributes)}
+ */
+export type DataAttribute =
+	// Testing & analytics
+	| 'data-testid'
+	| 'data-metrics'
+	// Component state (Radix/shadcn pattern)
+	| 'data-state'
+	| 'data-orientation'
+	| 'data-side'
+	| 'data-align'
+	| 'data-placement'
+	// Common UI state
+	| 'data-loading'
+	| 'data-disabled'
+	| 'data-selected'
+	| 'data-checked'
+	| 'data-expanded'
+	| 'data-highlighted'
+	| 'data-active'
+	| 'data-open'
+	| 'data-pressed'
+	// Content / value
+	| 'data-value'
+	| 'data-id'
+	| 'data-name'
+	| 'data-type'
+	| 'data-label'
+	| 'data-key'
+	| 'data-index'
+	| 'data-position'
+	// Design system / theming
+	| 'data-variant'
+	| 'data-size'
+	| 'data-theme'
+	| 'data-color'
+	| 'data-intent'
+	// Custom
+	| (`data-${string}` & {})

package/src/attributes/get-attribute.ts

@@ -0,0 +1,20 @@
+/**
+ * Gets the value of an attribute from an element.
+ *
+ * @param qualifiedName - The name of the attribute to get
+ * @param element - The element to get the attribute from. Defaults to `document.documentElement`
+ * @returns The attribute value cast to type T, or null if the attribute doesn't exist
+ *
+ * @example
+ * ```ts
+ * // Get theme from document root
+ * const theme = getAttribute('data-theme')
+ *
+ * // Get data-testid from a specific element
+ * const testId = getAttribute('data-testid', element)
+ * ```
+ */
+export function getAttribute<T extends string>(qualifiedName: T, element?: Element | undefined) {
+	element = element ?? globalThis.document.documentElement
+	return element.getAttribute(qualifiedName)
+}

package/src/attributes/get-data-attribute.ts

@@ -0,0 +1,15 @@
+import type { DataAttribute } from './data-attribute.ts'
+import { getAttribute } from './get-attribute.ts'
+
+/**
+ * Gets the value of a data attribute from an element.
+ *
+ * @param qualifiedName - The name of the data attribute to get
+ * @param element - The element to get the data attribute from. Defaults to `document.documentElement`
+ * @returns The data attribute value, or null if the attribute doesn't exist
+ *
+ * @example
+ */
+export function getDataAttribute(qualifiedName: DataAttribute, element?: Element | undefined) {
+	return getAttribute(qualifiedName, element)
+}

package/src/attributes/observe-attribute.ts

@@ -0,0 +1,37 @@
+/**
+ * Observes attributes changes on an element and calls corresponding handlers.
+ *
+ * @param handlers - An object mapping attribute names to handler functions.
+ * @param element - The element to observe. Defaults to `document.documentElement`.
+ * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer.
+ *
+ * @example
+ * ```ts
+ * const observer = observeAttributes({
+ *   'data-theme': (attr, value) => console.log(`Theme changed to: ${value}`),
+ *   'class': (attr, value) => console.log(`class changed to: ${value}`)
+ * });
+ *
+ * // Later, to stop observing:
+ * observer.disconnect();
+ * ```
+ */
+export function observeAttributes<T extends string>(
+	handlers: Record<string, (value: T | null) => void>,
+	element?: Element | undefined
+) {
+	element = element ?? globalThis.document.documentElement
+	const observer = new MutationObserver((mutations) => {
+		for (const mutation of mutations) {
+			const attribute = mutation.attributeName
+			if (!attribute) continue
+			const value = element.getAttribute(attribute) as T | null
+			handlers[attribute]?.(value)
+		}
+	})
+	observer.observe(element, {
+		attributes: true,
+		attributeFilter: Object.keys(handlers)
+	})
+	return observer
+}

package/src/attributes/observe-data-attribute.ts

@@ -0,0 +1,29 @@
+import { observeAttributes } from './observe-attribute.ts'
+
+/**
+ * Observes changes to `data-*` attributes on an element and calls corresponding handlers.
+ *
+ * @param options - Configuration options
+ * @param options.handlers - An object mapping `data-*` attribute names to handler functions.
+ * @param options.element - The element to observe. Defaults to `document.documentElement`
+ * @returns {MutationObserver} The observer instance, which can be used to disconnect the observer
+ *
+ * @example
+ * ```ts
+ * const observer = observeDataAttributes({
+ *   handlers: {
+ *     'data-theme': (value) => console.log(`Theme changed to: ${value}`),
+ *     'data-mode': (value) => console.log(`Mode changed to: ${value}`)
+ *   }
+ * });
+ *
+ * // Later, to stop observing:
+ * observer.disconnect();
+ * ```
+ */
+export function observeDataAttributes<T extends string, K extends `data-${string}`>(
+	handlers: Record<K, (value: T | null) => void>,
+	element?: Element | undefined
+) {
+	return observeAttributes(handlers, element)
+}

package/src/children/just-children-fn-props.editor.default.tsx

@@ -0,0 +1,29 @@
+import type { JustChildrenFnProps, JustChildrenProps } from '@just-web/toolkits'
+import { resolveChildren } from '@just-web/toolkits'
+import { StoryCard } from '@repobuddy/storybook'
+
+type CardRenderProps = { label: string }
+
+function Card({ children, ...rest }: JustChildrenProps<CardRenderProps>) {
+	const renderProps: JustChildrenFnProps<CardRenderProps> = {
+		label: 'Item',
+		children: 'Default content'
+	}
+	return (
+		<div {...rest}>
+			<span className="font-medium">{renderProps.label}: </span>
+			{resolveChildren(renderProps, children)}
+		</div>
+	)
+}
+
+export default () => (
+	<StoryCard appearance="output">
+		<Card />
+		<Card>
+			{(props: JustChildrenFnProps<CardRenderProps>) =>
+				`${props.label} → ${String(props.children)}`
+			}
+		</Card>
+	</StoryCard>
+)

package/src/children/just-children-props.editor.default.tsx

@@ -0,0 +1,17 @@
+import type { JustChildrenProps } from '@just-web/toolkits'
+import { resolveChildren } from '@just-web/toolkits'
+import { StoryCard } from '@repobuddy/storybook'
+
+function Card({ children, ...rest }: JustChildrenProps) {
+	const renderProps = { children: 'Default content' as const }
+	return <div {...rest}>{resolveChildren(renderProps, children)}</div>
+}
+
+export default () => (
+	<StoryCard appearance="output">
+		<Card />
+		<Card>Override content</Card>
+		<Card>{(renderProps) => `Computed: ${String(renderProps.children)}`}</Card>
+		<Card>{() => undefined}</Card>
+	</StoryCard>
+)

package/src/children/just-children.editor.default.tsx

@@ -0,0 +1,11 @@
+import type { JustChildren } from '@just-web/toolkits'
+import { StoryCard } from '@repobuddy/storybook'
+
+const functionChildren: JustChildren<{ count?: number }> = (renderProps) =>
+	renderProps.count !== undefined ? `Count: ${renderProps.count}` : renderProps.children
+
+export default () => (
+	<StoryCard appearance="output">
+		<div>{functionChildren({ children: 'Default', count: 42 })}</div>
+	</StoryCard>
+)

package/src/children/just-children.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react'
+import type { AnyRecord } from 'type-plus'
+
+/**
+ * Props interface for components that accept a render-props-aware `children`.
+ *
+ * Use this when defining component props that support the same `children` contract as {@link JustChildren}:
+ * a static value, a resolver function that receives render props (including existing `children`), or `undefined`.
+ *
+ * @typeParam RenderProps - Record type for render props. When `children` is a function, it receives `RenderProps` merged with `{ children?: ReactNode }`.
+ */
+export interface JustChildrenProps<RenderProps extends AnyRecord = AnyRecord> {
+	children?: JustChildren<RenderProps> | undefined
+}
+
+/**
+ * A `children` type that can be static or computed from render props.
+ *
+ * - `ReactNode`: The value is used as the children (replaces existing `children` in render props when provided).
+ * - `undefined`: Uses the existing `children` from render props as-is.
+ * - `function`: Process the render props and return the desired `children`.
+ *
+ * @typeParam RenderProps - Record type for render props. Resolvers receive `RenderProps` merged with `{ children?: ReactNode }`.
+ */
+export type JustChildren<RenderProps extends AnyRecord = AnyRecord> =
+	| ((renderProps: JustChildrenFnProps<RenderProps>) => ReactNode | undefined)
+	| ReactNode
+	| undefined
+
+/**
+ * The props type for `JustChildren` resolver functions.
+ *
+ * @typeParam RenderProps - Record type for render props.
+ */
+export type JustChildrenFnProps<RenderProps extends AnyRecord = AnyRecord> = RenderProps & {
+	children?: ReactNode | undefined
+}

package/src/children/resolve-children.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react'
+import type { AnyRecord } from 'type-plus'
+import type { JustChildren, JustChildrenFnProps } from './just-children.ts'
+
+export function resolveChildren<RenderProps extends AnyRecord = AnyRecord>(
+	renderProps: JustChildrenFnProps<RenderProps>,
+	children?: JustChildren<RenderProps>
+): ReactNode | undefined {
+	if (typeof children === 'function') {
+		return children(renderProps)
+	}
+	if (children !== undefined) {
+		return children
+	}
+	return renderProps.children
+}

package/src/class-name/class-name-props.editor.tsx

@@ -0,0 +1,13 @@
+import type { ClassNameProps } from '@just-web/toolkits'
+import { StoryCard } from '@repobuddy/storybook'
+import type { PropsWithChildren } from 'react'
+
+export default () => (
+	<StoryCard appearance="output">
+		<MyComponent className="font-extrabold">Hello in extra bold</MyComponent>
+	</StoryCard>
+)
+
+function MyComponent({ className, children }: PropsWithChildren<ClassNameProps>) {
+	return <div className={className}>{children}</div>
+}

package/src/class-name/class-name-props.ts

@@ -0,0 +1,7 @@
+/**
+ * Interface for component props that include a className property.
+ * The className property accepts a string value for CSS class names.
+ */
+export interface ClassNameProps {
+	className?: string | undefined
+}

package/src/class-name/clsx.ts

@@ -0,0 +1,3 @@
+import clsx from 'clsx'
+
+export { clsx }

package/src/class-name/just-class-name-props.editor.default.tsx

@@ -0,0 +1,23 @@
+import type { JustClassNameProps } from '@just-web/toolkits'
+import { StoryCard } from '@repobuddy/storybook'
+import type { PropsWithChildren } from 'react'
+
+function Badge({ className, ...rest }: PropsWithChildren<JustClassNameProps>) {
+	const props = { className: 'bg-blue-400' }
+	return (
+		<div
+			{...rest}
+			className={
+				typeof className === 'function' ? className(props) : (className ?? props.className)
+			}
+		/>
+	)
+}
+
+export default () => (
+	<StoryCard appearance="output">
+		<Badge className="font-extrabold">Override</Badge>
+		<Badge className={(renderProps) => `${renderProps.className} font-extrabold`}>Amend</Badge>
+		<Badge className={() => undefined}>Unstyled</Badge>
+	</StoryCard>
+)

package/src/class-name/just-class-name-resolver-state.editor.default.tsx

@@ -0,0 +1,18 @@
+import type { JustClassNameFnProps } from '@just-web/toolkits'
+import { clsx } from '@just-web/toolkits'
+
+function textTheme(renderProps?: JustClassNameFnProps) {
+	return {
+		...renderProps,
+		className: clsx(renderProps?.className, 'text-emerald-800 dark:text-emerald-200')
+	}
+}
+
+export default () => {
+	const props = textTheme()
+	return (
+		<button type="button" {...props}>
+			Hello World
+		</button>
+	)
+}