@koine/react 1.1.10 → 1.1.11

package/Sidebar/Sidebar.mjs

@@ -0,0 +1,23 @@
+import { __assign, __makeTemplateObject } from "tslib";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+import styled from "styled-components";
+import { GrFolderOpen as IconOpen } from "react-icons/gr";
+import { CgCloseR as IconClose } from "react-icons/cg";
+import { max, min } from "../styles/media";
+import { IconButtonFab } from "../Buttons";
+import { useHeader } from "../Header";
+var SidebarWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (p) {
+    return "".concat(max.md, " {\n      z-index: 20;\n      display: flex;\n      flex-direction: column;\n      position: fixed;\n      right: 0;\n      left: var(--gutter-half);\n      top: ").concat(p.$top || 0, "px;\n      bottom: 0;\n      padding: var(--gutter-half);\n      transform: ").concat(p.$open ? "translateX(0)" : "translateX(100%)", ";\n      transition: transform .18s ease-in-out, box-shadow .18s ease-in-out;\n      background: white;\n      box-shadow: ").concat(p.$open ? "0 0 0 100vh rgba(0, 0, 0, .3)" : "0 0 100vh rgba(0, 0, 0, 0)", ";\n      will-change: transform, box-shadow;\n      pointer-events: ").concat(p.$open ? "all" : "none", "\n    }");
+});
+var SidebarToggle = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"], ["\n  z-index: 21;\n  position: fixed;\n  right: var(--gutter-half);\n  bottom: var(--gutter-half);\n  ", " {\n    display: none;\n  }\n\n  path {\n    stroke: currentColor;\n  }\n"])), min.md);
+export var Sidebar = function (_a) {
+    var children = _a.children;
+    var _b = useState(false), open = _b[0], setOpen = _b[1];
+    var _c = useHeader(), headerHeight = _c[2];
+    var handleClickToggle = useCallback(function () {
+        setOpen(function (prevOpen) { return !prevOpen; });
+    }, []);
+    return (_jsxs(_Fragment, { children: [_jsx(SidebarToggle, __assign({ onClick: handleClickToggle }, { children: _jsx(IconButtonFab, __assign({ "$variant": "contained" }, { children: open ? _jsx(IconClose, {}) : _jsx(IconOpen, {}) })) })), _jsx(SidebarWrapper, __assign({ "$open": open, "$top": headerHeight }, { children: children }))] }));
+};
+var templateObject_1, templateObject_2;

package/Sidebar/index.js

@@ -1 +1,4 @@
-export * from "./Sidebar";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Sidebar"), exports);

package/Sidebar/index.mjs

@@ -0,0 +1 @@
+export * from "./Sidebar";

package/Sidebar/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Sidebar/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Spacing/Spacing.js

@@ -1,12 +1,15 @@
-import { __assign, __makeTemplateObject, __rest, __spreadArray } from "tslib";
-import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import styled from "styled-components";
-import isUndefined from "@koine/utils/isUndefined";
-import { spacingTop, spacingBottom, } from "../styles/spacing";
-var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacingTop.call.apply(spacingTop, __spreadArray([p.theme], p.$top, false)); }, function (p) { return p.$bottom && spacingBottom.call.apply(spacingBottom, __spreadArray([p.theme], p.$bottom, false)); });
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spacing = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+var isUndefined_1 = tslib_1.__importDefault(require("@koine/utils/isUndefined"));
+var spacing_1 = require("../styles/spacing");
+var Root = styled_components_1.default.div(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacing_1.spacingTop.call.apply(spacing_1.spacingTop, tslib_1.__spreadArray([p.theme], p.$top, false)); }, function (p) { return p.$bottom && spacing_1.spacingBottom.call.apply(spacing_1.spacingBottom, tslib_1.__spreadArray([p.theme], p.$bottom, false)); });
 var extractDirectionArgs = function (raw) {
     var _a = raw.split(":"), size = _a[0], factor = _a[1], property = _a[2], devices = _a[3];
-    var factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
+    var factorArg = (0, isUndefined_1.default)(factor) ? undefined : parseFloat(factor);
     var devicesArg = devices === null || devices === void 0 ? void 0 : devices.split(",");
     return [size, factorArg, property, devicesArg];
 };
@@ -22,8 +25,8 @@ var extractDirectionArgs = function (raw) {
  * <Spacing top="sm:2:padding:tablet,desktop" />
  * ```
  */
-export var Spacing = function (_a) {
-    var top = _a.top, bottom = _a.bottom, vertical = _a.vertical, props = __rest(_a, ["top", "bottom", "vertical"]);
+var Spacing = function (_a) {
+    var top = _a.top, bottom = _a.bottom, vertical = _a.vertical, props = tslib_1.__rest(_a, ["top", "bottom", "vertical"]);
     var $top;
     var $bottom;
     if (top) {
@@ -38,8 +41,9 @@ export var Spacing = function (_a) {
     }
     if (!$top && !$bottom && !vertical) {
         // eslint-disable-next-line react/jsx-no-useless-fragment
-        return _jsx(_Fragment, { children: props.children });
+        return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props.children });
     }
-    return _jsx(Root, __assign({ "$top": $top, "$bottom": $bottom }, props));
+    return (0, jsx_runtime_1.jsx)(Root, tslib_1.__assign({ "$top": $top, "$bottom": $bottom }, props));
 };
+exports.Spacing = Spacing;
 var templateObject_1;

package/Spacing/Spacing.mjs

@@ -0,0 +1,45 @@
+import { __assign, __makeTemplateObject, __rest, __spreadArray } from "tslib";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import isUndefined from "@koine/utils/isUndefined";
+import { spacingTop, spacingBottom, } from "../styles/spacing";
+var Root = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (p) { return p.$top && spacingTop.call.apply(spacingTop, __spreadArray([p.theme], p.$top, false)); }, function (p) { return p.$bottom && spacingBottom.call.apply(spacingBottom, __spreadArray([p.theme], p.$bottom, false)); });
+var extractDirectionArgs = function (raw) {
+    var _a = raw.split(":"), size = _a[0], factor = _a[1], property = _a[2], devices = _a[3];
+    var factorArg = isUndefined(factor) ? undefined : parseFloat(factor);
+    var devicesArg = devices === null || devices === void 0 ? void 0 : devices.split(",");
+    return [size, factorArg, property, devicesArg];
+};
+/**
+ * Usage:
+ *
+ * ```jsx
+ * <Spacing top="sm" />
+ * <Spacing top="sm:1.5" />
+ * <Spacing top="sm:1.5" bottom="lg" />
+ * <Spacing vertical="sm:1.5:margin:mobile" />
+ * <Spacing top="sm:1.5:padding:mobile" />
+ * <Spacing top="sm:2:padding:tablet,desktop" />
+ * ```
+ */
+export var Spacing = function (_a) {
+    var top = _a.top, bottom = _a.bottom, vertical = _a.vertical, props = __rest(_a, ["top", "bottom", "vertical"]);
+    var $top;
+    var $bottom;
+    if (top) {
+        $top = extractDirectionArgs(top);
+    }
+    if (bottom) {
+        $bottom = extractDirectionArgs(bottom);
+    }
+    if (vertical) {
+        $top = extractDirectionArgs(vertical);
+        $bottom = $top;
+    }
+    if (!$top && !$bottom && !vertical) {
+        // eslint-disable-next-line react/jsx-no-useless-fragment
+        return _jsx(_Fragment, { children: props.children });
+    }
+    return _jsx(Root, __assign({ "$top": $top, "$bottom": $bottom }, props));
+};
+var templateObject_1;

package/Spacing/index.js

@@ -1 +1,4 @@
-export * from "./Spacing";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Spacing"), exports);

package/Spacing/index.mjs

@@ -0,0 +1 @@
+export * from "./Spacing";

package/Spacing/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Spacing/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Sticky/Sticky.js

@@ -1,4 +1,7 @@
-export var Sticky = null;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Sticky = void 0;
+exports.Sticky = null;
 // import {
 //   Ref,
 //   CSSProperties,

package/{node/Sticky/Sticky.js → Sticky/Sticky.mjs}

@@ -1,7 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Sticky = void 0;
-exports.Sticky = null;
+export var Sticky = null;
 // import {
 //   Ref,
 //   CSSProperties,

package/Sticky/StickyCss.js

@@ -1,6 +1,10 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-export var StickyCss = function (_a) {
-    var top = _a.top, props = __rest(_a, ["top"]);
-    return _jsx("div", __assign({ style: { position: "sticky", top: 100 } }, props));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StickyCss = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var StickyCss = function (_a) {
+    var top = _a.top, props = tslib_1.__rest(_a, ["top"]);
+    return (0, jsx_runtime_1.jsx)("div", tslib_1.__assign({ style: { position: "sticky", top: 100 } }, props));
 };
+exports.StickyCss = StickyCss;

package/Sticky/StickyCss.mjs

@@ -0,0 +1,6 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var StickyCss = function (_a) {
+    var top = _a.top, props = __rest(_a, ["top"]);
+    return _jsx("div", __assign({ style: { position: "sticky", top: 100 } }, props));
+};

package/Sticky/index.js

@@ -1 +1,4 @@
-export * from "./StickyCss";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./StickyCss"), exports);

package/Sticky/index.mjs

@@ -0,0 +1 @@
+export * from "./StickyCss";

package/Sticky/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Sticky/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Tabs/TabsMui.js

@@ -1,21 +1,24 @@
-import { __assign, __rest } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from "react";
-import TabsUnstyled from "@mui/base/TabsUnstyled";
-import TabsListUnstyled from "@mui/base/TabsListUnstyled";
-import TabUnstyled, { useTab } from "@mui/base/TabUnstyled";
-import TabPanelUnstyled from "@mui/base/TabPanelUnstyled";
-import { extendComponent, } from "../helpers";
-export var Root = TabsUnstyled;
-export var List = TabsListUnstyled;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineTabs = exports.Tab = exports.Panel = exports.Indicator = exports.List = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var TabsUnstyled_1 = tslib_1.__importDefault(require("@mui/base/TabsUnstyled"));
+var TabsListUnstyled_1 = tslib_1.__importDefault(require("@mui/base/TabsListUnstyled"));
+var TabUnstyled_1 = tslib_1.__importStar(require("@mui/base/TabUnstyled"));
+var TabPanelUnstyled_1 = tslib_1.__importDefault(require("@mui/base/TabPanelUnstyled"));
+var helpers_1 = require("../helpers");
+exports.Root = TabsUnstyled_1.default;
+exports.List = TabsListUnstyled_1.default;
 // export const Tab = TabUnstyled as unknown as Props["Tab"];
-export var Indicator = "span";
-export var Panel = TabPanelUnstyled;
-export var Tab = forwardRef(function Tab(_a, ref) {
-    var children = _a.children, component = _a.component, slotProps = _a.slotProps, slots = _a.slots, Indicator = _a.Indicator, props = __rest(_a, ["children", "component", "slotProps", "slots", "Indicator"]);
-    var _b = useTab(__assign(__assign({}, props), { ref: ref })), active = _b.active, disabled = _b.disabled, selected = _b.selected;
+exports.Indicator = "span";
+exports.Panel = TabPanelUnstyled_1.default;
+exports.Tab = (0, react_1.forwardRef)(function Tab(_a, ref) {
+    var children = _a.children, component = _a.component, slotProps = _a.slotProps, slots = _a.slots, Indicator = _a.Indicator, props = tslib_1.__rest(_a, ["children", "component", "slotProps", "slots", "Indicator"]);
+    var _b = (0, TabUnstyled_1.useTab)(tslib_1.__assign(tslib_1.__assign({}, props), { ref: ref })), active = _b.active, disabled = _b.disabled, selected = _b.selected;
     var indicatorProps = { active: active, disabled: disabled, selected: selected };
-    return (_jsxs(TabUnstyled /* ref={ref}  */, __assign({}, props, { children: [children, Indicator && _jsx(Indicator, __assign({}, indicatorProps))] })));
+    return ((0, jsx_runtime_1.jsxs)(TabUnstyled_1.default /* ref={ref}  */, tslib_1.__assign({}, props, { children: [children, Indicator && (0, jsx_runtime_1.jsx)(Indicator, tslib_1.__assign({}, indicatorProps))] })));
 });
 /**
  *
@@ -33,14 +36,14 @@ export var Tab = forwardRef(function Tab(_a, ref) {
  *
  * FIXME: it actually works even without forwardRef, check if we do need it
  */
-var TabsWithRef = forwardRef(function Tabs(_a, ref) {
-    var _Root = _a.Root, _List = _a.List, _Tab = _a.Tab, _Indicator = _a.Indicator, _Panel = _a.Panel, props = __rest(_a, ["Root", "List", "Tab", "Indicator", "Panel"]);
-    return _jsx(Root, __assign({}, props, { ref: ref }));
+var TabsWithRef = (0, react_1.forwardRef)(function Tabs(_a, ref) {
+    var _Root = _a.Root, _List = _a.List, _Tab = _a.Tab, _Indicator = _a.Indicator, _Panel = _a.Panel, props = tslib_1.__rest(_a, ["Root", "List", "Tab", "Indicator", "Panel"]);
+    return (0, jsx_runtime_1.jsx)(exports.Root, tslib_1.__assign({}, props, { ref: ref }));
 });
-export var KoineTabs = extendComponent(TabsWithRef, {
-    Root: Root,
-    List: List,
-    Tab: Tab,
-    Indicator: Indicator,
-    Panel: Panel,
+exports.KoineTabs = (0, helpers_1.extendComponent)(TabsWithRef, {
+    Root: exports.Root,
+    List: exports.List,
+    Tab: exports.Tab,
+    Indicator: exports.Indicator,
+    Panel: exports.Panel,
 });

package/Tabs/TabsMui.mjs

@@ -0,0 +1,46 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import TabsUnstyled from "@mui/base/TabsUnstyled";
+import TabsListUnstyled from "@mui/base/TabsListUnstyled";
+import TabUnstyled, { useTab } from "@mui/base/TabUnstyled";
+import TabPanelUnstyled from "@mui/base/TabPanelUnstyled";
+import { extendComponent, } from "../helpers";
+export var Root = TabsUnstyled;
+export var List = TabsListUnstyled;
+// export const Tab = TabUnstyled as unknown as Props["Tab"];
+export var Indicator = "span";
+export var Panel = TabPanelUnstyled;
+export var Tab = forwardRef(function Tab(_a, ref) {
+    var children = _a.children, component = _a.component, slotProps = _a.slotProps, slots = _a.slots, Indicator = _a.Indicator, props = __rest(_a, ["children", "component", "slotProps", "slots", "Indicator"]);
+    var _b = useTab(__assign(__assign({}, props), { ref: ref })), active = _b.active, disabled = _b.disabled, selected = _b.selected;
+    var indicatorProps = { active: active, disabled: disabled, selected: selected };
+    return (_jsxs(TabUnstyled /* ref={ref}  */, __assign({}, props, { children: [children, Indicator && _jsx(Indicator, __assign({}, indicatorProps))] })));
+});
+/**
+ *
+ * Main differences from [Mui Tabs](https://mui.com/material-ui/react-dialog):
+ *
+ * @resources
+ * - [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#tabpanel)
+ * - [WAI-ARIA example](https://www.w3.org/TR/wai-aria-practices/examples/tabs/tabs-1/tabs.html)
+ * - [[Proposal] New tags tabsection, tablist, tab, tabpanel](https://github.com/whatwg/html/issues/1809)
+ * - [Native <tab> elements](https://github.com/w3c/html/issues/1704)
+ * - [Let's talk about Native HTML Tabs](https://daverupert.com/2021/10/native-html-tabs/)
+ *
+ * @similar
+ * - [Zertz/react-headless-tabs](https://github.com/Zertz/react-headless-tabs)
+ *
+ * FIXME: it actually works even without forwardRef, check if we do need it
+ */
+var TabsWithRef = forwardRef(function Tabs(_a, ref) {
+    var _Root = _a.Root, _List = _a.List, _Tab = _a.Tab, _Indicator = _a.Indicator, _Panel = _a.Panel, props = __rest(_a, ["Root", "List", "Tab", "Indicator", "Panel"]);
+    return _jsx(Root, __assign({}, props, { ref: ref }));
+});
+export var KoineTabs = extendComponent(TabsWithRef, {
+    Root: Root,
+    List: List,
+    Tab: Tab,
+    Indicator: Indicator,
+    Panel: Panel,
+});

package/Tabs/index.js

@@ -1 +1,4 @@
-export * from "./TabsMui";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./TabsMui"), exports);

package/Tabs/index.mjs

@@ -0,0 +1 @@
+export * from "./TabsMui";

package/Tabs/package.json

@@ -1,6 +1,6 @@
 {
   "sideEffects": false,
-  "module": "./index.js",
-  "main": "../node/Tabs/index.js",
+  "module": "./index.mjs",
+  "main": "./index.js",
   "types": "./index.d.ts"
 }

package/Tabs/tw/bare.js

@@ -1,17 +1,20 @@
-import { __makeTemplateObject } from "tslib";
-import { classed, extendComponent } from "../../helpers";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineTabs = exports.Panel = exports.Indicator = exports.Tab = exports.List = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var helpers_1 = require("../../helpers");
 // import type { ComponentsProps } from "../TabsMui";
-import * as _ from "../TabsMui";
-export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["< class=\"tabs"], ["< class=\"tabs"])));
-export var List = classed(_.List)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["< class=\"tabsList flex"], ["< class=\"tabsList flex"])));
-export var Tab = classed(_.Tab)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["< class=\"tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none"], ["< class=\"tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none"])));
-export var Indicator = classed(_.Indicator)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["< class=\"tabsIndicator"], ["< class=\"tabsIndicator"])));
-export var Panel = classed(_.Panel)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["< class=\"tabsPanel"], ["< class=\"tabsPanel"])));
-export var KoineTabs = extendComponent(_.KoineTabs, {
-    Root: Root,
-    List: List,
-    Tab: Tab,
-    Indicator: Indicator,
-    Panel: Panel,
+var _ = tslib_1.__importStar(require("../TabsMui"));
+exports.Root = (0, helpers_1.classed)(_.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["< class=\"tabs"], ["< class=\"tabs"])));
+exports.List = (0, helpers_1.classed)(_.List)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["< class=\"tabsList flex"], ["< class=\"tabsList flex"])));
+exports.Tab = (0, helpers_1.classed)(_.Tab)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["< class=\"tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none"], ["< class=\"tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none"])));
+exports.Indicator = (0, helpers_1.classed)(_.Indicator)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["< class=\"tabsIndicator"], ["< class=\"tabsIndicator"])));
+exports.Panel = (0, helpers_1.classed)(_.Panel)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["< class=\"tabsPanel"], ["< class=\"tabsPanel"])));
+exports.KoineTabs = (0, helpers_1.extendComponent)(_.KoineTabs, {
+    Root: exports.Root,
+    List: exports.List,
+    Tab: exports.Tab,
+    Indicator: exports.Indicator,
+    Panel: exports.Panel,
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Tabs/tw/bare.mjs

@@ -0,0 +1,17 @@
+import { __makeTemplateObject } from "tslib";
+import { classed, extendComponent } from "../../helpers";
+// import type { ComponentsProps } from "../TabsMui";
+import * as _ from "../TabsMui";
+export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["< class=\"tabs"], ["< class=\"tabs"])));
+export var List = classed(_.List)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["< class=\"tabsList flex"], ["< class=\"tabsList flex"])));
+export var Tab = classed(_.Tab)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["< class=\"tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none"], ["< class=\"tabsTab inline-flex items-center justify-center [-webkit-tap-highlight-color:transparent] appearance-none select-none"])));
+export var Indicator = classed(_.Indicator)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["< class=\"tabsIndicator"], ["< class=\"tabsIndicator"])));
+export var Panel = classed(_.Panel)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["< class=\"tabsPanel"], ["< class=\"tabsPanel"])));
+export var KoineTabs = extendComponent(_.KoineTabs, {
+    Root: Root,
+    List: List,
+    Tab: Tab,
+    Indicator: Indicator,
+    Panel: Panel,
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Tabs/tw/material.js

@@ -1,18 +1,21 @@
-import { __makeTemplateObject } from "tslib";
-import { classed, extendComponent } from "../../helpers";
-import { KoineTabs as _ } from "./bare";
-export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["< class=\""], ["< class=\""])));
-export var List = classed(_.List)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["< class=\"border-b-gray-200 border-b border-solid"], ["< class=\"border-b-gray-200 border-b border-solid"])));
-export var Tab = classed(_.Tab)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["< class=\"flex-col relative py-3 px-4 uppercase"], ["< class=\"flex-col relative py-3 px-4 uppercase"]))); // ${p => p.selected ? "text-cyan-600" : ""}
-export var Indicator = classed(_.Indicator)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["< class=\"absolute bottom-0 w-full h-[2px] ", ""], ["< class=\"absolute bottom-0 w-full h-[2px] ", ""])), function (p) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KoineTabs = exports.Panel = exports.Indicator = exports.Tab = exports.List = exports.Root = void 0;
+var tslib_1 = require("tslib");
+var helpers_1 = require("../../helpers");
+var bare_1 = require("./bare");
+exports.Root = (0, helpers_1.classed)(bare_1.KoineTabs.Root)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["< class=\""], ["< class=\""])));
+exports.List = (0, helpers_1.classed)(bare_1.KoineTabs.List)(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["< class=\"border-b-gray-200 border-b border-solid"], ["< class=\"border-b-gray-200 border-b border-solid"])));
+exports.Tab = (0, helpers_1.classed)(bare_1.KoineTabs.Tab)(templateObject_3 || (templateObject_3 = tslib_1.__makeTemplateObject(["< class=\"flex-col relative py-3 px-4 uppercase"], ["< class=\"flex-col relative py-3 px-4 uppercase"]))); // ${p => p.selected ? "text-cyan-600" : ""}
+exports.Indicator = (0, helpers_1.classed)(bare_1.KoineTabs.Indicator)(templateObject_4 || (templateObject_4 = tslib_1.__makeTemplateObject(["< class=\"absolute bottom-0 w-full h-[2px] ", ""], ["< class=\"absolute bottom-0 w-full h-[2px] ", ""])), function (p) {
     return p.selected ? "bg-current" : "";
 });
-export var Panel = classed(_.Panel)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["< class=\"tabsPanel"], ["< class=\"tabsPanel"])));
-export var KoineTabs = extendComponent(_, {
-    Root: Root,
-    List: List,
-    Tab: Tab,
-    Indicator: Indicator,
-    Panel: Panel,
+exports.Panel = (0, helpers_1.classed)(bare_1.KoineTabs.Panel)(templateObject_5 || (templateObject_5 = tslib_1.__makeTemplateObject(["< class=\"tabsPanel"], ["< class=\"tabsPanel"])));
+exports.KoineTabs = (0, helpers_1.extendComponent)(bare_1.KoineTabs, {
+    Root: exports.Root,
+    List: exports.List,
+    Tab: exports.Tab,
+    Indicator: exports.Indicator,
+    Panel: exports.Panel,
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Tabs/tw/material.mjs

@@ -0,0 +1,18 @@
+import { __makeTemplateObject } from "tslib";
+import { classed, extendComponent } from "../../helpers";
+import { KoineTabs as _ } from "./bare";
+export var Root = classed(_.Root)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["< class=\""], ["< class=\""])));
+export var List = classed(_.List)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["< class=\"border-b-gray-200 border-b border-solid"], ["< class=\"border-b-gray-200 border-b border-solid"])));
+export var Tab = classed(_.Tab)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["< class=\"flex-col relative py-3 px-4 uppercase"], ["< class=\"flex-col relative py-3 px-4 uppercase"]))); // ${p => p.selected ? "text-cyan-600" : ""}
+export var Indicator = classed(_.Indicator)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["< class=\"absolute bottom-0 w-full h-[2px] ", ""], ["< class=\"absolute bottom-0 w-full h-[2px] ", ""])), function (p) {
+    return p.selected ? "bg-current" : "";
+});
+export var Panel = classed(_.Panel)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["< class=\"tabsPanel"], ["< class=\"tabsPanel"])));
+export var KoineTabs = extendComponent(_, {
+    Root: Root,
+    List: List,
+    Tab: Tab,
+    Indicator: Indicator,
+    Panel: Panel,
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/Tabs/useTabs.js

@@ -1,15 +1,18 @@
-import { useCallback, useId, useMemo } from "react";
-import { unstable_useControlled as useControlled } from "@mui/utils";
-export var useTabs = function (props) {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTabs = void 0;
+var react_1 = require("react");
+var utils_1 = require("@mui/utils");
+var useTabs = function (props) {
     var valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, orientation = props.orientation, direction = props.direction, selectionFollowsFocus = props.selectionFollowsFocus;
-    var _a = useControlled({
+    var _a = (0, utils_1.unstable_useControlled)({
         controlled: valueProp,
         default: defaultValue,
         name: "Tabs",
         state: "value",
     }), value = _a[0], setValue = _a[1];
-    var idPrefix = useId();
-    var onSelected = useCallback(function (e, newValue) {
+    var idPrefix = (0, react_1.useId)();
+    var onSelected = (0, react_1.useCallback)(function (e, newValue) {
         setValue(newValue);
         if (onChange) {
             onChange(e, newValue);
@@ -18,7 +21,7 @@ export var useTabs = function (props) {
     var getRootProps = function () {
         return {};
     };
-    var tabsContextValue = useMemo(function () {
+    var tabsContextValue = (0, react_1.useMemo)(function () {
         return {
             idPrefix: idPrefix,
             value: value,
@@ -40,4 +43,5 @@ export var useTabs = function (props) {
         tabsContextValue: tabsContextValue,
     };
 };
-export default useTabs;
+exports.useTabs = useTabs;
+exports.default = exports.useTabs;

package/{node/Tabs/useTabs.js → Tabs/useTabs.mjs}

@@ -1,18 +1,15 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTabs = void 0;
-var react_1 = require("react");
-var utils_1 = require("@mui/utils");
-var useTabs = function (props) {
+import { useCallback, useId, useMemo } from "react";
+import { unstable_useControlled as useControlled } from "@mui/utils";
+export var useTabs = function (props) {
     var valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, orientation = props.orientation, direction = props.direction, selectionFollowsFocus = props.selectionFollowsFocus;
-    var _a = (0, utils_1.unstable_useControlled)({
+    var _a = useControlled({
         controlled: valueProp,
         default: defaultValue,
         name: "Tabs",
         state: "value",
     }), value = _a[0], setValue = _a[1];
-    var idPrefix = (0, react_1.useId)();
-    var onSelected = (0, react_1.useCallback)(function (e, newValue) {
+    var idPrefix = useId();
+    var onSelected = useCallback(function (e, newValue) {
         setValue(newValue);
         if (onChange) {
             onChange(e, newValue);
@@ -21,7 +18,7 @@ var useTabs = function (props) {
     var getRootProps = function () {
         return {};
     };
-    var tabsContextValue = (0, react_1.useMemo)(function () {
+    var tabsContextValue = useMemo(function () {
         return {
             idPrefix: idPrefix,
             value: value,
@@ -43,5 +40,4 @@ var useTabs = function (props) {
         tabsContextValue: tabsContextValue,
     };
 };
-exports.useTabs = useTabs;
-exports.default = exports.useTabs;
+export default useTabs;

package/Typography/CopyPasteVisible.js

@@ -1,4 +1,7 @@
-import { __makeTemplateObject } from "tslib";
-import styled from "styled-components";
-export var CopyPasteVisible = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: transparent;\n  opacity: 0;\n  font-size: 0;\n"], ["\n  color: transparent;\n  opacity: 0;\n  font-size: 0;\n"])));
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CopyPasteVisible = void 0;
+var tslib_1 = require("tslib");
+var styled_components_1 = tslib_1.__importDefault(require("styled-components"));
+exports.CopyPasteVisible = styled_components_1.default.span(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n  color: transparent;\n  opacity: 0;\n  font-size: 0;\n"], ["\n  color: transparent;\n  opacity: 0;\n  font-size: 0;\n"])));
 var templateObject_1;

package/Typography/CopyPasteVisible.mjs

@@ -0,0 +1,4 @@
+import { __makeTemplateObject } from "tslib";
+import styled from "styled-components";
+export var CopyPasteVisible = styled.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: transparent;\n  opacity: 0;\n  font-size: 0;\n"], ["\n  color: transparent;\n  opacity: 0;\n  font-size: 0;\n"])));
+var templateObject_1;