@basic-ui/core 0.0.53 → 0.0.54

package/src/Accordion/context.ts

@@ -1,37 +1,37 @@
-import type { KeyboardEvent, MouseEvent } from 'react';
-import { useContext, createContext } from 'react';
-
-import type { Scope } from '../hooks/useScope';
-
-// AccordionGroup Component
-export interface AccordionContextProps {
-  childrenHeaderHasFocus: boolean;
-  setChildrenHeaderHasFocus: (value: boolean) => void;
-  scope: Scope<HTMLElement>;
-  expandedIndex: number;
-  onChange?: (
-    e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
-    index: number
-  ) => void;
-}
-
-const accordionContext = createContext<AccordionContextProps | null>(null);
-export const { Provider: AccordionProvider } = accordionContext;
-export const useAccordionContext = () => useContext(accordionContext);
-
-// Accordion Component
-export interface AccordionItemContextProps {
-  headerId: string | undefined;
-  bodyId: string | undefined;
-  expanded: boolean;
-  onChange?: (
-    e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
-    value: boolean
-  ) => void;
-}
-
-const accordionItemContext = createContext<AccordionItemContextProps | null>(
-  null
-);
-export const { Provider: AccordionItemProvider } = accordionItemContext;
-export const useAccordionItemContext = () => useContext(accordionItemContext);
+import type { KeyboardEvent, MouseEvent } from 'react';
+import { useContext, createContext } from 'react';
+
+import type { Scope } from '../hooks/useScope';
+
+// AccordionGroup Component
+export interface AccordionContextProps {
+  childrenHeaderHasFocus: boolean;
+  setChildrenHeaderHasFocus: (value: boolean) => void;
+  scope: Scope<HTMLElement>;
+  expandedIndex: number;
+  onChange?: (
+    e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
+    index: number
+  ) => void;
+}
+
+const accordionContext = createContext<AccordionContextProps | null>(null);
+export const { Provider: AccordionProvider } = accordionContext;
+export const useAccordionContext = () => useContext(accordionContext);
+
+// Accordion Component
+export interface AccordionItemContextProps {
+  headerId: string | undefined;
+  bodyId: string | undefined;
+  expanded: boolean;
+  onChange?: (
+    e: KeyboardEvent<HTMLDivElement> | MouseEvent<HTMLDivElement>,
+    value: boolean
+  ) => void;
+}
+
+const accordionItemContext = createContext<AccordionItemContextProps | null>(
+  null
+);
+export const { Provider: AccordionItemProvider } = accordionItemContext;
+export const useAccordionItemContext = () => useContext(accordionItemContext);

package/src/Accordion/index.ts

@@ -1,4 +1,4 @@
-export * from './Accordion';
-export * from './AccordionItem';
-export * from './AccordionHeader';
-export * from './AccordionBody';
+export * from './Accordion';
+export * from './AccordionItem';
+export * from './AccordionHeader';
+export * from './AccordionBody';

package/src/Accordion/scopeQuery.ts

@@ -1,7 +1,7 @@
-export function headerScopeQuery(type: string, props: Record<string, unknown>) {
-  return props['data-accordion-header'] === '';
-}
-
-export function bodyScopeQuery(type: string, props: Record<string, unknown>) {
-  return props['data-accordion-body'] === '';
-}
+export function headerScopeQuery(type: string, props: Record<string, unknown>) {
+  return props['data-accordion-header'] === '';
+}
+
+export function bodyScopeQuery(type: string, props: Record<string, unknown>) {
+  return props['data-accordion-body'] === '';
+}

package/src/Accordion/styles.css

@@ -1,21 +1,21 @@
-[data-accordion-root] {
-  box-sizing: border-box;
-  max-width: 300px;
-  padding: 32px;
-  border: solid 1px #aaa;
-  margin: 32px;
-}
-[data-accordion-root][data-children-has-focus='true'] {
-  border-color: red;
-}
-
-[data-accordion-body]:not([hidden]) {
-  box-sizing: border-box;
-  padding: 16px 0;
-  display: flex;
-  flex-direction: column;
-}
-
-[data-accordion-header] {
-  cursor: pointer;
-}
+[data-accordion-root] {
+  box-sizing: border-box;
+  max-width: 300px;
+  padding: 32px;
+  border: solid 1px #aaa;
+  margin: 32px;
+}
+[data-accordion-root][data-children-has-focus='true'] {
+  border-color: red;
+}
+
+[data-accordion-body]:not([hidden]) {
+  box-sizing: border-box;
+  padding: 16px 0;
+  display: flex;
+  flex-direction: column;
+}
+
+[data-accordion-header] {
+  cursor: pointer;
+}

package/src/CheckBox/CheckBox.tsx

@@ -1,41 +1,41 @@
-import type { ElementType, InputHTMLAttributes, ReactNode } from 'react';
-import { forwardRef } from 'react';
-
-import { useControlledState } from '../hooks';
-
-export interface CheckBoxProps extends InputHTMLAttributes<HTMLInputElement> {
-  as?: ElementType<any>;
-  innerAs?: ElementType<any>;
-  children?: ReactNode;
-}
-
-export const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
-  function CheckBox(props, forwardedRef) {
-    const {
-      as: Comp = 'input',
-      checked: checkedProp,
-      defaultChecked = false,
-      onChange: onChangeProp,
-      ...otherProps
-    } = props;
-    const [checked, onChange] = useControlledState(
-      checkedProp,
-      onChangeProp,
-      defaultChecked,
-      (setValue) => (e) => {
-        setValue(e.target.checked);
-      }
-    );
-
-    return (
-      <Comp
-        ref={forwardedRef}
-        type="checkbox"
-        checked={checked}
-        aria-checked={checked}
-        onChange={onChange}
-        {...otherProps}
-      />
-    );
-  }
-);
+import type { ElementType, InputHTMLAttributes, ReactNode } from 'react';
+import { forwardRef } from 'react';
+
+import { useControlledState } from '../hooks';
+
+export interface CheckBoxProps extends InputHTMLAttributes<HTMLInputElement> {
+  as?: ElementType<any>;
+  innerAs?: ElementType<any>;
+  children?: ReactNode;
+}
+
+export const CheckBox = forwardRef<HTMLInputElement, CheckBoxProps>(
+  function CheckBox(props, forwardedRef) {
+    const {
+      as: Comp = 'input',
+      checked: checkedProp,
+      defaultChecked = false,
+      onChange: onChangeProp,
+      ...otherProps
+    } = props;
+    const [checked, onChange] = useControlledState(
+      checkedProp,
+      onChangeProp,
+      defaultChecked,
+      (setValue) => (e) => {
+        setValue(e.target.checked);
+      }
+    );
+
+    return (
+      <Comp
+        ref={forwardedRef}
+        type="checkbox"
+        checked={checked}
+        aria-checked={checked}
+        onChange={onChange}
+        {...otherProps}
+      />
+    );
+  }
+);

package/src/CheckBox/index.ts

@@ -1 +1 @@
-export * from './CheckBox';
+export * from './CheckBox';

package/src/ComboBox/ComboBox.story.tsx

@@ -1,120 +1,120 @@
-import type { ChangeEvent } from 'react';
-import { useMemo, useState } from 'react';
-
-import { ComboboxOption } from './ComboboxOption';
-import { ComboboxList } from './ComboboxList';
-import { ComboboxPopover } from './ComboboxPopover';
-import { ComboboxInput } from './ComboboxInput';
-import { ComboboxLabel } from './ComboboxLabel';
-import { Combobox } from './Combobox';
-import cities from './cities';
-import './styles.css';
-
-export default {
-  title: 'components/Combobox',
-};
-
-function useCityMatch(searchTerm: string) {
-  return useMemo(() => {
-    const term = searchTerm.trim().toLowerCase();
-    return term === ''
-      ? []
-      : cities.filter(
-          (city) =>
-            city.city.toLowerCase().indexOf(term) !== -1 ||
-            city.state.toLowerCase().indexOf(term) !== -1
-        );
-  }, [searchTerm]);
-}
-
-export function UncontrolledClientSideExample({ initialValue = '' }) {
-  const [term, setTerm] = useState(initialValue);
-  const [selected, setSelected] = useState(initialValue);
-  const results = useCityMatch(term);
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setTerm(event.target.value);
-  };
-
-  const handleSelect = (value: string) => {
-    setSelected(value);
-  };
-
-  return (
-    <div>
-      <h2>Clientside Search</h2>
-      <p>Selection: {selected}</p>
-      <p>Term: {term}</p>
-      <Combobox onSelect={handleSelect} selectOnBlur>
-        <ComboboxLabel>Enter a city name</ComboboxLabel>
-        <br />
-        <ComboboxInput onChange={handleChange} defaultValue={initialValue} />
-        {results.length > 0 && (
-          <ComboboxPopover>
-            <ComboboxList persistSelection={true}>
-              {results.slice(0, 100).map((result, index) => (
-                <ComboboxOption
-                  key={`${result.city}, ${result.state}, ${index}`}
-                  id={`${result.city}, ${result.state}, ${index}`}
-                  text={`${result.city}, ${result.state}`}
-                  value={result}
-                />
-              ))}
-            </ComboboxList>
-          </ComboboxPopover>
-        )}
-      </Combobox>
-    </div>
-  );
-}
-
-export function ControlledClientSideExample({ initialValue = '' }) {
-  const [term, setTerm] = useState(initialValue);
-  const [selected, setSelected] = useState(initialValue);
-  const results = useCityMatch(term);
-
-  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
-    setTerm(event.target.value);
-    setSelected('');
-  };
-
-  const handleSelect = (value: string) => {
-    setSelected(value);
-  };
-
-  return (
-    <div>
-      <h2>Clientside Search</h2>
-      <p>Selection: {selected}</p>
-      <p>Term: {term}</p>
-      <Combobox onSelect={handleSelect} selectOnBlur>
-        <ComboboxLabel>Enter a city name</ComboboxLabel>
-        <br />
-        <ComboboxInput onChange={handleChange} value={selected || term} />
-        {results.length > 0 && (
-          <ComboboxPopover>
-            <ComboboxList persistSelection={true}>
-              {results.slice(0, 10).map((result, index) => (
-                <ComboboxOption
-                  key={`${result.city}, ${result.state}, ${index}`}
-                  id={`${result.city}, ${result.state}, ${index}`}
-                  text={`${result.city}, ${result.state}`}
-                  value={result}
-                />
-              ))}
-            </ComboboxList>
-          </ComboboxPopover>
-        )}
-      </Combobox>
-    </div>
-  );
-}
-
-export const UncontrolledClientSide = () => <UncontrolledClientSideExample />;
-export const UncontrolledClientSideInitial = () => (
-  <UncontrolledClientSideExample initialValue="Aberdeen" />
-);
-export const ControlledClientSide = () => <ControlledClientSideExample />;
-export const ControlledClientsideInitial = () => (
-  <ControlledClientSideExample initialValue="Aberdeen" />
-);
+import type { ChangeEvent } from 'react';
+import { useMemo, useState } from 'react';
+
+import { ComboboxOption } from './ComboboxOption';
+import { ComboboxList } from './ComboboxList';
+import { ComboboxPopover } from './ComboboxPopover';
+import { ComboboxInput } from './ComboboxInput';
+import { ComboboxLabel } from './ComboboxLabel';
+import { Combobox } from './Combobox';
+import cities from './cities';
+import './styles.css';
+
+export default {
+  title: 'components/Combobox',
+};
+
+function useCityMatch(searchTerm: string) {
+  return useMemo(() => {
+    const term = searchTerm.trim().toLowerCase();
+    return term === ''
+      ? []
+      : cities.filter(
+          (city) =>
+            city.city.toLowerCase().indexOf(term) !== -1 ||
+            city.state.toLowerCase().indexOf(term) !== -1
+        );
+  }, [searchTerm]);
+}
+
+export function UncontrolledClientSideExample({ initialValue = '' }) {
+  const [term, setTerm] = useState(initialValue);
+  const [selected, setSelected] = useState(initialValue);
+  const results = useCityMatch(term);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setTerm(event.target.value);
+  };
+
+  const handleSelect = (value: string) => {
+    setSelected(value);
+  };
+
+  return (
+    <div>
+      <h2>Clientside Search</h2>
+      <p>Selection: {selected}</p>
+      <p>Term: {term}</p>
+      <Combobox onSelect={handleSelect} selectOnBlur>
+        <ComboboxLabel>Enter a city name</ComboboxLabel>
+        <br />
+        <ComboboxInput onChange={handleChange} defaultValue={initialValue} />
+        {results.length > 0 && (
+          <ComboboxPopover>
+            <ComboboxList persistSelection={true}>
+              {results.slice(0, 100).map((result, index) => (
+                <ComboboxOption
+                  key={`${result.city}, ${result.state}, ${index}`}
+                  id={`${result.city}, ${result.state}, ${index}`}
+                  text={`${result.city}, ${result.state}`}
+                  value={result}
+                />
+              ))}
+            </ComboboxList>
+          </ComboboxPopover>
+        )}
+      </Combobox>
+    </div>
+  );
+}
+
+export function ControlledClientSideExample({ initialValue = '' }) {
+  const [term, setTerm] = useState(initialValue);
+  const [selected, setSelected] = useState(initialValue);
+  const results = useCityMatch(term);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    setTerm(event.target.value);
+    setSelected('');
+  };
+
+  const handleSelect = (value: string) => {
+    setSelected(value);
+  };
+
+  return (
+    <div>
+      <h2>Clientside Search</h2>
+      <p>Selection: {selected}</p>
+      <p>Term: {term}</p>
+      <Combobox onSelect={handleSelect} selectOnBlur>
+        <ComboboxLabel>Enter a city name</ComboboxLabel>
+        <br />
+        <ComboboxInput onChange={handleChange} value={selected || term} />
+        {results.length > 0 && (
+          <ComboboxPopover>
+            <ComboboxList persistSelection={true}>
+              {results.slice(0, 10).map((result, index) => (
+                <ComboboxOption
+                  key={`${result.city}, ${result.state}, ${index}`}
+                  id={`${result.city}, ${result.state}, ${index}`}
+                  text={`${result.city}, ${result.state}`}
+                  value={result}
+                />
+              ))}
+            </ComboboxList>
+          </ComboboxPopover>
+        )}
+      </Combobox>
+    </div>
+  );
+}
+
+export const UncontrolledClientSide = () => <UncontrolledClientSideExample />;
+export const UncontrolledClientSideInitial = () => (
+  <UncontrolledClientSideExample initialValue="Aberdeen" />
+);
+export const ControlledClientSide = () => <ControlledClientSideExample />;
+export const ControlledClientsideInitial = () => (
+  <ControlledClientSideExample initialValue="Aberdeen" />
+);