From f7caee6f79135b573b25a87a9e2cd40bfa75110b Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Sat, 18 Dec 2021 16:50:54 +0800
Subject: [PATCH] Add more component proposals

Update philosophy doc.
---
 docs/philosophy.md                            | 52 ++++++++++++-------
 .../option/components/ToggleSwitch/index.tsx  |  1 +
 2 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/docs/philosophy.md b/docs/philosophy.md
index 3b8600f..522211b 100644
--- a/docs/philosophy.md
+++ b/docs/philosophy.md
@@ -23,24 +23,36 @@
 
 ## HTML enhancement
 
-| HTML element                                                               | Tesseract counterpart         | Remarks                                                                      |
-|----------------------------------------------------------------------------|-------------------------------|------------------------------------------------------------------------------|
-| `<button>`                                                                 | `action/ActionButton`         |                                                                              |
-| `<input type="button">`                                                    | `action/ActionButton`         |                                                                              |
-| `<input type="reset">`                                                     | `action/ActionButton`         |                                                                              |
-| `<input type="submit">`                                                    | `action/ActionButton`         |                                                                              |
-| `<textarea>`                                                               | `freeform/MultilineTextInput` |                                                                              |
-| `<input type="text">`                                                      | `freeform/TextInput`          |                                                                              |
-| `<input type="search">`                                                    | `freeform/TextInput`          | The consumer may choose to add a search icon (magnifying glass) as indicator |
-| `<input type="password">`                                                  | `freeform/MaskedTextInput`    |                                                                              |
-| `<a>` with button appearance                                               | `navigation/LinkButton`       |                                                                              |
-| `<select>` without `multiple` attribute and with dropdown appearance       | `option/DropdownSelect`       |                                                                              |
-| `<select>` with list box appearance                                        | `option/MenuSelect`           | The `multiple` prop can be set here.                                         |
-| `<input type="checkbox">` with `indeterminate` state                       | `option/ToggleTickBox`        |                                                                              |
-| `<input type="checkbox">` with `indeterminate` state and button appearance | `option/ToggleButton`         |                                                                              |
-| `<input type="checkbox">` without `indeterminate` state                    | `option/ToggleSwitch`         | Prefer using this component when indeterminate state is not expected.        |
-| `<input type="radio">`                                                     | `option/RadioTickBox`         |                                                                              |
-| `<input type="radio">` with button appearance                              | `option/RadioButton`          |                                                                              |
-| `<input type="number">`                                                    | `number/Spinner`              | Use this component for discrete values.                                      |
-| `<input type="range">`                                                     | `number/Slider`               | Use this component for continuous values.                                    |
+| HTML element                                                                                                  | Tesseract counterpart         | Remarks                                                                       |
+|---------------------------------------------------------------------------------------------------------------|-------------------------------|-------------------------------------------------------------------------------|
+| `<button>`                                                                                                    | `action/ActionButton`         |                                                                               |
+| `<input type="button">`                                                                                       | `action/ActionButton`         |                                                                               |
+| `<input type="reset">`                                                                                        | `action/ActionButton`         |                                                                               |
+| `<input type="submit">`                                                                                       | `action/ActionButton`         |                                                                               |
+| `<textarea>`                                                                                                  | `freeform/MultilineTextInput` |                                                                               |
+| `<input type="text">`                                                                                         | `freeform/TextInput`          |                                                                               |
+| `<input type="search">`                                                                                       | `freeform/TextInput`          | The consumer may choose to add a search icon (magnifying glass) as indicator. |
+| `<input type="password">`                                                                                     | `freeform/MaskedTextInput`    |                                                                               |
+| `<a>` with button appearance                                                                                  | `navigation/LinkButton`       |                                                                               |
+| `<select>` without `multiple` attribute and with dropdown appearance                                          | `option/DropdownSelect`       |                                                                               |
+| `<select>` with list box appearance                                                                           | `option/MenuSelect`           | The `multiple` prop can be set here.                                          |
+| `<input type="checkbox">` with `indeterminate` state                                                          | `option/ToggleTickBox`        |                                                                               |
+| `<input type="checkbox">` with `indeterminate` state and button appearance                                    | `option/ToggleButton`         |                                                                               |
+| `<input type="checkbox">` without `indeterminate` state                                                       | `option/ToggleSwitch`         | Prefer using this component when indeterminate state is not expected.         |
+| `<input type="radio">`                                                                                        | `option/RadioTickBox`         |                                                                               |
+| `<input type="radio">` with button appearance                                                                 | `option/RadioButton`          |                                                                               |
+| `<input type="number">`                                                                                       | `numeric/Spinner`             | Use this component for discrete values.                                       |
+| `<input type="range">`                                                                                        | `numeric/Slider`              | Use this component for continuous values.                                     |
+| `<input type="date">` with dropdown calendar                                                                  | `temporal/DateDropdown`       |                                                                               |
+| `<input type="date">` as inline calendar                                                                      | `temporal/Calendar`           | Falls back to native date input.                                              |
+| `<input type="time">` with spinners for hour, minute, seconds, and milliseconds; switch for (AM/PM) selection | `temporal/TimeSpinner`        | Optional seconds and milliseconds.                                            |
+| `<input type="time">` with clock face                                                                         | `temporal/Clock`              | Falls back to native time input.                                              |
 
+## Additional components
+
+| Component             | Tesseract implementation | Remarks                                                                                                                      |
+|-----------------------|--------------------------|------------------------------------------------------------------------------------------------------------------------------|
+| Tag input             | `option/TagInput`        | Can specify predefined options (like `<input>` with `list` attribute).                                                       |
+| X-Y select (2D range) | `numeric/Range2D`        |                                                                                                                              |
+| Knob                  | `numeric/Knob`           |                                                                                                                              |
+| Duration input        | `temporal/DurationInput` | Can specify precision up to milliseconds, falls back to native number input (always returns milliseconds for compatibility). |
diff --git a/src/modules/option/components/ToggleSwitch/index.tsx b/src/modules/option/components/ToggleSwitch/index.tsx
index edc5264..0daa55e 100644
--- a/src/modules/option/components/ToggleSwitch/index.tsx
+++ b/src/modules/option/components/ToggleSwitch/index.tsx
@@ -14,6 +14,7 @@ export type ToggleSwitchProps = Omit<React.HTMLProps<HTMLInputElement>, 'size' |
    * Complementary content of the component.
    */
   subtext?: React.ReactNode,
+  // TODO - opposite children - label used for "off" value
 }
 
 /**