@jini-ai/ui-kit 0.6.11 → 0.6.15-rc.1

package/CHANGELOG.md

@@ -1,5 +1,9 @@
 # @jini-ai/ui-kit
 
+## 0.6.13
+
+## 0.6.12
+
 ## 0.6.11
 
 ## 0.6.10

package/dist/kit-contract.d.ts

@@ -50,12 +50,12 @@ export declare const kitSpec: {
         readonly status: "implemented";
         readonly tier: "control";
         readonly since: "1.0.0";
-        readonly parts: readonly ["kit.text-field", "kit.field-label"];
+        readonly parts: readonly ["kit.text-field", "kit.field-label", "kit.secret-toggle"];
         readonly focusTarget: "input";
         readonly portal: "none";
         readonly safety: false;
-        readonly behaviors: readonly ["value-change", "labelled-control", "attrs-on-focus-target"];
-        readonly props: readonly ["attrs", "className", "label", "value", "disabled", "required", "placeholder", "type", "ref", "onValueChange"];
+        readonly behaviors: readonly ["value-change", "labelled-control", "attrs-on-focus-target", "secret-reveal"];
+        readonly props: readonly ["attrs", "className", "label", "value", "disabled", "required", "placeholder", "type", "ref", "onValueChange", "secretToggleLabels"];
         readonly events: readonly ["onValueChange"];
         readonly variants: readonly [];
         readonly states: readonly ["disabled"];

package/dist/kit-contract.js

@@ -3,7 +3,7 @@ export const KIT_CONTRACT = { id: '@jini-ai/ui-kit', version: '1.0.0' };
 export const kitSpec = {
     Button: { "status": "implemented", "tier": "control", "since": "1.0.0", "parts": ["kit.button"], "focusTarget": "button", "portal": "none", "safety": false, "behaviors": ["press", "disabled-blocks-press", "attrs-on-focus-target"], "props": ["attrs", "className", "children", "disabled", "pending", "variant", "type", "ref", "onPress"], "events": ["onPress"], "variants": ["primary", "secondary", "danger", "warning", "ghost"], "states": ["disabled", "pending"] },
     IconButton: { "status": "implemented", "tier": "control", "since": "1.0.0", "parts": ["kit.icon-button"], "focusTarget": "button", "portal": "none", "safety": false, "behaviors": ["accessible-label", "press", "attrs-on-focus-target"], "props": ["attrs", "className", "children", "disabled", "pending", "variant", "type", "ref", "onPress", "label"], "events": ["onPress"], "variants": ["primary", "secondary", "danger", "warning", "ghost"], "states": ["disabled", "pending"] },
-    TextField: { "status": "implemented", "tier": "control", "since": "1.0.0", "parts": ["kit.text-field", "kit.field-label"], "focusTarget": "input", "portal": "none", "safety": false, "behaviors": ["value-change", "labelled-control", "attrs-on-focus-target"], "props": ["attrs", "className", "label", "value", "disabled", "required", "placeholder", "type", "ref", "onValueChange"], "events": ["onValueChange"], "variants": [], "states": ["disabled"] },
+    TextField: { "status": "implemented", "tier": "control", "since": "1.0.0", "parts": ["kit.text-field", "kit.field-label", "kit.secret-toggle"], "focusTarget": "input", "portal": "none", "safety": false, "behaviors": ["value-change", "labelled-control", "attrs-on-focus-target", "secret-reveal"], "props": ["attrs", "className", "label", "value", "disabled", "required", "placeholder", "type", "ref", "onValueChange", "secretToggleLabels"], "events": ["onValueChange"], "variants": [], "states": ["disabled"] },
     TextArea: { "status": "implemented", "tier": "control", "since": "1.0.0", "parts": ["kit.text-area", "kit.field-label"], "focusTarget": "textarea", "portal": "none", "safety": false, "behaviors": ["value-change", "labelled-control", "attrs-on-focus-target"], "props": ["attrs", "className", "label", "value", "disabled", "required", "placeholder", "ref", "onValueChange", "rows"], "events": ["onValueChange"], "variants": [], "states": ["disabled"] },
     Select: { "status": "implemented", "tier": "control", "since": "1.0.0", "parts": ["kit.select", "kit.field-label"], "focusTarget": "select", "portal": "none", "safety": false, "behaviors": ["native-select", "value-change", "attrs-on-focus-target"], "props": ["attrs", "className", "label", "value", "disabled", "required", "ref", "onValueChange", "options"], "events": ["onValueChange"], "variants": [], "states": ["disabled"] },
     Checkbox: { "status": "implemented", "tier": "control", "since": "1.0.0", "parts": ["kit.checkbox"], "focusTarget": "input", "portal": "none", "safety": false, "behaviors": ["checked-change", "labelled-control", "attrs-on-focus-target"], "props": ["attrs", "className", "label", "checked", "disabled", "ref", "onCheckedChange"], "events": ["onCheckedChange"], "variants": [], "states": ["disabled"] },

package/dist/react/kit.d.ts

@@ -22,7 +22,7 @@ export declare function describeKit(required: {
     contract: string;
     coverage: {
         component: ImplementedComponentName;
-        parts: readonly ["kit.button"] | readonly ["kit.icon-button"] | readonly ["kit.text-field", "kit.field-label"] | readonly ["kit.text-area", "kit.field-label"] | readonly ["kit.select", "kit.field-label"] | readonly ["kit.checkbox"] | readonly ["kit.switch"] | readonly ["kit.dialog", "kit.dialog-title", "kit.dialog-close", "kit.overlay"] | readonly ["confirm.dialog", "confirm.title", "confirm.body", "confirm.actions", "confirm.cancel", "confirm.confirm"] | readonly ["kit.tabs", "kit.tab", "kit.tab-panel"] | readonly ["kit.menu-trigger", "kit.menu", "kit.menu-item"] | readonly ["kit.toast", "kit.toast-dismiss", "kit.toast-region"] | readonly ["kit.tooltip-trigger", "kit.tooltip"] | readonly ["kit.notice"] | readonly ["kit.spinner"] | readonly ["kit.badge"];
+        parts: readonly ["kit.button"] | readonly ["kit.icon-button"] | readonly ["kit.text-field", "kit.field-label", "kit.secret-toggle"] | readonly ["kit.text-area", "kit.field-label"] | readonly ["kit.select", "kit.field-label"] | readonly ["kit.checkbox"] | readonly ["kit.switch"] | readonly ["kit.dialog", "kit.dialog-title", "kit.dialog-close", "kit.overlay"] | readonly ["confirm.dialog", "confirm.title", "confirm.body", "confirm.actions", "confirm.cancel", "confirm.confirm"] | readonly ["kit.tabs", "kit.tab", "kit.tab-panel"] | readonly ["kit.menu-trigger", "kit.menu", "kit.menu-item"] | readonly ["kit.toast", "kit.toast-dismiss", "kit.toast-region"] | readonly ["kit.tooltip-trigger", "kit.tooltip"] | readonly ["kit.notice"] | readonly ["kit.spinner"] | readonly ["kit.badge"];
         source: "native" | "native-guard" | "override";
     }[];
     fallbacks: ImplementedComponentName[];

package/dist/react/native/Controls.hooks.d.ts

@@ -32,11 +32,21 @@ export declare function useNativeIconButton(required: IconButtonProps, _optional
     children: import("react").ReactNode;
 };
 export declare function useNativeTextField(required: TextFieldProps, _optional?: Record<string, never>): {
+    toggle: {
+        'data-jini-part': string;
+        className: string;
+        type: "button";
+        'aria-label': string;
+        disabled: boolean | undefined;
+        onClick: () => void;
+        children: import("react").ReactSVGElement;
+    } | null;
     props: {
         id: string;
         ref: import("react").Ref<HTMLInputElement> | undefined;
-        type: "number" | "text" | "password" | "email" | "search" | "url" | "tel";
+        type: string;
         value: string;
+        spellCheck: boolean | undefined;
         placeholder: string | undefined;
         onChange: (event: ChangeEvent<HTMLInputElement>) => void;
         className: string;

package/dist/react/native/Controls.hooks.js

@@ -1,4 +1,4 @@
-import { createElement, useId } from 'react';
+import { createElement, useId, useState } from 'react';
 export function useNativeButton(required, _optional = {}) {
     return { children: required.children, props: { 'data-jini-part': 'kit.button', ref: required.ref, className: `jini-btn jini-btn-${required.variant ?? 'primary'} ${required.className ?? ''}`.trim(),
             type: required.type ?? 'button', disabled: !!required.disabled || !!required.pending,
@@ -18,9 +18,41 @@ function useField(required) {
     return { id: required.attrs?.id ?? generated, label: required.label, labelAttrs: { 'data-jini-part': 'kit.field-label', className: 'jini-field' },
         props: { ...required.attrs, className: `jini-input ${required.className ?? ''}`.trim(), disabled: required.disabled, required: required.required } };
 }
+/** Eye / eye-off glyphs, decorative: the button's aria-label carries the meaning. */
+const EYE_PATHS = ['M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z', 'M12 9a3 3 0 1 0 0 6 3 3 0 1 0 0-6z'];
+const EYE_OFF_PATHS = ['M9.9 4.24A9.1 9.1 0 0 1 12 4c6.5 0 10 7 10 7a17.8 17.8 0 0 1-2.16 3.19M6.6 6.6C3.9 8.4 2 12 2 12s3.5 7 10 7a9.7 9.7 0 0 0 5.4-1.6M14.12 14.12a3 3 0 1 1-4.24-4.24', 'M2 2l20 20'];
+function eyeIcon(required, _optional = {}) {
+    const paths = (required.revealed ? EYE_OFF_PATHS : EYE_PATHS).map(d => createElement('path', { key: d, d }));
+    return createElement('svg', { 'aria-hidden': true, focusable: 'false', viewBox: '0 0 24 24', width: 18, height: 18, fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' }, paths);
+}
+/**
+ * The show/hide state of a password field. Starts hidden, and re-hides when the value is cleared
+ * — the usual sign a save succeeded — so a revealed secret never outlives its submit.
+ * @complexity O(1).
+ */
+function useSecretReveal(required, _optional = {}) {
+    const [revealed, setRevealed] = useState(false);
+    const [lastValue, setLastValue] = useState(required.value);
+    // Re-hide on the transition to empty only: an empty field may be revealed before typing.
+    if (required.value !== lastValue) {
+        setLastValue(required.value);
+        if (required.value === '')
+            setRevealed(false);
+    }
+    if (required.type !== 'password')
+        return { type: required.type ?? 'text', toggle: null };
+    // The name flips Show/Hide; no `aria-pressed` on top, or screen readers hear the state twice.
+    const labels = required.secretToggleLabels ?? { show: `Show ${required.label}`, hide: `Hide ${required.label}` };
+    return { type: revealed ? 'text' : 'password', toggle: { 'data-jini-part': 'kit.secret-toggle', className: 'jini-secret-toggle', type: 'button',
+            'aria-label': revealed ? labels.hide : labels.show, disabled: required.disabled,
+            onClick: () => setRevealed(shown => !shown), children: eyeIcon({ revealed }) } };
+}
 export function useNativeTextField(required, _optional = {}) {
     const vm = useField(required);
-    return { ...vm, props: { ...vm.props, id: vm.id, ref: required.ref, type: required.type ?? 'text', value: required.value,
+    const reveal = useSecretReveal(required);
+    return { ...vm, toggle: reveal.toggle, props: { ...vm.props, id: vm.id, ref: required.ref, type: reveal.type, value: required.value,
+            // Off on a secret: once revealed as type="text", enhanced spellcheck would send it to a cloud service.
+            spellCheck: reveal.toggle ? false : undefined,
             placeholder: required.placeholder, onChange: (event) => {
                 if (!required.disabled)
                     required.onValueChange({ value: event.currentTarget.value });

package/dist/react/native/Controls.js

@@ -12,7 +12,10 @@ export const NativeIconButton = forwardRef(function NativeIconButton(props, ref)
 });
 export const NativeTextField = forwardRef(function NativeTextField(props, ref) {
     const vm = useNativeTextField({ ...props, ref });
-    return _jsxs("label", { htmlFor: vm.id, ...vm.labelAttrs, children: [_jsx("span", { className: "jini-field-label", children: vm.label }), _jsx("input", { ...vm.props })] });
+    const field = _jsxs("label", { htmlFor: vm.id, ...vm.labelAttrs, children: [_jsx("span", { className: "jini-field-label", children: vm.label }), _jsx("input", { ...vm.props })] });
+    // The eye toggle sits OUTSIDE the label (its name would otherwise join the input's accessible name),
+    // in one wrapper with it so a host can pin it inside the input's right edge.
+    return vm.toggle ? _jsxs("span", { className: "jini-secret", children: [field, _jsx("button", { ...vm.toggle })] }) : field;
 });
 export const NativeTextArea = forwardRef(function NativeTextArea(props, ref) {
     const vm = useNativeTextArea({ ...props, ref });

package/dist/react/types.d.ts

@@ -33,8 +33,13 @@ export interface TextFieldProps extends BaseProps {
     readonly placeholder?: string;
     readonly type?: 'text' | 'password' | 'email' | 'search' | 'url' | 'tel' | 'number';
     readonly ref?: Ref<HTMLInputElement>;
+    /** `type: 'password'` only: the eye toggle's full accessible names. Default "Show <label>" / "Hide <label>". */
+    readonly secretToggleLabels?: {
+        readonly show: string;
+        readonly hide: string;
+    };
 }
-export interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'ref'> {
+export interface TextAreaProps extends Omit<TextFieldProps, 'type' | 'ref' | 'secretToggleLabels'> {
     readonly rows?: number;
     readonly ref?: Ref<HTMLTextAreaElement>;
 }
@@ -43,7 +48,7 @@ export interface SelectOption {
     readonly label: string;
     readonly disabled?: boolean;
 }
-export interface SelectProps extends Omit<TextFieldProps, 'type' | 'placeholder' | 'ref'> {
+export interface SelectProps extends Omit<TextFieldProps, 'type' | 'placeholder' | 'ref' | 'secretToggleLabels'> {
     readonly options: readonly SelectOption[];
     readonly ref?: Ref<HTMLSelectElement>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jini-ai/ui-kit",
-  "version": "0.6.11",
+  "version": "0.6.15-rc.1",
   "description": "Framework-free UI contract, injected React facades and native defaults.",
   "license": "Apache-2.0",
   "repository": {