tabler-react-2 0.1.94 → 0.1.96

package/dist/index.js

@@ -192,17 +192,5 @@ Object.keys(_index18).forEach(function (key) {
     }
   });
 });
-var _index19 = require("./segmentedControl/index");
-Object.keys(_index19).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _index19[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _index19[key];
-    }
-  });
-});
 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; }

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/docs/package.json

@@ -22,7 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.15",
-    "tabler-react-2": "^0.1.93"
+    "tabler-react-2": "^0.1.95"
   },
   "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,16 @@
       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: "Enclosed Select Group"
+      link: "/components/enclosed-select-group"
     - label: "Horizontal Rule"
       link: "/components/hr"
     - label: "Alerts"
@@ -22,10 +32,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/enclosed-select-group.mdx

@@ -0,0 +1,149 @@
+---
+title: Enclosed Select Group
+---
+
+import { EnclosedSelectGroup } from "../../components/LoadableTabler.jsx";
+import { Excerpt } from "../../components/Excerpt.jsx";
+import { useState } from "react";
+
+Enclosed Select Groups are used to mask radio and checkbox inputs in boxes with a label.
+
+## Signature
+
+export const ControlledEnclosedSelectGroup = (props) => {
+  const [selectValue, setSelectValue] = useState();
+  return (
+    <>
+      <EnclosedSelectGroup
+        multiple
+        direction="column"
+        value={selectValue}
+        onChange={(v) => {
+          console.log(v);
+          setSelectValue(v);
+        }}
+        items={[
+          { value: "one", content: <b>One</b> },
+          { value: "two", content: "Two" },
+          { value: "three", content: "Three" },
+        ]}
+      />
+    </>
+  );
+};
+
+```jsx
+import { EnclosedSelectGroup } from "tabler-react-2";
+
+<EnclosedSelectGroup
+  items={[
+    { value: "one", label: <b>One</b> },
+    { value: "two", label: "Two" },
+    { value: "three", label: "Three" },
+  ]}
+  value={null}
+  onChange={console.log}
+/>;
+```
+
+### 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.                                                                                                                                                                                                                                          |
+| `direction` | No       | String                                 | "row"   | The direction of the items. Can be "row" or "column".                                                                                                                                                                                                                            |
+
+## Basic Usage
+
+The `EnclosedSelectGroup` component is used to mask radio and checkbox inputs in boxes with a label.
+
+<Excerpt>
+  <ControlledEnclosedSelectGroup
+    items={[
+      { value: "one", label: <u>One</u> },
+      { value: "two", label: "Two" },
+      { value: "three", label: "Three" },
+    ]}
+    value={null}
+    onChange={console.log}
+  />
+</Excerpt>
+
+```jsx
+<EnclosedSelectGroup
+  items={[
+    { value: "one", label: <u>One</u> },
+    { 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>
+  <ControlledEnclosedSelectGroup
+    items={[
+      { value: "one", label: <u>One</u> },
+      { value: "two", label: "Two" },
+      { value: "three", label: "Three" },
+    ]}
+    value={[
+      {
+        value: "one",
+      },
+    ]}
+    onChange={console.log}
+    multiple
+  />
+</Excerpt>
+
+```jsx
+<EnclosedSelectGroup
+  items={[
+    { value: "one", label: <u>One</u> },
+    { value: "two", label: "Two" },
+    { value: "three", label: "Three" },
+  ]}
+  value={[]}
+  onChange={console.log}
+  multiple
+/>
+```
+
+## Direction
+
+The `direction` prop can be used to change the direction of the items.
+
+<Excerpt>
+  <ControlledEnclosedSelectGroup
+    items={[
+      { value: "one", label: <u>One</u> },
+      { value: "two", label: "Two" },
+      { value: "three", label: "Three" },
+    ]}
+    value={null}
+    onChange={console.log}
+    direction="column"
+  />
+</Excerpt>
+
+```jsx
+<EnclosedSelectGroup
+  items={[
+    { value: "one", label: <u>One</u> },
+    { value: "two", label: "Two" },
+    { value: "three", label: "Three" },
+  ]}
+  value={null}
+  onChange={console.log}
+  direction="column"
+/>
+```

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,105 @@
+---
+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);
+        }}
+      />
+    </>
+  );
+};
+
+```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
+/>
+```

package/package.json

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