adjacent-ui 0.1.0

package/dist/text-field/text-field.css

@@ -0,0 +1,154 @@
+@layer components {
+  .adj-text-field {
+    display: grid;
+    gap: 0.375rem;
+    width: 100%;
+    min-width: 5.5rem;
+    color: var(--adj-text-field-color, var(--foreground, CanvasText));
+  }
+
+  .adj-text-field__container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    min-height: var(--adj-text-field-height, var(--adj-control-height, 2.5rem));
+    color: inherit;
+    background: var(--adj-text-field-background, transparent);
+    border: 1px solid var(--adj-text-field-outline, var(--border, color-mix(in srgb, currentColor 38%, transparent)));
+    border-radius: var(--adj-text-field-radius, var(--radius, 0.625rem));
+    transition: border-color 140ms ease, background-color 140ms ease;
+  }
+
+  .adj-text-field[data-variant="filled"] .adj-text-field__container {
+    background: var(--adj-text-field-filled-background, var(--muted, color-mix(in srgb, currentColor 8%, Canvas)));
+    border: 0;
+    border-radius: var(--adj-text-field-radius, var(--radius, 0.625rem));
+  }
+
+  .adj-text-field__container:focus-within {
+    border-color: var(--adj-text-field-focus-color, var(--primary, currentColor));
+  }
+
+  .adj-text-field[data-variant="filled"] .adj-text-field__container:focus-within {
+    border-width: 0;
+    outline: 1px solid var(--adj-text-field-focus-color, var(--primary, currentColor));
+    outline-offset: -1px;
+  }
+
+  .adj-text-field__input-area {
+    position: relative;
+    display: flex;
+    gap: var(--adj-text-field-affix-gap, 0.5rem);
+    align-items: center;
+    min-width: 0;
+    padding-inline: 0.75rem;
+    flex: 1 1 auto;
+  }
+
+  .adj-text-field__input {
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    height: calc(var(--adj-text-field-height, var(--adj-control-height, 2.5rem)) - 2px);
+    padding: 0;
+    color: inherit;
+    font: inherit;
+    font-size: 1rem;
+    line-height: calc(var(--adj-text-field-height, var(--adj-control-height, 2.5rem)) - 2px);
+    caret-color: var(--adj-text-field-caret-color, var(--primary, currentColor));
+    background: transparent;
+    border: 0;
+    outline: 0;
+  }
+
+  .adj-text-field__input::placeholder {
+    color: var(--adj-text-field-placeholder-color, var(--muted-foreground, currentColor));
+    opacity: 1;
+  }
+
+  .adj-text-field__label {
+    min-width: 0;
+    overflow: hidden;
+    color: var(--adj-text-field-label-color, var(--muted-foreground, currentColor));
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .adj-text-field__leading-icon,
+  .adj-text-field__trailing-icon,
+  .adj-text-field__trailing-action {
+    display: grid;
+    width: 2.5rem;
+    height: 2.5rem;
+    flex: none;
+    color: var(--adj-text-field-icon-color, var(--muted-foreground, currentColor));
+    place-items: center;
+  }
+
+  .adj-text-field__leading-icon > svg,
+  .adj-text-field__trailing-icon > svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .adj-text-field__trailing-action > button {
+    max-width: 2.5rem;
+    max-height: 2.5rem;
+  }
+
+  .adj-text-field__prefix,
+  .adj-text-field__suffix {
+    display: inline-flex;
+    align-items: center;
+    align-self: stretch;
+    flex: none;
+    color: var(--adj-text-field-affix-color, var(--muted-foreground, currentColor));
+  }
+
+  .adj-text-field__supporting {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    gap: 1rem;
+    min-height: 1.25rem;
+    padding: 0.25rem 1rem 0;
+    color: var(--adj-text-field-supporting-color, var(--muted-foreground, currentColor));
+  }
+
+  .adj-text-field__supporting-text {
+    min-width: 0;
+  }
+
+  .adj-text-field__counter {
+    white-space: nowrap;
+  }
+
+  .adj-text-field[data-error="true"] .adj-text-field__container {
+    border-color: var(--adj-text-field-error-color, var(--destructive, #b3261e));
+  }
+
+  .adj-text-field[data-error="true"] .adj-text-field__label,
+  .adj-text-field[data-error="true"] .adj-text-field__supporting,
+  .adj-text-field[data-error="true"] .adj-text-field__trailing-icon {
+    color: var(--adj-text-field-error-color, var(--destructive, #b3261e));
+  }
+
+  .adj-text-field[data-error="true"] .adj-text-field__input {
+    caret-color: var(--adj-text-field-error-color, var(--destructive, #b3261e));
+  }
+
+  .adj-text-field[data-disabled="true"] {
+    cursor: default;
+    opacity: 0.38;
+  }
+
+  .adj-text-field[data-read-only="true"] .adj-text-field__container {
+    background: transparent;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .adj-text-field__container {
+      transition: none;
+    }
+  }
+}

package/dist/text-field/text-field.d.ts

@@ -0,0 +1,18 @@
+import { type InputHTMLAttributes, type ReactNode } from "react";
+import "./text-field.css";
+export type TextFieldVariant = "filled" | "outlined";
+export interface TextFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "prefix" | "size"> {
+    readonly error?: ReactNode;
+    readonly label: ReactNode;
+    readonly leadingIcon?: ReactNode;
+    readonly prefixText?: ReactNode;
+    readonly showCounter?: boolean;
+    readonly suffixText?: ReactNode;
+    readonly supportingText?: ReactNode;
+    readonly trailingAction?: ReactNode;
+    readonly trailingIcon?: ReactNode;
+    readonly trailingIconLabel?: string;
+    readonly variant?: TextFieldVariant;
+}
+export declare function TextField({ "aria-describedby": ariaDescribedBy, className, defaultValue, disabled, error, id, label, leadingIcon, maxLength, onChange, prefixText, placeholder, readOnly, required, showCounter, suffixText, supportingText, trailingAction, trailingIcon, trailingIconLabel, value, variant, ...props }: TextFieldProps): import("react").JSX.Element;
+//# sourceMappingURL=text-field.d.ts.map

package/dist/text-field/text-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.d.ts","sourceRoot":"","sources":["../../src/text-field/text-field.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIL,KAAK,mBAAmB,EACxB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAErD,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACtE,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,KAAK,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,WAAW,CAAC,EAAE,SAAS,CAAC;IACjC,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC;IAChC,QAAQ,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC;IAChC,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACpC,QAAQ,CAAC,cAAc,CAAC,EAAE,SAAS,CAAC;IACpC,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,CAAC;IAClC,QAAQ,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IACpC,QAAQ,CAAC,OAAO,CAAC,EAAE,gBAAgB,CAAC;CACrC;AAOD,wBAAgB,SAAS,CAAC,EACxB,kBAAkB,EAAE,eAAe,EACnC,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,KAAK,EACL,EAAE,EACF,KAAK,EACL,WAAW,EACX,SAAS,EACT,QAAQ,EACR,UAAU,EACV,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,WAAmB,EACnB,UAAU,EACV,cAAc,EACd,cAAc,EACd,YAAY,EACZ,iBAAiB,EACjB,KAAK,EACL,OAAoB,EACpB,GAAG,KAAK,EACT,EAAE,cAAc,+BAgHhB"}

package/dist/text-field/text-field.js

@@ -0,0 +1,32 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useState, } from "react";
+import { Text } from "../text/text.js";
+import "./text-field.css";
+function valueLength(value) {
+    if (value === undefined || value === null)
+        return 0;
+    return String(value).length;
+}
+export function TextField({ "aria-describedby": ariaDescribedBy, className, defaultValue, disabled, error, id, label, leadingIcon, maxLength, onChange, prefixText, placeholder, readOnly, required, showCounter = false, suffixText, supportingText, trailingAction, trailingIcon, trailingIconLabel, value, variant = "outlined", ...props }) {
+    const generatedId = useId();
+    const inputId = id ?? `adj-text-field-${generatedId}`;
+    const supportingId = `${inputId}-supporting`;
+    const [uncontrolledLength, setUncontrolledLength] = useState(valueLength(defaultValue));
+    const controlled = value !== undefined;
+    const currentLength = controlled ? valueLength(value) : uncontrolledLength;
+    const hasError = error !== undefined && error !== null && error !== false;
+    const supportingContent = hasError ? error : supportingText;
+    const hasSupportingRow = supportingContent !== undefined || showCounter;
+    const describedBy = [ariaDescribedBy, hasSupportingRow ? supportingId : undefined]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    const classes = ["adj-text-field", className].filter(Boolean).join(" ");
+    function handleChange(event) {
+        if (!controlled)
+            setUncontrolledLength(event.currentTarget.value.length);
+        onChange?.(event);
+    }
+    return (_jsxs("div", { className: classes, "data-disabled": disabled ? "true" : "false", "data-error": hasError ? "true" : "false", "data-read-only": readOnly ? "true" : "false", "data-variant": variant, children: [_jsxs(Text, { as: "label", className: "adj-text-field__label", htmlFor: inputId, variant: "label-large", children: [label, required ? _jsx("span", { "aria-hidden": "true", children: " *" }) : null] }), _jsxs("div", { className: "adj-text-field__container", children: [leadingIcon !== undefined ? (_jsx("span", { "aria-hidden": "true", className: "adj-text-field__leading-icon", children: leadingIcon })) : null, _jsxs("div", { className: "adj-text-field__input-area", children: [prefixText !== undefined ? (_jsx(Text, { className: "adj-text-field__prefix", variant: "body-large", children: prefixText })) : null, _jsx("input", { "aria-describedby": describedBy, "aria-invalid": hasError || undefined, className: "adj-text-field__input", defaultValue: defaultValue, disabled: disabled, id: inputId, maxLength: maxLength, onChange: handleChange, placeholder: placeholder, readOnly: readOnly, required: required, value: value, ...props }), suffixText !== undefined ? (_jsx(Text, { className: "adj-text-field__suffix", variant: "body-large", children: suffixText })) : null] }), trailingAction !== undefined ? (_jsx("span", { className: "adj-text-field__trailing-action", children: trailingAction })) : trailingIcon !== undefined ? (_jsx("span", { "aria-label": trailingIconLabel, "aria-hidden": trailingIconLabel === undefined ? "true" : undefined, className: "adj-text-field__trailing-icon", role: trailingIconLabel === undefined ? undefined : "img", children: trailingIcon })) : null] }), hasSupportingRow ? (_jsxs("div", { className: "adj-text-field__supporting", id: supportingId, children: [_jsx(Text, { "aria-live": hasError ? "polite" : undefined, className: "adj-text-field__supporting-text", variant: "body-small", children: supportingContent }), showCounter ? (_jsxs(Text, { className: "adj-text-field__counter", variant: "body-small", children: [currentLength, maxLength === undefined ? null : `/${maxLength}`] })) : null] })) : null] }));
+}
+//# sourceMappingURL=text-field.js.map

package/dist/text-field/text-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text-field.js","sourceRoot":"","sources":["../../src/text-field/text-field.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "adjacent-ui",
+  "version": "0.1.0",
+  "description": "Mobile-first components, navigation, and measurement hooks that theme from your own design tokens.",
+  "keywords": [
+    "ui",
+    "components",
+    "mobile-first",
+    "react",
+    "adjacent"
+  ],
+  "license": "MIT",
+  "author": "Eric Kweyunga",
+  "homepage": "https://github.com/erickweyunga/adjacent-framework/blob/main/docs/ui.md",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/erickweyunga/adjacent-framework.git",
+    "directory": "packages/adjacent-ui"
+  },
+  "bugs": {
+    "url": "https://github.com/erickweyunga/adjacent-framework/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "./dist/**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./navigation": {
+      "types": "./dist/navigation/index.d.ts",
+      "import": "./dist/navigation/index.js",
+      "default": "./dist/navigation/index.js"
+    },
+    "./page.css": "./dist/page/page.css",
+    "./*.css": "./dist/*.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.9.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json && node scripts/copy-css.mjs",
+    "test": "bun test",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.7.0"
+  },
+  "peerDependencies": {
+    "next": ">=16",
+    "react": ">=19"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.3.13",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "next": "16.3.2",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "typescript": "^5"
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts"
+}