@vectara/vectara-ui 0.0.2

package/lib/components/flex/FlexContainer.d.ts

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+import { FlexSpacing } from "./types";
+declare const alignItemsToClassNameMap: {
+    readonly baseline: "vuiFlexContainer--alignItemsBaseline";
+    readonly center: "vuiFlexContainer--alignItemsCenter";
+    readonly end: "vuiFlexContainer--alignItemsEnd";
+    readonly start: "vuiFlexContainer--alignItemsStart";
+    readonly stretch: "vuiFlexContainer--alignItemsStretch";
+};
+declare const directionToClassNameMap: {
+    readonly column: "vuiFlexContainer--directionColumn";
+    readonly columnReverse: "vuiFlexContainer--directionColumnReverse";
+    readonly row: "vuiFlexContainer--directionRow";
+    readonly rowReverse: "vuiFlexContainer--directionRowReverse";
+};
+declare const justifyContentToClassNameMap: {
+    readonly center: "vuiFlexContainer--justifyContentCenter";
+    readonly end: "vuiFlexContainer--justifyContentEnd";
+    readonly start: "vuiFlexContainer--justifyContentStart";
+    readonly spaceAround: "vuiFlexContainer--justifyContentSpaceAround";
+    readonly spaceBetween: "vuiFlexContainer--justifyContentSpaceBetween";
+    readonly spaceEvenly: "vuiFlexContainer--justifyContentSpaceEvenly";
+};
+export type Props = {
+    children?: ReactNode;
+    alignItems?: keyof typeof alignItemsToClassNameMap;
+    direction?: keyof typeof directionToClassNameMap;
+    justifyContent?: keyof typeof justifyContentToClassNameMap;
+    spacing?: FlexSpacing;
+    wrap?: boolean;
+    className?: string;
+    fullWidth?: boolean;
+    inline?: boolean;
+};
+export declare const VuiFlexContainer: ({ children, alignItems, direction, justifyContent, spacing, wrap, className, fullWidth, inline, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/flex/FlexContainer.js

@@ -0,0 +1,53 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const alignItemsToClassNameMap = {
+    baseline: "vuiFlexContainer--alignItemsBaseline",
+    center: "vuiFlexContainer--alignItemsCenter",
+    end: "vuiFlexContainer--alignItemsEnd",
+    start: "vuiFlexContainer--alignItemsStart",
+    stretch: "vuiFlexContainer--alignItemsStretch"
+};
+const directionToClassNameMap = {
+    column: "vuiFlexContainer--directionColumn",
+    columnReverse: "vuiFlexContainer--directionColumnReverse",
+    row: "vuiFlexContainer--directionRow",
+    rowReverse: "vuiFlexContainer--directionRowReverse"
+};
+const justifyContentToClassNameMap = {
+    center: "vuiFlexContainer--justifyContentCenter",
+    end: "vuiFlexContainer--justifyContentEnd",
+    start: "vuiFlexContainer--justifyContentStart",
+    spaceAround: "vuiFlexContainer--justifyContentSpaceAround",
+    spaceBetween: "vuiFlexContainer--justifyContentSpaceBetween",
+    spaceEvenly: "vuiFlexContainer--justifyContentSpaceEvenly"
+};
+const spacingToClassNameMap = {
+    none: "vuiFlexContainer--spacingNone",
+    xxs: "vuiFlexContainer--spacingXxs",
+    xs: "vuiFlexContainer--spacingXs",
+    s: "vuiFlexContainer--spacingS",
+    m: "vuiFlexContainer--spacingM",
+    l: "vuiFlexContainer--spacingL",
+    xl: "vuiFlexContainer--spacingXl",
+    xxl: "vuiFlexContainer--spacingXxl"
+};
+export const VuiFlexContainer = (_a) => {
+    var { children, alignItems = "stretch", direction = "row", justifyContent = "start", spacing = "m", wrap, className, fullWidth, inline } = _a, rest = __rest(_a, ["children", "alignItems", "direction", "justifyContent", "spacing", "wrap", "className", "fullWidth", "inline"]);
+    const classes = classNames(className, "vuiFlexContainer", alignItemsToClassNameMap[alignItems], directionToClassNameMap[direction], justifyContentToClassNameMap[justifyContent], spacingToClassNameMap[spacing], {
+        "vuiFlexContainer--wrap": wrap,
+        "vuiFlexContainer--fullWidth": fullWidth,
+        "vuiFlexContainer--inline": inline
+    });
+    return (_jsx("div", Object.assign({ className: classes }, rest, { children: children })));
+};

package/lib/components/flex/FlexItem.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from "react";
+declare const GROW: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+declare const SHRINK: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+declare const BASIS: readonly ["auto", "content", "fill", "maxContent", "minContent", "none"];
+declare const alignItemsToClassNameMap: {
+    readonly baseline: "vuiFlexItem--alignItemsBaseline";
+    readonly center: "vuiFlexItem--alignItemsCenter";
+    readonly end: "vuiFlexItem--alignItemsEnd";
+    readonly start: "vuiFlexItem--alignItemsStart";
+    readonly stretch: "vuiFlexItem--alignItemsStretch";
+};
+type Props = {
+    children?: ReactNode;
+    grow?: (typeof GROW)[number] | boolean;
+    shrink?: (typeof SHRINK)[number] | boolean;
+    basis?: (typeof BASIS)[number];
+    alignItems?: keyof typeof alignItemsToClassNameMap;
+    className?: string;
+    truncate?: boolean;
+};
+export declare const VuiFlexItem: ({ children, grow, shrink, basis, alignItems, className, truncate, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/flex/FlexItem.js

@@ -0,0 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+const GROW = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const SHRINK = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const BASIS = ["auto", "content", "fill", "maxContent", "minContent", "none"];
+const alignItemsToClassNameMap = {
+    baseline: "vuiFlexItem--alignItemsBaseline",
+    center: "vuiFlexItem--alignItemsCenter",
+    end: "vuiFlexItem--alignItemsEnd",
+    start: "vuiFlexItem--alignItemsStart",
+    stretch: "vuiFlexItem--alignItemsStretch"
+};
+export const VuiFlexItem = (_a) => {
+    var { children, grow, shrink, basis = "auto", alignItems = "stretch", className, truncate } = _a, rest = __rest(_a, ["children", "grow", "shrink", "basis", "alignItems", "className", "truncate"]);
+    const isGrowNone = grow === false;
+    const isShrinkNone = shrink === false;
+    const classes = classNames("vuiFlexItem", `vuiFlexItem--${basis}`, alignItemsToClassNameMap[alignItems], {
+        [`vuiFlexItem--flexGrow${grow}`]: typeof grow === "number",
+        "vuiFlexItem--flexGrowNone": isGrowNone,
+        [`vuiFlexItem--flexShrink${shrink}`]: typeof shrink === "number",
+        "vuiFlexItem--flexShrinkNone": isShrinkNone,
+        "vuiFlexItem--truncate": truncate
+    }, className);
+    return (_jsx("div", Object.assign({ className: classes }, rest, { children: children })));
+};

package/lib/components/flex/_flexContainer.scss

@@ -0,0 +1,79 @@
+.vuiFlexContainer {
+  display: flex;
+  align-items: stretch;
+}
+
+.vuiFlexContainer--inline {
+  display: inline-flex;
+}
+
+.vuiFlexContainer--fullWidth {
+  width: 100%;
+}
+
+.vuiFlexContainer--wrap {
+  flex-wrap: wrap;
+}
+
+// alignItems
+$alignItems: (
+  alignItemsBaseline: baseline,
+  alignItemsCenter: center,
+  alignItemsEnd: end,
+  alignItemsStart: start,
+  alignItemsStretch: stretch
+);
+
+@each $alignItemsName, $alignItemsValue in $alignItems {
+  .vuiFlexContainer--#{$alignItemsName} {
+    align-items: $alignItemsValue;
+  }
+}
+
+// direction
+$direction: (
+  directionColumn: column,
+  directionColumnReverse: column-reverse,
+  directionRow: row,
+  directionRowReverse: row-reverse
+);
+
+@each $directionName, $directionValue in $direction {
+  .vuiFlexContainer--#{$directionName} {
+    flex-direction: $directionValue;
+  }
+}
+
+// justifyContent
+$justifyContent: (
+  justifyContentCenter: center,
+  justifyContentEnd: end,
+  justifyContentStart: start,
+  justifyContentSpaceAround: space-around,
+  justifyContentSpaceBetween: space-between,
+  justifyContentSpaceEvenly: space-evenly
+);
+
+@each $justifyContentName, $justifyContentValue in $justifyContent {
+  .vuiFlexContainer--#{$justifyContentName} {
+    justify-content: $justifyContentValue;
+  }
+}
+
+// spacing
+$spacing: (
+  spacingNone: 0,
+  spacingXxs: $sizeXxs,
+  spacingXs: $sizeXs,
+  spacingS: $sizeS,
+  spacingM: $sizeM,
+  spacingL: $sizeL,
+  spacingXl: $sizeXl,
+  spacingXxl: $sizeXxl
+);
+
+@each $spacingName, $spacingValue in $spacing {
+  .vuiFlexContainer--#{$spacingName} {
+    gap: $spacingValue;
+  }
+}

package/lib/components/flex/_flexItem.scss

@@ -0,0 +1,64 @@
+.vuiFlexItem {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.vuiFlexItem--truncate {
+  min-width: 40px;
+}
+
+// alignItems
+$alignItems: (
+  alignItemsBaseline: baseline,
+  alignItemsCenter: center,
+  alignItemsEnd: end,
+  alignItemsStart: start,
+  alignItemsStretch: stretch
+);
+
+@each $alignItemsName, $alignItemsValue in $alignItems {
+  .vuiFlexItem--#{$alignItemsName} {
+    align-items: $alignItemsValue;
+  }
+}
+
+// Grow
+@for $i from 0 through 10 {
+  .vuiFlexItem--flexGrow#{$i} {
+    flex-grow: $i;
+  }
+}
+
+.vuiFlexItem--flexGrowNone {
+  flex-basis: auto;
+  flex-grow: 0;
+}
+
+// Shrink
+@for $i from 0 through 10 {
+  .vuiFlexItem--flexShrink#{$i} {
+    flex-shrink: $i;
+  }
+}
+
+.vuiFlexItem--flexShrinkNone {
+  flex-basis: auto;
+  flex-shrink: 0;
+}
+
+// Basis
+$basis: (
+  auto: auto,
+  content: content,
+  fill: fill,
+  maxContent: max-content,
+  minContent: min-content,
+  none: 0
+);
+
+@each $basisName, $basisValue in $basis {
+  .vuiFlexItem--#{$basisName} {
+    flex-basis: $basisValue;
+  }
+}

package/lib/components/flex/_index.scss

@@ -0,0 +1,2 @@
+@import "./flexContainer";
+@import "./flexItem";

package/lib/components/flex/types.d.ts

@@ -0,0 +1,2 @@
+export declare const FLEX_SPACING: readonly ["none", "xxs", "xs", "s", "m", "l", "xl", "xxl"];
+export type FlexSpacing = (typeof FLEX_SPACING)[number];

package/lib/components/flex/types.js

@@ -0,0 +1 @@
+export const FLEX_SPACING = ["none", "xxs", "xs", "s", "m", "l", "xl", "xxl"];

package/lib/components/form/_index.scss

@@ -0,0 +1,7 @@
+@import "checkbox/index";
+@import "input/index";
+@import "label/index";
+@import "radioButton/index";
+@import "select/index";
+@import "superRadioGroup/index";
+@import "textArea/index";

package/lib/components/form/checkbox/Checkbox.d.ts

@@ -0,0 +1,8 @@
+type Props = {
+    checked: boolean;
+    onChange: () => void;
+    label?: string;
+    disabled?: boolean;
+};
+export declare const VuiCheckbox: ({ checked, onChange, label, disabled, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/form/checkbox/Checkbox.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createId } from "../../../utils/createId";
+import { VuiFlexContainer } from "../../flex/FlexContainer";
+import { VuiFlexItem } from "../../flex/FlexItem";
+export const VuiCheckbox = (_a) => {
+    var { checked, onChange, label, disabled } = _a, rest = __rest(_a, ["checked", "onChange", "label", "disabled"]);
+    const id = createId();
+    const checkbox = (_jsx("input", Object.assign({ id: id, type: "checkbox", checked: checked, onChange: onChange, disabled: disabled }, rest)));
+    if (!label) {
+        return checkbox;
+    }
+    return (_jsxs(VuiFlexContainer, Object.assign({ spacing: "xs", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: checkbox })), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx("label", Object.assign({ className: "vuiCheckboxLabel", htmlFor: id }, { children: label })) }))] })));
+};

package/lib/components/form/checkbox/_index.scss

@@ -0,0 +1,3 @@
+.vuiCheckboxLabel {
+  font-size: $fontSizeStandard;
+}

package/lib/components/form/index.d.ts

@@ -0,0 +1,10 @@
+export { VuiCheckbox } from "./checkbox/Checkbox";
+export { VuiLabel } from "./label/Label";
+export { VuiNumberInput } from "./input/NumberInput";
+export { VuiRadioButton } from "./radioButton/RadioButton";
+export { VuiSelect } from "./select/Select";
+export { VuiSuperRadioGroup } from "./superRadioGroup/SuperRadioGroup";
+export { VuiTextInput } from "./input/TextInput";
+export { VuiTextArea } from "./textArea/TextArea";
+export { VuiPasswordInput } from "./input/PasswordInput";
+export type { RadioButtonConfig } from "./superRadioGroup/types";

package/lib/components/form/index.js

@@ -0,0 +1,9 @@
+export { VuiCheckbox } from "./checkbox/Checkbox";
+export { VuiLabel } from "./label/Label";
+export { VuiNumberInput } from "./input/NumberInput";
+export { VuiRadioButton } from "./radioButton/RadioButton";
+export { VuiSelect } from "./select/Select";
+export { VuiSuperRadioGroup } from "./superRadioGroup/SuperRadioGroup";
+export { VuiTextInput } from "./input/TextInput";
+export { VuiTextArea } from "./textArea/TextArea";
+export { VuiPasswordInput } from "./input/PasswordInput";

package/lib/components/form/input/BasicInput.d.ts

@@ -0,0 +1,15 @@
+declare const SIZE: readonly ["m", "l"];
+export type BasicInputProps = {
+    className?: string;
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    isInvalid?: boolean;
+    size?: (typeof SIZE)[number];
+    fullWidth?: boolean;
+    onSubmit?: () => void;
+    autoFocus?: boolean;
+    autoComplete?: boolean | string;
+};
+export declare const VuiBasicInput: import("react").ForwardRefExoticComponent<BasicInputProps & import("react").RefAttributes<HTMLInputElement | null>>;
+export {};

package/lib/components/form/input/BasicInput.js

@@ -0,0 +1,30 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { forwardRef } from "react";
+const SIZE = ["m", "l"];
+export const VuiBasicInput = forwardRef((_a, ref) => {
+    var { className, id, name, placeholder, size = "m", fullWidth, onSubmit, isInvalid, autoFocus, autoComplete } = _a, rest = __rest(_a, ["className", "id", "name", "placeholder", "size", "fullWidth", "onSubmit", "isInvalid", "autoFocus", "autoComplete"]);
+    const classes = classNames("vuiInput", `vuiInput--${size}`, {
+        "vuiInput-isInvalid": isInvalid,
+        "vuiInput--fullWidth": fullWidth
+    }, className);
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            e.stopPropagation();
+            onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
+        }
+    };
+    return (_jsx("input", Object.assign({ type: "text", autoComplete: autoComplete === true ? "on" : autoComplete === false ? "off" : autoComplete, autoFocus: autoFocus, ref: ref, className: classes, id: id, name: name, placeholder: placeholder, onKeyDown: handleKeyDown }, rest)));
+});

package/lib/components/form/input/NumberInput.d.ts

@@ -0,0 +1,8 @@
+import { BasicInputProps } from "./BasicInput";
+export declare const VuiNumberInput: import("react").ForwardRefExoticComponent<BasicInputProps & {
+    value?: number | undefined;
+    onChange: (value?: number) => void;
+    max?: number | undefined;
+    min?: number | undefined;
+    step?: number | undefined;
+} & import("react").RefAttributes<HTMLInputElement | null>>;

package/lib/components/form/input/NumberInput.js

@@ -0,0 +1,61 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useEffect, useState } from "react";
+import { VuiBasicInput } from "./BasicInput";
+export const VuiNumberInput = forwardRef((_a, ref) => {
+    var { value, onChange, max, min, step } = _a, rest = __rest(_a, ["value", "onChange", "max", "min", "step"]);
+    const [localValue, setLocalValue] = useState(value);
+    // This is a hacky solution to the number input misbehaving on Firefox.
+    // If we were to apply the value and onChange values directly to the
+    // value and onChange props of the input, then a user who:
+    //  1. Selects all
+    //  2. Types 1.0
+    // will have the input show "0" as soon as they enter a decimal point.
+    // When that character is entered, onChange is called with undefined.
+    // This value gets stored in the value state, which resets the value to 0.
+    // For some reason, using a useState hook to store the value doesn't have
+    // this problem.
+    useEffect(() => {
+        // Reflect the upstream value when it changes. Ignore 0
+        // because that indicates the user has entered a decimal point.
+        if (value !== 0) {
+            setLocalValue(value);
+        }
+    }, [value]);
+    // Part of the hacky solution above.
+    useEffect(() => {
+        // Set value locally so an undefined value doesn't reset it to 0.
+        // Pass the value upstream, e.g. so it can be persisted.
+        onChange(localValue !== null && localValue !== void 0 ? localValue : 0);
+    }, [localValue]);
+    const onChangeValue = (e) => {
+        // Enable resetting the value to undefined.
+        if (e.target.value === "")
+            return setLocalValue(undefined);
+        const numberValue = Number(e.target.value);
+        if (isNaN(numberValue))
+            return setLocalValue(undefined);
+        setLocalValue(Number(e.target.value));
+    };
+    const onBlur = () => {
+        if (min !== undefined && value !== undefined && value < min)
+            onChange(min);
+        if (max !== undefined && value !== undefined && value > max)
+            onChange(max);
+    };
+    const props = Object.assign({ type: "number", value: localValue !== null && localValue !== void 0 ? localValue : "", onChange: onChangeValue, onBlur,
+        max,
+        min,
+        step }, rest);
+    return _jsx(VuiBasicInput, Object.assign({}, props));
+});

package/lib/components/form/input/PasswordInput.d.ts

@@ -0,0 +1,7 @@
+import { BasicInputProps } from "./BasicInput";
+export declare const VuiPasswordInput: import("react").ForwardRefExoticComponent<BasicInputProps & {
+    value?: string | undefined;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    maxLength?: number | undefined;
+    isPasswordVisible?: boolean | undefined;
+} & import("react").RefAttributes<HTMLInputElement | null>>;

package/lib/components/form/input/PasswordInput.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { forwardRef } from "react";
+import { VuiBasicInput } from "./BasicInput";
+export const VuiPasswordInput = forwardRef((_a, ref) => {
+    var { className, isPasswordVisible } = _a, rest = __rest(_a, ["className", "isPasswordVisible"]);
+    const classes = classNames("vuiInput--text", className);
+    const props = Object.assign({ type: isPasswordVisible ? "text" : "password" }, rest);
+    return _jsx(VuiBasicInput, Object.assign({ className: classes, ref: ref }, props));
+});

package/lib/components/form/input/TextInput.d.ts

@@ -0,0 +1,6 @@
+import { BasicInputProps } from "./BasicInput";
+export declare const VuiTextInput: import("react").ForwardRefExoticComponent<BasicInputProps & {
+    value?: string | undefined;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    maxLength?: number | undefined;
+} & import("react").RefAttributes<HTMLInputElement | null>>;

package/lib/components/form/input/TextInput.js

@@ -0,0 +1,21 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { forwardRef } from "react";
+import { VuiBasicInput } from "./BasicInput";
+export const VuiTextInput = forwardRef((_a, ref) => {
+    var { className } = _a, rest = __rest(_a, ["className"]);
+    const classes = classNames("vuiInput--text", className);
+    const props = Object.assign({ type: "text" }, rest);
+    return _jsx(VuiBasicInput, Object.assign({ className: classes, ref: ref }, props));
+});

package/lib/components/form/input/_index.scss

@@ -0,0 +1,24 @@
+.vuiInput {
+  appearance: none;
+  border-radius: $sizeXxs;
+  border: 1px solid $colorMediumShade;
+  background-color: $colorEmptyShade;
+}
+
+.vuiInput--m {
+  padding: $sizeXs $sizeM;
+  font-size: $fontSizeStandard;
+}
+
+.vuiInput--l {
+  padding: $sizeS $sizeM;
+  font-size: $fontSizeLarge;
+}
+
+.vuiInput--fullWidth {
+  width: 100%;
+}
+
+.vuiInput-isInvalid {
+  border-color: $colorDanger;
+}

package/lib/components/form/label/Label.d.ts

@@ -0,0 +1,7 @@
+type Props = {
+    className?: string;
+    labelFor?: string;
+    children: React.ReactNode;
+};
+export declare const VuiLabel: ({ className, labelFor, children, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/form/label/Label.js

@@ -0,0 +1,18 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+export const VuiLabel = (_a) => {
+    var { className, labelFor, children } = _a, rest = __rest(_a, ["className", "labelFor", "children"]);
+    const classes = classNames("vuiLabel", className);
+    return (_jsx("label", Object.assign({ className: classes, htmlFor: labelFor }, rest, { children: children })));
+};

package/lib/components/form/label/_index.scss

@@ -0,0 +1,5 @@
+.vuiLabel {
+  font-size: $labelFontSize;
+  font-weight: $labelFontWeight;
+  color: $labelColor;
+}

package/lib/components/form/radioButton/RadioButton.d.ts

@@ -0,0 +1,9 @@
+type Props = {
+    checked: boolean;
+    onChange: () => void;
+    groupName: string;
+    label?: string;
+    disabled?: boolean;
+};
+export declare const VuiRadioButton: ({ checked, onChange, label, groupName, disabled, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/components/form/radioButton/RadioButton.js

@@ -0,0 +1,24 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createId } from "../../../utils/createId";
+import { VuiFlexContainer } from "../../flex/FlexContainer";
+import { VuiFlexItem } from "../../flex/FlexItem";
+export const VuiRadioButton = (_a) => {
+    var { checked, onChange, label, groupName, disabled } = _a, rest = __rest(_a, ["checked", "onChange", "label", "groupName", "disabled"]);
+    const id = createId();
+    const radioButton = (_jsx("input", Object.assign({ id: id, type: "radio", checked: checked, onChange: onChange, disabled: disabled }, rest)));
+    if (!label) {
+        return radioButton;
+    }
+    return (_jsxs(VuiFlexContainer, Object.assign({ spacing: "xs", alignItems: "center" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: radioButton })), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx("label", Object.assign({ className: "vuiRadioButtonLabel", htmlFor: id }, { children: label })) }))] })));
+};