Extract Number and Option (Choice and Multichoice)

Define categories for Number and Option components.

TODO.md

@@ -0,0 +1,60 @@
+# Categories
+
+- Action
+  - [X] ActionButton
+- Blob (choose to extract each preview component to their own library?)
+  - [ ] FileSelectBox
+- Choice
+  - [X] ComboBox
+  - [X] DropdownSelect
+  - [X] MenuSelect
+  - [X] RadioButton
+  - [X] RadioTickBox
+- Color
+  - [ ] ColorPicker
+  - [X] Swatch
+- Formatted
+  - [X] EmailInput
+  - [X] PhoneNumberInput
+  - [X] UrlInput
+- Freeform
+  - [X] MaskedTextInput
+  - [X] MultilineTextInput
+  - [X] TextInput
+- Geo
+  - [ ] Map
+- Information
+  - [X] Badge
+  - [X] KeyValueTable
+- MultiChoice
+  - [X] MenuMultiSelect
+  - [X] TagInput
+  - [X] ToggleButton
+  - [X] ToggleSwitch
+  - [X] ToggleTickBox
+- Navigation
+  - [ ] Breadcrumb
+  - [X] LinkButton
+  - [ ] Pagination
+  - [ ] Steps
+- Number
+  - [X] Slider
+  - [X] Spinner
+  - [ ] Matrix2D
+- Rating
+  - [ ] Rating
+- RichText
+  - [ ] RichTextInput
+- Temporal
+  - [ ] Calendar
+  - [ ] DateDropdown
+  - [ ] DateTimeRangeInput
+  - [ ] MonthInput
+  - [ ] MonthDayInput
+  - [ ] TimeSpinner
+  - [ ] YearMonthInput
+  - [ ] YearWeekInput
+  - [ ] YearInput
+
+# Others
+- [ ] Add `select-none` to input labels, etc.

categories/choice/react/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "root": true,
+  "extends": [
+    "lxsmnsyc/typescript/react"
+  ],
+  "parserOptions": {
+    "project": "./tsconfig.eslint.json"
+  }
+}

categories/choice/react/.gitignore

@@ -0,0 +1,107 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.production
+.env.development
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+.npmrc

categories/choice/react/LICENSE

@@ -0,0 +1,7 @@
+MIT License Copyright (c) 2023 TheoryOfNekomata <allan.crisostomo@outlook.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice (including the next paragraph) shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

categories/choice/react/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@tesseract-design/web-choice-react",
+  "version": "0.0.0",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=12"
+  },
+  "license": "MIT",
+  "keywords": [
+    "pridepack"
+  ],
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/node": "^18.14.1",
+    "@types/react": "^18.0.27",
+    "eslint": "^8.35.0",
+    "eslint-config-lxsmnsyc": "^0.5.0",
+    "jsdom": "^21.1.0",
+    "pridepack": "2.4.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "tslib": "^2.5.0",
+    "tsx": "^3.12.7",
+    "typescript": "^4.9.5",
+    "vitest": "^0.28.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0"
+  },
+  "scripts": {
+    "prepublishOnly": "pridepack clean && pridepack build",
+    "build": "pridepack build && tsx scripts/build.ts",
+    "type-check": "pridepack check",
+    "lint": "pridepack lint",
+    "clean": "pridepack clean",
+    "watch": "pridepack watch",
+    "start": "pridepack start",
+    "dev": "pridepack dev",
+    "test": "vitest"
+  },
+  "private": false,
+  "description": "Tesseract components for selecting a single value across an array of options.",
+  "repository": {
+    "url": "",
+    "type": "git"
+  },
+  "homepage": "",
+  "bugs": {
+    "url": ""
+  },
+  "author": "TheoryOfNekomata <allan.crisostomo@outlook.com>",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tesseract-design/web-base": "workspace:*",
+    "clsx": "^1.2.1"
+  },
+  "types": "./dist/types/index.d.ts",
+  "main": "./dist/cjs/production/index.js",
+  "module": "./dist/esm/production/index.js",
+  "exports": {
+    ".": {
+      "development": {
+        "require": "./dist/cjs/development/index.js",
+        "import": "./dist/esm/development/index.js"
+      },
+      "require": "./dist/cjs/production/index.js",
+      "import": "./dist/esm/production/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./dist/RadioButton.css": "./dist/RadioButton.css",
+    "./dist/RadioTickBox.css": "./dist/RadioTickBox.css"
+  },
+  "typesVersions": {
+    "*": {}
+  }
+}

categories/choice/react/pridepack.json

@@ -0,0 +1,3 @@
+{
+  "target": "es2018"
+}

categories/choice/react/scripts/build.ts

@@ -0,0 +1,14 @@
+import { copyFileSync } from 'fs';
+import { resolve } from 'path';
+
+const doCopy = (src: string, dest: string) => {
+  const trueSrc = resolve(src);
+  const trueDest = resolve(dest);
+  console.log('Copying...');
+  console.log(`${trueSrc} -> ${trueDest}`);
+  copyFileSync(trueSrc, trueDest);
+  console.log('Done');
+}
+
+doCopy('./src/components/RadioButton/RadioButton.css', './dist/RadioButton.css');
+doCopy('./src/components/RadioTickBox/RadioTickBox.css', './dist/RadioTickBox.css');

packages/web-kitchensink-reactnext/src/categories/option/react/components/DropdownSelect/index.tsx → categories/choice/react/src/components/DropdownSelect/index.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 
 export type DropdownSelectDerivedElement = HTMLSelectElement;
 
-export interface DropdownSelectProps extends Omit<React.HTMLProps<DropdownSelectDerivedElement>, 'size' | 'type' | 'style' | 'label' | 'list'> {
+export interface DropdownSelectProps extends Omit<React.HTMLProps<DropdownSelectDerivedElement>, 'size' | 'type' | 'style' | 'label' | 'list' | 'multiple'> {
   /**
    * Short textual description indicating the nature of the component's value.
    */

packages/web-kitchensink-reactnext/src/categories/option/react/components/MenuSelect/index.tsx → categories/choice/react/src/components/MenuSelect/index.tsx

@@ -4,7 +4,7 @@ import clsx from 'clsx';
 
 export type MenuSelectDerivedElement = HTMLSelectElement;
 
-export interface MenuSelectProps extends Omit<React.HTMLProps<MenuSelectDerivedElement>, 'size' | 'style' | 'label'> {
+export interface MenuSelectProps extends Omit<React.HTMLProps<MenuSelectDerivedElement>, 'size' | 'style' | 'label' | 'multiple'> {
   /**
    * Short textual description indicating the nature of the component's value.
    */

categories/choice/react/src/components/RadioButton/RadioButton.css

@@ -0,0 +1,7 @@
+.tesseract-design-radio-button + label > :first-child > :first-child {
+  display: none;
+}
+
+.tesseract-design-radio-button:checked + label > :first-child > :first-child {
+  display: block;
+}

packages/web-kitchensink-reactnext/src/categories/option/react/components/RadioButton/index.tsx → categories/choice/react/src/components/RadioButton/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { Button } from '@tesseract-design/web-base';
-import styles from './style.module.css';
 
 export type RadioButtonDerivedElement = HTMLInputElement;
 
@@ -36,10 +35,7 @@ export const RadioButton = React.forwardRef<RadioButtonDerivedElement, RadioButt
         ref={forwardedRef}
         type="radio"
         id={id}
-        className={clsx(
-          'sr-only peer',
-          styles['radio-button'],
-        )}
+        className="sr-only peer tesseract-design-radio-button"
       />
       <label
         style={style}

categories/choice/react/src/components/RadioTickBox/RadioTickBox.css

@@ -0,0 +1,7 @@
+.tesseract-design-radio-tick-box + label + label > :first-child > :first-child {
+  display: none;
+}
+
+.tesseract-design-radio-tick-box:checked + label + label > :first-child > :first-child {
+  display: block;
+}

packages/web-kitchensink-reactnext/src/categories/option/react/components/RadioTickBox/index.tsx → categories/choice/react/src/components/RadioTickBox/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import styles from './style.module.css';
 
 export type RadioTickBoxDerivedElement = HTMLInputElement;
 
@@ -37,10 +36,7 @@ export const RadioTickBox = React.forwardRef<RadioTickBoxDerivedElement, RadioTi
         ref={forwardedRef}
         type="radio"
         id={id}
-        className={clsx(
-          'sr-only peer/radio',
-          styles['radio-tick-box'],
-        )}
+        className="sr-only peer/radio tesseract-design-radio-tick-box"
       />
       <label
         htmlFor={id}

packages/web-kitchensink-reactnext/src/categories/option/react/index.ts → categories/choice/react/src/index.ts

@@ -3,7 +3,3 @@ export * from './components/DropdownSelect';
 export * from './components/MenuSelect';
 export * from './components/RadioButton';
 export * from './components/RadioTickBox';
-export * from './components/TagInput';
-export * from './components/ToggleButton';
-export * from './components/ToggleSwitch';
-export * from './components/ToggleTickBox';

categories/choice/react/tsconfig.eslint.json

@@ -0,0 +1,21 @@
+{
+  "exclude": ["node_modules"],
+  "include": ["src", "types", "test"],
+  "compilerOptions": {
+    "module": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "target": "es2018"
+  }
+}

categories/choice/react/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "exclude": ["node_modules"],
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "module": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./src",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "target": "es2018"
+  }
+}

categories/choice/react/vitest.config.ts

@@ -0,0 +1,8 @@
+/// <reference types="vitest" />
+
+export default ({
+  test: {
+    global: true,
+    environment: 'jsdom',
+  },
+});

categories/color/react/package.json

@@ -44,7 +44,7 @@
     "test": "vitest"
   },
   "private": false,
-  "description": "Tesseract components for color data.",
+  "description": "Tesseract components for inputting color data.",
   "repository": {
     "url": "",
     "type": "git"

categories/formatted/react/package.json

@@ -44,7 +44,7 @@
     "test": "vitest"
   },
   "private": false,
-  "description": "Tesseract components for formatted data.",
+  "description": "Tesseract components for inputting formatted data.",
   "repository": {
     "url": "",
     "type": "git"

categories/freeform/react/package.json

@@ -44,7 +44,7 @@
     "test": "vitest"
   },
   "private": false,
-  "description": "Tesseract components for freeform data.",
+  "description": "Tesseract components for inputting freeform data.",
   "repository": {
     "url": "",
     "type": "git"

categories/multichoice/react/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "root": true,
+  "extends": [
+    "lxsmnsyc/typescript/react"
+  ],
+  "parserOptions": {
+    "project": "./tsconfig.eslint.json"
+  }
+}

categories/multichoice/react/.gitignore

@@ -0,0 +1,107 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.production
+.env.development
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+.npmrc

categories/multichoice/react/LICENSE

@@ -0,0 +1,7 @@
+MIT License Copyright (c) 2023 TheoryOfNekomata <allan.crisostomo@outlook.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice (including the next paragraph) shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

categories/multichoice/react/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@tesseract-design/web-multichoice-react",
+  "version": "0.0.0",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=12"
+  },
+  "license": "MIT",
+  "keywords": [
+    "pridepack"
+  ],
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/node": "^18.14.1",
+    "@types/react": "^18.0.27",
+    "eslint": "^8.35.0",
+    "eslint-config-lxsmnsyc": "^0.5.0",
+    "jsdom": "^21.1.0",
+    "pridepack": "2.4.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "tslib": "^2.5.0",
+    "tsx": "^3.12.7",
+    "typescript": "^4.9.5",
+    "vitest": "^0.28.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0"
+  },
+  "scripts": {
+    "prepublishOnly": "pridepack clean && pridepack build",
+    "build": "pridepack build && tsx scripts/build.ts",
+    "type-check": "pridepack check",
+    "lint": "pridepack lint",
+    "clean": "pridepack clean",
+    "watch": "pridepack watch",
+    "start": "pridepack start",
+    "dev": "pridepack dev",
+    "test": "vitest"
+  },
+  "private": false,
+  "description": "Tesseract components for selecting multiple values across an array of options.",
+  "repository": {
+    "url": "",
+    "type": "git"
+  },
+  "homepage": "",
+  "bugs": {
+    "url": ""
+  },
+  "author": "TheoryOfNekomata <allan.crisostomo@outlook.com>",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@modal-sh/react-utils": "workspace:*",
+    "@tesseract-design/web-base": "workspace:*",
+    "clsx": "^1.2.1",
+    "react-tag-input-component": "^2.0.2"
+  },
+  "types": "./dist/types/index.d.ts",
+  "main": "./dist/cjs/production/index.js",
+  "module": "./dist/esm/production/index.js",
+  "exports": {
+    ".": {
+      "development": {
+        "require": "./dist/cjs/development/index.js",
+        "import": "./dist/esm/development/index.js"
+      },
+      "require": "./dist/cjs/production/index.js",
+      "import": "./dist/esm/production/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./dist/TagInput.css": "./dist/TagInput.css",
+    "./dist/ToggleButton.css": "./dist/ToggleButton.css",
+    "./dist/ToggleSwitch.css": "./dist/ToggleSwitch.css",
+    "./dist/ToggleTickBox.css": "./dist/ToggleTickBox.css"
+  },
+  "typesVersions": {
+    "*": {}
+  }
+}

categories/multichoice/react/pridepack.json

@@ -0,0 +1,3 @@
+{
+  "target": "es2018"
+}

categories/multichoice/react/scripts/build.ts

@@ -0,0 +1,16 @@
+import { copyFileSync } from 'fs';
+import { resolve } from 'path';
+
+const doCopy = (src: string, dest: string) => {
+  const trueSrc = resolve(src);
+  const trueDest = resolve(dest);
+  console.log('Copying...');
+  console.log(`${trueSrc} -> ${trueDest}`);
+  copyFileSync(trueSrc, trueDest);
+  console.log('Done');
+}
+
+doCopy('./src/components/TagInput/TagInput.css', './dist/TagInput.css');
+doCopy('./src/components/ToggleButton/ToggleButton.css', './dist/ToggleButton.css');
+doCopy('./src/components/ToggleSwitch/ToggleSwitch.css', './dist/ToggleSwitch.css');
+doCopy('./src/components/ToggleTickBox/ToggleTickBox.css', './dist/ToggleTickBox.css');

categories/multichoice/react/src/components/MenuMultiSelect/index.tsx

@@ -0,0 +1,215 @@
+import * as React from 'react';
+import { TextControl } from '@tesseract-design/web-base';
+import clsx from 'clsx';
+
+export type MenuMultiSelectDerivedElement = HTMLSelectElement;
+
+export interface MenuMultiSelectProps extends Omit<React.HTMLProps<MenuMultiSelectDerivedElement>, 'size' | 'style' | 'label' | 'multiple'> {
+  /**
+   * Short textual description indicating the nature of the component's value.
+   */
+  label?: React.ReactNode,
+  /**
+   * Short textual description as guidelines for valid input values.
+   */
+  hint?: React.ReactNode,
+  /**
+   * Size of the component.
+   */
+  size?: TextControl.Size,
+  /**
+   * Additional description, usually graphical, indicating the nature of the component's value.
+   */
+  indicator?: React.ReactNode,
+  /**
+   * Should the component display a border?
+   */
+  border?: boolean,
+  /**
+   * Should the component occupy the whole width of its parent?
+   */
+  block?: boolean,
+  /**
+   * Style of the component.
+   */
+  variant?: TextControl.Variant,
+  /**
+   * Is the label hidden?
+   */
+  hiddenLabel?: boolean,
+  startingHeight?: number | string,
+}
+
+/**
+ * Component for inputting textual values.
+ *
+ * This component supports multiline input and adjusts its layout accordingly.
+ */
+export const MenuMultiSelect = React.forwardRef<MenuMultiSelectDerivedElement, MenuMultiSelectProps>(
+  (
+    {
+      label,
+      hint,
+      indicator,
+      size = 'medium' as const,
+      border = false,
+      block = false,
+      variant = 'default' as const,
+      hiddenLabel = false,
+      className,
+      startingHeight = '15rem',
+      ...etcProps
+    }: MenuMultiSelectProps,
+    ref,
+  ) => {
+    const labelId = React.useId();
+
+    return (
+      <div
+        className={clsx(
+          'relative rounded ring-secondary/50',
+          'focus-within:ring-4',
+          {
+            'block': block,
+            'inline-block align-middle': !block,
+          },
+          className,
+        )}
+      >
+        <select
+          {...etcProps}
+          ref={ref}
+          aria-labelledby={labelId}
+          data-testid="input"
+          size={2}
+          multiple
+          style={{
+            height: startingHeight,
+          }}
+          className={clsx(
+            'bg-negative rounded-inherit w-full peer block overflow-auto',
+            'focus:outline-0',
+            'disabled:opacity-50 disabled:cursor-not-allowed',
+            {
+              'resize': !block,
+              'resize-y': block,
+            },
+            {
+              'text-xxs': size === 'small',
+              'text-xs': size === 'medium',
+            },
+            {
+              'pl-4': variant === 'default',
+              'pl-1.5': variant === 'alternate',
+            },
+            {
+              'pt-4': variant === 'alternate' && size === 'small',
+              'pt-5': variant === 'alternate' && size === 'medium',
+              'pt-8': variant === 'alternate' && size === 'large',
+            },
+            {
+              'py-2.5': variant === 'default' && size === 'small',
+              'py-3': variant === 'default' && size === 'medium',
+              'py-5': variant === 'default' && size === 'large',
+            },
+            {
+              'pr-4': variant === 'default' && !indicator,
+              'pr-1.5': variant === 'alternate' && !indicator,
+            },
+            {
+              'pr-10': indicator && size === 'small',
+              'pr-12': indicator && size === 'medium',
+              'pr-16': indicator && size === 'large',
+            },
+            {
+              'min-h-10': size === 'small',
+              'min-h-12': size === 'medium',
+              'min-h-16': size === 'large',
+            },
+          )}
+        />
+        {
+          label && (
+            <label
+              data-testid="label"
+              id={labelId}
+              className={clsx(
+                'absolute z-[1] w-full top-0.5 left-0 pointer-events-none pl-1 text-xxs font-bold peer-disabled:opacity-50 peer-focus:text-secondary text-primary leading-none bg-negative',
+                {
+                  'sr-only': hiddenLabel,
+                },
+                {
+                  'pr-1': !indicator,
+                },
+                {
+                  'pr-10': indicator && size === 'small',
+                  'pr-12': indicator && size === 'medium',
+                  'pr-16': indicator && size === 'large',
+                },
+              )}
+            >
+              <span className="block w-full whitespace-nowrap h-[1.1em] overflow-hidden text-ellipsis">
+                {label}
+              </span>
+            </label>
+          )
+        }
+        {hint && (
+          <div
+            data-testid="hint"
+            className={clsx(
+              'absolute left-0 px-1 pointer-events-none text-xxs peer-disabled:opacity-50 leading-none w-full bg-negative',
+              {
+                'bottom-0 pl-4 pb-1': variant === 'default',
+                'top-0.5': variant === 'alternate',
+              },
+              {
+                'pt-2': variant === 'alternate' && size === 'small',
+                'pt-3': variant === 'alternate' && size !== 'small',
+              },
+              {
+                'pr-4': !indicator && variant === 'default',
+                'pr-1': !indicator && variant === 'alternate',
+              },
+              {
+                'pr-10': indicator && size === 'small',
+                'pr-12': indicator && size === 'medium',
+                'pr-16': indicator && size === 'large',
+              },
+            )}
+          >
+            <div
+              className="opacity-50 whitespace-nowrap w-full h-[1.1em] overflow-hidden text-ellipsis"
+            >
+              {hint}
+            </div>
+          </div>
+        )}
+        {indicator && (
+          <div
+            className={clsx(
+              'text-center flex items-center justify-center peer-disabled:opacity-50 aspect-square absolute bottom-0 right-0 pointer-events-none',
+              {
+                'w-10': size === 'small',
+                'w-12': size === 'medium',
+                'w-16': size === 'large',
+              },
+            )}
+          >
+            {indicator}
+          </div>
+        )}
+        {
+          border && (
+            <span
+              data-testid="border"
+              className="absolute z-[1] peer-disabled:opacity-50 inset-0 rounded-inherit border-2 border-primary pointer-events-none peer-focus:border-secondary"
+            />
+          )
+        }
+      </div>
+    );
+  }
+);
+
+MenuMultiSelect.displayName = 'MenuMultiSelect';

categories/multichoice/react/src/components/TagInput/TagInput.css

@@ -0,0 +1,96 @@
+.tesseract-design-tag-input textarea + div > input {
+  flex: auto;
+}
+.tesseract-design-tag-input.tag-input-small textarea + div > input {
+  font-size: 0.625rem;
+}
+
+.tesseract-design-tag-input.tag-input-medium textarea + div > input {
+  font-size: 0.75rem;
+}
+
+.tesseract-design-tag-input.tag-input-default textarea + div {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.tesseract-design-tag-input.tag-input-alternate textarea + div {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+
+.tesseract-design-tag-input.tag-input-small.tag-input-default textarea + div {
+  padding-top: 0.625rem;
+  padding-bottom: 0.875rem;
+}
+
+.tesseract-design-tag-input.tag-input-medium.tag-input-default textarea + div {
+  padding-top: 0.75rem;
+  padding-bottom: 1rem;
+}
+
+.tesseract-design-tag-input.tag-input-large.tag-input-default textarea + div {
+  padding-top: 1rem;
+  padding-bottom: 1.25rem;
+}
+
+.tesseract-design-tag-input.tag-input-small.tag-input-alternate textarea + div {
+  padding-top: 1.375rem;
+}
+
+.tesseract-design-tag-input.tag-input-medium.tag-input-alternate textarea + div {
+  padding-top: 1.5rem;
+}
+
+.tesseract-design-tag-input.tag-input-large.tag-input-alternate textarea + div {
+  padding-top: 1.75rem;
+}
+
+.tesseract-design-tag-input.tag-input-small textarea + div {
+  gap: 0.25rem;
+  min-height: 2.5rem;
+}
+
+.tesseract-design-tag-input.tag-input-small.tag-input-indicator textarea + div {
+  padding-right: 2.5rem;
+}
+
+.tesseract-design-tag-input.tag-input-medium textarea + div {
+  gap: 0.375rem;
+  min-height: 3rem;
+}
+
+.tesseract-design-tag-input.tag-input-medium.tag-input-indicator textarea + div {
+  padding-right: 3rem;
+}
+
+.tesseract-design-tag-input.tag-input-large textarea + div {
+  gap: 0.375rem;
+  min-height: 4rem;
+}
+
+.tesseract-design-tag-input.tag-input-large.tag-input-indicator textarea + div {
+  padding-right: 4rem;
+}
+
+.tesseract-design-tag-input.tag-input textarea + div > span {
+  padding: 0.125rem;
+  border-radius: 0.25rem;
+  line-height: 1;
+  background-color: rgb(var(--color-positive) / 25%);
+}
+
+.tesseract-design-tag-input.tag-input textarea + div > span span {
+  pointer-events: none;
+}
+
+.tesseract-design-tag-input.tag-input textarea + div > span button {
+  color: rgb(var(--color-primary));
+  padding: 0;
+  width: 1rem;
+  margin-left: 0.25rem;
+}
+
+.tesseract-design-tag-input.tag-input textarea + div > span button:hover {
+  color: rgb(var(--color-primary));
+}

packages/web-kitchensink-reactnext/src/categories/option/react/components/TagInput/index.tsx → categories/multichoice/react/src/components/TagInput/index.tsx

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { TagsInput } from 'react-tag-input-component';
-import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
 import {useClientSide, delegateTriggerEvent} from '@modal-sh/react-utils';
-import styles from './style.module.css';
+import { TextControl } from '@tesseract-design/web-base';
 
 export type TagInputSeparator = ',' | '\n';
 
@@ -130,13 +129,13 @@ export const TagInput = React.forwardRef<TagInputDerivedElement, TagInputProps>(
             'min-h-12': size === 'medium',
             'min-h-16': size === 'large',
           },
-          styles['tag-input'],
-          size === 'small' && styles['tag-input-small'],
-          size === 'medium' && styles['tag-input-medium'],
-          size === 'large' && styles['tag-input-large'],
-          indicator && styles['tag-input-indicator'],
-          variant === 'default' && styles['tag-input-default'],
-          variant === 'alternate' && styles['tag-input-alternate'],
+          'tesseract-design-tag-input',
+          size === 'small' && 'tag-input-small',
+          size === 'medium' && 'tag-input-medium',
+          size === 'large' && 'tag-input-large',
+          indicator && 'tag-input-indicator',
+          variant === 'default' && 'tag-input-default',
+          variant === 'alternate' && 'tag-input-alternate',
           className,
         )}
       >

categories/multichoice/react/src/components/ToggleButton/ToggleButton.css

@@ -0,0 +1,15 @@
+.tesseract-design-toggle-button + label > :first-child > :first-child {
+  display: none;
+}
+
+.tesseract-design-toggle-button:checked + label > :first-child > :first-child {
+  display: block;
+}
+
+.tesseract-design-toggle-button + label > :first-child > :first-child + * {
+  display: none;
+}
+
+.tesseract-design-toggle-button:indeterminate + label > :first-child > :first-child + * {
+  display: block;
+}

packages/web-kitchensink-reactnext/src/categories/option/react/components/ToggleButton/index.tsx → categories/multichoice/react/src/components/ToggleButton/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import { Button } from '@tesseract-design/web-base';
-import styles from './style.module.css';
 
 export type ToggleButtonDerivedElement = HTMLInputElement;
 
@@ -51,10 +50,7 @@ export const ToggleButton = React.forwardRef<ToggleButtonDerivedElement, ToggleB
         ref={ref}
         type="checkbox"
         id={id}
-        className={clsx(
-          'sr-only peer',
-          styles['toggle-button'],
-        )}
+        className="sr-only peer tesseract-design-toggle-button"
       />
       <label
         htmlFor={id}

categories/multichoice/react/src/components/ToggleSwitch/ToggleSwitch.css

@@ -0,0 +1,118 @@
+.tesseract-design-toggle-switch + label + label + label > :first-child {
+  appearance: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  height: 1.5em;
+  width: 3em;
+  display: block;
+  box-sizing: border-box;
+  border-radius: 9999px;
+  color: rgb(var(--color-primary));
+}
+
+.tesseract-design-toggle-switch:checked + label + label + label > :first-child {
+  color: rgb(var(--color-tertiary));
+}
+
+.tesseract-design-toggle-switch:focus + label + label + label > :first-child {
+  color: rgb(var(--color-secondary));
+}
+
+.tesseract-design-toggle-switch + label:active + label + label > :first-child {
+  color: rgb(var(--color-tertiary));
+}
+
+.tesseract-design-toggle-switch + label + label:active + label > :first-child {
+  color: rgb(var(--color-tertiary));
+}
+
+.tesseract-design-toggle-switch + label + label + label:active > :first-child {
+  color: rgb(var(--color-tertiary));
+}
+
+.tesseract-design-toggle-switch + label + label + label > :first-child > :first-child {
+  width: 100%;
+  height: 100%;
+  background-color: rgb(var(--color-primary) / 50%);
+  border-radius: 9999px;
+  display: block;
+  box-sizing: border-box;
+  background-clip: content-box;
+  padding: 0.25em;
+  appearance: none;
+}
+
+.tesseract-design-toggle-switch:checked + label + label + label > :first-child > :first-child {
+  background-color: rgb(var(--color-tertiary) / 50%);
+}
+
+.tesseract-design-toggle-switch:focus + label + label + label > :first-child > :first-child {
+  background-color: rgb(var(--color-secondary) / 50%);
+}
+
+.tesseract-design-toggle-switch + label:active + label + label > :first-child > :first-child {
+  background-color: rgb(var(--color-tertiary) / 50%);
+}
+
+.tesseract-design-toggle-switch + label + label:active + label > :first-child > :first-child {
+  background-color: rgb(var(--color-tertiary) / 50%);
+}
+
+.tesseract-design-toggle-switch + label + label + label:active > :first-child > :first-child {
+  background-color: rgb(var(--color-tertiary) / 50%);
+}
+
+.tesseract-design-toggle-switch + label + label + label > :first-child > :first-child > :first-child {
+  appearance: none;
+  border-radius: 9999px;
+  display: block;
+  width: 100%;
+  height: 100%;
+  margin: -0.25em;
+  box-sizing: border-box;
+  background-clip: content-box;
+}
+
+.tesseract-design-toggle-switch + label + label + label > :first-child > :first-child > :first-child > :first-child {
+  width: 1.5em;
+  height: 1.5em;
+  margin: -0.25em 0 0 0;
+  display: block;
+  border-radius: 9999px;
+  background-color: currentColor;
+  appearance: none;
+  aspect-ratio: 1 / 1;
+  z-index: 1;
+  position: relative;
+  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-primary) / 50%);
+}
+
+.tesseract-design-toggle-switch:checked + label + label + label > :first-child > :first-child > :first-child > :first-child {
+  margin-left: calc(100% - 1em);
+}
+
+.tesseract-design-toggle-switch:indeterminate + label + label + label > :first-child > :first-child > :first-child > :first-child {
+  margin-left: calc(50% - 0.5em);
+}
+
+.tesseract-design-toggle-switch:checked + label + label + label > :first-child > :first-child > :first-child > :first-child {
+  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-tertiary) / 50%);
+}
+
+.tesseract-design-toggle-switch:focus + label + label + label > :first-child > :first-child > :first-child > :first-child {
+  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-secondary) / 50%);
+}
+
+.tesseract-design-toggle-switch + label:active + label + label > :first-child > :first-child > :first-child > :first-child {
+  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-tertiary) / 50%);
+}
+
+.tesseract-design-toggle-switch + label + label:active + label > :first-child > :first-child > :first-child > :first-child {
+  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-tertiary) / 50%);
+}
+
+.tesseract-design-toggle-switch + label + label + label:active > :first-child > :first-child > :first-child > :first-child {
+  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-tertiary) / 50%);
+}
+

packages/web-kitchensink-reactnext/src/categories/option/react/components/ToggleSwitch/index.tsx → categories/multichoice/react/src/components/ToggleSwitch/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import styles from './style.module.css';
 
 export type ToggleSwitchDerivedElement = HTMLInputElement;
 
@@ -56,10 +55,7 @@ export const ToggleSwitch = React.forwardRef<ToggleSwitchDerivedElement, ToggleS
         ref={ref}
         type="checkbox"
         id={id}
-        className={clsx(
-          'sr-only peer/radio',
-          styles['toggle-switch'],
-        )}
+        className="sr-only peer/radio tesseract-design-toggle-switch"
       />
       <label
         htmlFor={id}

categories/multichoice/react/src/components/ToggleTickBox/ToggleTickBox.css

@@ -0,0 +1,15 @@
+.tesseract-design-toggle-tick-box + label + label > :first-child > :first-child {
+  display: none;
+}
+
+.tesseract-design-toggle-tick-box:checked + label + label > :first-child > :first-child {
+  display: block;
+}
+
+.tesseract-design-toggle-tick-box + label + label > :first-child > :first-child + * {
+  display: none;
+}
+
+.tesseract-design-toggle-tick-box:indeterminate + label + label > :first-child > :first-child + * {
+  display: block;
+}

packages/web-kitchensink-reactnext/src/categories/option/react/components/ToggleTickBox/index.tsx → categories/multichoice/react/src/components/ToggleTickBox/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import styles from './style.module.css';
 
 export type ToggleTickBoxDerivedElement = HTMLInputElement;
 
@@ -53,10 +52,7 @@ export const ToggleTickBox = React.forwardRef<ToggleTickBoxDerivedElement, Toggl
         ref={ref}
         type="checkbox"
         id={id}
-        className={clsx(
-          'sr-only peer/radio',
-          styles['toggle-tick-box'],
-        )}
+        className="sr-only peer/radio tesseract-design-toggle-tick-box"
       />
       <label
         htmlFor={id}

categories/multichoice/react/src/index.ts

@@ -0,0 +1,5 @@
+export * from './components/MenuMultiSelect';
+export * from './components/TagInput';
+export * from './components/ToggleButton';
+export * from './components/ToggleSwitch';
+export * from './components/ToggleTickBox';

categories/multichoice/react/tsconfig.eslint.json

@@ -0,0 +1,21 @@
+{
+  "exclude": ["node_modules"],
+  "include": ["src", "types", "test"],
+  "compilerOptions": {
+    "module": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "target": "es2018"
+  }
+}

categories/multichoice/react/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "exclude": ["node_modules"],
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "module": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./src",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "target": "es2018"
+  }
+}

categories/multichoice/react/vitest.config.ts

@@ -0,0 +1,8 @@
+/// <reference types="vitest" />
+
+export default ({
+  test: {
+    global: true,
+    environment: 'jsdom',
+  },
+});

categories/number/react/.eslintrc

@@ -0,0 +1,9 @@
+{
+  "root": true,
+  "extends": [
+    "lxsmnsyc/typescript/react"
+  ],
+  "parserOptions": {
+    "project": "./tsconfig.eslint.json"
+  }
+}

categories/number/react/.gitignore

@@ -0,0 +1,107 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.production
+.env.development
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+.npmrc

categories/number/react/LICENSE

@@ -0,0 +1,7 @@
+MIT License Copyright (c) 2023 TheoryOfNekomata <allan.crisostomo@outlook.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice (including the next paragraph) shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

categories/number/react/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@tesseract-design/web-number-react",
+  "version": "0.0.0",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "engines": {
+    "node": ">=12"
+  },
+  "license": "MIT",
+  "keywords": [
+    "pridepack"
+  ],
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/node": "^18.14.1",
+    "@types/react": "^18.0.27",
+    "eslint": "^8.35.0",
+    "eslint-config-lxsmnsyc": "^0.5.0",
+    "jsdom": "^21.1.0",
+    "pridepack": "2.4.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
+    "tslib": "^2.5.0",
+    "tsx": "^3.12.7",
+    "typescript": "^4.9.5",
+    "vitest": "^0.28.1"
+  },
+  "peerDependencies": {
+    "react": "^16.8 || ^17.0 || ^18.0",
+    "react-dom": "^16.8 || ^17.0 || ^18.0"
+  },
+  "scripts": {
+    "prepublishOnly": "pridepack clean && pridepack build",
+    "build": "pridepack build && tsx scripts/build.ts",
+    "type-check": "pridepack check",
+    "lint": "pridepack lint",
+    "clean": "pridepack clean",
+    "watch": "pridepack watch",
+    "start": "pridepack start",
+    "dev": "pridepack dev",
+    "test": "vitest"
+  },
+  "private": false,
+  "description": "Tesseract components for inputting numeric data.",
+  "repository": {
+    "url": "",
+    "type": "git"
+  },
+  "homepage": "",
+  "bugs": {
+    "url": ""
+  },
+  "author": "TheoryOfNekomata <allan.crisostomo@outlook.com>",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tesseract-design/web-base": "workspace:*",
+    "clsx": "^1.2.1"
+  },
+  "types": "./dist/types/index.d.ts",
+  "main": "./dist/cjs/production/index.js",
+  "module": "./dist/esm/production/index.js",
+  "exports": {
+    ".": {
+      "development": {
+        "require": "./dist/cjs/development/index.js",
+        "import": "./dist/esm/development/index.js"
+      },
+      "require": "./dist/cjs/production/index.js",
+      "import": "./dist/esm/production/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./dist/Slider.css": "./dist/Slider.css",
+    "./dist/Spinner.css": "./dist/Spinner.css"
+  },
+  "typesVersions": {
+    "*": {}
+  }
+}

categories/number/react/pridepack.json

@@ -0,0 +1,3 @@
+{
+  "target": "es2018"
+}

categories/number/react/scripts/build.ts

@@ -0,0 +1,14 @@
+import { copyFileSync } from 'fs';
+import { resolve } from 'path';
+
+const doCopy = (src: string, dest: string) => {
+  const trueSrc = resolve(src);
+  const trueDest = resolve(dest);
+  console.log('Copying...');
+  console.log(`${trueSrc} -> ${trueDest}`);
+  copyFileSync(trueSrc, trueDest);
+  console.log('Done');
+}
+
+doCopy('./src/components/Slider/Slider.css', './dist/Slider.css');
+doCopy('./src/components/Spinner/Spinner.css', './dist/Spinner.css');

packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/style.module.css → categories/number/react/src/components/Slider/Slider.css

@@ -1,4 +1,4 @@
-.slider {
+.tesseract-design-slider-wrapper > input {
   appearance: none;
   cursor: pointer;
   position: relative;
@@ -8,7 +8,7 @@
   color: rgb(var(--color-primary));
 }
 
-.slider::-webkit-slider-container {
+.tesseract-design-slider-wrapper > input::-webkit-slider-container {
   width: 100%;
   height: 100%;
   min-block-size: 0;
@@ -21,7 +21,7 @@
   appearance: none;
 }
 
-.slider::-webkit-slider-runnable-track {
+.tesseract-design-slider-wrapper > input::-webkit-slider-runnable-track {
   appearance: none;
   border-radius: 9999px;
   display: block;
@@ -32,7 +32,7 @@
   background-clip: content-box;
 }
 
-.slider::-webkit-slider-thumb {
+.tesseract-design-slider-wrapper > input::-webkit-slider-thumb {
   width: 1em;
   height: 1em;
   margin: -0.25em 0 0 0;
@@ -46,42 +46,42 @@
   box-shadow: -100000.5em 0 0 100000em rgb(var(--color-primary) / 50%);
 }
 
-.slider:focus::-webkit-slider-container {
+.tesseract-design-slider-wrapper > input:focus::-webkit-slider-container {
   background-color: rgb(var(--color-secondary) / 50%);
 }
 
-.slider:active::-webkit-slider-container {
+.tesseract-design-slider-wrapper > input:active::-webkit-slider-container {
   background-color: rgb(var(--color-tertiary) / 50%);
 }
 
-.slider:focus::-webkit-slider-thumb {
+.tesseract-design-slider-wrapper > input:focus::-webkit-slider-thumb {
   box-shadow: -100000.5em 0 0 100000em rgb(var(--color-secondary) / 50%);
 }
 
-.slider:active::-webkit-slider-thumb {
+.tesseract-design-slider-wrapper > input:active::-webkit-slider-thumb {
   box-shadow: -100000.5em 0 0 100000em rgb(var(--color-tertiary) / 50%);
 }
 
-.slider-wrapper[data-orient='horizontal'] {
+.tesseract-design-slider-wrapper[data-orient='horizontal'] {
   flex-direction: column;
 }
 
-.slider-wrapper[data-firefox] {
+.tesseract-design-slider-wrapper[data-firefox] {
   flex-direction: column;
 }
 
-.slider-wrapper[data-firefox='vertical'] {
+.tesseract-design-slider-wrapper[data-firefox='vertical'] {
   flex-direction: row;
 }
 
-.slider-wrapper[data-orient='vertical'] {
+.tesseract-design-slider-wrapper[data-orient='vertical'] {
   flex-direction: column;
   rotate: -90deg;
   translate: calc(-100% + 0.5em * 2);
   transform-origin: calc(100% - 0.5em) 0.5em;
 }
 
-.slider::-moz-range-track {
+.tesseract-design-slider-wrapper > input::-moz-range-track {
   appearance: none;
   border-radius: 9999px;
   content: '';
@@ -95,7 +95,7 @@
   margin: -0.25em;
 }
 
-.slider::-moz-range-thumb {
+.tesseract-design-slider-wrapper > input::-moz-range-thumb {
   height: 100%;
   outline: 0;
   border: 0;
@@ -109,49 +109,49 @@
   box-shadow: -100000.5em 0 0 100000em rgb(var(--color-primary) / 50%);
 }
 
-.slider:focus::-moz-range-thumb {
+.tesseract-design-slider-wrapper > input:focus::-moz-range-thumb {
   box-shadow: -100000.5em 0 0 100000em rgb(var(--color-secondary) / 50%);
 }
 
-.slider:active::-moz-range-thumb {
+.tesseract-design-slider-wrapper > input:active::-moz-range-thumb {
   box-shadow: -100000.5em 0 0 100000em rgb(var(--color-tertiary) / 50%);
 }
 
-.slider[orient='vertical'] {
+.tesseract-design-slider-wrapper > input[orient='vertical'] {
   width: 1em;
   height: 16em;
 }
 
-.slider[orient='vertical']::-moz-range-track {
+.tesseract-design-slider-wrapper > input[orient='vertical']::-moz-range-track {
   width: 50%;
   height: calc(100% - 0.5em);
 }
 
-.slider[orient='vertical']::-moz-range-thumb {
+.tesseract-design-slider-wrapper > input[orient='vertical']::-moz-range-thumb {
   width: 100%;
   height: 1em;
   box-shadow: 0 100000.5em 0 100000em rgb(var(--color-primary) / 50%);
 }
 
-.slider[orient='vertical']:focus::-moz-range-thumb {
+.tesseract-design-slider-wrapper > input[orient='vertical']:focus::-moz-range-thumb {
   box-shadow: 0 100000.5em 0 100000em rgb(var(--color-secondary) / 50%);
 }
 
-.slider[orient='vertical']:active::-moz-range-thumb {
+.tesseract-design-slider-wrapper > input[orient='vertical']:active::-moz-range-thumb {
   box-shadow: 0 100000.5em 0 100000em rgb(var(--color-tertiary) / 50%);
 }
 
-.slider-wrapper[data-chrome] > input + * {
+.tesseract-design-slider-wrapper[data-chrome] > input + * {
   padding: 0 0.5em;
   height: 1.5em;
 }
 
-.slider-wrapper[data-firefox='horizontal'] > input + * {
+.tesseract-design-slider-wrapper[data-firefox='horizontal'] > input + * {
   padding: 0 0.5em;
   height: 1.5em;
 }
 
-.slider-wrapper[data-firefox='vertical'] > input + * {
+.tesseract-design-slider-wrapper[data-firefox='vertical'] > input + * {
   padding: 0.5em 0;
   width: 1.5em;
 }

packages/web-kitchensink-reactnext/src/categories/number/react/components/Slider/index.tsx → categories/number/react/src/components/Slider/index.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import clsx from 'clsx';
-import styles from './style.module.css';
 
 const filterOptions = (children: React.ReactNode): React.ReactNode => {
   const childrenArray = Array.isArray(children) ? children : [children];
@@ -236,10 +235,7 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
           }}
         >
           <div
-            className={clsx(
-              styles['slider-wrapper'],
-              'flex'
-            )}
+            className="flex tesseract-design-slider-wrapper"
             data-orient={orient}
           >
             <input
@@ -250,7 +246,6 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
               type="range"
               list={childrenValues ? tickMarkId : undefined}
               className={clsx(
-                styles.slider,
                 'w-full h-full bg-inherit block text-primary ring-secondary/50 rounded-full',
                 'focus:text-secondary focus:outline-0 focus:ring-4',
                 'active:text-tertiary active:ring-tertiary/50',
@@ -270,10 +265,7 @@ export const Slider = React.forwardRef<SliderDerivedElement, SliderProps>(({
                         return (
                           <div
                             key={c.props.value}
-                            className={clsx(
-                              styles['tick-mark'],
-                              'absolute w-full h-full box-border',
-                            )}
+                            className="absolute w-full h-full box-border"
                             data-offset={`${(value - minValue) / (maxValue - minValue) * 100}%`}
                           >
                             <div

packages/web-kitchensink-reactnext/src/categories/number/react/components/Spinner/style.module.css → categories/number/react/src/components/Spinner/Spinner.css

@@ -1,8 +1,8 @@
-.spinner {
+.tesseract-design-spinner {
   position: relative;
 }
 
-.spinner::-webkit-inner-spin-button {
+.tesseract-design-spinner::-webkit-inner-spin-button {
   position: absolute;
   top: 0;
   right: 0;

packages/web-kitchensink-reactnext/src/categories/number/react/components/Spinner/index.tsx → categories/number/react/src/components/Spinner/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { TextControl } from '@tesseract-design/web-base';
 import clsx from 'clsx';
-import styles from './style.module.css';
 
 export type SpinnerDerivedElement = HTMLInputElement;
 
@@ -83,7 +82,7 @@ export const Spinner = React.forwardRef<SpinnerDerivedElement, SpinnerProps>(
             'bg-negative rounded-inherit w-full peer block tabular-nums',
             'focus:outline-0',
             'disabled:opacity-50 disabled:cursor-not-allowed',
-            styles['spinner'],
+            'tesseract-design-spinner',
             {
               'text-xxs': size === 'small',
               'text-xs': size === 'medium',

categories/number/react/tsconfig.eslint.json

@@ -0,0 +1,21 @@
+{
+  "exclude": ["node_modules"],
+  "include": ["src", "types", "test"],
+  "compilerOptions": {
+    "module": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "target": "es2018"
+  }
+}

categories/number/react/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "exclude": ["node_modules"],
+  "include": ["src", "types"],
+  "compilerOptions": {
+    "module": "ESNext",
+    "lib": ["DOM", "ESNext"],
+    "importHelpers": true,
+    "declaration": true,
+    "sourceMap": true,
+    "rootDir": "./src",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "moduleResolution": "node",
+    "jsx": "react",
+    "esModuleInterop": true,
+    "target": "es2018"
+  }
+}

categories/number/react/vitest.config.ts

@@ -0,0 +1,8 @@
+/// <reference types="vitest" />
+
+export default ({
+  test: {
+    global: true,
+    environment: 'jsdom',
+  },
+});

packages/web-kitchensink-reactnext/package.json

@@ -38,10 +38,13 @@
     "@tesseract-design/web-base": "workspace:*",
     "@tesseract-design/web-action-react": "workspace:*",
     "@tesseract-design/web-color-react": "workspace:*",
+    "@tesseract-design/web-choice-react": "workspace:*",
     "@tesseract-design/web-formatted-react": "workspace:*",
     "@tesseract-design/web-freeform-react": "workspace:*",
     "@tesseract-design/web-information-react": "workspace:*",
-    "@tesseract-design/web-navigation-react": "workspace:*"
+    "@tesseract-design/web-multichoice-react": "workspace:*",
+    "@tesseract-design/web-navigation-react": "workspace:*",
+    "@tesseract-design/web-number-react": "workspace:*"
   },
   "devDependencies": {
     "@types/mime-types": "^2.1.1",

packages/web-kitchensink-reactnext/src/categories/blob/react/components/AudioFilePreview/index.tsx

@@ -12,8 +12,8 @@ import {useFileMetadata, useFileUrl} from '@/categories/blob/react';
 
 import clsx from 'clsx';
 import {SpectrogramCanvas, WaveformCanvas} from '@modal-soft/react-wavesurfer';
-import {Slider} from '@/categories/number/react';
-import {KeyValueTable} from '../../../../../../../../categories/information/react/src';
+import {Slider} from '@tesseract-design/web-number-react';
+import {KeyValueTable} from '@tesseract-design/web-information-react';
 import {useClientSide} from '@modal-soft/react-utils';
 import {CommonPreviewProps} from '@/categories/blob/react/common';
 

packages/web-kitchensink-reactnext/src/categories/blob/react/components/BinaryFilePreview/index.tsx

@@ -3,7 +3,7 @@ import {augmentBinaryFile, getMimeTypeDescription} from '@/utils/blob';
 import {formatFileSize, formatNumeral} from '@/utils/numeral';
 import {useFileMetadata, useFileUrl} from '@/categories/blob/react';
 import clsx from 'clsx';
-import {KeyValueTable} from '../../../../../../../../categories/information/react/src';
+import {KeyValueTable} from '@tesseract-design/web-information-react';
 import {BinaryDataCanvas} from '@modal-soft/react-binary-data-canvas';
 import {useClientSide} from '@modal-soft/react-utils';
 import {CommonPreviewProps} from '@/categories/blob/react/common';

packages/web-kitchensink-reactnext/src/categories/blob/react/components/ImageFilePreview/index.tsx

@@ -3,10 +3,10 @@ import {augmentImageFile, getMimeTypeDescription} from '@/utils/blob';
 import {formatFileSize, formatNumeral} from '@/utils/numeral';
 import clsx from 'clsx';
 import {useFileMetadata, useFileUrl, useImageControls} from '@/categories/blob/react';
-import {KeyValueTable} from '../../../../../../../../categories/information/react/src';
+import {KeyValueTable} from '@tesseract-design/web-information-react';
 import {useClientSide} from '@modal-soft/react-utils';
 import {CommonPreviewProps} from '@/categories/blob/react/common';
-import {Swatch} from '../../../../../../../../categories/color/react/src';
+import {Swatch} from '@tesseract-design/web-color-react';
 
 export type ImageFilePreviewDerivedElement = HTMLImageElement;
 

packages/web-kitchensink-reactnext/src/categories/blob/react/components/TextFilePreview/index.tsx

@@ -3,7 +3,7 @@ import {formatFileSize, formatNumeral} from '@/utils/numeral';
 import {useFileMetadata, useFileUrl} from '@/categories/blob/react';
 import {augmentTextFile, getMimeTypeDescription} from '@/utils/blob';
 import clsx from 'clsx';
-import {KeyValueTable} from '../../../../../../../../categories/information/react/src';
+import {KeyValueTable} from '@tesseract-design/web-information-react';
 import {Refractor} from '@modal-soft/react-refractor';
 import {useClientSide} from '@modal-soft/react-utils';
 import {CommonPreviewProps} from '@/categories/blob/react/common';

packages/web-kitchensink-reactnext/src/categories/blob/react/components/VideoFilePreview/index.tsx

@@ -4,7 +4,7 @@ import {formatFileSize, formatNumeral, formatSecondsDurationConcise} from '@/uti
 import {useFileMetadata, useFileUrl, useMediaControls} from '@tesseract-design/web-blob-react';
 import clsx from 'clsx';
 import {Slider} from '@tesseract-design/web-number-react';
-import {KeyValueTable} from '../../../../../../../../categories/information/react/src';
+import {KeyValueTable} from '@tesseract-design/web-information-react';
 import {useClientSide} from '@modal-soft/react-utils';
 import {CommonPreviewProps} from '@/categories/blob/react/common';
 

packages/web-kitchensink-reactnext/src/categories/option/react/components/RadioButton/style.module.css

@@ -1,7 +0,0 @@
-.radio-button + label > :first-child > :first-child {
-  display: none;
-}
-
-.radio-button:checked + label > :first-child > :first-child {
-  display: block;
-}

packages/web-kitchensink-reactnext/src/categories/option/react/components/RadioTickBox/style.module.css

@@ -1,7 +0,0 @@
-.radio-tick-box + label + label > :first-child > :first-child {
-  display: none;
-}
-
-.radio-tick-box:checked + label + label > :first-child > :first-child {
-  display: block;
-}

packages/web-kitchensink-reactnext/src/categories/option/react/components/TagInput/style.module.css

@@ -1,96 +0,0 @@
-.tag-input textarea + div > input {
-  flex: auto;
-}
-.tag-input-small textarea + div > input {
-  font-size: 0.625rem;
-}
-
-.tag-input-medium textarea + div > input {
-  font-size: 0.75rem;
-}
-
-.tag-input-default textarea + div {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.tag-input-alternate textarea + div {
-  padding-left: 0.375rem;
-  padding-right: 0.375rem;
-}
-
-.tag-input-small.tag-input-default textarea + div {
-  padding-top: 0.625rem;
-  padding-bottom: 0.875rem;
-}
-
-.tag-input-medium.tag-input-default textarea + div {
-  padding-top: 0.75rem;
-  padding-bottom: 1rem;
-}
-
-.tag-input-large.tag-input-default textarea + div {
-  padding-top: 1rem;
-  padding-bottom: 1.25rem;
-}
-
-.tag-input-small.tag-input-alternate textarea + div {
-  padding-top: 1.375rem;
-}
-
-.tag-input-medium.tag-input-alternate textarea + div {
-  padding-top: 1.5rem;
-}
-
-.tag-input-large.tag-input-alternate textarea + div {
-  padding-top: 1.75rem;
-}
-
-.tag-input-small textarea + div {
-  gap: 0.25rem;
-  min-height: 2.5rem;
-}
-
-.tag-input-small.tag-input-indicator textarea + div {
-  padding-right: 2.5rem;
-}
-
-.tag-input-medium textarea + div {
-  gap: 0.375rem;
-  min-height: 3rem;
-}
-
-.tag-input-medium.tag-input-indicator textarea + div {
-  padding-right: 3rem;
-}
-
-.tag-input-large textarea + div {
-  gap: 0.375rem;
-  min-height: 4rem;
-}
-
-.tag-input-large.tag-input-indicator textarea + div {
-  padding-right: 4rem;
-}
-
-.tag-input textarea + div > span {
-  padding: 0.125rem;
-  border-radius: 0.25rem;
-  line-height: 1;
-  background-color: rgb(var(--color-positive) / 25%);
-}
-
-.tag-input textarea + div > span span {
-  pointer-events: none;
-}
-
-.tag-input textarea + div > span button {
-  color: rgb(var(--color-primary));
-  padding: 0;
-  width: 1rem;
-  margin-left: 0.25rem;
-}
-
-.tag-input textarea + div > span button:hover {
-  color: rgb(var(--color-primary));
-}

packages/web-kitchensink-reactnext/src/categories/option/react/components/ToggleButton/style.module.css

@@ -1,15 +0,0 @@
-.toggle-button + label > :first-child > :first-child {
-  display: none;
-}
-
-.toggle-button:checked + label > :first-child > :first-child {
-  display: block;
-}
-
-.toggle-button + label > :first-child > :first-child + * {
-  display: none;
-}
-
-.toggle-button:indeterminate + label > :first-child > :first-child + * {
-  display: block;
-}

packages/web-kitchensink-reactnext/src/categories/option/react/components/ToggleSwitch/style.module.css

@@ -1,118 +0,0 @@
-.toggle-switch + label + label + label > :first-child {
-  appearance: none;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  height: 1.5em;
-  width: 3em;
-  display: block;
-  box-sizing: border-box;
-  border-radius: 9999px;
-  color: rgb(var(--color-primary));
-}
-
-.toggle-switch:checked + label + label + label > :first-child {
-  color: rgb(var(--color-tertiary));
-}
-
-.toggle-switch:focus + label + label + label > :first-child {
-  color: rgb(var(--color-secondary));
-}
-
-.toggle-switch + label:active + label + label > :first-child {
-  color: rgb(var(--color-tertiary));
-}
-
-.toggle-switch + label + label:active + label > :first-child {
-  color: rgb(var(--color-tertiary));
-}
-
-.toggle-switch + label + label + label:active > :first-child {
-  color: rgb(var(--color-tertiary));
-}
-
-.toggle-switch + label + label + label > :first-child > :first-child {
-  width: 100%;
-  height: 100%;
-  background-color: rgb(var(--color-primary) / 50%);
-  border-radius: 9999px;
-  display: block;
-  box-sizing: border-box;
-  background-clip: content-box;
-  padding: 0.25em;
-  appearance: none;
-}
-
-.toggle-switch:checked + label + label + label > :first-child > :first-child {
-  background-color: rgb(var(--color-tertiary) / 50%);
-}
-
-.toggle-switch:focus + label + label + label > :first-child > :first-child {
-  background-color: rgb(var(--color-secondary) / 50%);
-}
-
-.toggle-switch + label:active + label + label > :first-child > :first-child {
-  background-color: rgb(var(--color-tertiary) / 50%);
-}
-
-.toggle-switch + label + label:active + label > :first-child > :first-child {
-  background-color: rgb(var(--color-tertiary) / 50%);
-}
-
-.toggle-switch + label + label + label:active > :first-child > :first-child {
-  background-color: rgb(var(--color-tertiary) / 50%);
-}
-
-.toggle-switch + label + label + label > :first-child > :first-child > :first-child {
-  appearance: none;
-  border-radius: 9999px;
-  display: block;
-  width: 100%;
-  height: 100%;
-  margin: -0.25em;
-  box-sizing: border-box;
-  background-clip: content-box;
-}
-
-.toggle-switch + label + label + label > :first-child > :first-child > :first-child > :first-child {
-  width: 1.5em;
-  height: 1.5em;
-  margin: -0.25em 0 0 0;
-  display: block;
-  border-radius: 9999px;
-  background-color: currentColor;
-  appearance: none;
-  aspect-ratio: 1 / 1;
-  z-index: 1;
-  position: relative;
-  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-primary) / 50%);
-}
-
-.toggle-switch:checked + label + label + label > :first-child > :first-child > :first-child > :first-child {
-  margin-left: calc(100% - 1em);
-}
-
-.toggle-switch:indeterminate + label + label + label > :first-child > :first-child > :first-child > :first-child {
-  margin-left: calc(50% - 0.5em);
-}
-
-.toggle-switch:checked + label + label + label > :first-child > :first-child > :first-child > :first-child {
-  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-tertiary) / 50%);
-}
-
-.toggle-switch:focus + label + label + label > :first-child > :first-child > :first-child > :first-child {
-  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-secondary) / 50%);
-}
-
-.toggle-switch + label:active + label + label > :first-child > :first-child > :first-child > :first-child {
-  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-tertiary) / 50%);
-}
-
-.toggle-switch + label + label:active + label > :first-child > :first-child > :first-child > :first-child {
-  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-tertiary) / 50%);
-}
-
-.toggle-switch + label + label + label:active > :first-child > :first-child > :first-child > :first-child {
-  box-shadow: -100000.5em 0 0 100000em rgb(var(--color-tertiary) / 50%);
-}
-

packages/web-kitchensink-reactnext/src/categories/option/react/components/ToggleTickBox/style.module.css

@@ -1,15 +0,0 @@
-.toggle-tick-box + label + label > :first-child > :first-child {
-  display: none;
-}
-
-.toggle-tick-box:checked + label + label > :first-child > :first-child {
-  display: block;
-}
-
-.toggle-tick-box + label + label > :first-child > :first-child + * {
-  display: none;
-}
-
-.toggle-tick-box:indeterminate + label + label > :first-child > :first-child + * {
-  display: block;
-}

packages/web-kitchensink-reactnext/src/pages/_app.tsx

@@ -1,5 +1,17 @@
 import '@/styles/globals.css'
 import '@/styles/kitchen-sink.css'
+
+import '@tesseract-design/web-choice-react/dist/RadioButton.css'
+import '@tesseract-design/web-choice-react/dist/RadioTickBox.css'
+
+import '@tesseract-design/web-multichoice-react/dist/TagInput.css'
+import '@tesseract-design/web-multichoice-react/dist/ToggleButton.css'
+import '@tesseract-design/web-multichoice-react/dist/ToggleSwitch.css'
+import '@tesseract-design/web-multichoice-react/dist/ToggleTickBox.css'
+
+import '@tesseract-design/web-number-react/dist/Slider.css'
+import '@tesseract-design/web-number-react/dist/Spinner.css'
+
 import type { AppProps } from 'next/app'
 import Head from 'next/head';
 

packages/web-kitchensink-reactnext/tsconfig.json

@@ -18,7 +18,6 @@
       "@/*": ["./src/*"],
       "tailwind.config": ["./tailwind.config.js"],
       "@tesseract-design/web-blob-react": ["./src/categories/blob/react"],
-      "@tesseract-design/web-option-react": ["./src/categories/option/react"],
       "@tesseract-design/web-number-react": ["./src/categories/number/react"],
       "@modal-soft/*": ["./src/packages/*"],
     }

pnpm-lock.yaml

@@ -82,6 +82,61 @@ importers:
         specifier: ^0.28.1
         version: 0.28.1(jsdom@21.1.0)
 
+  categories/choice/react:
+    dependencies:
+      '@tesseract-design/web-base':
+        specifier: workspace:*
+        version: link:../../../base
+      clsx:
+        specifier: ^1.2.1
+        version: 1.2.1
+    devDependencies:
+      '@testing-library/jest-dom':
+        specifier: ^5.16.5
+        version: 5.16.5
+      '@testing-library/react':
+        specifier: ^13.4.0
+        version: 13.4.0(react-dom@18.2.0)(react@18.2.0)
+      '@types/node':
+        specifier: ^18.14.1
+        version: 18.14.1
+      '@types/react':
+        specifier: ^18.0.27
+        version: 18.2.14
+      eslint:
+        specifier: ^8.35.0
+        version: 8.43.0
+      eslint-config-lxsmnsyc:
+        specifier: ^0.5.0
+        version: 0.5.0(eslint@8.43.0)(typescript@4.9.5)
+      jsdom:
+        specifier: ^21.1.0
+        version: 21.1.0
+      pridepack:
+        specifier: 2.4.4
+        version: 2.4.4(eslint@8.43.0)(tslib@2.6.0)(typescript@4.9.5)
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+      react-test-renderer:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+      tslib:
+        specifier: ^2.5.0
+        version: 2.6.0
+      tsx:
+        specifier: ^3.12.7
+        version: 3.12.7
+      typescript:
+        specifier: ^4.9.5
+        version: 4.9.5
+      vitest:
+        specifier: ^0.28.1
+        version: 0.28.1(jsdom@21.1.0)
+
   categories/color/react:
     dependencies:
       clsx:
@@ -284,6 +339,67 @@ importers:
         specifier: ^0.28.1
         version: 0.28.1(jsdom@21.1.0)
 
+  categories/multichoice/react:
+    dependencies:
+      '@modal-sh/react-utils':
+        specifier: workspace:*
+        version: link:../../../packages/react-utils
+      '@tesseract-design/web-base':
+        specifier: workspace:*
+        version: link:../../../base
+      clsx:
+        specifier: ^1.2.1
+        version: 1.2.1
+      react-tag-input-component:
+        specifier: ^2.0.2
+        version: 2.0.2(react-dom@18.2.0)(react@18.2.0)
+    devDependencies:
+      '@testing-library/jest-dom':
+        specifier: ^5.16.5
+        version: 5.16.5
+      '@testing-library/react':
+        specifier: ^13.4.0
+        version: 13.4.0(react-dom@18.2.0)(react@18.2.0)
+      '@types/node':
+        specifier: ^18.14.1
+        version: 18.14.1
+      '@types/react':
+        specifier: ^18.0.27
+        version: 18.2.14
+      eslint:
+        specifier: ^8.35.0
+        version: 8.43.0
+      eslint-config-lxsmnsyc:
+        specifier: ^0.5.0
+        version: 0.5.0(eslint@8.43.0)(typescript@4.9.5)
+      jsdom:
+        specifier: ^21.1.0
+        version: 21.1.0
+      pridepack:
+        specifier: 2.4.4
+        version: 2.4.4(eslint@8.43.0)(tslib@2.6.0)(typescript@4.9.5)
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+      react-test-renderer:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+      tslib:
+        specifier: ^2.5.0
+        version: 2.6.0
+      tsx:
+        specifier: ^3.12.7
+        version: 3.12.7
+      typescript:
+        specifier: ^4.9.5
+        version: 4.9.5
+      vitest:
+        specifier: ^0.28.1
+        version: 0.28.1(jsdom@21.1.0)
+
   categories/navigation/react:
     dependencies:
       '@tesseract-design/web-base':
@@ -336,6 +452,61 @@ importers:
         specifier: ^0.28.1
         version: 0.28.1(jsdom@21.1.0)
 
+  categories/number/react:
+    dependencies:
+      '@tesseract-design/web-base':
+        specifier: workspace:*
+        version: link:../../../base
+      clsx:
+        specifier: ^1.2.1
+        version: 1.2.1
+    devDependencies:
+      '@testing-library/jest-dom':
+        specifier: ^5.16.5
+        version: 5.16.5
+      '@testing-library/react':
+        specifier: ^13.4.0
+        version: 13.4.0(react-dom@18.2.0)(react@18.2.0)
+      '@types/node':
+        specifier: ^18.14.1
+        version: 18.14.1
+      '@types/react':
+        specifier: ^18.0.27
+        version: 18.2.14
+      eslint:
+        specifier: ^8.35.0
+        version: 8.43.0
+      eslint-config-lxsmnsyc:
+        specifier: ^0.5.0
+        version: 0.5.0(eslint@8.43.0)(typescript@4.9.5)
+      jsdom:
+        specifier: ^21.1.0
+        version: 21.1.0
+      pridepack:
+        specifier: 2.4.4
+        version: 2.4.4(eslint@8.43.0)(tslib@2.6.0)(typescript@4.9.5)
+      react:
+        specifier: ^18.2.0
+        version: 18.2.0
+      react-dom:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+      react-test-renderer:
+        specifier: ^18.2.0
+        version: 18.2.0(react@18.2.0)
+      tslib:
+        specifier: ^2.5.0
+        version: 2.6.0
+      tsx:
+        specifier: ^3.12.7
+        version: 3.12.7
+      typescript:
+        specifier: ^4.9.5
+        version: 4.9.5
+      vitest:
+        specifier: ^0.28.1
+        version: 0.28.1(jsdom@21.1.0)
+
   packages/audio-utils:
     dependencies:
       wavesurfer.js:
@@ -527,6 +698,9 @@ importers:
       '@tesseract-design/web-base':
         specifier: workspace:*
         version: link:../../base
+      '@tesseract-design/web-choice-react':
+        specifier: workspace:*
+        version: link:../../categories/choice/react
       '@tesseract-design/web-color-react':
         specifier: workspace:*
         version: link:../../categories/color/react
@@ -539,9 +713,15 @@ importers:
       '@tesseract-design/web-information-react':
         specifier: workspace:*
         version: link:../../categories/information/react
+      '@tesseract-design/web-multichoice-react':
+        specifier: workspace:*
+        version: link:../../categories/multichoice/react
       '@tesseract-design/web-navigation-react':
         specifier: workspace:*
         version: link:../../categories/navigation/react
+      '@tesseract-design/web-number-react':
+        specifier: workspace:*
+        version: link:../../categories/number/react
       '@theoryofnekomata/formxtra':
         specifier: ^1.0.3
         version: 1.0.3
@@ -885,6 +1065,27 @@ packages:
       to-fast-properties: 2.0.0
     dev: true
 
+  /@esbuild-kit/cjs-loader@2.4.2:
+    resolution: {integrity: sha512-BDXFbYOJzT/NBEtp71cvsrGPwGAMGRB/349rwKuoxNSiKjPraNNnlK6MIIabViCjqZugu6j+xeMDlEkWdHHJSg==}
+    dependencies:
+      '@esbuild-kit/core-utils': 3.1.0
+      get-tsconfig: 4.6.2
+    dev: true
+
+  /@esbuild-kit/core-utils@3.1.0:
+    resolution: {integrity: sha512-Uuk8RpCg/7fdHSceR1M6XbSZFSuMrxcePFuGgyvsBn+u339dk5OeL4jv2EojwTN2st/unJGsVm4qHWjWNmJ/tw==}
+    dependencies:
+      esbuild: 0.17.19
+      source-map-support: 0.5.21
+    dev: true
+
+  /@esbuild-kit/esm-loader@2.5.5:
+    resolution: {integrity: sha512-Qwfvj/qoPbClxCRNuac1Du01r9gvNOT+pMYtJDapfB1eoGN1YlJ1BixLyL9WVENRx5RXgNLdfYdx/CuswlGhMw==}
+    dependencies:
+      '@esbuild-kit/core-utils': 3.1.0
+      get-tsconfig: 4.6.2
+    dev: true
+
   /@esbuild/android-arm64@0.17.19:
     resolution: {integrity: sha512-KBMWvEZooR7+kzY0BtbTQn0OAYY7CsiydT63pVEaPtVYF0hXbUaOyZog37DKxK7NF3XacBJOpYT4adIJh+avxA==}
     engines: {node: '>=12'}
@@ -5669,6 +5870,17 @@ packages:
       typescript: 5.1.3
     dev: false
 
+  /tsx@3.12.7:
+    resolution: {integrity: sha512-C2Ip+jPmqKd1GWVQDvz/Eyc6QJbGfE7NrR3fx5BpEHMZsEHoIxHL1j+lKdGobr8ovEyqeNkPLSKp6SCSOt7gmw==}
+    hasBin: true
+    dependencies:
+      '@esbuild-kit/cjs-loader': 2.4.2
+      '@esbuild-kit/core-utils': 3.1.0
+      '@esbuild-kit/esm-loader': 2.5.5
+    optionalDependencies:
+      fsevents: 2.3.2
+    dev: true
+
   /tunnel-agent@0.6.0:
     resolution: {integrity: sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==}
     dependencies: