@dxos/react-input 0.6.11-staging.a542fc9 → 0.6.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -86,7 +86,7 @@ var DescriptionAndValidation = /* @__PURE__ */ forwardRef(({ __inputScope, asChi
86
86
  import { CodeInput, getSegmentCssWidth } from "rci";
87
87
  import React3, { forwardRef as forwardRef2, useCallback } from "react";
88
88
  import { useForwardedRef, useIsFocused } from "@dxos/react-hooks";
89
- var PinInput = /* @__PURE__ */ forwardRef2(({ __inputScope, segmentClassName, inputClassName, segmentPadding = "13px", segmentHeight = "100%", ...props }, forwardedRef) => {
89
+ var PinInput = /* @__PURE__ */ forwardRef2(({ __inputScope, segmentClassName, inputClassName, segmentPadding = "8px", segmentHeight = "100%", ...props }, forwardedRef) => {
90
90
  const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
91
91
  const width = getSegmentCssWidth(segmentPadding);
92
92
  const inputRef = useForwardedRef(forwardedRef);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/InputMeta.tsx", "../../../src/Root.tsx", "../../../src/PinInput.tsx", "../../../src/TextInput.tsx", "../../../src/TextArea.tsx"],
4
- "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype LabelProps = ComponentPropsWithRef<typeof Primitive.label> & { asChild?: boolean };\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<LabelProps>, forwardedRef) => {\n const { id } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.label;\n return (\n <Root {...props} htmlFor={id} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype DescriptionProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Description = forwardRef<HTMLSpanElement, DescriptionProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...props} {...(validationValence === 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype ErrorMessageProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst ErrorMessage = forwardRef<HTMLSpanElement, ErrorMessageProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<ErrorMessageProps>, forwardedRef) => {\n const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...props} id={errorMessageId} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype ValidationProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Validation = forwardRef<HTMLSpanElement, ValidationProps>(\n (props: InputScopedProps<ValidationProps>, forwardedRef) => {\n const { __inputScope, asChild, children, ...otherProps } = props;\n const { validationValence } = useInputContext(INPUT_NAME, __inputScope);\n if (validationValence === 'error') {\n return <ErrorMessage {...props} ref={forwardedRef} />;\n } else {\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...otherProps} ref={forwardedRef}>\n {children}\n </Root>\n );\n }\n },\n);\n\ntype DescriptionAndValidationProps = ComponentPropsWithRef<typeof Primitive.p> & { asChild?: boolean };\n\nconst DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionAndValidationProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.p;\n return (\n <Root {...props} {...(validationValence !== 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\nexport { Label, Validation, Description, DescriptionAndValidation, ErrorMessage };\n\nexport type { LabelProps, ValidationProps, DescriptionProps, DescriptionAndValidationProps, ErrorMessageProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { useId } from '@dxos/react-hooks';\n\nconst INPUT_NAME = 'Input';\n\ntype Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';\n\ntype InputScopedProps<P> = P & { __inputScope?: Scope };\n\ntype InputRootProps = PropsWithChildren<{\n id?: string;\n validationValence?: Valence;\n descriptionId?: string;\n errorMessageId?: string;\n}>;\n\nconst [createInputContext, createInputScope] = createContextScope(INPUT_NAME, []);\n\ntype InputContextValue = {\n id: string;\n descriptionId: string;\n errorMessageId: string;\n validationValence: Valence;\n};\n\nconst [InputProvider, useInputContext] = createInputContext<InputContextValue>(INPUT_NAME);\n\nconst InputRoot = ({\n __inputScope,\n id: propsId,\n descriptionId: propsDescriptionId,\n errorMessageId: propsErrorMessageId,\n validationValence = 'neutral',\n children,\n}: InputScopedProps<InputRootProps>) => {\n const id = useId('input', propsId);\n const descriptionId = useId('input__description', propsDescriptionId);\n const errorMessageId = useId('input__error-message', propsErrorMessageId);\n return (\n <InputProvider {...{ id, descriptionId, errorMessageId, validationValence }} scope={__inputScope}>\n {children}\n </InputProvider>\n );\n};\n\nInputRoot.displayName = INPUT_NAME;\n\nexport { InputRoot, InputRoot as Root, createInputScope, useInputContext, INPUT_NAME };\n\nexport type { Valence, InputRootProps, InputScopedProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { CodeInput, getSegmentCssWidth } from 'rci';\nimport React, { type ComponentProps, type ComponentPropsWithRef, forwardRef, useCallback } from 'react';\n\nimport { useForwardedRef, useIsFocused } from '@dxos/react-hooks';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext, type Valence } from './Root';\n\ntype PinInputProps = Omit<\n ComponentPropsWithRef<typeof CodeInput>,\n 'id' | 'className' | 'inputRef' | 'renderSegment'\n> & {\n inputClassName?: string;\n segmentClassName?: (styleProps: { focused: boolean; validationValence: Valence }) => string;\n segmentPadding?: string;\n segmentHeight?: string;\n};\n\nconst PinInput = forwardRef<HTMLInputElement, PinInputProps>(\n (\n {\n __inputScope,\n segmentClassName,\n inputClassName,\n segmentPadding = '13px',\n segmentHeight = '100%',\n ...props\n }: InputScopedProps<PinInputProps>,\n forwardedRef,\n ) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const width = getSegmentCssWidth(segmentPadding);\n const inputRef = useForwardedRef(forwardedRef);\n const inputFocused = useIsFocused(inputRef);\n\n const renderSegment = useCallback<ComponentProps<typeof CodeInput>['renderSegment']>(\n ({ state, index }) => (\n <div\n key={index}\n className={segmentClassName?.({\n focused: !!(inputFocused && state),\n validationValence,\n })}\n data-state={state}\n style={{ width, height: segmentHeight }}\n />\n ),\n [segmentClassName, inputFocused, validationValence],\n );\n\n return (\n <CodeInput\n {...{\n padding: '8px',\n spacing: '8px',\n fontFamily: '',\n spellCheck: false,\n length: 6,\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n inputRef,\n renderSegment,\n className: inputClassName,\n }}\n />\n );\n },\n);\n\nexport { PinInput };\n\nexport type { PinInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype TextInputProps = Omit<ComponentPropsWithRef<typeof Primitive.input>, 'id'>;\n\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextInputProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <Primitive.input\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextInput };\n\nexport type { TextInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype TextAreaProps = Omit<ComponentPropsWithRef<'textarea'>, 'id'>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextAreaProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <textarea\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextArea };\n\nexport type { TextAreaProps };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype LabelProps = ComponentPropsWithRef<typeof Primitive.label> & { asChild?: boolean };\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<LabelProps>, forwardedRef) => {\n const { id } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.label;\n return (\n <Root {...props} htmlFor={id} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype DescriptionProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Description = forwardRef<HTMLSpanElement, DescriptionProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...props} {...(validationValence === 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype ErrorMessageProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst ErrorMessage = forwardRef<HTMLSpanElement, ErrorMessageProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<ErrorMessageProps>, forwardedRef) => {\n const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...props} id={errorMessageId} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype ValidationProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Validation = forwardRef<HTMLSpanElement, ValidationProps>(\n (props: InputScopedProps<ValidationProps>, forwardedRef) => {\n const { __inputScope, asChild, children, ...otherProps } = props;\n const { validationValence } = useInputContext(INPUT_NAME, __inputScope);\n if (validationValence === 'error') {\n return <ErrorMessage {...props} ref={forwardedRef} />;\n } else {\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...otherProps} ref={forwardedRef}>\n {children}\n </Root>\n );\n }\n },\n);\n\ntype DescriptionAndValidationProps = ComponentPropsWithRef<typeof Primitive.p> & { asChild?: boolean };\n\nconst DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionAndValidationProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.p;\n return (\n <Root {...props} {...(validationValence !== 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\nexport { Label, Validation, Description, DescriptionAndValidation, ErrorMessage };\n\nexport type { LabelProps, ValidationProps, DescriptionProps, DescriptionAndValidationProps, ErrorMessageProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { useId } from '@dxos/react-hooks';\n\nconst INPUT_NAME = 'Input';\n\ntype Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';\n\ntype InputScopedProps<P> = P & { __inputScope?: Scope };\n\ntype InputRootProps = PropsWithChildren<{\n id?: string;\n validationValence?: Valence;\n descriptionId?: string;\n errorMessageId?: string;\n}>;\n\nconst [createInputContext, createInputScope] = createContextScope(INPUT_NAME, []);\n\ntype InputContextValue = {\n id: string;\n descriptionId: string;\n errorMessageId: string;\n validationValence: Valence;\n};\n\nconst [InputProvider, useInputContext] = createInputContext<InputContextValue>(INPUT_NAME);\n\nconst InputRoot = ({\n __inputScope,\n id: propsId,\n descriptionId: propsDescriptionId,\n errorMessageId: propsErrorMessageId,\n validationValence = 'neutral',\n children,\n}: InputScopedProps<InputRootProps>) => {\n const id = useId('input', propsId);\n const descriptionId = useId('input__description', propsDescriptionId);\n const errorMessageId = useId('input__error-message', propsErrorMessageId);\n return (\n <InputProvider {...{ id, descriptionId, errorMessageId, validationValence }} scope={__inputScope}>\n {children}\n </InputProvider>\n );\n};\n\nInputRoot.displayName = INPUT_NAME;\n\nexport { InputRoot, InputRoot as Root, createInputScope, useInputContext, INPUT_NAME };\n\nexport type { Valence, InputRootProps, InputScopedProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { CodeInput, getSegmentCssWidth } from 'rci';\nimport React, { type ComponentProps, type ComponentPropsWithRef, forwardRef, useCallback } from 'react';\n\nimport { useForwardedRef, useIsFocused } from '@dxos/react-hooks';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext, type Valence } from './Root';\n\ntype PinInputProps = Omit<\n ComponentPropsWithRef<typeof CodeInput>,\n 'id' | 'className' | 'inputRef' | 'renderSegment'\n> & {\n inputClassName?: string;\n segmentClassName?: (styleProps: { focused: boolean; validationValence: Valence }) => string;\n segmentPadding?: string;\n segmentHeight?: string;\n};\n\nconst PinInput = forwardRef<HTMLInputElement, PinInputProps>(\n (\n {\n __inputScope,\n segmentClassName,\n inputClassName,\n segmentPadding = '8px',\n segmentHeight = '100%',\n ...props\n }: InputScopedProps<PinInputProps>,\n forwardedRef,\n ) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const width = getSegmentCssWidth(segmentPadding);\n const inputRef = useForwardedRef(forwardedRef);\n const inputFocused = useIsFocused(inputRef);\n\n const renderSegment = useCallback<ComponentProps<typeof CodeInput>['renderSegment']>(\n ({ state, index }) => (\n <div\n key={index}\n className={segmentClassName?.({\n focused: !!(inputFocused && state),\n validationValence,\n })}\n data-state={state}\n style={{ width, height: segmentHeight }}\n />\n ),\n [segmentClassName, inputFocused, validationValence],\n );\n\n return (\n <CodeInput\n {...{\n padding: '8px',\n spacing: '8px',\n fontFamily: '',\n spellCheck: false,\n length: 6,\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n inputRef,\n renderSegment,\n className: inputClassName,\n }}\n />\n );\n },\n);\n\nexport { PinInput };\n\nexport type { PinInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype TextInputProps = Omit<ComponentPropsWithRef<typeof Primitive.input>, 'id'>;\n\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextInputProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <Primitive.input\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextInput };\n\nexport type { TextInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype TextAreaProps = Omit<ComponentPropsWithRef<'textarea'>, 'id'>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextAreaProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <textarea\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextArea };\n\nexport type { TextAreaProps };\n"],
5
+ "mappings": "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",
6
6
  "names": ["Primitive", "Slot", "React", "forwardRef", "createContextScope", "React", "useId", "INPUT_NAME", "createInputContext", "createInputScope", "createContextScope", "InputProvider", "useInputContext", "InputRoot", "__inputScope", "id", "propsId", "descriptionId", "propsDescriptionId", "errorMessageId", "propsErrorMessageId", "validationValence", "children", "useId", "scope", "displayName", "Label", "forwardRef", "__inputScope", "asChild", "children", "props", "forwardedRef", "id", "useInputContext", "INPUT_NAME", "Root", "Slot", "Primitive", "label", "React", "htmlFor", "ref", "Description", "descriptionId", "validationValence", "span", "ErrorMessage", "errorMessageId", "Validation", "otherProps", "DescriptionAndValidation", "p", "CodeInput", "getSegmentCssWidth", "React", "forwardRef", "useCallback", "useForwardedRef", "useIsFocused", "PinInput", "forwardRef", "__inputScope", "segmentClassName", "inputClassName", "segmentPadding", "segmentHeight", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "width", "getSegmentCssWidth", "inputRef", "useForwardedRef", "inputFocused", "useIsFocused", "renderSegment", "useCallback", "state", "index", "React", "div", "key", "className", "focused", "data-state", "style", "height", "CodeInput", "padding", "spacing", "fontFamily", "spellCheck", "length", "Primitive", "React", "forwardRef", "TextInput", "forwardRef", "__inputScope", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "React", "Primitive", "input", "ref", "React", "forwardRef", "TextArea", "forwardRef", "__inputScope", "props", "forwardedRef", "id", "validationValence", "descriptionId", "errorMessageId", "useInputContext", "INPUT_NAME", "React", "textarea", "ref"]
7
7
  }
@@ -1 +1 @@
1
- {"inputs":{"packages/ui/primitives/react-input/src/Root.tsx":{"bytes":4739,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-input/src/InputMeta.tsx":{"bytes":10207,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"packages/ui/primitives/react-input/src/PinInput.tsx":{"bytes":7092,"imports":[{"path":"rci","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"packages/ui/primitives/react-input/src/TextInput.tsx":{"bytes":3262,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"packages/ui/primitives/react-input/src/TextArea.tsx":{"bytes":3027,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"packages/ui/primitives/react-input/src/index.ts":{"bytes":860,"imports":[{"path":"packages/ui/primitives/react-input/src/InputMeta.tsx","kind":"import-statement","original":"./InputMeta"},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"},{"path":"packages/ui/primitives/react-input/src/PinInput.tsx","kind":"import-statement","original":"./PinInput"},{"path":"packages/ui/primitives/react-input/src/TextInput.tsx","kind":"import-statement","original":"./TextInput"},{"path":"packages/ui/primitives/react-input/src/TextArea.tsx","kind":"import-statement","original":"./TextArea"}],"format":"esm"}},"outputs":{"packages/ui/primitives/react-input/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":15008},"packages/ui/primitives/react-input/dist/lib/browser/index.mjs":{"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"rci","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["Description","DescriptionAndValidation","ErrorMessage","INPUT_NAME","InputRoot","Label","PinInput","Root","TextArea","TextInput","Validation","createInputScope","useInputContext"],"entryPoint":"packages/ui/primitives/react-input/src/index.ts","inputs":{"packages/ui/primitives/react-input/src/InputMeta.tsx":{"bytesInOutput":2282},"packages/ui/primitives/react-input/src/Root.tsx":{"bytesInOutput":875},"packages/ui/primitives/react-input/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-input/src/PinInput.tsx":{"bytesInOutput":1428},"packages/ui/primitives/react-input/src/TextInput.tsx":{"bytesInOutput":610},"packages/ui/primitives/react-input/src/TextArea.tsx":{"bytesInOutput":534}},"bytes":6315}}}
1
+ {"inputs":{"packages/ui/primitives/react-input/src/Root.tsx":{"bytes":4739,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-input/src/InputMeta.tsx":{"bytes":10207,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"packages/ui/primitives/react-input/src/PinInput.tsx":{"bytes":7091,"imports":[{"path":"rci","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"packages/ui/primitives/react-input/src/TextInput.tsx":{"bytes":3262,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"packages/ui/primitives/react-input/src/TextArea.tsx":{"bytes":3027,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"packages/ui/primitives/react-input/src/index.ts":{"bytes":860,"imports":[{"path":"packages/ui/primitives/react-input/src/InputMeta.tsx","kind":"import-statement","original":"./InputMeta"},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"},{"path":"packages/ui/primitives/react-input/src/PinInput.tsx","kind":"import-statement","original":"./PinInput"},{"path":"packages/ui/primitives/react-input/src/TextInput.tsx","kind":"import-statement","original":"./TextInput"},{"path":"packages/ui/primitives/react-input/src/TextArea.tsx","kind":"import-statement","original":"./TextArea"}],"format":"esm"}},"outputs":{"packages/ui/primitives/react-input/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":15007},"packages/ui/primitives/react-input/dist/lib/browser/index.mjs":{"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"rci","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["Description","DescriptionAndValidation","ErrorMessage","INPUT_NAME","InputRoot","Label","PinInput","Root","TextArea","TextInput","Validation","createInputScope","useInputContext"],"entryPoint":"packages/ui/primitives/react-input/src/index.ts","inputs":{"packages/ui/primitives/react-input/src/InputMeta.tsx":{"bytesInOutput":2282},"packages/ui/primitives/react-input/src/Root.tsx":{"bytesInOutput":875},"packages/ui/primitives/react-input/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-input/src/PinInput.tsx":{"bytesInOutput":1427},"packages/ui/primitives/react-input/src/TextInput.tsx":{"bytesInOutput":610},"packages/ui/primitives/react-input/src/TextArea.tsx":{"bytesInOutput":534}},"bytes":6314}}}
@@ -127,7 +127,7 @@ var DescriptionAndValidation = /* @__PURE__ */ (0, import_react.forwardRef)(({ _
127
127
  ref: forwardedRef
128
128
  }, children);
129
129
  });
130
- var PinInput = /* @__PURE__ */ (0, import_react3.forwardRef)(({ __inputScope, segmentClassName, inputClassName, segmentPadding = "13px", segmentHeight = "100%", ...props }, forwardedRef) => {
130
+ var PinInput = /* @__PURE__ */ (0, import_react3.forwardRef)(({ __inputScope, segmentClassName, inputClassName, segmentPadding = "8px", segmentHeight = "100%", ...props }, forwardedRef) => {
131
131
  const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);
132
132
  const width = (0, import_rci.getSegmentCssWidth)(segmentPadding);
133
133
  const inputRef = (0, import_react_hooks2.useForwardedRef)(forwardedRef);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/InputMeta.tsx", "../../../src/Root.tsx", "../../../src/PinInput.tsx", "../../../src/TextInput.tsx", "../../../src/TextArea.tsx"],
4
- "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype LabelProps = ComponentPropsWithRef<typeof Primitive.label> & { asChild?: boolean };\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<LabelProps>, forwardedRef) => {\n const { id } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.label;\n return (\n <Root {...props} htmlFor={id} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype DescriptionProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Description = forwardRef<HTMLSpanElement, DescriptionProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...props} {...(validationValence === 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype ErrorMessageProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst ErrorMessage = forwardRef<HTMLSpanElement, ErrorMessageProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<ErrorMessageProps>, forwardedRef) => {\n const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...props} id={errorMessageId} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype ValidationProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Validation = forwardRef<HTMLSpanElement, ValidationProps>(\n (props: InputScopedProps<ValidationProps>, forwardedRef) => {\n const { __inputScope, asChild, children, ...otherProps } = props;\n const { validationValence } = useInputContext(INPUT_NAME, __inputScope);\n if (validationValence === 'error') {\n return <ErrorMessage {...props} ref={forwardedRef} />;\n } else {\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...otherProps} ref={forwardedRef}>\n {children}\n </Root>\n );\n }\n },\n);\n\ntype DescriptionAndValidationProps = ComponentPropsWithRef<typeof Primitive.p> & { asChild?: boolean };\n\nconst DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionAndValidationProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.p;\n return (\n <Root {...props} {...(validationValence !== 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\nexport { Label, Validation, Description, DescriptionAndValidation, ErrorMessage };\n\nexport type { LabelProps, ValidationProps, DescriptionProps, DescriptionAndValidationProps, ErrorMessageProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { useId } from '@dxos/react-hooks';\n\nconst INPUT_NAME = 'Input';\n\ntype Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';\n\ntype InputScopedProps<P> = P & { __inputScope?: Scope };\n\ntype InputRootProps = PropsWithChildren<{\n id?: string;\n validationValence?: Valence;\n descriptionId?: string;\n errorMessageId?: string;\n}>;\n\nconst [createInputContext, createInputScope] = createContextScope(INPUT_NAME, []);\n\ntype InputContextValue = {\n id: string;\n descriptionId: string;\n errorMessageId: string;\n validationValence: Valence;\n};\n\nconst [InputProvider, useInputContext] = createInputContext<InputContextValue>(INPUT_NAME);\n\nconst InputRoot = ({\n __inputScope,\n id: propsId,\n descriptionId: propsDescriptionId,\n errorMessageId: propsErrorMessageId,\n validationValence = 'neutral',\n children,\n}: InputScopedProps<InputRootProps>) => {\n const id = useId('input', propsId);\n const descriptionId = useId('input__description', propsDescriptionId);\n const errorMessageId = useId('input__error-message', propsErrorMessageId);\n return (\n <InputProvider {...{ id, descriptionId, errorMessageId, validationValence }} scope={__inputScope}>\n {children}\n </InputProvider>\n );\n};\n\nInputRoot.displayName = INPUT_NAME;\n\nexport { InputRoot, InputRoot as Root, createInputScope, useInputContext, INPUT_NAME };\n\nexport type { Valence, InputRootProps, InputScopedProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { CodeInput, getSegmentCssWidth } from 'rci';\nimport React, { type ComponentProps, type ComponentPropsWithRef, forwardRef, useCallback } from 'react';\n\nimport { useForwardedRef, useIsFocused } from '@dxos/react-hooks';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext, type Valence } from './Root';\n\ntype PinInputProps = Omit<\n ComponentPropsWithRef<typeof CodeInput>,\n 'id' | 'className' | 'inputRef' | 'renderSegment'\n> & {\n inputClassName?: string;\n segmentClassName?: (styleProps: { focused: boolean; validationValence: Valence }) => string;\n segmentPadding?: string;\n segmentHeight?: string;\n};\n\nconst PinInput = forwardRef<HTMLInputElement, PinInputProps>(\n (\n {\n __inputScope,\n segmentClassName,\n inputClassName,\n segmentPadding = '13px',\n segmentHeight = '100%',\n ...props\n }: InputScopedProps<PinInputProps>,\n forwardedRef,\n ) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const width = getSegmentCssWidth(segmentPadding);\n const inputRef = useForwardedRef(forwardedRef);\n const inputFocused = useIsFocused(inputRef);\n\n const renderSegment = useCallback<ComponentProps<typeof CodeInput>['renderSegment']>(\n ({ state, index }) => (\n <div\n key={index}\n className={segmentClassName?.({\n focused: !!(inputFocused && state),\n validationValence,\n })}\n data-state={state}\n style={{ width, height: segmentHeight }}\n />\n ),\n [segmentClassName, inputFocused, validationValence],\n );\n\n return (\n <CodeInput\n {...{\n padding: '8px',\n spacing: '8px',\n fontFamily: '',\n spellCheck: false,\n length: 6,\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n inputRef,\n renderSegment,\n className: inputClassName,\n }}\n />\n );\n },\n);\n\nexport { PinInput };\n\nexport type { PinInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype TextInputProps = Omit<ComponentPropsWithRef<typeof Primitive.input>, 'id'>;\n\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextInputProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <Primitive.input\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextInput };\n\nexport type { TextInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype TextAreaProps = Omit<ComponentPropsWithRef<'textarea'>, 'id'>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextAreaProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <textarea\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextArea };\n\nexport type { TextAreaProps };\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport { Slot } from '@radix-ui/react-slot';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype LabelProps = ComponentPropsWithRef<typeof Primitive.label> & { asChild?: boolean };\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<LabelProps>, forwardedRef) => {\n const { id } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.label;\n return (\n <Root {...props} htmlFor={id} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype DescriptionProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Description = forwardRef<HTMLSpanElement, DescriptionProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...props} {...(validationValence === 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype ErrorMessageProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst ErrorMessage = forwardRef<HTMLSpanElement, ErrorMessageProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<ErrorMessageProps>, forwardedRef) => {\n const { errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...props} id={errorMessageId} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\ntype ValidationProps = Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'> & { asChild?: boolean };\n\nconst Validation = forwardRef<HTMLSpanElement, ValidationProps>(\n (props: InputScopedProps<ValidationProps>, forwardedRef) => {\n const { __inputScope, asChild, children, ...otherProps } = props;\n const { validationValence } = useInputContext(INPUT_NAME, __inputScope);\n if (validationValence === 'error') {\n return <ErrorMessage {...props} ref={forwardedRef} />;\n } else {\n const Root = asChild ? Slot : Primitive.span;\n return (\n <Root {...otherProps} ref={forwardedRef}>\n {children}\n </Root>\n );\n }\n },\n);\n\ntype DescriptionAndValidationProps = ComponentPropsWithRef<typeof Primitive.p> & { asChild?: boolean };\n\nconst DescriptionAndValidation = forwardRef<HTMLParagraphElement, DescriptionAndValidationProps>(\n ({ __inputScope, asChild, children, ...props }: InputScopedProps<DescriptionAndValidationProps>, forwardedRef) => {\n const { descriptionId, validationValence } = useInputContext(INPUT_NAME, __inputScope);\n const Root = asChild ? Slot : Primitive.p;\n return (\n <Root {...props} {...(validationValence !== 'error' && { id: descriptionId })} ref={forwardedRef}>\n {children}\n </Root>\n );\n },\n);\n\nexport { Label, Validation, Description, DescriptionAndValidation, ErrorMessage };\n\nexport type { LabelProps, ValidationProps, DescriptionProps, DescriptionAndValidationProps, ErrorMessageProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { createContextScope, type Scope } from '@radix-ui/react-context';\nimport React, { type PropsWithChildren } from 'react';\n\nimport { useId } from '@dxos/react-hooks';\n\nconst INPUT_NAME = 'Input';\n\ntype Valence = 'success' | 'info' | 'warning' | 'error' | 'neutral';\n\ntype InputScopedProps<P> = P & { __inputScope?: Scope };\n\ntype InputRootProps = PropsWithChildren<{\n id?: string;\n validationValence?: Valence;\n descriptionId?: string;\n errorMessageId?: string;\n}>;\n\nconst [createInputContext, createInputScope] = createContextScope(INPUT_NAME, []);\n\ntype InputContextValue = {\n id: string;\n descriptionId: string;\n errorMessageId: string;\n validationValence: Valence;\n};\n\nconst [InputProvider, useInputContext] = createInputContext<InputContextValue>(INPUT_NAME);\n\nconst InputRoot = ({\n __inputScope,\n id: propsId,\n descriptionId: propsDescriptionId,\n errorMessageId: propsErrorMessageId,\n validationValence = 'neutral',\n children,\n}: InputScopedProps<InputRootProps>) => {\n const id = useId('input', propsId);\n const descriptionId = useId('input__description', propsDescriptionId);\n const errorMessageId = useId('input__error-message', propsErrorMessageId);\n return (\n <InputProvider {...{ id, descriptionId, errorMessageId, validationValence }} scope={__inputScope}>\n {children}\n </InputProvider>\n );\n};\n\nInputRoot.displayName = INPUT_NAME;\n\nexport { InputRoot, InputRoot as Root, createInputScope, useInputContext, INPUT_NAME };\n\nexport type { Valence, InputRootProps, InputScopedProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { CodeInput, getSegmentCssWidth } from 'rci';\nimport React, { type ComponentProps, type ComponentPropsWithRef, forwardRef, useCallback } from 'react';\n\nimport { useForwardedRef, useIsFocused } from '@dxos/react-hooks';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext, type Valence } from './Root';\n\ntype PinInputProps = Omit<\n ComponentPropsWithRef<typeof CodeInput>,\n 'id' | 'className' | 'inputRef' | 'renderSegment'\n> & {\n inputClassName?: string;\n segmentClassName?: (styleProps: { focused: boolean; validationValence: Valence }) => string;\n segmentPadding?: string;\n segmentHeight?: string;\n};\n\nconst PinInput = forwardRef<HTMLInputElement, PinInputProps>(\n (\n {\n __inputScope,\n segmentClassName,\n inputClassName,\n segmentPadding = '8px',\n segmentHeight = '100%',\n ...props\n }: InputScopedProps<PinInputProps>,\n forwardedRef,\n ) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n const width = getSegmentCssWidth(segmentPadding);\n const inputRef = useForwardedRef(forwardedRef);\n const inputFocused = useIsFocused(inputRef);\n\n const renderSegment = useCallback<ComponentProps<typeof CodeInput>['renderSegment']>(\n ({ state, index }) => (\n <div\n key={index}\n className={segmentClassName?.({\n focused: !!(inputFocused && state),\n validationValence,\n })}\n data-state={state}\n style={{ width, height: segmentHeight }}\n />\n ),\n [segmentClassName, inputFocused, validationValence],\n );\n\n return (\n <CodeInput\n {...{\n padding: '8px',\n spacing: '8px',\n fontFamily: '',\n spellCheck: false,\n length: 6,\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n inputRef,\n renderSegment,\n className: inputClassName,\n }}\n />\n );\n },\n);\n\nexport { PinInput };\n\nexport type { PinInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { Primitive } from '@radix-ui/react-primitive';\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype TextInputProps = Omit<ComponentPropsWithRef<typeof Primitive.input>, 'id'>;\n\nconst TextInput = forwardRef<HTMLInputElement, TextInputProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextInputProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <Primitive.input\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextInput };\n\nexport type { TextInputProps };\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport React, { type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { INPUT_NAME, type InputScopedProps, useInputContext } from './Root';\n\ntype TextAreaProps = Omit<ComponentPropsWithRef<'textarea'>, 'id'>;\n\nconst TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(\n ({ __inputScope, ...props }: InputScopedProps<TextAreaProps>, forwardedRef) => {\n const { id, validationValence, descriptionId, errorMessageId } = useInputContext(INPUT_NAME, __inputScope);\n return (\n <textarea\n {...{\n ...props,\n id,\n 'aria-describedby': descriptionId,\n ...(validationValence === 'error' && {\n 'aria-invalid': 'true' as const,\n 'aria-errormessage': errorMessageId,\n }),\n ref: forwardedRef,\n }}\n />\n );\n },\n);\n\nexport { TextArea };\n\nexport type { TextAreaProps };\n"],
5
+ "mappings": "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",
6
6
  "names": ["import_react", "import_react_hooks", "import_react_primitive", "INPUT_NAME", "createInputContext", "createInputScope", "createContextScope", "InputProvider", "useInputContext", "InputRoot", "__inputScope", "id", "propsId", "descriptionId", "propsDescriptionId", "errorMessageId", "propsErrorMessageId", "validationValence", "children", "useId", "React", "scope", "displayName", "Label", "forwardRef", "asChild", "props", "forwardedRef", "Root", "Slot", "Primitive", "label", "htmlFor", "ref", "Description", "span", "ErrorMessage", "Validation", "otherProps", "DescriptionAndValidation", "p", "PinInput", "segmentClassName", "inputClassName", "segmentPadding", "segmentHeight", "width", "getSegmentCssWidth", "inputRef", "useForwardedRef", "inputFocused", "useIsFocused", "renderSegment", "useCallback", "state", "index", "div", "key", "className", "focused", "data-state", "style", "height", "CodeInput", "padding", "spacing", "fontFamily", "spellCheck", "length", "TextInput", "input", "TextArea", "textarea"]
7
7
  }
@@ -1 +1 @@
1
- {"inputs":{"packages/ui/primitives/react-input/src/Root.tsx":{"bytes":4739,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-input/src/InputMeta.tsx":{"bytes":10207,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"packages/ui/primitives/react-input/src/PinInput.tsx":{"bytes":7092,"imports":[{"path":"rci","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"packages/ui/primitives/react-input/src/TextInput.tsx":{"bytes":3262,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"packages/ui/primitives/react-input/src/TextArea.tsx":{"bytes":3027,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"packages/ui/primitives/react-input/src/index.ts":{"bytes":860,"imports":[{"path":"packages/ui/primitives/react-input/src/InputMeta.tsx","kind":"import-statement","original":"./InputMeta"},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"},{"path":"packages/ui/primitives/react-input/src/PinInput.tsx","kind":"import-statement","original":"./PinInput"},{"path":"packages/ui/primitives/react-input/src/TextInput.tsx","kind":"import-statement","original":"./TextInput"},{"path":"packages/ui/primitives/react-input/src/TextArea.tsx","kind":"import-statement","original":"./TextArea"}],"format":"esm"}},"outputs":{"packages/ui/primitives/react-input/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":15008},"packages/ui/primitives/react-input/dist/lib/node/index.cjs":{"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"rci","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["Description","DescriptionAndValidation","ErrorMessage","INPUT_NAME","InputRoot","Label","PinInput","Root","TextArea","TextInput","Validation","createInputScope","useInputContext"],"entryPoint":"packages/ui/primitives/react-input/src/index.ts","inputs":{"packages/ui/primitives/react-input/src/InputMeta.tsx":{"bytesInOutput":2282},"packages/ui/primitives/react-input/src/Root.tsx":{"bytesInOutput":875},"packages/ui/primitives/react-input/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-input/src/PinInput.tsx":{"bytesInOutput":1428},"packages/ui/primitives/react-input/src/TextInput.tsx":{"bytesInOutput":610},"packages/ui/primitives/react-input/src/TextArea.tsx":{"bytesInOutput":534}},"bytes":6315}}}
1
+ {"inputs":{"packages/ui/primitives/react-input/src/Root.tsx":{"bytes":4739,"imports":[{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/primitives/react-input/src/InputMeta.tsx":{"bytes":10207,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"packages/ui/primitives/react-input/src/PinInput.tsx":{"bytes":7091,"imports":[{"path":"rci","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"packages/ui/primitives/react-input/src/TextInput.tsx":{"bytes":3262,"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"packages/ui/primitives/react-input/src/TextArea.tsx":{"bytes":3027,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"}],"format":"esm"},"packages/ui/primitives/react-input/src/index.ts":{"bytes":860,"imports":[{"path":"packages/ui/primitives/react-input/src/InputMeta.tsx","kind":"import-statement","original":"./InputMeta"},{"path":"packages/ui/primitives/react-input/src/Root.tsx","kind":"import-statement","original":"./Root"},{"path":"packages/ui/primitives/react-input/src/PinInput.tsx","kind":"import-statement","original":"./PinInput"},{"path":"packages/ui/primitives/react-input/src/TextInput.tsx","kind":"import-statement","original":"./TextInput"},{"path":"packages/ui/primitives/react-input/src/TextArea.tsx","kind":"import-statement","original":"./TextArea"}],"format":"esm"}},"outputs":{"packages/ui/primitives/react-input/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":15007},"packages/ui/primitives/react-input/dist/lib/node/index.cjs":{"imports":[{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"@radix-ui/react-slot","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"rci","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-hooks","kind":"import-statement","external":true},{"path":"@radix-ui/react-primitive","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true}],"exports":["Description","DescriptionAndValidation","ErrorMessage","INPUT_NAME","InputRoot","Label","PinInput","Root","TextArea","TextInput","Validation","createInputScope","useInputContext"],"entryPoint":"packages/ui/primitives/react-input/src/index.ts","inputs":{"packages/ui/primitives/react-input/src/InputMeta.tsx":{"bytesInOutput":2282},"packages/ui/primitives/react-input/src/Root.tsx":{"bytesInOutput":875},"packages/ui/primitives/react-input/src/index.ts":{"bytesInOutput":0},"packages/ui/primitives/react-input/src/PinInput.tsx":{"bytesInOutput":1427},"packages/ui/primitives/react-input/src/TextInput.tsx":{"bytesInOutput":610},"packages/ui/primitives/react-input/src/TextArea.tsx":{"bytesInOutput":534}},"bytes":6314}}}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dxos/react-input",
3
- "version": "0.6.11-staging.a542fc9",
3
+ "version": "0.6.11",
4
4
  "description": "Input primitive components for React.",
5
5
  "homepage": "https://dxos.org",
6
6
  "bugs": "https://github.com/dxos/dxos/issues",
@@ -23,7 +23,7 @@
23
23
  "@radix-ui/react-use-controllable-state": "^1.0.0",
24
24
  "lodash.omit": "^4.5.0",
25
25
  "rci": "^0.1.0",
26
- "@dxos/react-hooks": "0.6.11-staging.a542fc9"
26
+ "@dxos/react-hooks": "0.6.11"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@types/react": "~18.2.0",
package/src/PinInput.tsx CHANGED
@@ -25,7 +25,7 @@ const PinInput = forwardRef<HTMLInputElement, PinInputProps>(
25
25
  __inputScope,
26
26
  segmentClassName,
27
27
  inputClassName,
28
- segmentPadding = '13px',
28
+ segmentPadding = '8px',
29
29
  segmentHeight = '100%',
30
30
  ...props
31
31
  }: InputScopedProps<PinInputProps>,