@colisweb/rescript-toolkit 2.67.1 → 2.68.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.67.1",
+  "version": "2.68.0",
   "type": "module",
   "scripts": {
     "clean": "rescript clean",

package/playground/PlaygroundComponents.res

@@ -8,6 +8,11 @@ module type Config = {
 let components: array<(string, module(Config))> = [
   ("card", module(Playground_Card)),
   ("switch", module(Playground_Switch)),
+  ("button", module(Playground_Button)),
+  ("label", module(Playground_Label)),
+  ("alert", module(Playground_Alert)),
+  ("modal", module(Playground_Modal)),
+  ("multiselect", module(Playground_MultiSelect)),
 ]
 
 module List = {

package/playground/components/Playground_Alert.res

@@ -0,0 +1,25 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Alert.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Alert.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let variants: array<Alert.status> = [#success, #error, #info, #warning]
+
+  <div className="flex flex-col gap-8">
+    {variants
+    ->Array.map(variant => {
+      <div key={(variant :> string)}>
+        <h3> {(variant :> string)->React.string} </h3>
+        <Alert
+          title={"Title"->React.string} description={"Description"->React.string} status=variant
+        />
+      </div>
+    })
+    ->React.array}
+  </div>
+}

package/playground/components/Playground_Button.res

@@ -0,0 +1,75 @@
+@module("@root/src/ui/Toolkit__Ui_Button.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Button.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let colors: array<Toolkit__Ui_Button.color> = [
+    #primary,
+    #black,
+    #white,
+    #gray,
+    #success,
+    #info,
+    #danger,
+    #warning,
+    #neutral,
+    #neutralLight,
+  ]
+
+  let sizes = Js.Dict.fromArray([("xs", #xs), ("sm", #sm), ("md", #md), ("lg", #lg)])
+  let variants = Js.Dict.fromArray([
+    ("default", #default),
+    ("text", #text),
+    ("link", #link),
+    ("outline", #outline),
+    ("pill", #pill),
+  ])
+
+  <div>
+    {colors
+    ->Array.mapWithIndex((i, color) =>
+      <div
+        key={i->Int.toString ++ (color :> string)}
+        className="flex flex-col gap-4 first:border-0 border-t pt-4 first:pt-0 border-neutral-500">
+        <h2> {(color :> string)->React.string} </h2>
+        <div className="flex flex-row flex-wrap gap-8">
+          {variants
+          ->Js.Dict.entries
+          ->Array.map(((variantText, variant)) => {
+            <div>
+              <h4> {variantText->React.string} </h4>
+              <div className="flex flex-col">
+                {[false, true]
+                ->Array.mapWithIndex(
+                  (j, disabled) =>
+                    <div className="flex items-center gap-1 mb-2">
+                      {sizes
+                      ->Js.Dict.entries
+                      ->Array.mapWithIndex(
+                        (k, (sizeText, size)) =>
+                          <div
+                            key={(i + j + k)->Int.toString ++ ((color :> string) ++ sizeText)}
+                            className="flex flex-col justify-center items-center">
+                            <Toolkit__Ui_Button variant color size disabled>
+                              {"hello"->React.string}
+                            </Toolkit__Ui_Button>
+                            <span className="text-xxs"> {sizeText->React.string} </span>
+                          </div>,
+                      )
+                      ->React.array}
+                    </div>,
+                )
+                ->React.array}
+              </div>
+            </div>
+          })
+          ->React.array}
+        </div>
+      </div>
+    )
+    ->React.array}
+  </div>
+}

package/playground/components/Playground_Label.res

@@ -0,0 +1,16 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Label.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Label.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () =>
+  <div>
+    <Label htmlFor="test"> {"Label"->React.string} </Label>
+    <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
+      {"Label"->React.string}
+    </Label>
+  </div>

package/playground/components/Playground_Modal.res

@@ -0,0 +1,53 @@
+open Toolkit__Ui
+
+@module("@root/src/ui/Toolkit__Ui_Modal.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_Modal.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let modalSize: array<Modal.size> = [#lg, #md, #sm, #xs]
+
+  let modalColor: array<Modal.color> = [#primary, #success, #danger, #neutral]
+
+  let (isVisible, setVisibility) = React.useState(() => false)
+  let (size, setSize) = React.useState(() => #md)
+  let (modalType, setModalType) = React.useState(() => #default)
+
+  <div className="flex flex-col gap-4 items-start">
+    <div>
+      <Toolkit__Ui_Label htmlFor="size"> {"Size :"->React.string} </Toolkit__Ui_Label>
+      <Toolkit__Ui.Select
+        id="size"
+        value={Obj.magic(size)}
+        onChange={value => {
+          setSize(_ => value)
+        }}
+        options={modalSize->Array.map(value => (value->Obj.magic, value->Obj.magic, true))}
+      />
+    </div>
+    <div>
+      <Toolkit__Ui_Label htmlFor="color"> {"Color :"->React.string} </Toolkit__Ui_Label>
+      <Toolkit__Ui.Select
+        id="size"
+        onChange={value => {
+          setModalType(_ => value === "" ? #default : #colored(Obj.magic(value)))
+        }}
+        options={[("default", "", true)]->Array.concat(
+          modalColor->Array.map(value => (value->Obj.magic, value->Obj.magic, true)),
+        )}
+      />
+    </div>
+    <Button onClick={_ => setVisibility(_ => true)}> {"Show modal"->React.string} </Button>
+    <Modal
+      isVisible
+      title={"title"->React.string}
+      body={"Body"->React.string}
+      hide={() => setVisibility(_ => false)}
+      size
+      type_=modalType
+    />
+  </div>
+}

package/playground/components/Playground_MultiSelect.res

@@ -0,0 +1,91 @@
+@module("@root/src/ui/Toolkit__Ui_MultiSelect.resi?raw")
+external resi: string = "default"
+
+@module("@root/playground/components/Playground_MultiSelect.res?raw")
+external codeExample: string = "default"
+
+@react.component
+let make = () => {
+  let options1: array<Toolkit__Ui_MultiSelect.item> = [
+    {
+      itemLabel: <p className="flex flex-row text-danger-500">
+        <BsReactIcons.FaAngleDown />
+        {"test"->React.string}
+      </p>,
+      label: "Test",
+      value: "test",
+    },
+    {
+      itemLabel: <p> {"test2"->React.string} </p>,
+      label: "Test2",
+      value: "test2",
+    },
+    {
+      itemLabel: <p> {"test3"->React.string} </p>,
+      label: "Test3",
+      value: "test3",
+    },
+    {
+      itemLabel: <p> {"test4"->React.string} </p>,
+      label: "Test4",
+      value: "test4",
+    },
+  ]
+  let options2: array<Toolkit__Ui_MultiSelect.item> = [
+    {
+      itemLabel: <p> {"test4"->React.string} </p>,
+      label: "Test4",
+      value: "test4",
+    },
+  ]
+
+  let tmp = Toolkit__Hooks.useDisclosure()
+
+  let options = tmp.isOpen ? options2 : options1
+
+  <div className="flex flex-col gap-8 items-start">
+    <Toolkit__Ui_Button onClick={_ => tmp.toggle()}>
+      {"Change options"->React.string}
+    </Toolkit__Ui_Button>
+    <Toolkit__Ui_MultiSelect
+      searchPlaceholder="Filter"
+      buttonClassName={"w-48"}
+      dropdownClassName="w-60"
+      placeholder={<span> {"Select me"->React.string} </span>}
+      onChange={Js.log}
+      options
+    />
+    <div>
+      <h3 className="mb-2"> {"Preselected options"->React.string} </h3>
+      <Toolkit__Ui_MultiSelect
+        searchPlaceholder="Filter"
+        buttonClassName={"w-48"}
+        dropdownClassName="w-60"
+        defaultValue={options}
+        placeholder={<span> {"Select me"->React.string} </span>}
+        onChange={Js.log}
+        options
+      />
+    </div>
+    <div>
+      <h3 className="mb-2"> {"Search"->React.string} </h3>
+      <p className="mb-1">
+        {"Search input is displayed when there are more than 5 options"->React.string}
+      </p>
+      <Toolkit__Ui_MultiSelect
+        searchPlaceholder="Filter"
+        buttonClassName={"w-48"}
+        dropdownClassName="w-60 max-h-[300px] overflow-auto"
+        options={Array.makeBy(10, (i): Toolkit__Ui.MultiSelect.item => {
+          {
+            itemLabel: <p> {`label ${i->Int.toString}`->React.string} </p>,
+            label: `label ${i->Int.toString}`,
+            value: `label ${i->Int.toString}`,
+          }
+        })}
+        placeholder={<span> {"Select me"->React.string} </span>}
+        onChange={Js.log}
+      />
+    </div>
+  </div>
+}

package/playground/components/Playground_Switch.res

@@ -1,9 +1,9 @@
 open Toolkit__Ui
 
-@module("../../../../src/ui/Toolkit__Ui_Switch.resi?raw")
+@module("@root/src/ui/Toolkit__Ui_Switch.resi?raw")
 external resi: string = "default"
 
-@module("../../../../playground/components/Playground_Switch.res?raw")
+@module("@root/playground/components/Playground_Switch.res?raw")
 external codeExample: string = "default"
 
 @react.component

package/playground/custom.css

@@ -155,9 +155,12 @@
 }
 
 h2 {
-  @apply text-2xl font-display font-bold;
+  @apply text-3xl font-display font-bold;
 }
 h3 {
+  @apply text-2xl font-display font-bold;
+}
+h4 {
   @apply text-xl font-display font-bold;
 }
 

package/playground/docs/Setup.mdx

@@ -30,16 +30,15 @@ We share a postcss config that you can include to your webpack config
 
 ## Usage
 
-The bindings in the _vendors_ are **globaly accessible**. Everything else is scoped into the `Toolkit` namespace.
+The bindings in the _vendors_ are **globaly accessible**.
 
 ```rescript
-open Toolkit;
 
 @react.component
 let make = () => {
-  let dialog = Hooks.useDisclosure();
+  let dialog = Toolkit.Hooks.useDisclosure();
 
-  <div className=Tw.(style([bgWhite])) />
+  <div className="bg-white" />
 };
 ```
 
@@ -50,9 +49,3 @@ Run bsb
 ```bash
 npm run dev
 ```
-
-Run storybook
-
-```bash
-npm run storybook
-```

package/src/router/Toolkit__Router.res

@@ -252,7 +252,7 @@ module Make = (Config: RouterConfig) => {
         <a
           href=url
           target="_blank"
-          className={cx([commonClassName, "sidenav-link", isSubLink ? "ml-3" : ""])}>
+          className={cx([commonClassName, "py-3 sidenav-link", isSubLink ? "ml-3" : ""])}>
           <span className="overflow-hidden flex">
             {config.icon->Option.mapWithDefault(React.null, icon =>
               <div className={cx(["text-neutral-800", isNavOpen ? "pl-2" : "px-2"])}> icon </div>
@@ -280,6 +280,7 @@ module Make = (Config: RouterConfig) => {
           className={cx([
             commonClassName,
             isSubLink ? "ml-3" : "",
+            config.icon->Option.isNone ? "py-5" : "",
             "sidenav-link",
             isActive ? "bg-primary-100/75 text-neutral-700" : "",
           ])}

package/src/ui/Toolkit__Ui_MultiSelect.res

@@ -36,6 +36,18 @@ let make = (
     None
   }, (previousDefaultValue, defaultValue))
 
+  let filterOptionsBySearch = (~options, ~search) => {
+    options->Array.keep(({label}) =>
+      // normalize nfd -> replace by re remove split by commponents the accent letters and deletes the accent component only, leaving the un-accented letter
+      search == "" ||
+        label
+        ->Js.String2.toLowerCase
+        ->Js.String2.normalizeByForm("NFD")
+        ->Js.String2.replaceByRe(%re("/[\u0300-\u036f]/g"), "")
+        ->Js.String2.includes(search)
+    )
+  }
+
   <Toolkit__Ui_Dropdown
     buttonClassName
     dropdownClassName
@@ -64,6 +76,15 @@ let make = (
               id="search"
               autoFocus={true}
               placeholder=?{searchPlaceholder}
+              onKeyDown={event => {
+                if event->ReactEvent.Keyboard.key === "Enter" && search !== "" {
+                  let selectedOptions = filterOptionsBySearch(~options, ~search)
+                  onChange(selectedOptions)
+                  setSelectedOptions(_ => {
+                    selectedOptions
+                  })
+                }
+              }}
               onChange={event => {
                 let target = event->ReactEvent.Form.currentTarget
                 // normalize nfd -> replace by re remove split by commponents the accent letters and deletes the accent component only, leaving the un-accented letter

package/src/ui/styles.css

@@ -139,7 +139,6 @@ select:not([disabled]):not([tabindex="-1"]):focus,
 textarea:not([disabled]):not([tabindex="-1"]):focus,
 button:not([disabled]):not([tabindex="-1"]):focus,
 iframe:not([tabindex="-1"]):focus,
-[tabindex]:not([tabindex="-1"]):focus,
 [contentEditable="true"]:not([tabindex="-1"]):focus,
 .focus {
   outline: none !important;
@@ -164,7 +163,9 @@ iframe:not([tabindex="-1"]):focus,
 }
 
 .input-range
-  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(
+    .DayPicker-Day--end
+  ):not(.DayPicker-Day--outside) {
   background-color: #f0f8ff !important;
   color: #4a90e2;
 }
@@ -221,7 +222,9 @@ iframe:not([tabindex="-1"]):focus,
 }
 
 .Selectable
-  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) {
+  .DayPicker-Day--selected:not(.DayPicker-Day--start):not(
+    .DayPicker-Day--end
+  ):not(.DayPicker-Day--outside) {
   background-color: #f0f8ff !important;
   color: #4a90e2;
 }

package/vite.config.js

@@ -26,6 +26,7 @@ export default defineConfig({
             h1: "text-4xl",
             h2: "text-3xl",
             h3: "text-2xl",
+            h4: "text-xl",
             "h1,h2,h3,h4": "font-display font-bold underline mb-1",
             p: "mb-1",
             pre: "bg-white p-2 rounded-lg border my-4 block",

package/playground/stories/Toolkit__UI_AlertStory.res

@@ -1,111 +0,0 @@
-open Storybook
-open Toolkit__Ui
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Alert.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Components/Alert", ())
-
-let success = () =>
-  <Alert title={"Title"->React.string} description={"Description"->React.string} status=#success />
-
-success->CSF.addMeta(
-  ~name="success",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Alert
-    title={"Title"->React.string}
-    description={"Description"->React.string}
-    status=#success
-  />;
-          `
-        />
-        <Docs.Story id="components-alert--success" />
-      </>,
-    },
-  },
-  (),
-)
-
-let error = () =>
-  <Alert title={"Title"->React.string} description={"Description"->React.string} status=#error />
-
-error->CSF.addMeta(
-  ~name="error",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Alert
-    title={"Title"->React.string}
-    description={"Description"->React.string}
-    status=#error
-  />;
-          `
-        />
-        <Docs.Story id="components-alert--error" />
-      </>,
-    },
-  },
-  (),
-)
-
-let warning = () =>
-  <Alert title={"Title"->React.string} description={"Description"->React.string} status=#warning />
-
-warning->CSF.addMeta(
-  ~name="warning",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Alert
-  title={"Title"->React.string}
-  description={"Description"->React.string}
-  status=#warning
-/>;
-          `
-        />
-        <Docs.Story id="components-alert--warning" />
-      </>,
-    },
-  },
-  (),
-)
-
-let info = () =>
-  <Alert title={"Title"->React.string} description={"Description"->React.string} status=#info />
-
-info->CSF.addMeta(
-  ~name="info",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Alert
-  title={"Title"->React.string}
-  description={"Description"->React.string}
-  status=#info
-/>;
-          `
-        />
-        <Docs.Story id="components-alert--info" />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__UI_LabelStory.res

@@ -1,39 +0,0 @@
-open Storybook
-open Toolkit__Ui
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Label.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Form/Label", ())
-
-let sample = () =>
-  <div>
-    <Label htmlFor="test"> {"Label"->React.string} </Label>
-    <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
-      {"Label"->React.string}
-    </Label>
-  </div>
-
-sample->CSF.addMeta(
-  ~name="sample",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-<div>
-  <Label htmlFor="test"> "Label"->React.string </Label>
-  <Label htmlFor="test" optionalMessage={"Optional"->React.string}>
-    "Label"->React.string
-  </Label>
-</div>
-          `
-        />
-        <Docs.Story id="form-label--sample" />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__UI_ModalStory.res

@@ -1,211 +0,0 @@
-open Storybook
-open Toolkit__Ui
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Modal.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Components/Modal", ())
-
-let defaultExample = () => {
-  let modalSize = [("lg", #lg), ("md", #md), ("sm", #sm), ("xs", #xs)]
-
-  let (isVisible, setVisibility) = React.useState(() => false)
-  let (size, setSize) = React.useState(() => #md)
-
-  <div>
-    <div className="mb-4">
-      <label htmlFor="size"> {"Size :"->React.string} </label>
-      <select
-        id="size"
-        onChange={event => {
-          let value = (event->ReactEvent.Form.target)["value"]
-
-          setSize(_ => value)
-        }}>
-        {modalSize
-        ->Array.map(((label, value)) =>
-          <option value={value->Obj.magic} selected={value == size}> {label->React.string} </option>
-        )
-        ->React.array}
-      </select>
-    </div>
-    <Button onClick={_ => setVisibility(_ => true)}> {"Show modal"->React.string} </Button>
-    <Modal
-      isVisible
-      title={"title"->React.string}
-      body={"Body"->React.string}
-      hide={() => setVisibility(_ => false)}
-      size
-    />
-  </div>
-}
-
-defaultExample->CSF.addMeta(
-  ~name="default",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-let (isVisible, setVisibility) = React.useState(() => false);
-
-<>
-  <button onClick={_ => setVisibility(_ => true)}>
-    "Show modal"->React.string
-  </button>
-  <Modal
-    isVisible
-    title={"title"->React.string}
-    body={"Body"->React.string}
-    hide={() => setVisibility(_ => false)}
-  />
-</>;
-          `
-        />
-        <Docs.Story id="components-modal--default" />
-      </>,
-    },
-  },
-  (),
-)
-
-let coloredExample = () => {
-  let modalSize = [("lg", #lg), ("md", #md), ("sm", #sm), ("xs", #xs)]
-
-  let modalColor: array<(string, Modal.color)> = [
-    ("primary", #primary),
-    ("success", #success),
-    ("danger", #danger),
-    ("neutral", #neutral),
-  ]
-
-  let (isVisible, setVisibility) = React.useState(() => false)
-  let (size, setSize) = React.useState(() => #md)
-  let (color, setColor) = React.useState(() => #primary)
-
-  <div>
-    <div>
-      <label htmlFor="size"> {"Size :"->React.string} </label>
-      <select
-        id="size"
-        onChange={event => {
-          let value = (event->ReactEvent.Form.target)["value"]
-
-          setSize(_ => value)
-        }}>
-        {modalSize
-        ->Array.map(((label, value)) =>
-          <option value={value->Obj.magic} selected={value == size}> {label->React.string} </option>
-        )
-        ->React.array}
-      </select>
-    </div>
-    <div>
-      <label htmlFor="color"> {"color :"->React.string} </label>
-      <select
-        onChange={event => {
-          let value = (event->ReactEvent.Form.target)["value"]
-
-          setColor(_ => value)
-        }}>
-        {modalColor
-        ->Array.map(((label, value)) =>
-          <option value={value->Obj.magic} selected={value == color}>
-            {label->React.string}
-          </option>
-        )
-        ->React.array}
-      </select>
-    </div>
-    <Button onClick={_ => setVisibility(_ => true)}> {"Show modal"->React.string} </Button>
-    <Modal
-      isVisible
-      title={"title"->React.string}
-      body={"Body"->React.string}
-      hide={() => setVisibility(_ => false)}
-      size
-      type_=#colored(color)
-    />
-  </div>
-}
-
-coloredExample->CSF.addMeta(
-  ~name="colored",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-let modalSize = [|("lg", #lg), ("md", #md), ("sm", #sm), ("xs", #xs)|];
-
-let modalColor: array((string, Modal.color)) = [|
-  ("primary", #primary),
-  ("success", #success),
-  ("danger", #danger),
-  ("neutral", #neutral),
-|];
-
-let (isVisible, setVisibility) = React.useState(() => false);
-let (size, setSize) = React.useState(() => #md);
-let (color, setColor) = React.useState(() => #primary);
-
-<div>
-  <div>
-    <label htmlFor="size"> "Size :"->React.string </label>
-    <select
-      id="size"
-      onChange={event => {
-        let value = event->ReactEvent.Form.target##value;
-
-        setSize(_ => value);
-      }}>
-      {modalSize
-        ->Array.map(((label, value)) => {
-            <option value={value->Obj.magic} selected={value == size}>
-              label->React.string
-            </option>
-          })
-        ->React.array}
-    </select>
-  </div>
-  <div>
-    <label htmlFor="color"> "color :"->React.string </label>
-    <select
-      onChange={event => {
-        let value = event->ReactEvent.Form.target##value;
-
-        setColor(_ => value);
-      }}>
-      {modalColor
-        ->Array.map(((label, value)) => {
-            <option value={value->Obj.magic} selected={value == color}>
-              label->React.string
-            </option>
-          })
-        ->React.array}
-    </select>
-  </div>
-  <Button onClick={_ => setVisibility(_ => true)}>
-    "Show modal"->React.string
-  </Button>
-  <Modal
-    isVisible
-    title={"title"->React.string}
-    body={"Body"->React.string}
-    hide={() => setVisibility(_ => false)}
-    size
-    type_={#colored(color)}
-  />
-</div>;
-          `
-        />
-        <Docs.Story id="components-modal--colored" />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__UI_MultiSelectStory.res

@@ -1,132 +0,0 @@
-open Storybook
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_MultiSelect.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Components/MultiSelect", ())
-
-let example = () => {
-  let options1: array<Toolkit__Ui_MultiSelect.item> = [
-    {
-      itemLabel: <p className="flex flex-row text-danger-500">
-        <BsReactIcons.FaAngleDown /> {"test"->React.string}
-      </p>,
-      label: "Test",
-      value: "test",
-    },
-    {
-      itemLabel: <p> {"test2"->React.string} </p>,
-      label: "Test2",
-      value: "test2",
-    },
-    {
-      itemLabel: <p> {"test3"->React.string} </p>,
-      label: "Test3",
-      value: "test3",
-    },
-    {
-      itemLabel: <p> {"test4"->React.string} </p>,
-      label: "Test4",
-      value: "test4",
-    },
-  ]
-  let options2: array<Toolkit__Ui_MultiSelect.item> = [
-    {
-      itemLabel: <p> {"test4"->React.string} </p>,
-      label: "Test4",
-      value: "test4",
-    },
-  ]
-
-  let tmp = Toolkit__Hooks.useDisclosure()
-
-  let options = tmp.isOpen ? options2 : options1
-
-  <div>
-    <Toolkit__Ui_Button onClick={_ => tmp.toggle()}>
-      {"Change options"->React.string}
-    </Toolkit__Ui_Button>
-    <div className="h-10" />
-    <Toolkit__Ui_MultiSelect
-      searchPlaceholder="Filter"
-      buttonClassName={"w-48"}
-      dropdownClassName="w-60"
-      placeholder={<span> {"Select me"->React.string} </span>}
-      onChange={Js.log}
-      options
-    />
-    <div className="mt-8" />
-    <Toolkit__Ui_MultiSelect
-      searchPlaceholder="Filter"
-      buttonClassName={"w-48"}
-      dropdownClassName="w-60"
-      defaultValue={options}
-      placeholder={<span> {"Select me"->React.string} </span>}
-      onChange={Js.log}
-      options
-    />
-  </div>
-}
-
-example->CSF.addMeta(
-  ~name="example",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-  let options: array<Toolkit__Ui_MultiSelect.item> = [
-    {
-      itemLabel: <p className="flex flex-row text-danger-500">
-        <BsReactIcons.FaAngleDown /> {"test"->React.string}
-      </p>,
-      label: "Test",
-      value: "test",
-    },
-    {
-      itemLabel: <p> {"test2"->React.string} </p>,
-      label: "Test2",
-      value: "test2",
-    },
-    {
-      itemLabel: <p> {"test3"->React.string} </p>,
-      label: "Test3",
-      value: "test3",
-    },
-    {
-      itemLabel: <p> {"test4"->React.string} </p>,
-      label: "Test4",
-      value: "test4",
-    },
-  ]
-
-  <div>
-    <Toolkit__Ui_MultiSelect
-      searchPlaceholder="Filter"
-      buttonClassName={"w-48"}
-      dropdownClassName="w-60"
-      placeholder={<span> {"Select me"->React.string} </span>}
-      onChange={Js.log}
-      options
-    />
-    <div className="mt-8" />
-    <Toolkit__Ui_MultiSelect
-      searchPlaceholder="Filter"
-      buttonClassName={"w-48"}
-      dropdownClassName="w-60"
-      defaultValue={[options[0]->Option.getUnsafe]}
-      placeholder={<span> {"Select me"->React.string} </span>}
-      onChange={Js.log}
-      options
-    />
-  </div>
-          `
-        />
-        <Docs.Story id="components-multiselect--example" />
-      </>,
-    },
-  },
-  (),
-)

package/playground/stories/Toolkit__Ui_ButtonStory.res

@@ -1,324 +0,0 @@
-open Storybook
-
-@module("!!raw-loader!../../../src/ui/Toolkit__Ui_Button.resi")
-external source: 'a = "default"
-
-let default = CSF.make(~title="Components/Button", ())
-
-let defaultPalette = () => {
-  let colors = Js.Dict.fromArray([
-    ("primary", #primary),
-    ("black", #black),
-    ("white", #white),
-    ("gray", #gray),
-    ("success", #success),
-    ("info", #info),
-    ("danger", #danger),
-    ("warning", #warning),
-    ("neutral", #neutral),
-    ("neutralLight", #neutralLight),
-  ])
-
-  let sizes = Js.Dict.fromArray([("xs", #xs), ("sm", #sm), ("md", #md), ("lg", #lg)])
-
-  <div>
-    {colors
-    ->Js.Dict.entries
-    ->Array.mapWithIndex((i, (colorText, color)) =>
-      <div
-        key={i->Int.toString ++ colorText}
-        className="flex flex-row flex-col-gap-4 mb-4 items-center">
-        <strong className="w-40"> {colorText->React.string} </strong>
-        <div className="flex flex-col">
-          {[false, true]
-          ->Array.mapWithIndex((j, disabled) =>
-            <div className="flex items-center flex-col-gap-1 mb-2">
-              {sizes
-              ->Js.Dict.entries
-              ->Array.mapWithIndex((k, (sizeText, size)) =>
-                <div key={(i + j + k)->Int.toString ++ (colorText ++ sizeText)}>
-                  <Toolkit__Ui_Button color size disabled>
-                    {"hello"->React.string}
-                  </Toolkit__Ui_Button>
-                </div>
-              )
-              ->React.array}
-            </div>
-          )
-          ->React.array}
-        </div>
-      </div>
-    )
-    ->React.array}
-  </div>
-}
-
-defaultPalette->CSF.addMeta(
-  ~name="default palette",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <Docs.Title />
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Button variant=#default>"Content"->React.string</Button>
-          `
-        />
-      </>,
-    },
-  },
-  (),
-)
-
-let pillPalette = () => {
-  let colors = Js.Dict.fromArray([
-    ("primary", #primary),
-    ("black", #black),
-    ("white", #white),
-    ("gray", #gray),
-    ("success", #success),
-    ("info", #info),
-    ("danger", #danger),
-    ("warning", #warning),
-    ("neutral", #neutral),
-    ("neutralLight", #neutralLight),
-  ])
-
-  let sizes = Js.Dict.fromArray([("xs", #xs), ("sm", #sm), ("md", #md), ("lg", #lg)])
-
-  <div>
-    {colors
-    ->Js.Dict.entries
-    ->Array.mapWithIndex((i, (colorText, color)) =>
-      <div
-        key={i->Int.toString ++ colorText}
-        className="flex flex-row flex-col-gap-4 mb-4 items-center">
-        <strong className="w-40"> {colorText->React.string} </strong>
-        <div className="flex flex-col">
-          {[false, true]
-          ->Array.mapWithIndex((j, disabled) =>
-            <div className="flex items-center flex-col-gap-1 mb-2">
-              {sizes
-              ->Js.Dict.entries
-              ->Array.mapWithIndex((k, (sizeText, size)) =>
-                <div key={(i + j + k)->Int.toString ++ (colorText ++ sizeText)}>
-                  <Toolkit__Ui_Button variant=#pill color size disabled>
-                    {"hello"->React.string}
-                  </Toolkit__Ui_Button>
-                </div>
-              )
-              ->React.array}
-            </div>
-          )
-          ->React.array}
-        </div>
-      </div>
-    )
-    ->React.array}
-  </div>
-}
-
-pillPalette->CSF.addMeta(
-  ~name="pill palette",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <Docs.Title />
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Button variant=#pill>"Content"->React.string</Button>
-          `
-        />
-      </>,
-    },
-  },
-  (),
-)
-
-let outlinePalette = () => {
-  let colors = Js.Dict.fromArray([
-    ("primary", #primary),
-    ("black", #black),
-    ("white", #white),
-    ("gray", #gray),
-    ("success", #success),
-    ("info", #info),
-    ("danger", #danger),
-    ("warning", #warning),
-    ("neutral", #neutral),
-    ("neutralLight", #neutralLight),
-  ])
-
-  let sizes = Js.Dict.fromArray([("xs", #xs), ("sm", #sm), ("md", #md), ("lg", #lg)])
-  <div>
-    {colors
-    ->Js.Dict.entries
-    ->Array.mapWithIndex((i, (colorText, color)) =>
-      <div
-        key={i->Int.toString ++ colorText}
-        className="flex flex-row flex-col-gap-4 mb-4 items-center">
-        <strong className="w-40"> {colorText->React.string} </strong>
-        <div className="flex flex-col">
-          {[false, true]
-          ->Array.mapWithIndex((j, disabled) =>
-            <div className="flex items-center flex-col-gap-1 mb-2">
-              {sizes
-              ->Js.Dict.entries
-              ->Array.mapWithIndex((k, (sizeText, size)) =>
-                <div key={(i + j + k)->Int.toString ++ (colorText ++ sizeText)}>
-                  <Toolkit__Ui_Button color size disabled variant=#outline>
-                    {"hello"->React.string}
-                  </Toolkit__Ui_Button>
-                </div>
-              )
-              ->React.array}
-            </div>
-          )
-          ->React.array}
-        </div>
-      </div>
-    )
-    ->React.array}
-  </div>
-}
-
-outlinePalette->CSF.addMeta(
-  ~name="outline palette",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <Docs.Title />
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Button color=#primary variant=#outline>"Content"->React.string</Button>
-          `
-        />
-        <Toolkit__Ui_Button color=#primary variant=#outline>
-          {"hello"->React.string}
-        </Toolkit__Ui_Button>
-      </>,
-    },
-  },
-  (),
-)
-
-let textPalette = () => {
-  let colors = Js.Dict.fromArray([
-    ("primary", #primary),
-    ("black", #black),
-    ("white", #white),
-    ("gray", #gray),
-    ("success", #success),
-    ("info", #info),
-    ("danger", #danger),
-    ("warning", #warning),
-    ("neutral", #neutral),
-    ("neutralLight", #neutralLight),
-  ])
-
-  let sizes = Js.Dict.fromArray([("xs", #xs), ("sm", #sm), ("md", #md), ("lg", #lg)])
-  <div>
-    {colors
-    ->Js.Dict.entries
-    ->Array.mapWithIndex((i, (colorText, color)) =>
-      <div
-        key={i->Int.toString ++ colorText}
-        className="flex flex-row flex-col-gap-4 mb-4 items-center">
-        <strong className="w-40"> {colorText->React.string} </strong>
-        <div className="flex flex-col">
-          {[false, true]
-          ->Array.mapWithIndex((j, disabled) =>
-            <div className="flex items-center flex-col-gap-1 mb-2">
-              {sizes
-              ->Js.Dict.entries
-              ->Array.mapWithIndex((k, (sizeText, size)) =>
-                <div key={(i + j + k)->Int.toString ++ (colorText ++ sizeText)}>
-                  <Toolkit__Ui_Button color size disabled variant=#text>
-                    {"hello"->React.string}
-                  </Toolkit__Ui_Button>
-                </div>
-              )
-              ->React.array}
-            </div>
-          )
-          ->React.array}
-        </div>
-      </div>
-    )
-    ->React.array}
-  </div>
-}
-
-textPalette->CSF.addMeta(
-  ~name="text palette",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <Docs.Title />
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Button color=#primary variant=#text>"Content"->React.string</Button>
-          `
-        />
-        <Toolkit__Ui_Button color=#primary variant=#text>
-          {"hello"->React.string}
-        </Toolkit__Ui_Button>
-      </>,
-    },
-  },
-  (),
-)
-
-let loading = () =>
-  <Toolkit__Ui_Button color=#primary isLoading=true> {"content"->React.string} </Toolkit__Ui_Button>
-
-loading->CSF.addMeta(
-  ~name="loading",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <Docs.Title />
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Button color=#primary isLoading=true>"Content"->React.string</Button>
-          `
-        />
-        <Docs.Story id="components-button--loading" />
-      </>,
-    },
-  },
-  (),
-)
-
-let disabled = () =>
-  <Toolkit__Ui_Button color=#primary disabled=true> {"content"->React.string} </Toolkit__Ui_Button>
-
-disabled->CSF.addMeta(
-  ~name="disabled",
-  ~parameters={
-    "docs": {
-      "page": () => <>
-        <Docs.Title />
-        <CodeBlock> source </CodeBlock>
-        <Docs.Source
-          language="rescript"
-          code=j`
-            <Button color=#primary disabled=true>"Content"->React.string</Button>
-          `
-        />
-        <Docs.Story id="components-button--disabled" />
-      </>,
-    },
-  },
-  (),
-)