chili-ui 0.0.1

package/docs/src/app/form-components/date-time-range/_demo/Form.tsx

@@ -0,0 +1,36 @@
+import * as L from '@leda';
+import { DatesLive } from '@/components/live/DatesLive';
+import { log } from '@/utils';
+
+export const Form = () => (
+  <div>
+    <DatesLive scope={{ L, log }}>
+      {
+          `
+() => {
+  return (
+    <>
+      <L.DateTimeRange
+        form="date-time-range-form"
+        name="date-time-range"
+        _mb-6
+        _w-96
+      />
+
+      <L.Button
+        form="date-time-range-form"
+        onClick={({ form }) => {
+          const formData = form['date-time-range-form']
+          log(formData)
+        }}
+      >
+        Submit
+      </L.Button>
+    </>
+  )
+}
+  `
+        }
+    </DatesLive>
+  </div>
+);

package/docs/src/app/form-components/date-time-range/_demo/Required.tsx

@@ -0,0 +1,38 @@
+import * as L from '@leda';
+import { DatesLive } from '@/components/live/DatesLive';
+import { log } from '@/utils';
+
+export const Required = () => (
+  <div>
+    <DatesLive scope={{ L, log }}>
+      {
+          `
+() => {
+  return (
+    <>
+      <L.DateTimeRange
+        form="date-time-range-form"
+        name="date-time-range"
+        isRequired
+        requiredMessage="Please set the date"
+        _mb-6
+        _w-96
+      />
+
+      <L.Button
+        form="date-time-range-form"
+        onClick={({ form }) => {
+          const formData = form['date-time-range-form']
+          log(formData)
+        }}
+      >
+        Submit
+      </L.Button>
+    </>
+  )
+}
+  `
+        }
+    </DatesLive>
+  </div>
+);

package/docs/src/app/form-components/date-time-range/_demo/Uncontrolled.tsx

@@ -0,0 +1,24 @@
+import * as L from '@leda';
+import { DatesLive } from '@/components/live/DatesLive';
+import { log } from '@/utils';
+
+export const Uncontrolled = () => (
+  <div>
+    <DatesLive scope={{ L, log }}>
+      {
+          `
+() => {
+  return (
+    <L.DateTimeRange
+      onChange={({ component }) => {
+        log(component.value)
+      }}
+      _w-96
+    />
+  )
+}
+  `
+        }
+    </DatesLive>
+  </div>
+);

package/docs/src/app/form-components/date-time-range/page.tsx

@@ -0,0 +1,106 @@
+'use client';
+
+import { Tab, Tabs } from '@leda';
+import { ShouldRender, UnderscoreClasses } from '@/components/commonProps';
+import { H1, Section, Td } from '@/components/typography';
+import { PropsTableSection, ValidationSection } from '@/sections';
+import { Controlled } from './_demo/Controlled';
+import { Form } from './_demo/Form';
+import { Required } from './_demo/Required';
+import { Uncontrolled } from './_demo/Uncontrolled';
+
+const DateTimeRangePage = () => (
+  <article>
+    <H1>DateTimeRange</H1>
+
+    <PropsTableSection>
+      <tr>
+        <Td>format</Td>
+        <Td>string</Td>
+        <Td>dd.MM.yyyy is default</Td>
+      </tr>
+      <tr>
+        <Td>isDisabled</Td>
+        <Td>boolean</Td>
+        <Td>In case you want it to be disabled</Td>
+      </tr>
+      <tr>
+        <Td>isOpen</Td>
+        <Td>boolean</Td>
+        <Td>...</Td>
+      </tr>
+      <tr>
+        <Td>max</Td>
+        <Td>Date</Td>
+        <Td>Max available date</Td>
+      </tr>
+      <tr>
+        <Td>min</Td>
+        <Td>Date</Td>
+        <Td>Min available date</Td>
+      </tr>
+      <tr>
+        <Td>onBlur</Td>
+        <Td>(ev: BlurEvent) ={'>'} void</Td>
+        <Td>Blur handler</Td>
+      </tr>
+      <tr>
+        <Td>onChange</Td>
+        <Td>(ev: ChangeEvent) ={'>'} void</Td>
+        <Td>Change handler</Td>
+      </tr>
+      <tr>
+        <Td>onEnterPress</Td>
+        <Td>(ev: ChangeEvent) ={'>'} void</Td>
+        <Td>Enter press handler</Td>
+      </tr>
+      <tr>
+        <Td>onFocus</Td>
+        <Td>(ev: FocusEvent) ={'>'} void</Td>
+        <Td>Focus handler</Td>
+      </tr>
+      <tr>
+        <Td>placeholder</Td>
+        <Td>string | [string | undefined, string | undefined]</Td>
+        <Td>Placeholder</Td>
+      </tr>
+      <ShouldRender />
+      <tr>
+        <Td>value</Td>
+        <Td>[string | string] | [Date | null, Date | null]</Td>
+        <Td>Input fields values</Td>
+      </tr>
+      <UnderscoreClasses />
+    </PropsTableSection>
+
+    <Section>
+      <Tabs>
+        <Tab title="Uncontrolled" tabKey={0}>
+          <Uncontrolled />
+        </Tab>
+        <Tab title="Controlled" tabKey={1}>
+          <Controlled />
+        </Tab>
+        <Tab title="Form" tabKey={2}>
+          <Form />
+        </Tab>
+        <Tab title="Required" tabKey={3}>
+          <Required />
+        </Tab>
+      </Tabs>
+    </Section>
+
+    <ValidationSection
+      form
+      isValid
+      isRequired
+      invalidMessage
+      name
+      requiredMessage
+      shouldValidateUnmounted
+      validator
+    />
+  </article>
+);
+
+export default DateTimeRangePage;

package/docs/src/app/form-components/dropdown-select/Demos.tsx

@@ -0,0 +1,27 @@
+import { DropDownSelect } from '@leda';
+import { Live } from '@/components/live';
+import { Section } from '@/components/typography';
+
+export const Demos = () => (
+  <Section>
+    <Live scope={{ DropDownSelect }}>
+      {`
+<>
+  <DropDownSelect
+    data={['Argentina', 'Spain']}
+    onChange={({ component }) => console.log(component.value)}
+    _w-48
+  />
+  <br/>
+  <DropDownSelect
+    data={[{ country: 'Argentina' }, { country: 'Spain' }]}
+    textField='country'
+    onChange={({ component }) => console.log(component.value, component.suggestion)}
+    onBlur={({ component, currentTarget }) => console.log(component, currentTarget)}
+    onFocus={({ component, currentTarget }) => console.log(component, currentTarget)}
+    _w-48
+  />
+</>`}
+    </Live>
+  </Section>
+);

package/docs/src/app/form-components/dropdown-select/TranslateIcon.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable */
+
+export const TranslateIcon = ({
+  styles,
+  ...rest
+}:{
+  styles?: Record<string, string | number>,
+}) => (
+  <svg style={styles} xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" version="1.1" width="256" height="256" viewBox="0 0 256 256" xmlSpace="preserve" {...rest}>
+    {/* @ts-ignore */}
+    <g styles="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
+      {/* @ts-ignore */}
+      <path d="M 47.646 58.714 c -3.399 -2.727 -6.565 -5.685 -9.477 -8.831 c 7.197 -9.938 13.357 -20.668 17.002 -30.123 H 72.97 c 1.657 0 3 -1.343 3 -3 s -1.343 -3 -3 -3 H 43.006 V 6.709 c 0 -1.657 -1.343 -3 -3 -3 s -3 1.343 -3 3 v 7.051 H 3 c -1.657 0 -3 1.343 -3 3 s 1.343 3 3 3 h 45.699 c -3.364 8.009 -8.566 16.968 -14.574 25.416 c -4.334 -5.424 -7.947 -11.301 -10.694 -17.474 c -0.674 -1.514 -2.448 -2.195 -3.96 -1.521 c -1.514 0.673 -2.195 2.447 -1.521 3.96 c 3.165 7.112 7.385 13.858 12.488 20.02 c -6.119 7.967 -12.796 15.172 -19.071 20.253 c -1.288 1.042 -1.486 2.932 -0.443 4.219 c 0.593 0.732 1.459 1.112 2.333 1.112 c 0.663 0 1.331 -0.219 1.886 -0.669 c 6.444 -5.219 13.177 -12.385 19.371 -20.327 c 2.906 3.067 6.036 5.962 9.378 8.643 c 0.554 0.444 1.217 0.66 1.875 0.66 c 0.879 0 1.749 -0.384 2.342 -1.122 C 49.146 61.639 48.938 59.751 47.646 58.714 z" styles="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " strokeLinecap="round" />
+      {/* @ts-ignore */}
+      <path d="M 71.439 29.024 c -10.234 0 -18.561 8.327 -18.561 18.561 V 83.29 c 0 1.657 1.343 3 3 3 s 3 -1.343 3 -3 V 62.279 H 84 V 83.29 c 0 1.657 1.343 3 3 3 s 3 -1.343 3 -3 V 47.585 C 90 37.351 81.674 29.024 71.439 29.024 z M 58.879 56.279 v -8.694 c 0 -6.926 5.635 -12.561 12.561 -12.561 S 84 40.659 84 47.585 v 8.694 H 58.879 z" styles="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " strokeLinecap="round" />
+    </g>
+  </svg>
+);

package/docs/src/app/form-components/dropdown-select/page.tsx

@@ -0,0 +1,266 @@
+'use client';
+
+/* eslint-disable react/jsx-curly-brace-presence */
+
+import * as L from '@leda';
+import { ShouldRender, UnderscoreClasses } from '@/components/commonProps';
+import {
+  CodeBlock, H1, P, A, Td,
+} from '@/components/typography';
+import { Live } from '@/components/live';
+import { PropsTableSection, ValidationSection, CustomizationPropsTableSection } from '@/sections';
+import { Demos } from './Demos';
+import { TranslateIcon } from './TranslateIcon';
+
+const DropDownSelectPage = () => (
+  <article>
+    <H1>DropDownSelect</H1>
+
+    <PropsTableSection>
+      <tr>
+        <Td>autoComplete</Td>
+        <Td>string</Td>
+        <Td>
+          <P>Browser autofill, off is the default value.</P>
+          <P>Works as&nbsp;
+            <A
+              href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete"
+              target="_blank"
+              className="text-cyan-700 underline"
+            >
+              HTML autoComplete attribute
+            </A>
+          </P>
+        </Td>
+      </tr>
+      <tr>
+        <Td>
+          boundingContainerRef
+        </Td>
+        <Td>
+          {'React.RefObject<HTMLElement | { wrapper: HTMLElement | null }>'}
+        </Td>
+        <Td>...</Td>
+      </tr>
+      <tr>
+        <Td>compareObjectsBy</Td>
+        <Td>
+          {'T extends object ? ((suggestionListItem: T) => any) | string : never'}
+        </Td>
+        <Td>...</Td>
+      </tr>
+      <tr>
+        <Td>
+          <b>data</b>
+        </Td>
+        <Td>
+          T[]
+        </Td>
+        <Td>
+          Data for the dropdown list.
+          <br />
+          If <b>data</b> is an array of objects, use <b>textField</b> to specify
+          which {"object's"} field should be used as text for the dropdown items
+        </Td>
+      </tr>
+      <tr>
+        <Td>defaultValue</Td>
+        <Td>Value</Td>
+        <Td>...</Td>
+      </tr>
+      <tr>
+        <Td>filterRule</Td>
+        <Td>{"'smart' | 'startsWith' | 'includes'"}</Td>
+        <Td>
+          Search mode, <b>smart</b> is default, looks for one or several words regardless of their order,
+          can be slow if <b>data</b> has thousands of elements or more
+        </Td>
+      </tr>
+      <tr>
+        <Td>filterValue</Td>
+        <Td>string</Td>
+        <Td>...</Td>
+      </tr>
+      <tr>
+        <Td>groupBy</Td>
+        <Td>
+          {'(option: T) => string | undefined'}
+        </Td>
+        <Td>...</Td>
+      </tr>
+      <tr>
+        <Td>hasClearButton</Td>
+        <Td>boolean</Td>
+        <Td>
+          Whether or not to show a clear button inside the input element.
+          Default is <b>false</b>
+        </Td>
+      </tr>
+      <tr>
+        <Td>isDisabled</Td>
+        <Td>boolean</Td>
+        <Td>Disable the component</Td>
+      </tr>
+      <tr>
+        <Td>isLoading</Td>
+        <Td>boolean</Td>
+        <Td>Display a loading icon inside the dropdown</Td>
+      </tr>
+      <tr>
+        <Td>isOpen</Td>
+        <Td>boolean</Td>
+        <Td>Control the dropdown state</Td>
+      </tr>
+      <tr>
+        <Td>noSuggestionsText</Td>
+        <Td>React.ReactNode</Td>
+        <Td>Text shown if nothing is found among suggestions</Td>
+      </tr>
+      <tr>
+        <Td>onBlur</Td>
+        <Td>
+          (event: BlurEvent) ={'>'} void
+        </Td>
+        <Td>Blur handler</Td>
+      </tr>
+      <tr>
+        <Td><b>onChange</b></Td>
+        <Td>(event: ChangeEvent{'<'}T{'>'}) ={'>'} void</Td>
+        <Td>Value change handler</Td>
+      </tr>
+      <tr>
+        <Td>onFilterChange</Td>
+        <Td>(event: ChangeEvent{'<'}T{'>'}) ={'>'} void</Td>
+        <Td>Filter input field change handler</Td>
+      </tr>
+      <tr>
+        <Td>onFocus</Td>
+        <Td>(event: FocusEvent) ={'>'} void</Td>
+        <Td>Focus handler</Td>
+      </tr>
+      <tr>
+        <Td>placeholder</Td>
+        <Td>string</Td>
+        <Td>Placeholder</Td>
+      </tr>
+      <tr>
+        <Td>searchFields</Td>
+        <Td>string[]</Td>
+        <Td>
+          You can use any of the <b>data</b> {"object's"} fields for seraching
+        </Td>
+      </tr>
+      <tr>
+        <Td>shouldAllowEmpty</Td>
+        <Td>boolean</Td>
+        <Td>...</Td>
+      </tr>
+      <tr>
+        <Td>shouldFilterValues</Td>
+        <Td>boolean</Td>
+        <Td>Allows typing text to filter suggestions</Td>
+      </tr>
+      <ShouldRender />
+      <tr>
+        <Td>sortSuggestions</Td>
+        <Td>(a: T, b: T) ={'>'} number</Td>
+        <Td>Sort dropdown items</Td>
+      </tr>
+      <tr>
+        <Td>textField</Td>
+        <Td>T extends object ? string : never</Td>
+        <Td>
+          It is mandatory if <b>data</b> is an array of objects, <b>textField</b> specifies which {"object's"} field is used to get dropdown item text value.
+          No effect if <b>data</b> is an array of strings
+        </Td>
+      </tr>
+      <tr>
+        <Td>value</Td>
+        <Td>string | null</Td>
+        <Td>Component value</Td>
+      </tr>
+      <UnderscoreClasses />
+    </PropsTableSection>
+
+    <Demos />
+
+    <ValidationSection
+      form
+      isValid
+      isRequired
+      invalidMessage
+      name
+      requiredMessage
+      shouldValidateUnmounted
+      validator
+    />
+
+    <Live scope={{ L }}>
+      {`<>
+<L.DropDownSelect
+  data={['Argentina', 'Spain']}
+  onChange={({ component }) => console.log(component.value)}
+  form='dds_form'
+  name='dds'
+  isRequired
+  _w-48
+/>
+<br />
+<L.Button
+  form='dds_form'
+  onClick={({ form }) => console.log(form)}
+>
+  Click me
+</Button>
+</>`}
+    </Live>
+
+    <CustomizationPropsTableSection>
+      <tr>
+        <Td>
+          iconRender <br />
+          inputRender <br />
+          invalidMessageRender <br />
+          itemRender <br />
+          listRender <br />
+          noSuggestionsRender
+        </Td>
+        <Td>
+          <CodeBlock>
+            {`
+({
+  Element,
+  elementprops,
+  componentProps,
+  componentState
+}): React.ReactNode`}
+          </CodeBlock>
+        </Td>
+        <Td>Customization</Td>
+      </tr>
+    </CustomizationPropsTableSection>
+
+    <Live scope={{ L, TranslateIcon }}>
+      {`
+<L.DropDownSelect
+  data={['English', 'Spanish']}
+  defaultValue="English"
+  onChange={({ component }) => console.log(component.value)}
+  iconRender={({ elementProps }) => {
+    return (
+      <TranslateIcon
+        {...elementProps}
+      />
+    )
+  }}
+  theme={{
+    selectIconOpened: '',  // disable icon movement
+  }}
+  _w-48
+/>
+        `}
+    </Live>
+  </article>
+);
+
+export default DropDownSelectPage;

package/docs/src/app/form-components/input/Demos.tsx

@@ -0,0 +1,16 @@
+import * as L from '@leda';
+import { Live } from '@/components/live';
+import { Section } from '@/components/typography';
+
+export const Demos = () => (
+  <Section>
+    <Live scope={{ L }}>
+      {`
+<L.Input
+  onChange={({ component }) => console.log(component.value)}
+  _w-48
+/>
+`}
+    </Live>
+  </Section>
+);