@dxos/react-ui 0.1.2 → 0.1.3

package/dist/src/components/Input/Input.stories.js

@@ -6,7 +6,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InputWithValidationAndDescription = exports.InputWithErrorAndDescription = exports.InputWithDescription = exports.LabelVisuallyHidden = exports.Disabled = exports.Default = void 0;
+exports.PinInput = exports.InputWithValidationAndDescription = exports.InputWithErrorAndDescription = exports.InputWithDescription = exports.LabelVisuallyHidden = exports.Disabled = exports.Default = void 0;
 require("@dxosTheme");
 const react_1 = __importDefault(require("react"));
 const testing_1 = require("../../testing");
@@ -19,6 +19,10 @@ exports.default = {
         validationValence: {
             control: 'select',
             options: ['success', 'info', 'warning', 'error']
+        },
+        size: {
+            control: 'select',
+            options: ['md', 'lg', 'pin']
         }
     }
 };
@@ -34,7 +38,8 @@ exports.Default.args = {
     labelVisuallyHidden: false,
     descriptionVisuallyHidden: false,
     validationMessage: '',
-    validationValence: undefined
+    validationValence: undefined,
+    length: 6
 };
 const Disabled = () => (react_1.default.createElement(Template, { ...{
         label: 'Disabled',
@@ -70,4 +75,12 @@ const InputWithValidationAndDescription = () => (react_1.default.createElement(T
         validationMessage: 'This validation message is really part of the description.'
     } }));
 exports.InputWithValidationAndDescription = InputWithValidationAndDescription;
+const PinInput = () => (react_1.default.createElement(Template, { ...{
+        label: 'This input is a PIN-style input',
+        size: 'pin',
+        length: 6,
+        description: 'Type in secret you received',
+        placeholder: '••••••'
+    } }));
+exports.PinInput = PinInput;
 //# sourceMappingURL=Input.stories.js.map

package/dist/src/components/Input/Input.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,sBAAoB;AACpB,kDAA0B;AAE1B,2CAAqD;AACrD,mCAA4C;AAE5C,kBAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,aAAK;IAChB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,iBAAiB,EAAE;YACjB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC;SACjD;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,KAAiB,EAAE,EAAE;IACrC,OAAO,8BAAC,aAAK,OAAK,KAAK,GAAI,CAAC;AAC9B,CAAC,CAAC;AAEW,QAAA,OAAO,GAAG,IAAA,8BAAoB,EAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;AACrE,eAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,SAAS;IACtB,mBAAmB,EAAE,KAAK;IAC1B,yBAAyB,EAAE,KAAK;IAChC,iBAAiB,EAAE,EAAE;IACrB,iBAAiB,EAAE,SAAS;CAC7B,CAAC;AAEK,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CAC5B,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,UAAU;QACjB,WAAW,EAAE,0BAA0B;QACvC,QAAQ,EAAE,IAAI;KACf,GACD,CACH,CAAC;AARW,QAAA,QAAQ,YAQnB;AAEK,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CACvC,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,iCAAiC;QACxC,mBAAmB,EAAE,IAAI;QACzB,WAAW,EAAE,oEAAoE;KAClF,GACD,CACH,CAAC;AARW,QAAA,mBAAmB,uBAQ9B;AAEK,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACxC,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,0CAA0C;QACvD,WAAW,EAAE,2DAA2D;KACzE,GACD,CACH,CAAC;AARW,QAAA,oBAAoB,wBAQ/B;AAEK,MAAM,4BAA4B,GAAG,GAAG,EAAE,CAAC,CAChD,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,yBAAyB;QAChC,WAAW,EAAE,sEAAsE;QACnF,WAAW,EAAE,sEAAsE;QACnF,iBAAiB,EAAE,OAAO;QAC1B,iBAAiB,EAAE,yBAAyB;KAC7C,GACD,CACH,CAAC;AAVW,QAAA,4BAA4B,gCAUvC;AAEK,MAAM,iCAAiC,GAAG,GAAG,EAAE,CAAC,CACrD,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,yCAAyC;QAChD,WAAW,EAAE,sDAAsD;QACnE,WAAW,EAAE,4BAA4B;QACzC,iBAAiB,EAAE,SAAS;QAC5B,iBAAiB,EAAE,4DAA4D;KAChF,GACD,CACH,CAAC;AAVW,QAAA,iCAAiC,qCAU5C"}
+{"version":3,"file":"Input.stories.js","sourceRoot":"","sources":["../../../../src/components/Input/Input.stories.tsx"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,sBAAoB;AACpB,kDAA0B;AAE1B,2CAAqD;AACrD,mCAA4C;AAE5C,kBAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,aAAK;IAChB,QAAQ,EAAE;QACR,WAAW,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAChC,iBAAiB,EAAE;YACjB,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC;SACjD;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC;SAC7B;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,KAAiB,EAAE,EAAE;IACrC,OAAO,8BAAC,aAAK,OAAK,KAAK,GAAI,CAAC;AAC9B,CAAC,CAAC;AAEW,QAAA,OAAO,GAAG,IAAA,8BAAoB,EAAC,QAAQ,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;AACrE,eAAO,CAAC,IAAI,GAAG;IACb,KAAK,EAAE,OAAO;IACd,WAAW,EAAE,kBAAkB;IAC/B,QAAQ,EAAE,KAAK;IACf,WAAW,EAAE,SAAS;IACtB,mBAAmB,EAAE,KAAK;IAC1B,yBAAyB,EAAE,KAAK;IAChC,iBAAiB,EAAE,EAAE;IACrB,iBAAiB,EAAE,SAAS;IAC5B,MAAM,EAAE,CAAC;CACV,CAAC;AAEK,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CAC5B,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,UAAU;QACjB,WAAW,EAAE,0BAA0B;QACvC,QAAQ,EAAE,IAAI;KACf,GACD,CACH,CAAC;AARW,QAAA,QAAQ,YAQnB;AAEK,MAAM,mBAAmB,GAAG,GAAG,EAAE,CAAC,CACvC,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,iCAAiC;QACxC,mBAAmB,EAAE,IAAI;QACzB,WAAW,EAAE,oEAAoE;KAClF,GACD,CACH,CAAC;AARW,QAAA,mBAAmB,uBAQ9B;AAEK,MAAM,oBAAoB,GAAG,GAAG,EAAE,CAAC,CACxC,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,iBAAiB;QACxB,WAAW,EAAE,0CAA0C;QACvD,WAAW,EAAE,2DAA2D;KACzE,GACD,CACH,CAAC;AARW,QAAA,oBAAoB,wBAQ/B;AAEK,MAAM,4BAA4B,GAAG,GAAG,EAAE,CAAC,CAChD,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,yBAAyB;QAChC,WAAW,EAAE,sEAAsE;QACnF,WAAW,EAAE,sEAAsE;QACnF,iBAAiB,EAAE,OAAO;QAC1B,iBAAiB,EAAE,yBAAyB;KAC7C,GACD,CACH,CAAC;AAVW,QAAA,4BAA4B,gCAUvC;AAEK,MAAM,iCAAiC,GAAG,GAAG,EAAE,CAAC,CACrD,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,yCAAyC;QAChD,WAAW,EAAE,sDAAsD;QACnE,WAAW,EAAE,4BAA4B;QACzC,iBAAiB,EAAE,SAAS;QAC5B,iBAAiB,EAAE,4DAA4D;KAChF,GACD,CACH,CAAC;AAVW,QAAA,iCAAiC,qCAU5C;AAEK,MAAM,QAAQ,GAAG,GAAG,EAAE,CAAC,CAC5B,8BAAC,QAAQ,OACH;QACF,KAAK,EAAE,iCAAiC;QACxC,IAAI,EAAE,KAAK;QACX,MAAM,EAAE,CAAC;QACT,WAAW,EAAE,6BAA6B;QAC1C,WAAW,EAAE,QAAQ;KACtB,GACD,CACH,CAAC;AAVW,QAAA,QAAQ,YAUnB"}

package/dist/src/components/Input/InputProps.d.ts

@@ -0,0 +1,17 @@
+import { ComponentProps, ReactNode } from 'react';
+import { MessageValence } from '../../props';
+export declare type InputSize = 'md' | 'lg' | 'pin';
+export interface InputProps extends Omit<ComponentProps<'input'>, 'value' | 'onChange' | 'size' | 'ref'> {
+    label: ReactNode;
+    labelVisuallyHidden?: boolean;
+    description?: ReactNode;
+    descriptionVisuallyHidden?: boolean;
+    initialValue?: string;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    size?: InputSize;
+    validationMessage?: ReactNode;
+    validationValence?: MessageValence;
+    length?: number;
+}
+//# sourceMappingURL=InputProps.d.ts.map

package/dist/src/components/Input/InputProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputProps.d.ts","sourceRoot":"","sources":["../../../../src/components/Input/InputProps.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAE7C,oBAAY,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAE5C,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,OAAO,GAAG,UAAU,GAAG,MAAM,GAAG,KAAK,CAAC;IACtG,KAAK,EAAE,SAAS,CAAC;IACjB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,iBAAiB,CAAC,EAAE,SAAS,CAAC;IAC9B,iBAAiB,CAAC,EAAE,cAAc,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB"}

package/dist/src/components/Input/InputProps.js

@@ -0,0 +1,6 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=InputProps.js.map

package/dist/src/components/Input/InputProps.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InputProps.js","sourceRoot":"","sources":["../../../../src/components/Input/InputProps.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE"}

package/dist/src/hooks/index.d.ts

@@ -1,2 +1,4 @@
 export * from './useId';
+export * from './useForwardedRef';
+export * from './useIsFocused';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,SAAS,CAAC;AACxB,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC"}

package/dist/src/hooks/index.js

@@ -18,4 +18,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useId"), exports);
+__exportStar(require("./useForwardedRef"), exports);
+__exportStar(require("./useIsFocused"), exports);
 //# sourceMappingURL=index.js.map

package/dist/src/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;AAEF,0CAAwB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;AAEF,0CAAwB;AACxB,oDAAkC;AAClC,iDAA+B"}

package/dist/src/hooks/useForwardedRef.d.ts

@@ -0,0 +1,2 @@
+export declare const useForwardedRef: <T>(ref: import("react").ForwardedRef<T>) => import("react").RefObject<T>;
+//# sourceMappingURL=useForwardedRef.d.ts.map

package/dist/src/hooks/useForwardedRef.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForwardedRef.d.ts","sourceRoot":"","sources":["../../../src/hooks/useForwardedRef.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,eAAe,2EAe3B,CAAC"}

package/dist/src/hooks/useForwardedRef.js

@@ -0,0 +1,24 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useForwardedRef = void 0;
+const react_1 = require("react");
+const useForwardedRef = (ref) => {
+    const innerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (!ref) {
+            return;
+        }
+        if (typeof ref === 'function') {
+            ref(innerRef.current);
+        }
+        else {
+            ref.current = innerRef.current;
+        }
+    });
+    return innerRef;
+};
+exports.useForwardedRef = useForwardedRef;
+//# sourceMappingURL=useForwardedRef.js.map

package/dist/src/hooks/useForwardedRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForwardedRef.js","sourceRoot":"","sources":["../../../src/hooks/useForwardedRef.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEF,iCAA0C;AAEnC,MAAM,eAAe,GAAG,CAAI,GAA0B,EAAE,EAAE;IAC/D,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAI,IAAI,CAAC,CAAC;IAEjC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG,EAAE;YACR,OAAO;SACR;QACD,IAAI,OAAO,GAAG,KAAK,UAAU,EAAE;YAC7B,GAAG,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;SACvB;aAAM;YACL,GAAG,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAC;SAChC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,QAAQ,CAAC;AAClB,CAAC,CAAC;AAfW,QAAA,eAAe,mBAe1B"}

package/dist/src/hooks/useIsFocused.d.ts

@@ -0,0 +1,3 @@
+import { RefObject } from 'react';
+export declare const useIsFocused: (inputRef: RefObject<HTMLInputElement>) => boolean | undefined;
+//# sourceMappingURL=useIsFocused.d.ts.map

package/dist/src/hooks/useIsFocused.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsFocused.d.ts","sourceRoot":"","sources":["../../../src/hooks/useIsFocused.ts"],"names":[],"mappings":"AAOA,OAAO,EAA+B,SAAS,EAAE,MAAM,OAAO,CAAC;AAE/D,eAAO,MAAM,YAAY,aAAc,UAAU,gBAAgB,CAAC,wBA4BjE,CAAC"}

package/dist/src/hooks/useIsFocused.js

@@ -0,0 +1,34 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsFocused = void 0;
+// Based upon the useIsFocused hook which is part of the `rci` project:
+/// https://github.com/leonardodino/rci/blob/main/packages/use-is-focused
+const react_1 = require("react");
+const useIsFocused = (inputRef) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(undefined);
+    const isFocusedRef = (0, react_1.useRef)(isFocused);
+    isFocusedRef.current = isFocused;
+    (0, react_1.useEffect)(() => {
+        const input = inputRef.current;
+        if (!input) {
+            return;
+        }
+        const onFocus = () => setIsFocused(true);
+        const onBlur = () => setIsFocused(false);
+        input.addEventListener('focus', onFocus);
+        input.addEventListener('blur', onBlur);
+        if (isFocusedRef.current === undefined) {
+            setIsFocused(document.activeElement === input);
+        }
+        return () => {
+            input.removeEventListener('focus', onFocus);
+            input.removeEventListener('blur', onBlur);
+        };
+    }, [inputRef, setIsFocused]);
+    return isFocused;
+};
+exports.useIsFocused = useIsFocused;
+//# sourceMappingURL=useIsFocused.js.map

package/dist/src/hooks/useIsFocused.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsFocused.js","sourceRoot":"","sources":["../../../src/hooks/useIsFocused.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEF,uEAAuE;AACvE,yEAAyE;AAEzE,iCAA+D;AAExD,MAAM,YAAY,GAAG,CAAC,QAAqC,EAAE,EAAE;IACpE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAsB,SAAS,CAAC,CAAC;IAC3E,MAAM,YAAY,GAAG,IAAA,cAAM,EAAsB,SAAS,CAAC,CAAC;IAE5D,YAAY,CAAC,OAAO,GAAG,SAAS,CAAC;IAEjC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO,CAAC;QAC/B,IAAI,CAAC,KAAK,EAAE;YACV,OAAO;SACR;QAED,MAAM,OAAO,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;QACzC,MAAM,MAAM,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QACzC,KAAK,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QACzC,KAAK,CAAC,gBAAgB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAEvC,IAAI,YAAY,CAAC,OAAO,KAAK,SAAS,EAAE;YACtC,YAAY,CAAC,QAAQ,CAAC,aAAa,KAAK,KAAK,CAAC,CAAC;SAChD;QAED,OAAO,GAAG,EAAE;YACV,KAAK,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YAC5C,KAAK,CAAC,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QAC5C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC;IAE7B,OAAO,SAAS,CAAC;AACnB,CAAC,CAAC;AA5BW,QAAA,YAAY,gBA4BvB"}

package/dist/src/plugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/plugin.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAE9B,MAAM,WAAW,yBAAyB;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,eAAO,MAAM,WAAW,YAAa,yBAAyB,WAyP7D,CAAC"}
+{"version":3,"file":"plugin.d.ts","sourceRoot":"","sources":["../../src/plugin.ts"],"names":[],"mappings":"AAYA,OAAO,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAE9B,MAAM,WAAW,yBAAyB;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB;AAED,eAAO,MAAM,WAAW,YAAa,yBAAyB,WAiQ7D,CAAC"}

package/dist/src/plugin.js

@@ -218,6 +218,12 @@ const themePlugin = (options) => {
                                                 '100%': {
                                                     transform: 'translateX(calc(100% + 1rem))'
                                                 }
+                                            },
+                                            // Shimmer
+                                            'shimmer-loop': {
+                                                '100%': {
+                                                    transform: 'translateX(100%)'
+                                                }
                                             }
                                         },
                                         animation: {
@@ -243,7 +249,9 @@ const themePlugin = (options) => {
                                             'toast-hide': 'toast-hide 100ms ease-in forwards',
                                             'toast-slide-in-right': 'toast-slide-in-right 150ms cubic-bezier(0.16, 1, 0.3, 1)',
                                             'toast-slide-in-bottom': 'toast-slide-in-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)',
-                                            'toast-swipe-out': 'toast-swipe-out 100ms ease-out forwards'
+                                            'toast-swipe-out': 'toast-swipe-out 100ms ease-out forwards',
+                                            // Shimmer
+                                            shimmer: 'shimmer-loop 2s infinite'
                                         }
                                     }
                                 },

package/dist/src/plugin.js.map

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

package/dist/src/styles/focus.d.ts

@@ -1,2 +1,3 @@
 export declare const defaultFocus = "focus:outline-none focus-visible:hover:outline-none dark:focus-visible:hover:outline-none focus-visible:ring focus-visible:ring-offset-1 focus-visible:ring-primary-500 focus-visible:ring-offset-white dark:focus-visible:ring-primary-200 dark:focus-visible:ring-offset-black";
+export declare const staticFocus = "ring ring-offset-1 ring-primary-500 ring-offset-white dark:ring-primary-200 dark:ring-offset-black";
 //# sourceMappingURL=focus.d.ts.map

package/dist/src/styles/focus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../src/styles/focus.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,qRAC2P,CAAC"}
+{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../src/styles/focus.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,qRAC2P,CAAC;AAErR,eAAO,MAAM,WAAW,uGAC8E,CAAC"}

package/dist/src/styles/focus.js

@@ -3,6 +3,7 @@
 // Copyright 2022 DXOS.org
 //
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.defaultFocus = void 0;
+exports.staticFocus = exports.defaultFocus = void 0;
 exports.defaultFocus = 'focus:outline-none focus-visible:hover:outline-none dark:focus-visible:hover:outline-none focus-visible:ring focus-visible:ring-offset-1 focus-visible:ring-primary-500 focus-visible:ring-offset-white dark:focus-visible:ring-primary-200 dark:focus-visible:ring-offset-black';
+exports.staticFocus = 'ring ring-offset-1 ring-primary-500 ring-offset-white dark:ring-primary-200 dark:ring-offset-black';
 //# sourceMappingURL=focus.js.map

package/dist/src/styles/focus.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus.js","sourceRoot":"","sources":["../../../src/styles/focus.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEW,QAAA,YAAY,GACvB,kRAAkR,CAAC"}
+{"version":3,"file":"focus.js","sourceRoot":"","sources":["../../../src/styles/focus.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEW,QAAA,YAAY,GACvB,kRAAkR,CAAC;AAExQ,QAAA,WAAW,GACtB,oGAAoG,CAAC"}

package/dist/src/styles/index.d.ts

@@ -4,6 +4,7 @@ export * from './focus';
 export * from './group';
 export * from './hover';
 export * from './ornament';
+export * from './shimmer';
 export * from './size';
 export * from './text';
 export * from './valence';

package/dist/src/styles/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":"AAIA,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC"}

package/dist/src/styles/index.js

@@ -23,6 +23,7 @@ __exportStar(require("./focus"), exports);
 __exportStar(require("./group"), exports);
 __exportStar(require("./hover"), exports);
 __exportStar(require("./ornament"), exports);
+__exportStar(require("./shimmer"), exports);
 __exportStar(require("./size"), exports);
 __exportStar(require("./text"), exports);
 __exportStar(require("./valence"), exports);

package/dist/src/styles/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;AAEF,2CAAyB;AACzB,6CAA2B;AAC3B,0CAAwB;AACxB,0CAAwB;AACxB,0CAAwB;AACxB,6CAA2B;AAC3B,yCAAuB;AACvB,yCAAuB;AACvB,4CAA0B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/styles/index.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;;;;;;;;;;;AAEF,2CAAyB;AACzB,6CAA2B;AAC3B,0CAAwB;AACxB,0CAAwB;AACxB,0CAAwB;AACxB,6CAA2B;AAC3B,4CAA0B;AAC1B,yCAAuB;AACvB,yCAAuB;AACvB,4CAA0B"}

package/dist/src/styles/input.d.ts

@@ -0,0 +1,11 @@
+import { MessageValence } from '../props';
+export declare const defaultInput: ({ disabled, validationValence }: {
+    disabled?: boolean | undefined;
+    validationValence?: MessageValence | undefined;
+}) => string;
+export declare const staticInput: ({ disabled, focused, validationValence }: {
+    disabled?: boolean | undefined;
+    focused?: boolean | undefined;
+    validationValence?: MessageValence | undefined;
+}) => string;
+//# sourceMappingURL=input.d.ts.map

package/dist/src/styles/input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/styles/input.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAO1C,eAAO,MAAM,YAAY;;;YAexB,CAAC;AAEF,eAAO,MAAM,WAAW;;;;YAgBvB,CAAC"}

package/dist/src/styles/input.js

@@ -0,0 +1,24 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.staticInput = exports.defaultInput = void 0;
+const classnames_1 = __importDefault(require("classnames"));
+const disabled_1 = require("./disabled");
+const focus_1 = require("./focus");
+const hover_1 = require("./hover");
+const text_1 = require("./text");
+const valence_1 = require("./valence");
+const defaultInput = ({ disabled, validationValence }) => {
+    return (0, classnames_1.default)(focus_1.defaultFocus, text_1.defaultPlaceholder, (0, hover_1.defaultHover)({ disabled }), 'bg-white/50 border text-neutral-900 text-sm rounded-lg dark:bg-neutral-700/50 dark:text-white', (0, valence_1.valenceInputBorder)(validationValence), disabled && disabled_1.defaultDisabled);
+};
+exports.defaultInput = defaultInput;
+const staticInput = ({ disabled, focused, validationValence }) => {
+    return (0, classnames_1.default)(text_1.defaultPlaceholder, 'bg-white/50 border text-neutral-900 text-sm rounded-lg dark:bg-neutral-700/50 dark:text-white', (0, valence_1.valenceInputBorder)(validationValence), disabled && disabled_1.defaultDisabled, focused && focus_1.staticFocus);
+};
+exports.staticInput = staticInput;
+//# sourceMappingURL=input.js.map

package/dist/src/styles/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"","sources":["../../../src/styles/input.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;;;;AAEF,4DAA4B;AAG5B,yCAA6C;AAC7C,mCAAoD;AACpD,mCAAuC;AACvC,iCAA4C;AAC5C,uCAA+C;AAExC,MAAM,YAAY,GAAG,CAAC,EAC3B,QAAQ,EACR,iBAAiB,EAIlB,EAAE,EAAE;IACH,OAAO,IAAA,oBAAE,EACP,oBAAY,EACZ,yBAAkB,EAClB,IAAA,oBAAY,EAAC,EAAE,QAAQ,EAAE,CAAC,EAC1B,+FAA+F,EAC/F,IAAA,4BAAkB,EAAC,iBAAiB,CAAC,EACrC,QAAQ,IAAI,0BAAe,CAC5B,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,YAAY,gBAevB;AAEK,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,OAAO,EACP,iBAAiB,EAKlB,EAAE,EAAE;IACH,OAAO,IAAA,oBAAE,EACP,yBAAkB,EAClB,+FAA+F,EAC/F,IAAA,4BAAkB,EAAC,iBAAiB,CAAC,EACrC,QAAQ,IAAI,0BAAe,EAC3B,OAAO,IAAI,mBAAW,CACvB,CAAC;AACJ,CAAC,CAAC;AAhBW,QAAA,WAAW,eAgBtB"}

package/dist/src/styles/shimmer.d.ts

@@ -0,0 +1,2 @@
+export declare const defaultShimmer = "relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/20 before:to-transparent isolate overflow-hidden before:border-t before:border-neutral-100/20";
+//# sourceMappingURL=shimmer.d.ts.map

package/dist/src/styles/shimmer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"shimmer.d.ts","sourceRoot":"","sources":["../../../src/styles/shimmer.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,iQACqO,CAAC"}

package/dist/src/styles/shimmer.js

@@ -0,0 +1,8 @@
+"use strict";
+//
+// Copyright 2022 DXOS.org
+//
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultShimmer = void 0;
+exports.defaultShimmer = 'relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/20 before:to-transparent isolate overflow-hidden before:border-t before:border-neutral-100/20';
+//# sourceMappingURL=shimmer.js.map

package/dist/src/styles/shimmer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shimmer.js","sourceRoot":"","sources":["../../../src/styles/shimmer.ts"],"names":[],"mappings":";AAAA,EAAE;AACF,0BAA0B;AAC1B,EAAE;;;AAEW,QAAA,cAAc,GACzB,8PAA8P,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "Vite plugin which configures a low-level design system for DXOS.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -31,12 +31,13 @@
     "jdenticon": "^3.2.0",
     "postcss": "^8.4.17",
     "qrcode.react": "^3.1.0",
+    "rci": "^0.0.3",
     "tailwindcss": "^3.1.8",
     "tailwindcss-logical": "^3.0.0",
     "tailwindcss-radix": "^2.6.0"
   },
   "devDependencies": {
-    "@dxos/vite-plugin": "0.1.2",
+    "@dxos/vite-plugin": "0.1.3",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.0.1",

package/src/components/AlertDialog/AlertDialog.tsx

@@ -90,7 +90,7 @@ export const AlertDialog = ({
             {title}
           </AlertDialogPrimitive.Title>
           {description && (
-            <AlertDialogPrimitive.Description className={cx('mt-2', defaultDescription)}>
+            <AlertDialogPrimitive.Description className={cx('my-2', defaultDescription)}>
               {description}
             </AlertDialogPrimitive.Description>
           )}

package/src/components/Input/BarePinInput.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+import { CodeInput, getSegmentCssWidth } from 'rci';
+import React, { forwardRef, useCallback, ComponentProps } from 'react';
+
+import { useForwardedRef, useIsFocused } from '../../hooks';
+import { staticInput } from '../../styles/input';
+import { InputProps } from './InputProps';
+
+const bareInputStyleProps = {
+  padding: '8px',
+  spacing: '8px',
+  fontFamily: ''
+};
+
+export type BarePinInputProps = Omit<InputProps, 'ref' | 'label' | 'onChange'> &
+  Pick<ComponentProps<typeof CodeInput>, 'onChange' | 'value' | 'length'>;
+
+// TODO(thure): supplying a `value` prop to CodeInput does not yield correct controlled input interactivity; this may be an issue with RCI (filed as https://github.com/leonardodino/rci/issues/25).
+export const BarePinInput = forwardRef<HTMLInputElement, BarePinInputProps>(
+  ({ initialValue, size, validationMessage, validationValence, value, ...inputProps }, ref) => {
+    const width = getSegmentCssWidth('13px');
+    const inputRef = useForwardedRef(ref);
+    const inputFocused = useIsFocused(inputRef);
+
+    const renderSegment = useCallback<ComponentProps<typeof CodeInput>['renderSegment']>(
+      ({ state, index }) => (
+        <div
+          key={index}
+          className={staticInput({
+            focused: inputFocused && !!state,
+            disabled: inputProps.disabled,
+            ...(validationMessage && { validationValence })
+          })}
+          data-state={state}
+          style={{ width, height: '100%' }}
+        />
+      ),
+      [inputFocused, validationValence, validationMessage, inputProps.disabled]
+    );
+
+    return (
+      <CodeInput
+        {...{
+          spellCheck: false,
+          ...inputProps,
+          ...bareInputStyleProps,
+          inputRef,
+          className: cx(
+            'font-mono selection:bg-transparent',
+            inputProps.disabled && 'cursor-not-allowed',
+            inputProps.className
+          ),
+          renderSegment
+        }}
+      />
+    );
+  }
+);

package/src/components/Input/BareTextInput.tsx

@@ -0,0 +1,31 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import cx from 'classnames';
+import React, { ComponentProps } from 'react';
+
+import { defaultInput } from '../../styles/input';
+import { InputProps, InputSize } from './InputProps';
+
+const sizeMap: Record<InputSize, string> = {
+  md: 'text-sm',
+  lg: 'text-base',
+  pin: ''
+};
+
+export type BareTextInputProps = Omit<InputProps, 'label' | 'initialValue' | 'onChange'> &
+  Pick<ComponentProps<'input'>, 'onChange'>;
+
+export const BareTextInput = ({ validationValence, validationMessage, size, ...inputProps }: BareTextInputProps) => {
+  return (
+    <input
+      {...inputProps}
+      className={cx(
+        defaultInput({ disabled: inputProps.disabled, ...(validationMessage && { validationValence }) }),
+        'block w-full px-2.5 py-2',
+        sizeMap[size ?? 'md']
+      )}
+    />
+  );
+};

package/src/components/Input/Input.stories.tsx

@@ -16,6 +16,10 @@ export default {
     validationValence: {
       control: 'select',
       options: ['success', 'info', 'warning', 'error']
+    },
+    size: {
+      control: 'select',
+      options: ['md', 'lg', 'pin']
     }
   }
 };
@@ -33,7 +37,8 @@ Default.args = {
   labelVisuallyHidden: false,
   descriptionVisuallyHidden: false,
   validationMessage: '',
-  validationValence: undefined
+  validationValence: undefined,
+  length: 6
 };
 
 export const Disabled = () => (
@@ -89,3 +94,15 @@ export const InputWithValidationAndDescription = () => (
     }}
   />
 );
+
+export const PinInput = () => (
+  <Template
+    {...{
+      label: 'This input is a PIN-style input',
+      size: 'pin',
+      length: 6,
+      description: 'Type in secret you received',
+      placeholder: '••••••'
+    }}
+  />
+);