tabler-react-2 0.1.93 → 0.1.95

package/dist/input/enclosedselectgroup.js

@@ -5,9 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EnclosedSelectGroup = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
@@ -18,30 +20,23 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
 function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
-function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } /*
-<label class="form-selectgroup-item flex-fill">
-  <input type="radio" name="form-payment" value="mastercard" class="form-selectgroup-input" checked />
-  <div class="form-selectgroup-label d-flex align-items-center p-3">
-    <div class="me-3">
-      <span class="form-selectgroup-check"></span>
-    </div>
-    <div>
-      ending in <strong>2807</strong>
-    </div>
-  </div>
-</label>
-
-*/
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 var EnclosedSelectGroup = exports.EnclosedSelectGroup = function EnclosedSelectGroup(_ref) {
   var items = _ref.items,
     value = _ref.value,
     onChange = _ref.onChange,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? "row" : _ref$direction,
-    itemClassName = _ref.itemClassName,
-    style = _ref.style,
-    itemStyle = _ref.itemStyle;
-  var multiple = false;
+    _ref$itemClassName = _ref.itemClassName,
+    itemClassName = _ref$itemClassName === void 0 ? "" : _ref$itemClassName,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? {} : _ref$style,
+    _ref$itemStyle = _ref.itemStyle,
+    itemStyle = _ref$itemStyle === void 0 ? {} : _ref$itemStyle;
+  // generate a unique name for each instance so radio groups don't collide
+  var groupName = (0, _react.useId)();
   var handleChange = function handleChange(selectedItem) {
     if (multiple) {
       if (value.some(function (item) {
@@ -58,43 +53,40 @@ var EnclosedSelectGroup = exports.EnclosedSelectGroup = function EnclosedSelectG
     }
   };
   var isChecked = function isChecked(item) {
-    if (multiple) {
-      return value.some(function (val) {
-        return val.value === item.value;
-      });
-    }
-    return (value === null || value === void 0 ? void 0 : value.value) === item.value;
+    return multiple ? value.some(function (val) {
+      return val.value === item.value;
+    }) : (value === null || value === void 0 ? void 0 : value.value) === item.value;
   };
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "form-selectgroup",
     style: _objectSpread({
+      display: "flex",
       flexDirection: direction
     }, style)
   }, items.map(function (item) {
     return /*#__PURE__*/_react["default"].createElement("label", {
+      key: "".concat(groupName, "-").concat(item.value),
       className: "form-selectgroup-item flex-fill ".concat(itemClassName),
-      key: item.value,
       style: _objectSpread({
-        pointerEvents: item.disabled,
-        cursor: item.disabled ? "not-allowed" : null
+        pointerEvents: item.disabled ? "none" : undefined,
+        cursor: item.disabled ? "not-allowed" : undefined
       }, itemStyle)
     }, /*#__PURE__*/_react["default"].createElement("input", {
-      type: "radio",
-      className: "form-selectgroup-input",
-      name: item.label,
+      type: multiple ? "checkbox" : "radio",
+      name: groupName,
+      id: "".concat(groupName, "-").concat(item.value),
       value: item.value,
       checked: isChecked(item),
       onChange: function onChange() {
-        return handleChange({
-          value: item.value
-        });
+        return handleChange(item);
       },
-      disabled: item.disabled
+      disabled: item.disabled,
+      className: "form-selectgroup-input"
     }), /*#__PURE__*/_react["default"].createElement("div", {
-      className: "form-selectgroup-label d-flex p-3 ".concat((item === null || item === void 0 ? void 0 : item.disabled) && "bg-gray-400"),
+      className: "form-selectgroup-label d-flex p-3 ".concat(item.disabled ? "bg-gray-400" : ""),
       style: {
-        pointerEvents: item.disabled,
-        cursor: item.disabled ? "not-allowed" : null
+        pointerEvents: item.disabled ? "none" : undefined,
+        cursor: item.disabled ? "not-allowed" : undefined
       }
     }, /*#__PURE__*/_react["default"].createElement("div", {
       className: "me-3"
@@ -104,21 +96,26 @@ var EnclosedSelectGroup = exports.EnclosedSelectGroup = function EnclosedSelectG
       style: {
         textAlign: "left"
       }
-    }, item.content)));
+    }, item.label)));
   }));
 };
 EnclosedSelectGroup.propTypes = {
   items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
     value: _propTypes["default"].string.isRequired,
-    content: _propTypes["default"].string.isRequired
+    label: _propTypes["default"].node.isRequired,
+    disabled: _propTypes["default"].bool
   })).isRequired,
   value: _propTypes["default"].oneOfType([_propTypes["default"].shape({
     value: _propTypes["default"].string.isRequired,
-    label: _propTypes["default"].string.isRequired
+    label: _propTypes["default"].any
   }), _propTypes["default"].arrayOf(_propTypes["default"].shape({
     value: _propTypes["default"].string.isRequired,
-    label: _propTypes["default"].string.isRequired
+    label: _propTypes["default"].any
   }))]).isRequired,
   onChange: _propTypes["default"].func.isRequired,
-  multiple: _propTypes["default"].bool.isRequired
+  multiple: _propTypes["default"].bool,
+  direction: _propTypes["default"].oneOf(["row", "column"]),
+  itemClassName: _propTypes["default"].string,
+  style: _propTypes["default"].object,
+  itemStyle: _propTypes["default"].object
 };

package/dist/input/input.js

@@ -100,7 +100,7 @@ var Input = exports.Input = function Input(_ref) {
   }, renderInput()), /*#__PURE__*/_react["default"].createElement("div", {
     className: "col-auto"
   }, /*#__PURE__*/_react["default"].createElement("a", {
-    href: appendedLinkHref ? appendedLinkHref : "#",
+    href: appendedLinkHref ? appendedLinkHref : "javascript:void(0);",
     onClick: appendedLinkOnClick,
     className: "btn btn-icon",
     "aria-label": "Button"

package/dist/segmentedControl/index.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SegmentedControl = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+var SegmentedControl = exports.SegmentedControl = function SegmentedControl(_ref) {
+  var size = _ref.size,
+    orientation = _ref.orientation,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    items = _ref.items;
+  var navClasses = ["nav", orientation === "vertical" ? "nav-segmented-vertical" : "nav-segmented", size && "nav-".concat(size)].filter(Boolean).join(" ");
+  return /*#__PURE__*/_react["default"].createElement("nav", {
+    className: navClasses,
+    role: "tablist"
+  }, items.map(function (_ref2) {
+    var id = _ref2.id,
+      label = _ref2.label,
+      _onClick = _ref2.onClick,
+      icon = _ref2.icon;
+    var isActive = id === value;
+    return /*#__PURE__*/_react["default"].createElement("button", _extends({
+      key: id,
+      type: "button",
+      className: "nav-link".concat(isActive ? " active" : ""),
+      role: "tab",
+      "data-bs-toggle": "tab",
+      "aria-selected": isActive ? "true" : "false"
+    }, isActive ? {
+      "aria-current": "page"
+    } : {}, {
+      tabIndex: isActive ? undefined : -1,
+      onClick: function onClick(e) {
+        onChange(id);
+        if (_onClick) _onClick(e);
+      }
+    }), icon && /*#__PURE__*/_react["default"].createElement("span", {
+      className: "me-2"
+    }, icon), label);
+  }));
+};
+SegmentedControl.propTypes = {
+  /** one of 'sm' or 'lg' */
+  size: _propTypes["default"].oneOf(["sm", "lg"]),
+  /** 'horizontal' or 'vertical' */
+  orientation: _propTypes["default"].oneOf(["horizontal", "vertical"]),
+  /** the id of the currently selected item */
+  value: _propTypes["default"].string.isRequired,
+  /** callback called with the id of the clicked item */
+  onChange: _propTypes["default"].func.isRequired,
+  items: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    id: _propTypes["default"].string.isRequired,
+    label: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
+    onClick: _propTypes["default"].func,
+    icon: _propTypes["default"].node
+  })).isRequired
+};
+SegmentedControl.defaultProps = {
+  orientation: "horizontal",
+  size: undefined
+};

package/docs/package.json

@@ -22,7 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.15",
-    "tabler-react-2": "file:../"
+    "tabler-react-2": "^0.1.93"
   },
   "devDependencies": {},
   "keywords": [

package/docs/src/components/LoadableTabler.jsx

@@ -168,3 +168,9 @@ export const Navbar = loadable(() =>
     return mod.Navbar;
   })
 );
+export const SelectGroup = loadable(() =>
+  import("tabler-react-2").then((mod) => mod.SelectGroup)
+);
+export const EnclosedSelectGroup = loadable(() =>
+  import("tabler-react-2").then((mod) => mod.EnclosedSelectGroup)
+);

package/docs/src/config/sidebar.yml

@@ -14,6 +14,14 @@
       link: "/components/cards"
     - label: "Buttons"
       link: "/components/buttons"
+    - label: "Inputs"
+      link: "/components/input"
+    - label: "Dropdown"
+      link: "/components/dropdown"
+    - label: "Dropdown Input"
+      link: "/components/dropdown-input"
+    - label: "Select Group"
+      link: "/components/select-group"
     - label: "Horizontal Rule"
       link: "/components/hr"
     - label: "Alerts"
@@ -22,10 +30,6 @@
       link: "/components/avatar"
     - label: "Badges"
       link: "/components/badges"
-    - label: "Dropdown"
-      link: "/components/dropdown"
-    - label: "Dropdown Input"
-      link: "/components/dropdown-input"
     - label: "Modals"
       link: "/components/modals"
     - label: "Hook-driven modals"

package/docs/src/docs/components/input.mdx

@@ -0,0 +1,430 @@
+---
+title: Input
+---
+
+import { Input } from "../../components/LoadableTabler";
+import { Excerpt } from "../../components/Excerpt.jsx";
+import { IconAerialLift } from "@tabler/icons-react";
+
+Inputs are used to collect user input.
+
+## Signature
+
+```jsx
+import { Input } from "tabler-react-2";
+
+<Input {...props}>{children}</Input>;
+```
+
+### Props
+
+| Prop                  | Required | Type                       | Default   | Description                                                                                                             |
+| --------------------- | -------- | -------------------------- | --------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `type`                | No       | [InputType](#inputtype)    | `text`    | The type of input.                                                                                                      |
+| `label`               | No       | String                     |           | The label of the input to be shown above the input box.                                                                 |
+| `placeholder`         | No       | String                     |           | The placeholder text to be shown in the input box.                                                                      |
+| `value`               | No       | String                     |           | The value of the input.                                                                                                 |
+| `onChange`            | No       | Function                   |           | The function to be called when the input value changes. It is called with the new value as the argument, not the event. |
+| `onInput`             | No       | Function                   |           | The function to be called when the input value changes. It is called with the new value as the argument, not the event. |
+| `onRawChange`         | No       | Function                   |           | The function to be called when the input value changes. It is called with the event as the argument.                    |
+| `icon`                | No       | Node                       |           | The icon to be shown in the input.                                                                                      |
+| `iconPos`             | No       | [`leading` \| `trailing`]  | `leading` | The position of the icon.                                                                                               |
+| `loader`              | No       | Boolean                    |           | Whether the input should show a spinner.                                                                                |
+| `separated`           | No       | Boolean                    |           | Whether the input should be separated from an appended button.                                                          |
+| `prependedText`       | No       | String                     |           | The text to be shown before the input in the box.                                                                       |
+| `appendedText`        | No       | String                     |           | The text to be shown after the input in the box.                                                                        |
+| `appendedLinkText`    | No       | String                     |           | The text to be shown in the appended link.                                                                              |
+| `appendedLinkHref`    | No       | String                     |           | The href of the appended link.                                                                                          |
+| `appendedLinkOnClick` | No       | Function                   |           | The function to be called when the appended link is clicked.                                                            |
+| `datalistItems`       | No       | Array of Strings           |           | The list of items to be shown in the datalist.                                                                          |
+| `variant`             | No       | [color](/utilities/colors) |           | The color variant of the button.                                                                                        |
+| `size`                | No       | [`sm`, `md`, `lg`]         | `md`      | The size of the button.                                                                                                 |
+| `inputProps`          | No       | Object                     |           | The props to be passed to the input.                                                                                    |
+
+## Basic Usage
+
+The `Input` component is used to collect user input.
+
+<Excerpt>
+  <Input
+    label="Input"
+    placeholder="Type here..."
+    value={"Starting value"}
+    onInput={console.log}
+  />
+</Excerpt>
+
+```jsx
+<Input
+  label="Input"
+  placeholder="Type here..."
+  value={"Starting value"}
+  onInput={console.log}
+/>
+```
+
+## Labels and Placeholders
+
+The `Input` component can be used to collect user input. The `label` and `placeholder` props are used to show a label and placeholder text in the input box. Traditionally, the `label` should describe the input, and the `placeholder` should provide a hint or an example. This way the user can still understand what a field is asking for even when the input is not empty.
+
+<Excerpt>
+  <Input label="Your Name" placeholder="Johnny Appleseed" />
+</Excerpt>
+
+```jsx
+<Input label="Your Name" placeholder="Johnny Appleseed" />
+```
+
+## Input Types
+
+The `Input` component can be used to collect different types of input. The `type` prop accepts a string value of any [input type](#inputtype).
+
+<Excerpt>
+  <Input
+    label="Email input"
+    placeholder="Type here..."
+    onInput={console.log}
+    type="email"
+  />
+  <Input
+    label="Password input"
+    placeholder="Type here..."
+    onInput={console.log}
+    type="password"
+  />
+  <Input
+    label="Number input"
+    placeholder="Type here..."
+    onInput={console.log}
+    type="number"
+  />
+  <Input
+    label="Date input"
+    placeholder="Type here..."
+    onInput={console.log}
+    type="date"
+  />
+  <Input
+    label="Datetime input"
+    placeholder="Type here..."
+    onInput={console.log}
+    type="datetime-local"
+  />
+  <Input
+    label="Month input"
+    placeholder="Type here..."
+    onInput={console.log}
+    type="month"
+  />
+  <Input
+    label="Time input"
+    placeholder="Type here..."
+    onInput={console.log}
+    type="time"
+  />
+  <Input
+    label="URL input"
+    placeholder="Type here..."
+    onInput={console.log}
+    type="url"
+  />
+</Excerpt>
+
+```jsx highlight={4,9,14,19,24,29,34,39}
+<Input
+  label="Email input"
+  placeholder="Type here..."
+  type="email"
+/>
+<Input
+  label="Password input"
+  placeholder="Type here..."
+  type="password"
+/>
+<Input
+  label="Number input"
+  placeholder="Type here..."
+  type="number"
+/>
+<Input
+  label="Date input"
+  placeholder="Type here..."
+  type="date"
+/>
+<Input
+  label="Datetime input"
+  placeholder="Type here..."
+  type="datetime-local"
+/>
+<Input
+  label="Month input"
+  placeholder="Type here..."
+  type="month"
+/>
+<Input
+  label="Time input"
+  placeholder="Type here..."
+  type="time"
+/>
+<Input
+  label="URL input"
+  placeholder="Type here..."
+  type="url"
+/>
+```
+
+## `onChange`, `onInput` and `onRawChange` callbacks
+
+The `Input` component can call back to provided functions of `onChange` or `onInput` (which are the same), or `onRawChange`. The `onChange` and `onInput` callbacks are called with the new value as the argument, not the event. The `onRawChange` callback is called with the event as the argument.
+
+<Excerpt>
+  <Input
+    label="Input"
+    placeholder="Type here..."
+    value={"Starting value"}
+    onChange={console.log}
+    onInput={console.log}
+    onRawChange={console.log}
+  />
+</Excerpt>
+
+```jsx highlight={5-7}
+<Input
+  label="Input"
+  placeholder="Type here..."
+  value={"Starting value"}
+  onChange={console.log}
+  onInput={console.log}
+  onRawChange={console.log}
+/>
+```
+
+When this example is run, the following will be logged to the console:
+
+```js
+"Starting value"
+"Starting value"
+{
+  ...
+  target: {
+    ...
+    value: "Starting value"
+  }
+}
+```
+
+## Icon
+
+You can supply an icon to the `Input` component. The `icon` prop accepts a node.
+
+<Excerpt>
+  <Input label="Input" placeholder="Type here..." icon={<IconAerialLift />} />
+  <Input
+    label="Input with icon on the right"
+    placeholder="Type here..."
+    icon={<IconAerialLift />}
+    iconPos="trailing"
+  />
+</Excerpt>
+
+```jsx highlight={4,9-10}
+<Input
+  label="Input"
+  placeholder="Type here..."
+  icon={<IconAerialLift />}
+/>
+<Input
+  label="Input with icon on the right"
+  placeholder="Type here..."
+  icon={<IconAerialLift />}
+  iconPos="trailing"
+/>
+```
+
+## Loader
+
+You can supply a boolean value to the `loader` prop to show a spinner.
+
+<Excerpt>
+  <Input label="Input" placeholder="Type here..." loader />
+</Excerpt>
+
+```jsx
+<Input label="Input" placeholder="Type here..." loader />
+```
+
+## Separated
+
+You can create seperate inputs by passing the `separated` prop. If you do this, you must also provide either an icon or loader, and use the `appendedLinkOnClick` or `appendedLinkHref` props to handle press events.
+
+<Excerpt>
+  <Input
+    label="Input"
+    placeholder="Type here..."
+    appendedLinkOnClick={() => alert("Clicked")}
+    icon={<IconAerialLift size={18} />}
+    separated
+  />
+  <Input
+    label="Input"
+    placeholder="Type here..."
+    appendedLinkOnClick={() => alert("Clicked")}
+    loader
+    separated
+  />
+</Excerpt>
+
+```jsx
+<Input
+  label="Input"
+  placeholder="Type here..."
+  appendedLinkOnClick={() => alert("Clicked")}
+  icon={<IconAerialLift size={18} />}
+  separated
+/>
+<Input
+  label="Input"
+  placeholder="Type here..."
+  appendedLinkOnClick={() => alert("Clicked")}
+  icon={<IconAerialLift size={18} />}
+  separated
+/>
+```
+
+## Prepended and Appended Text or Links
+
+You can embed text or links in the input box by passing the `prependedText` or `appendedText` props. You can also pass an `appendedLinkText` prop to show a link in the text. The `appendedLinkHref` prop is used to set the href of the link. The `appendedLinkOnClick` prop is used to handle the click event of the link. You can only add event handlers to the appended link. If using links, you cannot also use a prependedText.
+
+<Excerpt>
+  <Input
+    label="Input"
+    placeholder="Type here..."
+    prependedText="https://"
+    appendedText=".com"
+  />
+  <Input
+    label="Input"
+    placeholder="Type here..."
+    appendedLinkText="Link"
+    appendedLinkHref="javascript:void(0);"
+    appendedLinkOnClick={() => alert("Clicked")}
+  />
+</Excerpt>
+
+```jsx
+<Input
+  label="Input"
+  placeholder="Type here..."
+  prependedText="https://"
+  appendedText=".com"
+/>
+<Input
+  label="Input"
+  placeholder="Type here..."
+  appendedLinkText="Link"
+  appendedLinkHref="javascript:void(0);"
+  appendedLinkOnClick={() => alert("Clicked")}
+/>
+```
+
+## Variants
+
+You can pass a `variant` prop to the `Input` component to change the color of the input box.
+
+<Excerpt>
+  {[
+    "primary",
+    "secondary",
+    "success",
+    "danger",
+    "warning",
+    "info",
+    "light",
+    "dark",
+    "pink",
+    "yellow",
+  ].map((color) => (
+    <Input
+      key={color}
+      label="Input"
+      placeholder="Type here..."
+      variant={color}
+    />
+  ))}
+</Excerpt>
+
+```jsx
+<Input
+  label="Input"
+  placeholder="Type here..."
+  variant="primary"
+/>
+<Input
+  label="Input"
+  placeholder="Type here..."
+  variant="secondary"
+/>
+...
+```
+
+## Invalid
+
+There is not `invalid` prop. You can use the `variant` prop to change the color of the input box to indicate an invalid state.
+
+<Excerpt>
+  <Input label="Input" placeholder="Type here..." variant="danger" />
+</Excerpt>
+
+```jsx
+<Input label="Input" placeholder="Type here..." variant="danger" />
+```
+
+## Sizes
+
+You can pass a `size` prop to the `Input` component to change the size of the input box.
+
+<Excerpt>
+  {["sm", "md", "lg"].map((size) => (
+    <Input key={size} label="Input" placeholder="Type here..." size={size} />
+  ))}
+</Excerpt>
+
+```jsx
+<Input
+  label="Input"
+  placeholder="Type here..."
+  size="sm"
+/>
+<Input
+  label="Input"
+  placeholder="Type here..."
+  size="md"
+/>
+<Input
+  label="Input"
+  placeholder="Type here..."
+  size="lg"
+/>
+```
+
+## Datalist (Autocomplete)
+
+You can supply a list of items to the `datalistItems` prop to show a datalist. The `datalistItems` prop accepts an array of strings.
+
+<Excerpt>
+  <Input
+    label="Input"
+    placeholder="Type here..."
+    datalistItems={["One", "Two", "Three"]}
+  />
+</Excerpt>
+
+```jsx
+<Input
+  label="Input"
+  placeholder="Type here..."
+  datalistItems={["One", "Two", "Three"]}
+/>
+```
+
+This is different than a DropdownInput because the datalist is not exclusive, meaning the user can use a value that is not in the list.

package/docs/src/docs/components/select-group.mdx

@@ -0,0 +1,137 @@
+---
+title: Select Group
+---
+
+import {
+  SelectGroup,
+  EnclosedSelectGroup,
+} from "../../components/LoadableTabler.jsx";
+import { Excerpt } from "../../components/Excerpt.jsx";
+import { useState } from "react";
+
+Select Groups are used to mask radio and checkbox inputs in boxes with a label.
+
+## Signature
+
+export const ControlledSelectGroup = (props) => {
+  const [value, setValue] = useState(props.value);
+  return (
+    <>
+      <SelectGroup
+        {...props}
+        value={value}
+        onChange={(d) => {
+          setValue(d);
+          props.onChange && props.onChange(d);
+        }}
+      />
+    </>
+  );
+};
+
+export const ControlledEnclosedSelectGroup = (props) => {
+  const [value, setValue] = useState(props.value);
+  return (
+    <>
+      <EnclosedSelectGroup
+        {...props}
+        value={value}
+        onChange={(d) => {
+          setValue(d);
+          props.onChange && props.onChange(d);
+        }}
+      />
+    </>
+  );
+};
+
+```jsx
+import { SelectGroup } from "tabler-react-2";
+
+<SelectGroup {...props} />;
+```
+
+### Props
+
+| Prop       | Required | Type                                   | Default | Description                                                                                                                                                                                                                                                                      |
+| ---------- | -------- | -------------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `items`    | Yes      | Array of objects                       |         | The items to be shown in the select group. Each item should have a `value` and `label` prop.                                                                                                                                                                                     |
+| `value`    | Yes      | Object or Array of Objects if multiple |         | The value of the select group. If the value is an array, multiple items can be selected. The value of each item should be the same as the `value` prop of the item.                                                                                                              |
+| `onChange` | Yes      | Function                               |         | The function to be called when the value of the select group changes. It is called with the new value as the argument, not the event. If the value is an array, the new value is an array of objects. The value of each item should be the same as the `value` prop of the item. |
+| `multiple` | No       | Boolean                                |         | Whether multiple items can be selected.                                                                                                                                                                                                                                          |
+
+## Basic Usage
+
+The `SelectGroup` component is used to mask radio and checkbox inputs in boxes with a label.
+
+<Excerpt>
+  <ControlledSelectGroup
+    items={[
+      { value: "one", label: "One" },
+      { value: "two", label: "Two" },
+      { value: "three", label: "Three" },
+    ]}
+    value={null}
+    onChange={console.log}
+/>
+
+</Excerpt>
+
+```jsx
+<SelectGroup
+  items={[
+    { value: "one", label: "One" },
+    { value: "two", label: "Two" },
+    { value: "three", label: "Three" },
+  ]}
+  value={null}
+  onChange={console.log}
+/>
+```
+
+## Multiple Select
+
+The `multiple` prop can be used to allow multiple items to be selected.
+
+<Excerpt>
+  <ControlledSelectGroup
+    items={[
+      { value: "one", label: "One" },
+      { value: "two", label: "Two" },
+      { value: "three", label: "Three" },
+    ]}
+    value={[]}
+    onChange={console.log}
+    multiple
+/>
+
+</Excerpt>
+
+```jsx
+<SelectGroup
+  items={[
+    { value: "one", label: "One" },
+    { value: "two", label: "Two" },
+    { value: "three", label: "Three" },
+  ]}
+  value={null}
+  onChange={console.log}
+  multiple
+/>
+```
+
+## Enclosed Select Group
+
+The `EnclosedSelectGroup` component is used to mask radio and checkbox inputs in boxes with a label.
+
+<Excerpt>
+  <ControlledEnclosedSelectGroup
+    items={[
+      { value: "one", content: <b>One</b> },
+      { value: "two", content: "Two" },
+      { value: "three", content: "Three" },
+    ]}
+    value={null}
+    onChange={console.log}
+  />
+</Excerpt>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabler-react-2",
-  "version": "0.1.93",
+  "version": "0.1.95",
   "description": "A react implementation of Tabler ui",
   "main": "dist/index.js",
   "scripts": {