@basic-ui/core 0.0.41 → 0.0.44

package/build/esm/RadioButton/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/RadioButton/RadioGroup.tsx"],"names":["forwardRef","useId","RadioGroupProvider","useControlledState","RadioGroup","props","forwardedRef","as","Comp","onChangeProp","onChange","valueProp","value","nameProp","name","defaultValue","otherProps","setValue","e","fallbackId"],"mappings":";;;AAMA,SAASA,UAAT,EAAqBC,KAArB,QAAkC,OAAlC;AAGA,SAASC,kBAAT,QAAmC,WAAnC;AACA,SAASC,kBAAT,QAAmC,UAAnC;;AAgBA,OAAO,IAAMC,UAAU,gBAAGJ,UAAU,CAClC,SAASI,UAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAAyC;AAAA,kBAQnCD,KARmC,CAErCE,EAFqC;AAAA,MAEjCC,IAFiC,0BAE1B,KAF0B;AAAA,MAG3BC,YAH2B,GAQnCJ,KARmC,CAGrCK,QAHqC;AAAA,MAI9BC,SAJ8B,GAQnCN,KARmC,CAIrCO,KAJqC;AAAA,MAK/BC,QAL+B,GAQnCR,KARmC,CAKrCS,IALqC;AAAA,MAMrCC,YANqC,GAQnCV,KARmC,CAMrCU,YANqC;AAAA,MAOlCC,UAPkC,4BAQnCX,KARmC;;AAAA,4BASbF,kBAAkB,CAC1CQ,SAD0C,EAE1CF,YAF0C,EAG1CM,YAH0C,EAI1C,UAACE,QAAD;AAAA,WAAc,UAACC,CAAD,EAAIN,KAAJ,EAAc;AAC1BK,MAAAA,QAAQ,CAACL,KAAD,CAAR;AACD,KAFD;AAAA,GAJ0C,CATL;AAAA;AAAA,MAShCA,KATgC;AAAA,MASzBF,QATyB;;AAkBvC,MAAMS,UAAU,GAAGlB,KAAK,EAAxB;AAEA,sBACE,KAAC,kBAAD;AACE,IAAA,KAAK,EAAE;AACLW,MAAAA,KAAK,EAALA,KADK;AAELF,MAAAA,QAAQ,EAARA,QAFK;AAGLI,MAAAA,IAAI,EAAED,QAAQ,IAAIM;AAHb,KADT;AAAA,2BAOE,KAAC,IAAD;AAAM,MAAA,GAAG,EAAEb,YAAX;AAAyB,MAAA,IAAI,EAAC;AAA9B,OAA+CU,UAA/C;AAPF,IADF;AAWD,CAhCiC,CAA7B","sourcesContent":["import type {\n  ChangeEvent,\n  ElementType,\n  HTMLAttributes,\n  ReactNode,\n} from 'react';\nimport { forwardRef, useId } from 'react';\n\nimport type { RadioValue } from './context';\nimport { RadioGroupProvider } from './context';\nimport { useControlledState } from '../hooks';\n\nexport interface RadioGroupProps\n  extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    'onChange' | 'value' | 'defaultValue'\n  > {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  children?: ReactNode;\n  value?: RadioValue;\n  defaultValue?: RadioValue;\n  name?: string;\n  onChange?: (e: ChangeEvent<HTMLInputElement>, value: RadioValue) => void;\n}\n\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  function RadioGroup(props, forwardedRef) {\n    const {\n      as: Comp = 'div',\n      onChange: onChangeProp,\n      value: valueProp,\n      name: nameProp,\n      defaultValue,\n      ...otherProps\n    } = props;\n    const [value, onChange] = useControlledState(\n      valueProp,\n      onChangeProp,\n      defaultValue,\n      (setValue) => (e, value) => {\n        setValue(value);\n      }\n    );\n\n    const fallbackId = useId();\n\n    return (\n      <RadioGroupProvider\n        value={{\n          value,\n          onChange,\n          name: nameProp || fallbackId,\n        }}\n      >\n        <Comp ref={forwardedRef} role=\"radiogroup\" {...otherProps} />\n      </RadioGroupProvider>\n    );\n  }\n);\n"],"file":"RadioGroup.js"}
+{"version":3,"file":"RadioGroup.js","names":["forwardRef","useId","RadioGroupProvider","useControlledState","RadioGroup","props","forwardedRef","as","Comp","onChangeProp","onChange","valueProp","value","nameProp","name","defaultValue","otherProps","setValue","e","fallbackId"],"sources":["../../../src/RadioButton/RadioGroup.tsx"],"sourcesContent":["import type {\n  ChangeEvent,\n  ElementType,\n  HTMLAttributes,\n  ReactNode,\n} from 'react';\nimport { forwardRef, useId } from 'react';\n\nimport type { RadioValue } from './context';\nimport { RadioGroupProvider } from './context';\nimport { useControlledState } from '../hooks';\n\nexport interface RadioGroupProps\n  extends Omit<\n    HTMLAttributes<HTMLDivElement>,\n    'onChange' | 'value' | 'defaultValue'\n  > {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  children?: ReactNode;\n  value?: RadioValue;\n  defaultValue?: RadioValue;\n  name?: string;\n  onChange?: (e: ChangeEvent<HTMLInputElement>, value: RadioValue) => void;\n}\n\nexport const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(\n  function RadioGroup(props, forwardedRef) {\n    const {\n      as: Comp = 'div',\n      onChange: onChangeProp,\n      value: valueProp,\n      name: nameProp,\n      defaultValue,\n      ...otherProps\n    } = props;\n    const [value, onChange] = useControlledState(\n      valueProp,\n      onChangeProp,\n      defaultValue,\n      (setValue) => (e, value) => {\n        setValue(value);\n      }\n    );\n\n    const fallbackId = useId();\n\n    return (\n      <RadioGroupProvider\n        value={{\n          value,\n          onChange,\n          name: nameProp || fallbackId,\n        }}\n      >\n        <Comp ref={forwardedRef} role=\"radiogroup\" {...otherProps} />\n      </RadioGroupProvider>\n    );\n  }\n);\n"],"mappings":";;;;AAMA,SAASA,UAAT,EAAqBC,KAArB,QAAkC,OAAlC;AAGA,SAASC,kBAAT,QAAmC,WAAnC;AACA,SAASC,kBAAT,QAAmC,UAAnC;;AAgBA,OAAO,IAAMC,UAAU,gBAAGJ,UAAU,CAClC,SAASI,UAAT,CAAoBC,KAApB,EAA2BC,YAA3B,EAAyC;EACvC,gBAOID,KAPJ,CACEE,EADF;EAAA,IACMC,IADN,0BACa,KADb;EAAA,IAEYC,YAFZ,GAOIJ,KAPJ,CAEEK,QAFF;EAAA,IAGSC,SAHT,GAOIN,KAPJ,CAGEO,KAHF;EAAA,IAIQC,QAJR,GAOIR,KAPJ,CAIES,IAJF;EAAA,IAKEC,YALF,GAOIV,KAPJ,CAKEU,YALF;EAAA,IAMKC,UANL,4BAOIX,KAPJ;;EAQA,0BAA0BF,kBAAkB,CAC1CQ,SAD0C,EAE1CF,YAF0C,EAG1CM,YAH0C,EAI1C,UAACE,QAAD;IAAA,OAAc,UAACC,CAAD,EAAIN,KAAJ,EAAc;MAC1BK,QAAQ,CAACL,KAAD,CAAR;IACD,CAFD;EAAA,CAJ0C,CAA5C;EAAA;EAAA,IAAOA,KAAP;EAAA,IAAcF,QAAd;;EASA,IAAMS,UAAU,GAAGlB,KAAK,EAAxB;EAEA,oBACE,KAAC,kBAAD;IACE,KAAK,EAAE;MACLW,KAAK,EAALA,KADK;MAELF,QAAQ,EAARA,QAFK;MAGLI,IAAI,EAAED,QAAQ,IAAIM;IAHb,CADT;IAAA,uBAOE,KAAC,IAAD;MAAM,GAAG,EAAEb,YAAX;MAAyB,IAAI,EAAC;IAA9B,GAA+CU,UAA/C;EAPF,EADF;AAWD,CAhCiC,CAA7B"}

package/build/esm/RadioButton/context.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/RadioButton/context.ts"],"names":["createContext","useContext","RadioGroupContext","undefined","RadioGroupProvider","Provider","useRadioGroupContext"],"mappings":"AACA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAWA,IAAMC,iBAAiB,gBAAGF,aAAa,CACrCG,SADqC,CAAvC;IAGyBC,kB,GAAuBF,iB,CAAjCG,Q;;AACf,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB;AAAA,SAAML,UAAU,CAACC,iBAAD,CAAhB;AAAA,CAA7B","sourcesContent":["import type { ChangeEvent } from 'react';\nimport { createContext, useContext } from 'react';\n\nexport type RadioValue = string | number | boolean;\n\n// RadioGroup Component\nexport interface RadioGroupContextProps {\n  value: RadioValue | undefined;\n  onChange?: (e: ChangeEvent<HTMLInputElement>, value: RadioValue) => void;\n  name: string | undefined;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextProps | undefined>(\n  undefined\n);\nexport const { Provider: RadioGroupProvider } = RadioGroupContext;\nexport const useRadioGroupContext = () => useContext(RadioGroupContext);\n"],"file":"context.js"}
+{"version":3,"file":"context.js","names":["createContext","useContext","RadioGroupContext","undefined","RadioGroupProvider","Provider","useRadioGroupContext"],"sources":["../../../src/RadioButton/context.ts"],"sourcesContent":["import type { ChangeEvent } from 'react';\nimport { createContext, useContext } from 'react';\n\nexport type RadioValue = string | number | boolean;\n\n// RadioGroup Component\nexport interface RadioGroupContextProps {\n  value: RadioValue | undefined;\n  onChange?: (e: ChangeEvent<HTMLInputElement>, value: RadioValue) => void;\n  name: string | undefined;\n}\n\nconst RadioGroupContext = createContext<RadioGroupContextProps | undefined>(\n  undefined\n);\nexport const { Provider: RadioGroupProvider } = RadioGroupContext;\nexport const useRadioGroupContext = () => useContext(RadioGroupContext);\n"],"mappings":"AACA,SAASA,aAAT,EAAwBC,UAAxB,QAA0C,OAA1C;AAWA,IAAMC,iBAAiB,gBAAGF,aAAa,CACrCG,SADqC,CAAvC;AAGO,IAAkBC,kBAAlB,GAAyCF,iBAAzC,CAAQG,QAAR;;AACP,OAAO,IAAMC,oBAAoB,GAAG,SAAvBA,oBAAuB;EAAA,OAAML,UAAU,CAACC,iBAAD,CAAhB;AAAA,CAA7B"}

package/build/esm/RadioButton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/RadioButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAd;AACA,cAAc,cAAd","sourcesContent":["export * from './RadioButton';\nexport * from './RadioGroup';\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/RadioButton/index.ts"],"sourcesContent":["export * from './RadioButton';\nexport * from './RadioGroup';\n"],"mappings":"AAAA,cAAc,eAAd;AACA,cAAc,cAAd"}

package/build/esm/SkipNav/SkipNav.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as"];
 import { forwardRef } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var SkipNav = /*#__PURE__*/forwardRef(function SkipNav(props, forwardedRef) {
   var _props$as = props.as,
       Comp = _props$as === void 0 ? 'div' : _props$as,
-      otherProps = _objectWithoutProperties(props, ["as"]);
+      otherProps = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/_jsx(Comp, _extends({
     ref: forwardedRef

package/build/esm/SkipNav/SkipNav.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/SkipNav/SkipNav.tsx"],"names":["forwardRef","SkipNav","props","forwardedRef","as","Comp","otherProps"],"mappings":";;AACA,SAASA,UAAT,QAA2B,OAA3B;;AAQA,OAAO,IAAMC,OAAO,gBAAGD,UAAU,CAC/B,SAASC,OAAT,CAAiBC,KAAjB,EAAwBC,YAAxB,EAAsC;AAAA,kBACQD,KADR,CAC5BE,EAD4B;AAAA,MACxBC,IADwB,0BACjB,KADiB;AAAA,MACPC,UADO,4BACQJ,KADR;;AAGpC,sBAAO,KAAC,IAAD;AAAM,IAAA,GAAG,EAAEC;AAAX,KAA6BG,UAA7B,EAAP;AACD,CAL8B,CAA1B","sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nexport interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  children?: ReactNode;\n}\n\nexport const SkipNav = forwardRef<HTMLDivElement, SkipNavProps>(\n  function SkipNav(props, forwardedRef) {\n    const { as: Comp = 'div', ...otherProps } = props;\n\n    return <Comp ref={forwardedRef} {...otherProps} />;\n  }\n);\n"],"file":"SkipNav.js"}
+{"version":3,"file":"SkipNav.js","names":["forwardRef","SkipNav","props","forwardedRef","as","Comp","otherProps"],"sources":["../../../src/SkipNav/SkipNav.tsx"],"sourcesContent":["import type { ElementType, HTMLAttributes, ReactNode } from 'react';\nimport { forwardRef } from 'react';\n\nexport interface SkipNavProps extends HTMLAttributes<HTMLDivElement> {\n  as?: ElementType<any>;\n  innerAs?: ElementType<any>;\n  children?: ReactNode;\n}\n\nexport const SkipNav = forwardRef<HTMLDivElement, SkipNavProps>(\n  function SkipNav(props, forwardedRef) {\n    const { as: Comp = 'div', ...otherProps } = props;\n\n    return <Comp ref={forwardedRef} {...otherProps} />;\n  }\n);\n"],"mappings":";;;AACA,SAASA,UAAT,QAA2B,OAA3B;;AAQA,OAAO,IAAMC,OAAO,gBAAGD,UAAU,CAC/B,SAASC,OAAT,CAAiBC,KAAjB,EAAwBC,YAAxB,EAAsC;EACpC,gBAA4CD,KAA5C,CAAQE,EAAR;EAAA,IAAYC,IAAZ,0BAAmB,KAAnB;EAAA,IAA6BC,UAA7B,4BAA4CJ,KAA5C;;EAEA,oBAAO,KAAC,IAAD;IAAM,GAAG,EAAEC;EAAX,GAA6BG,UAA7B,EAAP;AACD,CAL8B,CAA1B"}

package/build/esm/SkipNav/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/SkipNav/index.tsx"],"names":[],"mappings":"AAAA,cAAc,WAAd","sourcesContent":["export * from './SkipNav';\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/SkipNav/index.tsx"],"sourcesContent":["export * from './SkipNav';\n"],"mappings":"AAAA,cAAc,WAAd"}

package/build/esm/Slider/Slider.d.ts

@@ -0,0 +1,218 @@
+/**
+ * Welcome to @reach/slider!
+ *
+ * A UI input component where the user selects a value from within a given
+ * range. A Slider has a handle that can be moved along a track to change its
+ * value. When the user's mouse or focus is on the Slider's handle, the value
+ * can be incremented with keyboard controls.
+ *
+ * Random thoughts/notes:
+ *  - Currently testing this against the behavior of the native input range
+ *    element to get our slider on par. We'll explore animated and multi-handle
+ *    sliders next.
+ *  - We may want to research some use cases for reversed sliders in RTL
+ *    languages if that's a thing
+ *
+ * @see Docs     https://reach.tech/slider
+ * @see Source   https://github.com/reach/reach-ui/tree/main/packages/slider
+ * @see WAI-ARIA https://www.w3.org/TR/wai-aria-practices-1.2/#slider
+ * @see Example  https://github.com/Stanko/aria-progress-range-slider
+ * @see Example  http://www.oaa-accessibility.org/examplep/slider1/
+ */
+import type { ReactNode, KeyboardEvent } from 'react';
+import type * as Polymorphic from '../utils/polymorphic';
+declare type SliderOrientation = 'horizontal' | 'vertical';
+declare type SliderHandleAlignment = 'center' | 'contain';
+/**
+ * Slider
+ *
+ * @see Docs https://reach.tech/slider#slider
+ */
+declare const Slider: Polymorphic.ForwardRefComponent<"div", SliderProps>;
+/**
+ * @see Docs https://reach.tech/slider#slider-props
+ */
+interface SliderProps {
+    /**
+     * `Slider` can accept `SliderMarker` children to enhance display of specific
+     * values along the track.
+     *
+     * @see Docs https://reach.tech/slider#slider-children
+     */
+    children?: ReactNode;
+    /**
+     * The defaultValue is used to set an initial value for an uncontrolled
+     * Slider.
+     *
+     * @see Docs https://reach.tech/slider#slider-defaultvalue
+     */
+    defaultValue?: number;
+    /**
+     * @see Docs https://reach.tech/slider#slider-disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether or not the slider should be disabled from user interaction.
+     *
+     * @see Docs https://reach.tech/slider#slider-value
+     */
+    value?: number;
+    /**
+     * A function used to set a human-readable name for the slider.
+     *
+     * @see Docs https://reach.tech/slider#slider-getarialabel
+     */
+    getAriaLabel?(value: number): string;
+    /**
+     * A function used to set a human-readable value text based on the slider's
+     * current value.
+     *
+     * @see Docs https://reach.tech/slider#slider-getariavaluetext
+     */
+    getAriaValueText?(value: number): string;
+    /**
+     * When set to `center`, the slider's handle will be positioned directly
+     * centered over the slider's curremt value on the track. This means that when
+     * the slider is at its min or max value, a visiable slider handle will extend
+     * beyond the width (or height in vertical mode) of the slider track. When set
+     * to `contain`, the slider handle will always be contained within the bounds
+     * of the track, meaning its position will be slightly offset from the actual
+     * value depending on where it sits on the track.
+     *
+     * @see Docs https://reach.tech/slider#slider-handlealignment
+     */
+    handleAlignment?: SliderHandleAlignment;
+    /**
+     * The maximum value of the slider. Defaults to `100`.
+     *
+     * @see Docs https://reach.tech/slider#slider-max
+     */
+    max?: number;
+    /**
+     * The minimum value of the slider. Defaults to `0`.
+     *
+     * @see Docs https://reach.tech/slider#slider-min
+     */
+    min?: number;
+    /**
+     * If the slider is used as a form input, it should accept a `name` prop to
+     * identify its value in context of the form.
+     *
+     * @see Docs https://reach.tech/slider#slider-name
+     */
+    name?: string;
+    /**
+     * Callback that fires when the slider value changes. When the `value` prop is
+     * set, the Slider state becomes controlled and `onChange` must be used to
+     * update the value in response to user interaction.
+     *
+     * @see Docs https://reach.tech/slider#slider-onchange
+     */
+    onChange?(e: SomePointerEvent | KeyboardEvent, newValue: number, props?: {
+        min?: number;
+        max?: number;
+        handlePosition?: string;
+    }): void;
+    onMouseDown?(event: MouseEvent): void;
+    onMouseMove?(event: MouseEvent): void;
+    onMouseUp?(event: MouseEvent): void;
+    onPointerDown?(event: PointerEvent): void;
+    onPointerUp?(event: PointerEvent): void;
+    onTouchEnd?(event: TouchEvent): void;
+    onTouchMove?(event: TouchEvent): void;
+    onTouchStart?(event: TouchEvent): void;
+    /**
+     * Sets the slider to horizontal or vertical mode.
+     *
+     * @see Docs https://reach.tech/slider#slider-orientation
+     */
+    orientation?: SliderOrientation;
+    /**
+     * The step attribute is a number that specifies the granularity that the
+     * value must adhere to as it changes. Step sets minimum intervals of change,
+     * creating a "snap" effect when the handle is moved along the track.
+     *
+     * @see Docs https://reach.tech/slider#slider-step
+     */
+    step?: number;
+}
+/**
+ * SliderInput
+ *
+ * The parent component of the slider interface. This is a lower level component
+ * if you need more control over styles or rendering the slider's inner
+ * components.
+ *
+ * @see Docs https://reach.tech/slider#sliderinput
+ */
+declare const SliderInput: Polymorphic.ForwardRefComponent<"div", SliderInputProps>;
+/**
+ * @see Docs https://reach.tech/slider#sliderinput-props
+ */
+declare type SliderInputProps = Omit<SliderProps, 'children'> & {
+    /**
+     * Slider expects `<SliderTrack>` as its child; The track will accept all
+     * additional slider sub-components as children. It can also accept a
+     * function/render prop as its child to expose some of its internal state
+     * variables.
+     *
+     * @see Docs https://reach.tech/slider#sliderinput-children
+     */
+    children: ReactNode | SliderChildrenRender;
+};
+declare const SliderTrack: Polymorphic.MemoComponent<"div", SliderTrackProps>;
+/**
+ * @see Docs https://reach.tech/slider#slidertrack-props
+ */
+interface SliderTrackProps {
+    /**
+     * `SliderTrack` expects `<SliderHandle>`, at minimum, for the Slider to
+     * function. All other Slider subcomponents should be passed as children
+     * inside the `SliderTrack`.
+     *
+     * @see Docs https://reach.tech/slider#slidertrack-children
+     */
+    children: ReactNode;
+}
+declare const SliderRange: Polymorphic.MemoComponent<"div", SliderRangeProps>;
+/**
+ * `SliderRange` accepts any props that a HTML div component accepts.
+ * `SliderRange` will not accept or render any children.
+ *
+ * @see Docs https://reach.tech/slider#sliderrange-props
+ */
+interface SliderRangeProps {
+}
+declare const SliderHandle: Polymorphic.MemoComponent<"div", SliderHandleProps>;
+/**
+ * `SliderRange` accepts any props that a HTML div component accepts.
+ *
+ * @see Docs https://reach.tech/slider#sliderhandle-props
+ */
+interface SliderHandleProps {
+}
+declare const SliderMarker: Polymorphic.MemoComponent<"div", SliderMarkerProps>;
+/**
+ * @see Docs https://reach.tech/slider#slidermarker-props
+ */
+interface SliderMarkerProps {
+    /**
+     * The value to denote where the marker should appear along the track.
+     *
+     * @see Docs https://reach.tech/slider#slidermarker-value
+     */
+    value: number;
+}
+declare type SomePointerEvent = TouchEvent | MouseEvent;
+declare type SliderChildrenRender = (props: {
+    ariaValueText?: string | undefined;
+    hasFocus?: boolean;
+    id?: string | undefined;
+    sliderId?: string | undefined;
+    max?: number;
+    min?: number;
+    value?: number;
+}) => JSX.Element;
+export default Slider;
+export type { SliderHandleProps, SliderInputProps, SliderMarkerProps, SliderProps, SliderRangeProps, SliderTrackProps, SliderHandleAlignment, SliderOrientation, };
+export { Slider, SliderHandle, SliderInput, SliderMarker, SliderTrack, SliderRange, };