@viasat/beam-react 2.0.0

package/lib/SegmentedControl/SegmentedControl.Item.es.js

@@ -0,0 +1,96 @@
+import { jsx as d, jsxs as _ } from "react/jsx-runtime";
+import { useRef as P } from "react";
+import V from "clsx";
+import { g as h } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { s as t } from "../../chunks/segmentedControl.module.BLAuwbVR.js";
+import { useSegmentedControl as B } from "./SegmentedControlContext.es.js";
+import { StateLayer as H } from "../StateLayer/StateLayer.es.js";
+import { Tooltip as L } from "../Tooltip/Tooltip.es.js";
+import { useIsOverFlowing as M } from "../../utils/hooks/index.es.js";
+import { useKeyboardNavigation as G } from "../../utils/hooks/useKeyboardNavigation.es.js";
+const re = ({
+  value: s,
+  children: r,
+  disabled: S = !1,
+  icon: l,
+  "aria-label": u,
+  className: w,
+  ...C
+}) => {
+  const o = P(null), {
+    disabled: F,
+    size: p,
+    onChange: a,
+    selectedValue: K,
+    setSelectedValue: $,
+    fluid: O,
+    controlItems: m
+  } = B(), { subElementClassPrefix: R } = h("segmented-control"), e = `${R}item`, i = S || F, b = K === s, g = m.indexOf(s), x = g === 0, D = m.length > 0 && g === m.length - 1, T = V(
+    t[e],
+    p && t[`${e}--${p}`],
+    i && t[`${e}--disabled`],
+    O && t[`${e}--fluid`],
+    x && t[`${e}--first`],
+    D && !x && t[`${e}--last`],
+    l && !r && t[`${e}--iconOnly`],
+    b && t[`${e}--selected`],
+    w
+  ), j = () => {
+    i || ($(s), a == null || a(s));
+  }, k = (n) => {
+    var I;
+    if (n !== s) {
+      if (!((I = o.current) != null && I.parentElement)) return;
+      const f = o.current.parentElement.querySelector(
+        `[data-segment-value="${n}"]`
+      );
+      if (f) {
+        const N = f.querySelector("input");
+        N ? N.focus() : f.focus();
+      }
+    }
+  }, q = () => {
+    var n;
+    return (n = o.current) != null && n.parentElement ? { current: o.current.parentElement } : o;
+  }, { handleKeyDown: z } = G({
+    currentValue: s,
+    items: m || [],
+    containerRef: q(),
+    dataAttribute: "data-segment-value",
+    disabledClassName: t[`${e}--disabled`],
+    onFocusItem: k,
+    onSelectItem: (n) => {
+      i || ($(n), a == null || a(n));
+    },
+    isHorizontal: !0
+    // Segmented controls are always horizontal
+  }), y = `${e}-${s}`, { ref: A, isOverFlowing: E } = M();
+  let c = !1;
+  return !r && l && (c = !0), E && (c = !0), r && l && !E && (c = !1), /* @__PURE__ */ d(L, { text: u || r, disabled: !c, children: /* @__PURE__ */ _(
+    "button",
+    {
+      id: y,
+      className: T,
+      ref: o,
+      "data-segment-value": s,
+      "aria-disabled": i,
+      tabIndex: b ? 0 : -1,
+      onClick: j,
+      onKeyDown: z,
+      "aria-label": u,
+      ...C,
+      children: [
+        /* @__PURE__ */ _("span", { className: `${e}__content`, children: [
+          l && /* @__PURE__ */ d("span", { className: `${e}__icon`, children: l }),
+          r && /* @__PURE__ */ d("span", { ref: A, className: `${e}__controlText`, children: r })
+        ] }),
+        !i && /* @__PURE__ */ d(H, { className: `${e}__state-layer` })
+      ]
+    },
+    y
+  ) });
+};
+export {
+  re as SegmentedControlItem
+};

package/lib/SegmentedControl/SegmentedControl.List.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("react/jsx-runtime"),C=require("react"),g=require("clsx"),f=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const n=require("../../chunks/segmentedControl.module.BTtkp9Hz.js"),S=require("./SegmentedControlContext.cjs.js"),b=({children:e,className:a,...u})=>{const{selectedValue:i,setSelectedValue:t,setControlItems:o,fluid:c}=S.useSegmentedControl();C.useEffect(()=>{if(!i){if(!Array.isArray(e)){t(e.props.value),o([e.props.value]);return}const l=e.filter(s=>!s.props.disabled);l.length>0&&t(l[0].props.value),o(e.map(s=>s.props.value))}},[]);const{subElementClassPrefix:m}=f.getBEMClassNames("segmented-control"),r=`${m}list`,d=g(n.styles[r],c&&n.styles[`${r}--fluid`],a);return p.jsx("div",{className:d,...u,children:e})};exports.SegmentedControlList=b;

package/lib/SegmentedControl/SegmentedControl.List.d.ts

@@ -0,0 +1,12 @@
+import { default as React, ReactElement } from 'react';
+import { SegmentedControlItemProps } from './SegmentedControl.Item';
+export interface SegmentedControlListProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Specify the items of the list
+     */
+    children: ReactElement<SegmentedControlItemProps> | ReactElement<SegmentedControlItemProps>[];
+}
+/**
+ * SegmentedControl.List is a container exclusively for SegmentedControl.Item components.
+ */
+export declare const SegmentedControlList: ({ children, className: _className, ...props }: SegmentedControlListProps) => import("react/jsx-runtime").JSX.Element;

package/lib/SegmentedControl/SegmentedControl.List.es.js

@@ -0,0 +1,33 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useEffect as d } from "react";
+import C from "clsx";
+import { g } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { s as a } from "../../chunks/segmentedControl.module.BLAuwbVR.js";
+import { useSegmentedControl as v } from "./SegmentedControlContext.es.js";
+const V = ({
+  children: s,
+  className: m,
+  ...p
+}) => {
+  const { selectedValue: f, setSelectedValue: t, setControlItems: o, fluid: i } = v();
+  d(() => {
+    if (!f) {
+      if (!Array.isArray(s)) {
+        t(s.props.value), o([s.props.value]);
+        return;
+      }
+      const l = s.filter((e) => !e.props.disabled);
+      l.length > 0 && t(l[0].props.value), o(s.map((e) => e.props.value));
+    }
+  }, []);
+  const { subElementClassPrefix: n } = g("segmented-control"), r = `${n}list`, u = C(
+    a[r],
+    i && a[`${r}--fluid`],
+    m
+  );
+  return /* @__PURE__ */ c("div", { className: u, ...p, children: s });
+};
+export {
+  V as SegmentedControlList
+};

package/lib/SegmentedControl/SegmentedControl.Panel.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),m=require("clsx"),u=require("../../chunks/classNames.DAeKwerT.js");require("../../chunks/constants.hwjHOsvT.js");const n=require("../../chunks/segmentedControl.module.BTtkp9Hz.js"),g=require("./SegmentedControlContext.cjs.js"),C=({value:s,children:o,className:l,...r})=>{const{subElementClassPrefix:c}=u.getBEMClassNames("segmented-control"),e=`${c}panel`,{selectedValue:a}=g.useSegmentedControl(),t=a===s,d=m(n.styles[e],t&&n.styles[`${e}--selected`],l);return i.jsx("div",{id:`${e}-${s}`,"aria-hidden":!t,className:d,...r,children:o})};exports.SegmentedControlPanel=C;

package/lib/SegmentedControl/SegmentedControl.Panel.d.ts

@@ -0,0 +1,12 @@
+import { default as React, ReactNode } from 'react';
+export interface SegmentedControlPanelProps extends React.ComponentPropsWithoutRef<'div'> {
+    /**
+     * Specify the value of the panel
+     */
+    value: string;
+    /**
+     * Specify the content of the panel
+     */
+    children?: ReactNode;
+}
+export declare const SegmentedControlPanel: ({ value, children, className: _className, ...props }: SegmentedControlPanelProps) => import("react/jsx-runtime").JSX.Element;

package/lib/SegmentedControl/SegmentedControl.Panel.es.js

@@ -0,0 +1,31 @@
+import { jsx as i } from "react/jsx-runtime";
+import d from "clsx";
+import { g as p } from "../../chunks/classNames.DNsS4J__.js";
+import "../../chunks/constants.BBi77pmH.js";
+import { s as o } from "../../chunks/segmentedControl.module.BLAuwbVR.js";
+import { useSegmentedControl as f } from "./SegmentedControlContext.es.js";
+const b = ({
+  value: s,
+  children: r,
+  className: m,
+  ...n
+}) => {
+  const { subElementClassPrefix: l } = p("segmented-control"), e = `${l}panel`, { selectedValue: a } = f(), t = a === s, c = d(
+    o[e],
+    t && o[`${e}--selected`],
+    m
+  );
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      id: `${e}-${s}`,
+      "aria-hidden": !t,
+      className: c,
+      ...n,
+      children: r
+    }
+  );
+};
+export {
+  b as SegmentedControlPanel
+};

package/lib/SegmentedControl/SegmentedControl.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),s=require("react"),b=require("clsx"),x=require("../../chunks/classNames.DAeKwerT.js"),N=require("../../chunks/constants.hwjHOsvT.js"),P=require("./SegmentedControlContext.cjs.js"),I=require("./SegmentedControl.Item.cjs.js"),f=require("./SegmentedControl.List.cjs.js"),j=require("./SegmentedControl.Panel.cjs.js"),v=require("../../chunks/segmentedControl.module.BTtkp9Hz.js"),e=({disabled:r=!1,size:l="md",onChange:m,initialSelection:t,fluid:a=!1,theme:n,children:c,className:d,...u})=>{const{baseClassNamePrefix:i}=x.getBEMClassNames("segmented-control"),C=b(v.styles[i],n&&N.themeClassName(n),d),[g,S]=s.useState(t),[_,q]=s.useState([]);return o.jsx(P.SegmentedControlProvider,{value:{disabled:r,size:l,onChange:m,initialSelection:t,selectedValue:g,setSelectedValue:S,fluid:a,controlItems:_,setControlItems:q},children:o.jsx("span",{className:C,...u,children:c})})};e.Item=I.SegmentedControlItem;e.Panel=j.SegmentedControlPanel;e.List=f.SegmentedControlList;exports.SegmentedControl=e;

package/lib/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,42 @@
+import { default as React, ReactNode } from 'react';
+import { ThemeTypes } from '@viasat/beam-shared/utils';
+import { SegmentedControlSize } from '@viasat/beam-shared/components/SegmentedControl';
+export interface SegmentedControlProps extends Omit<React.ComponentPropsWithoutRef<'span'>, 'onChange'> {
+    /**
+     * Specify if all SegmentedControl items are disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify the size of a SegmentedControl
+     */
+    size?: SegmentedControlSize;
+    /**
+     * Specify a callback function to utilize the value of the selected item
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Specify the value of the initially selected item
+     */
+    initialSelection?: string;
+    /**
+     * Specify if the SegmentedControl is fluid within its parent container
+     */
+    fluid?: boolean;
+    /**
+     * Specify the theme of the SegmentedControl
+     */
+    theme?: ThemeTypes;
+    /**
+     * Specify the content of the SegmentedControl
+     */
+    children?: ReactNode;
+}
+/**
+ * Segmented controls allows users to choose one option from a linear group of related choices.
+ */
+export declare const SegmentedControl: {
+    ({ disabled, size, onChange, initialSelection, fluid, theme, children, className: _className, ...props }: SegmentedControlProps): import("react/jsx-runtime").JSX.Element;
+    Item: ({ value, children, "disabled": _disabled, icon, "aria-label": ariaLabel, "className": _className, ...props }: import('./SegmentedControl.Item').SegmentedControlItemProps) => import("react/jsx-runtime").JSX.Element;
+    Panel: ({ value, children, className: _className, ...props }: import('./SegmentedControl.Panel').SegmentedControlPanelProps) => import("react/jsx-runtime").JSX.Element;
+    List: ({ children, className: _className, ...props }: import('./SegmentedControl.List').SegmentedControlListProps) => import("react/jsx-runtime").JSX.Element;
+};

package/lib/SegmentedControl/SegmentedControl.es.js

@@ -0,0 +1,52 @@
+import { jsx as s } from "react/jsx-runtime";
+import { useState as m } from "react";
+import N from "clsx";
+import { g as x } from "../../chunks/classNames.DNsS4J__.js";
+import { t as I } from "../../chunks/constants.BBi77pmH.js";
+import { SegmentedControlProvider as P } from "./SegmentedControlContext.es.js";
+import { SegmentedControlItem as v } from "./SegmentedControl.Item.es.js";
+import { SegmentedControlList as L } from "./SegmentedControl.List.es.js";
+import { SegmentedControlPanel as V } from "./SegmentedControl.Panel.es.js";
+import { s as b } from "../../chunks/segmentedControl.module.BLAuwbVR.js";
+const e = ({
+  disabled: r = !1,
+  size: l = "md",
+  onChange: a,
+  initialSelection: t,
+  fluid: n = !1,
+  theme: o,
+  children: f,
+  className: c,
+  ...p
+}) => {
+  const { baseClassNamePrefix: d } = x("segmented-control"), i = N(
+    b[d],
+    o && I(o),
+    c
+  ), [C, g] = m(
+    t
+  ), [S, u] = m([]);
+  return /* @__PURE__ */ s(
+    P,
+    {
+      value: {
+        disabled: r,
+        size: l,
+        onChange: a,
+        initialSelection: t,
+        selectedValue: C,
+        setSelectedValue: g,
+        fluid: n,
+        controlItems: S,
+        setControlItems: u
+      },
+      children: /* @__PURE__ */ s("span", { className: i, ...p, children: f })
+    }
+  );
+};
+e.Item = v;
+e.Panel = V;
+e.List = L;
+export {
+  e as SegmentedControl
+};

package/lib/SegmentedControl/SegmentedControlContext.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),t=require("react"),o=t.createContext(void 0),s=({children:e,value:n})=>r.jsx(o.Provider,{value:n,children:e}),d=()=>{const e=t.useContext(o);if(!e)throw Error("SegmentedControl item must be used within a SegmentedControl");return e};exports.SegmentedControlProvider=s;exports.useSegmentedControl=d;

package/lib/SegmentedControl/SegmentedControlContext.d.ts

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+import { SegmentedControlSize } from '@viasat/beam-shared/components/SegmentedControl';
+interface SegmentedControlContextProps {
+    setSelectedValue: (value: string) => void;
+    controlItems: string[];
+    setControlItems: (items: string[]) => void;
+    disabled?: boolean;
+    size?: SegmentedControlSize;
+    onChange?: (value: string) => void;
+    selectedValue?: string;
+    initialSelection?: string;
+    fluid?: boolean;
+}
+export declare const SegmentedControlProvider: ({ children, value, }: {
+    children: React.ReactNode;
+    value: SegmentedControlContextProps;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const useSegmentedControl: () => SegmentedControlContextProps;
+export {};

package/lib/SegmentedControl/SegmentedControlContext.es.js

@@ -0,0 +1,15 @@
+import { jsx as n } from "react/jsx-runtime";
+import e from "react";
+const o = e.createContext(void 0), i = ({
+  children: t,
+  value: r
+}) => /* @__PURE__ */ n(o.Provider, { value: r, children: t }), s = () => {
+  const t = e.useContext(o);
+  if (!t)
+    throw Error("SegmentedControl item must be used within a SegmentedControl");
+  return t;
+};
+export {
+  i as SegmentedControlProvider,
+  s as useSegmentedControl
+};

package/lib/SegmentedControl/index.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./SegmentedControl.cjs.js");exports.SegmentedControl=e.SegmentedControl;

package/lib/SegmentedControl/index.d.ts

@@ -0,0 +1 @@
+export * from './SegmentedControl';

package/lib/SegmentedControl/index.es.js

@@ -0,0 +1,4 @@
+import { SegmentedControl as r } from "./SegmentedControl.es.js";
+export {
+  r as SegmentedControl
+};

package/lib/Select/Select.cjs.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react/jsx-runtime"),n=require("react"),De=require("../../chunks/classNames.DAeKwerT.js"),Fe=require("../../chunks/constants.hwjHOsvT.js"),i=require("../../chunks/combobox.module.XIDBRMf_.js"),D=require("clsx"),F=require("../../chunks/form.context.B1PXIJNq.js"),Le=require("../Form/contexts/label.context.cjs.js"),Ae=require("../Form/contexts/helperText.context.cjs.js"),L=require("../ActionList/ActionList.cjs.js"),Ve=require("./useSelectDropdown.cjs.js"),ke=require("./SelectDropdown.cjs.js"),Ee=require("./useSelectChips.cjs.js"),Re=require("./useSelectKeyboardManager.cjs.js"),Te=require("./useClearSelection.cjs.js"),He=require("../_Options/OptionChips.cjs.js"),Ke=require("./SelectField.cjs.js"),Ge=require("./useSelectA11y.cjs.js"),A=require("../_Options/Option.context.cjs.js"),We=require("../_Options/Option.cjs.js"),ze=require("../_Options/useSelectValue.cjs.js"),Je=require("../_Options/strategies/SelectionStrategy.cjs.js"),{baseClassNamePrefix:Qe,subElementClassPrefix:v,classModifierPrefix:c}=De.getBEMClassNames("combobox"),Ue=n.forwardRef(({theme:h,width:V,error:a,children:k,label:q=null,contentBefore:E,contentAfter:R,fluid:T=!1,helperText:C=null,validationRules:H=[],className:K,hideRequiredMarker:G=!1,disabled:W=!1,readOnly:z=!1,required:J=!1,placeholder:Q="",onChange:b,...x},U)=>{const{id:g,name:X,"aria-describedby":Y,multiple:e=!1,clearable:Z=e,...ee}=x,{showErrors:te,isInvalid:se,errorShown:le,disabled:l,readOnly:o,required:P}=F.useFormField({name:X,validationRules:H,disabledProp:W,readOnlyProp:z,requiredProp:J}),{aria:_,ids:ie}=Ge.useSelectA11y({helperText:C,externalDescribedBy:Y,error:a,errorShown:le,invalid:!!a||se}),{helperTextId:re,errorId:oe,validationErrorsId:ne,labelId:j}=ie,ce=!!(a!=null&&a.length),ae=n.useCallback(r=>{b==null||b(r)},[b]),{value:d,setValue:I,selectProps:de,handleBlur:M,singleValue:S}=ze.useSelectValue({onChange:ae,...x},U),f=!d||Array.isArray(d)&&!d.length,{optionsContext:ue,optionIds:u,optionsProps:p,selectedOptionsProps:N,deselectOptionValue:$}=A.useCreateOptionsContext(d,I,e),y=n.useMemo(()=>{if(!S)return;const r=u.map(t=>p.get(t)).findIndex(t=>(t==null?void 0:t.value)===S);return r!==-1?r:void 0},[u,p,S]),pe=n.useMemo(()=>{if(y===void 0)return;const r=p.get(u[y]);return r==null?void 0:r.label},[y,u,p]),{getFieldProps:be,dropdownProps:xe,refs:_e,open:w,setOpen:O,status:Se}=Ve.useSelectDropdown({disabled:l,readOnly:o,lastSelectedOptionIndex:y}),ye=D(i.styles[Qe],h&&Fe.themeClassName(h),T&&i.styles[`${c}fluid`],_.invalid&&i.styles[`${c}error`],l&&i.styles[`${c}disabled`],o&&i.styles[`${c}read-only`],f&&i.styles[`${c}empty`],e&&i.styles[`${c}multiple`],i.styles[`${c}dropdown-${Se}`],K),{canClear:me,handleClear:he}=Te.useClearSelection({multiple:e,clearable:Z,isEmpty:f,disabled:l,readOnly:o,setValue:I,setOpen:O}),{chipGroupProps:fe,handleBlur:B,selectedChip:Oe,setSelectedChip:ve,enabled:qe,selectPreviousChip:Ce,selectNextChip:ge,options:Pe,deselectOptionValue:je}=Ee.useSelectChips({multiple:e,disabled:l,readOnly:o,open:w,setOpen:O,options:N,deselectOptionValue:$,fieldRef:_e.domReference}),{getKeyboardProps:Ie}=Re.useSelectKeyboardManager({multiple:e,disabled:l,readOnly:o,open:w,setOpen:O,chips:{enabled:qe,selectedChip:Oe,setSelectedChip:ve,selectPreviousChip:Ce,selectNextChip:ge,options:Pe,deselectOptionValue:je}}),Me=n.useMemo(()=>Je.createSelectionStrategy(e),[e]),Ne=n.useCallback(()=>{M(),B()},[M,B]),{ref:$e,...we}=Ie(be());return s.jsxs(A.OptionsProvider,{value:ue,children:[s.jsxs("div",{className:ye,style:{maxWidth:V},children:[s.jsx(Le.LabelProvider,{ctxHtmlFor:g,ctxDisabled:l,ctxRequired:P&&!G,ctxId:j,children:q}),s.jsx(Ke.SelectField,{id:g,disabled:l,readOnly:o,required:P,invalid:_.invalid,errorMessage:_.errorMessage,labelId:!x.ariaLabel&&q?j:void 0,ariaLabel:x.ariaLabel,describedBy:_.describedBy,contentBefore:E,contentAfter:R,chips:s.jsx(He.OptionChips,{multiple:e,disabled:l,readOnly:o,selectedOptions:N,deselectOptionValue:$,chipGroupProps:fe,input:s.jsx("input",{className:i.styles[`${v}field__input`],placeholder:e&&!f?"":Q,disabled:l,readOnly:!0,autoComplete:"off",tabIndex:-1,autoFocus:!1,value:e?"":pe??S})}),hasClearButton:me,onClear:he,onBlur:Ne,...we,ref:$e}),s.jsxs(Ae.HelperTextProvider,{ctxId:re,ctxDisabled:l,children:[C,ce&&s.jsx(F.HelperText,{id:oe,appearance:"negative",children:a})]}),te(ne)]}),s.jsxs("select",{...ee,...de,hidden:!0,multiple:e,children:[s.jsx("option",{value:"",children:"empty"}),k]}),s.jsx(ke.SelectDropdown,{...xe,className:i.styles[`${v}dropdown`],disabled:l,readOnly:o,theme:h,multiple:e,children:s.jsx(L.ActionList,{role:"listbox",children:u.map(r=>{const t=p.get(r);if(!t)return null;const Be=Me.isSelected(t.value,d);return n.createElement(L.ActionList.Item,{...t,className:D(i.styles[`${v}option`],t.className),defaultSelected:Be,key:`opt-${t.value??t.label}`,kind:e?"checkbox":"singleCheckMark",role:"option"})})})})]})}),m=Ue;m.Option=We.Option;m.displayName="Select";exports.Select=m;exports.default=m;

package/lib/Select/Select.d.ts

@@ -0,0 +1,95 @@
+import { FormValidator } from '@viasat/beam-shared/components/form';
+import { ThemeTypes } from '@viasat/beam-shared/utils';
+import { default as React, FC, PropsWithoutRef, ReactNode } from 'react';
+import { Option } from '../_Options';
+export interface SelectProps extends React.ComponentPropsWithRef<'select'> {
+    /**
+     * Specify HelperText for Select
+     */
+    helperText?: ReactNode;
+    /**
+     * Specify Label for Select
+     */
+    label?: ReactNode;
+    /**
+     * Specify if Select is a required input
+     *
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Specify if Select displays in a read-only state
+     *
+     * @default false
+     */
+    readOnly?: boolean;
+    /**
+     * Specify if Select displays in a disabled state
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Specify error text and display error state of a Select
+     */
+    error?: boolean | string;
+    /**
+     * Specify if Select is fluid
+     *
+     * @default false
+     */
+    fluid?: boolean;
+    /**
+     * Specify the width of Select
+     */
+    width?: string;
+    /**
+     * Specify if the Select displays with an asterisk
+     *
+     * @default false
+     */
+    hideRequiredMarker?: boolean;
+    /**
+     * Specify form validation rules for Select
+     */
+    validationRules?: FormValidator[];
+    /**
+     * Specify the theme of the Select. By default it inherits the theme from the parent
+     */
+    theme?: ThemeTypes;
+    /**
+     * Sets the selection type to multiselect. Set this to true for multiselect, even if fully controlling selection state. This enables styles and accessibility properties to be set
+     *
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * Specify if the Select is clearable. Defaults to `true` if `multiple` is set, `false` otherwise
+     */
+    clearable?: boolean;
+    /**
+     * Specify content to display before selection
+     */
+    contentBefore?: ReactNode;
+    /**
+     * Specify content to display after selection
+     */
+    contentAfter?: ReactNode;
+    /**
+     * Add `Select.Option` components as children
+     */
+    children: ReactNode;
+    /**
+     * Specify an accessible label for the Select
+     */
+    ariaLabel?: string;
+    /**
+     * Specify a placeholder for the Select
+     */
+    placeholder?: string;
+}
+declare const SelectComponent: FC<PropsWithoutRef<SelectProps>>;
+export declare const Select: typeof SelectComponent & {
+    Option: typeof Option;
+};
+export default Select;