@ryuzaki13/react-foundation-ui 1.0.7 → 1.0.11

package/dist/toggle/index.js

@@ -1,2 +1,73 @@
-import { t as e } from "../chunks/Toggle-DVqOQXmt.js";
-export { e as Toggle };
+import { t as e } from "../chunks/ui.module-BisoTevy.js";
+import { useId as t } from "react";
+import { cn as n } from "@ryuzaki13/react-foundation-lib/utils";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+var a = {
+	row: "FFyoOs",
+	wrapper: "zPYy7T",
+	input: "j6ek6R",
+	track: "HFTPXI",
+	thumb: "_0RK4xF",
+	unchecked: "kDPnKt",
+	checked: "DQHqws",
+	option: "nCQ9v4"
+};
+//#endregion
+//#region src/toggle/Toggle.tsx
+function o({ label: o, description: s, placeholder: c, disabled: l, size: u, className: d, onChange: f, value: p, id: m, checkedText: h = "ВКЛ", uncheckedText: g = "ВЫКЛ", labelPosition: _ = "before", ...v }) {
+	let y = t(), b = m ?? y, x = s ? `${b}-description` : void 0, S = o ?? c, C = !!p, w = !S && !v["aria-label"] ? `${g} / ${h}` : void 0, T = S ? /* @__PURE__ */ r("label", {
+		htmlFor: b,
+		className: e.uiLabel,
+		children: S
+	}) : null;
+	return /* @__PURE__ */ i("div", {
+		className: n(e.uiElement, l && e.disabled, u && e.uiSizable, u && e[u], d),
+		"aria-disabled": l || void 0,
+		children: [/* @__PURE__ */ i("div", {
+			className: a.row,
+			children: [
+				_ === "before" && T,
+				/* @__PURE__ */ i("div", {
+					className: a.wrapper,
+					children: [/* @__PURE__ */ r("input", {
+						...v,
+						id: b,
+						type: "checkbox",
+						role: "switch",
+						checked: C,
+						disabled: l,
+						"aria-checked": C,
+						"aria-describedby": x,
+						"aria-label": w,
+						className: n(e.uiInputControl, a.input),
+						onChange: (e) => f?.(e.currentTarget.checked)
+					}), /* @__PURE__ */ i("div", {
+						className: a.track,
+						"data-disabled": l || void 0,
+						"aria-hidden": "true",
+						children: [
+							/* @__PURE__ */ r("div", { className: a.thumb }),
+							/* @__PURE__ */ r("div", {
+								className: n(a.option, a.unchecked),
+								children: g
+							}),
+							/* @__PURE__ */ r("div", {
+								className: n(a.option, a.checked),
+								children: h
+							})
+						]
+					})]
+				}),
+				_ === "after" && T
+			]
+		}), s && /* @__PURE__ */ r("p", {
+			id: x,
+			className: e.uiDescription,
+			children: s
+		})]
+	});
+}
+//#endregion
+export { o as Toggle };
+
+//# sourceMappingURL=index.js.map

package/dist/toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/toggle/Toggle.module.scss","../../src/toggle/Toggle.tsx"],"sourcesContent":["@use \"@/styles/mixins\" as *;\n\n.row {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--space-sm);\n}\n\n.wrapper {\n\tposition: relative;\n\tdisplay: flex;\n\tflex: 1 0 auto;\n\tmin-width: calc(var(--drp-ui-width-xs, var(--ui-width-xs)) - var(--width-add));\n}\n\n.input {\n\twidth: 100%;\n\tmargin: 0;\n\tpadding: 0;\n\tappearance: none;\n\tcursor: pointer;\n\n\t&:checked + .track {\n\t\t.thumb {\n\t\t\ttransform: translateX(100%);\n\t\t}\n\n\t\t.unchecked {\n\t\t\tcolor: var(--content-2);\n\t\t}\n\n\t\t.checked {\n\t\t\tcolor: var(--status-neutral-on-fill);\n\t\t}\n\t}\n\n\t&:focus-visible + .track {\n\t\t@include focusVisible;\n\t}\n}\n\n.track {\n\t.unchecked {\n\t\tcolor: var(--status-neutral-on-fill);\n\t}\n\n\t.checked {\n\t\tcolor: var(--content-2);\n\t}\n\n\tposition: absolute;\n\tinset: calc(var(--border-width) * 2);\n\tpointer-events: none;\n\tdisplay: grid;\n\tgrid-template-columns: repeat(2, minmax(0, 1fr));\n\talign-items: center;\n\tmin-width: 6.5em;\n\tpadding: 0;\n\toverflow: hidden;\n\n\t&[data-disabled] {\n\t\t.thumb {\n\t\t\topacity: var(--disabled-opacity);\n\t\t}\n\t}\n}\n\n.option {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tpadding: 0 var(--space-sm);\n\tline-height: 1;\n\twhite-space: nowrap;\n\tuser-select: none;\n\tpointer-events: none;\n\tposition: relative;\n\tz-index: 1;\n\ttransition: color var(--transition-fast) linear;\n}\n\n.thumb {\n\tposition: absolute;\n\ttop: 0; // var(--border-width);\n\tleft: 0; //var(--border-width);\n\twidth: 50%; // calc(50% - var(--border-width));\n\theight: 100%; // calc(100% - var(--border-width) * 2);\n\tborder-radius: var(--radius-xs);\n\tbackground-color: var(--status-neutral-fill);\n\ttransition:\n\t\ttransform var(--transition-fast) ease-in-out,\n\t\topacity var(--transition-fast) ease-in-out;\n}\n","import React, { useId } from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { UiBaseProps } from \"../types\";\nimport uiStyles from \"../ui.module.scss\";\n\nimport styles from \"./Toggle.module.scss\";\n\ntype ToggleLabelPosition = \"before\" | \"after\";\n\nexport interface ToggleProps\n\textends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"checked\" | \"value\" | \"onChange\" | \"type\">, UiBaseProps<boolean> {\n\tcheckedText?: string;\n\tuncheckedText?: string;\n\tlabelPosition?: ToggleLabelPosition;\n}\n\n/**\n * Переключаемая кнопка с сохранением активного состояния. Используется для локального выбора режима, фильтра или форматирования.\n */\nexport function Toggle({\n\tlabel,\n\tdescription,\n\tplaceholder,\n\tdisabled,\n\tsize,\n\tclassName,\n\tonChange,\n\tvalue,\n\tid: externalId,\n\tcheckedText = \"ВКЛ\",\n\tuncheckedText = \"ВЫКЛ\",\n\tlabelPosition = \"before\",\n\t...props\n}: ToggleProps) {\n\tconst autoId = useId();\n\tconst id = externalId ?? autoId;\n\tconst descriptionId = description ? `${id}-description` : undefined;\n\tconst text = label ?? placeholder;\n\tconst isChecked = Boolean(value);\n\tconst fallbackAriaLabel = !text && !props[\"aria-label\"] ? `${uncheckedText} / ${checkedText}` : undefined;\n\n\tconst labelElement = text ? (\n\t\t<label htmlFor={id} className={uiStyles.uiLabel}>\n\t\t\t{text}\n\t\t</label>\n\t) : null;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(uiStyles.uiElement, disabled && uiStyles.disabled, size && uiStyles.uiSizable, size && uiStyles[size], className)}\n\t\t\taria-disabled={disabled || undefined}>\n\t\t\t<div className={styles.row}>\n\t\t\t\t{labelPosition === \"before\" && labelElement}\n\t\t\t\t<div className={styles.wrapper}>\n\t\t\t\t\t<input\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t\tid={id}\n\t\t\t\t\t\ttype=\"checkbox\"\n\t\t\t\t\t\trole=\"switch\"\n\t\t\t\t\t\tchecked={isChecked}\n\t\t\t\t\t\tdisabled={disabled}\n\t\t\t\t\t\taria-checked={isChecked}\n\t\t\t\t\t\taria-describedby={descriptionId}\n\t\t\t\t\t\taria-label={fallbackAriaLabel}\n\t\t\t\t\t\tclassName={cn(uiStyles.uiInputControl, styles.input)}\n\t\t\t\t\t\tonChange={(event) => onChange?.(event.currentTarget.checked)}\n\t\t\t\t\t/>\n\t\t\t\t\t<div className={styles.track} data-disabled={disabled || undefined} aria-hidden=\"true\">\n\t\t\t\t\t\t<div className={styles.thumb} />\n\t\t\t\t\t\t<div className={cn(styles.option, styles.unchecked)}>{uncheckedText}</div>\n\t\t\t\t\t\t<div className={cn(styles.option, styles.checked)}>{checkedText}</div>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t\t{labelPosition === \"after\" && labelElement}\n\t\t\t</div>\n\t\t\t{description && (\n\t\t\t\t<p id={descriptionId} className={uiStyles.uiDescription}>\n\t\t\t\t\t{description}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;;ACqBA,SAAgB,EAAO,EACtB,UACA,gBACA,gBACA,aACA,SACA,cACA,aACA,UACA,IAAI,GACJ,iBAAc,OACd,mBAAgB,QAChB,mBAAgB,UAChB,GAAG,KACY;CACf,IAAM,IAAS,EAAM,GACf,IAAK,KAAc,GACnB,IAAgB,IAAc,GAAG,EAAG,gBAAgB,KAAA,GACpD,IAAO,KAAS,GAChB,IAAY,EAAQ,GACpB,IAAoB,CAAC,KAAQ,CAAC,EAAM,gBAAgB,GAAG,EAAc,KAAK,MAAgB,KAAA,GAE1F,IAAe,IACpB,kBAAC,SAAD;EAAO,SAAS;EAAI,WAAW,EAAS;YACtC;CACK,CAAA,IACJ;CAEJ,OACC,kBAAC,OAAD;EACC,WAAW,EAAG,EAAS,WAAW,KAAY,EAAS,UAAU,KAAQ,EAAS,WAAW,KAAQ,EAAS,IAAO,CAAS;EAC9H,iBAAe,KAAY,KAAA;YAF5B,CAGC,kBAAC,OAAD;GAAK,WAAW,EAAO;aAAvB;IACE,MAAkB,YAAY;IAC/B,kBAAC,OAAD;KAAK,WAAW,EAAO;eAAvB,CACC,kBAAC,SAAD;MACC,GAAI;MACA;MACJ,MAAK;MACL,MAAK;MACL,SAAS;MACC;MACV,gBAAc;MACd,oBAAkB;MAClB,cAAY;MACZ,WAAW,EAAG,EAAS,gBAAgB,EAAO,KAAK;MACnD,WAAW,MAAU,IAAW,EAAM,cAAc,OAAO;KAC3D,CAAA,GACD,kBAAC,OAAD;MAAK,WAAW,EAAO;MAAO,iBAAe,KAAY,KAAA;MAAW,eAAY;gBAAhF;OACC,kBAAC,OAAD,EAAK,WAAW,EAAO,MAAQ,CAAA;OAC/B,kBAAC,OAAD;QAAK,WAAW,EAAG,EAAO,QAAQ,EAAO,SAAS;kBAAI;OAAmB,CAAA;OACzE,kBAAC,OAAD;QAAK,WAAW,EAAG,EAAO,QAAQ,EAAO,OAAO;kBAAI;OAAiB,CAAA;MACjE;OACD;;IACJ,MAAkB,WAAW;GAC1B;MACJ,KACA,kBAAC,KAAD;GAAG,IAAI;GAAe,WAAW,EAAS;aACxC;EACC,CAAA,CAEA;;AAEP"}

package/dist/toolbar/index.js

@@ -1,6 +1,5 @@
-import { t as e } from "../chunks/Flex-DUYSL5TE.js";
-import { FlexSpacer as t } from "../flex/index.js";
-import { t as n } from "../chunks/Grid-ByIIytjh.js";
+import { r as e, t } from "../chunks/flex-CPO6xlPR.js";
+import { t as n } from "../chunks/grid-ByIIytjh.js";
 import { Children as r } from "react";
 import { childrenCount as i } from "@ryuzaki13/react-foundation-lib/utils";
 import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";

package/dist/toolbar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/toolbar/Toolbar.tsx"],"sourcesContent":["import React, { Children, PropsWithChildren, ReactNode } from \"react\";\n\nimport { childrenCount } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { Flex, FlexSpacer } from \"../flex\";\nimport { Grid } from \"../grid\";\n\nexport const ToolbarStart: React.FC<PropsWithChildren> = ({ children }) => <>{children}</>;\nToolbarStart.displayName = \"Toolbar.Start\";\n\nexport const ToolbarEnd: React.FC<PropsWithChildren> = ({ children }) => <>{children}</>;\nToolbarEnd.displayName = \"Toolbar.End\";\n\ntype ToolbarStartElement = React.ReactElement<{ children: ReactNode }, typeof ToolbarStart>;\ntype ToolbarEndElement = React.ReactElement<{ children: ReactNode }, typeof ToolbarEnd>;\n\ntype ToolbarChildren = [ToolbarStartElement, ToolbarEndElement] | ToolbarStartElement | ToolbarEndElement;\n\ninterface ToolbarProps {\n\tchildren: ToolbarChildren;\n\tclassName?: string;\n}\n\nexport function Toolbar({ children, className }: ToolbarProps) {\n\tlet toolbarStart: ReactNode = null;\n\tlet toolbarEnd: ReactNode = null;\n\n\tconst childArray = Children.toArray(children) as (ToolbarStartElement | ToolbarEndElement)[];\n\n\tfor (const child of childArray) {\n\t\tconst typeName = child.type.displayName;\n\n\t\tswitch (typeName) {\n\t\t\tcase ToolbarStart.displayName:\n\t\t\t\tif (toolbarStart) throw new Error(\"Toolbar: duplicate <ToolbarStart> found\");\n\t\t\t\ttoolbarStart = child.props.children;\n\t\t\t\tbreak;\n\t\t\tcase ToolbarEnd.displayName:\n\t\t\t\tif (toolbarEnd) throw new Error(\"Toolbar: duplicate <ToolbarEnd> found\");\n\t\t\t\ttoolbarEnd = child.props.children;\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn (\n\t\t<Flex.Container wrap align=\"center\" gap=\"md\" className={className}>\n\t\t\t{toolbarStart && (\n\t\t\t\t<Flex.Item flex0>\n\t\t\t\t\t<Grid.Container\n\t\t\t\t\t\ttemplateColumns={`repeat(${childrenCount(toolbarStart)}, calc(15em + var(--width-add)))`}\n\t\t\t\t\t\talign=\"end\"\n\t\t\t\t\t\tgap=\"sm\">\n\t\t\t\t\t\t{toolbarStart}\n\t\t\t\t\t</Grid.Container>\n\t\t\t\t</Flex.Item>\n\t\t\t)}\n\n\t\t\t<FlexSpacer />\n\n\t\t\t{toolbarEnd && (\n\t\t\t\t<Flex.Item flex0>\n\t\t\t\t\t<Grid.Container\n\t\t\t\t\t\ttemplateColumns={`repeat(${childrenCount(toolbarEnd)}, calc(15em + var(--width-add)))`}\n\t\t\t\t\t\talign=\"end\"\n\t\t\t\t\t\tgap=\"sm\">\n\t\t\t\t\t\t{toolbarEnd}\n\t\t\t\t\t</Grid.Container>\n\t\t\t\t</Flex.Item>\n\t\t\t)}\n\t\t</Flex.Container>\n\t);\n}\n"],"mappings":";;;;;;;AAOA,IAAa,KAA6C,EAAE,kBAAe,kBAAA,GAAA,EAAG,YAAW,CAAA;AACzF,EAAa,cAAc;AAE3B,IAAa,KAA2C,EAAE,kBAAe,kBAAA,GAAA,EAAG,YAAW,CAAA;AACvF,EAAW,cAAc;AAYzB,SAAgB,EAAQ,EAAE,aAAU,gBAA2B;CAC9D,IAAI,IAA0B,MAC1B,IAAwB,MAEtB,IAAa,EAAS,QAAQ,CAAQ;CAE5C,KAAK,IAAM,KAAS,GAGnB,QAFiB,EAAM,KAAK,aAE5B;EACC,KAAK,EAAa;GACjB,IAAI,GAAc,MAAU,MAAM,yCAAyC;GAC3E,IAAe,EAAM,MAAM;GAC3B;EACD,KAAK,EAAW;GACf,IAAI,GAAY,MAAU,MAAM,uCAAuC;GACvE,IAAa,EAAM,MAAM;GACzB;CACF;CAGD,OACC,kBAAC,EAAK,WAAN;EAAgB,MAAA;EAAK,OAAM;EAAS,KAAI;EAAgB;YAAxD;GACE,KACA,kBAAC,EAAK,MAAN;IAAW,OAAA;cACV,kBAAC,EAAK,WAAN;KACC,iBAAiB,UAAU,EAAc,CAAY,EAAE;KACvD,OAAM;KACN,KAAI;eACH;IACc,CAAA;GACN,CAAA;GAGZ,kBAAC,GAAD,CAAa,CAAA;GAEZ,KACA,kBAAC,EAAK,MAAN;IAAW,OAAA;cACV,kBAAC,EAAK,WAAN;KACC,iBAAiB,UAAU,EAAc,CAAU,EAAE;KACrD,OAAM;KACN,KAAI;eACH;IACc,CAAA;GACN,CAAA;EAEG;;AAElB"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/toolbar/Toolbar.tsx"],"sourcesContent":["import React, { Children, PropsWithChildren, ReactNode } from \"react\";\n\nimport { childrenCount } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nimport { Flex, FlexSpacer } from \"../flex\";\nimport { Grid } from \"../grid\";\n\nexport const ToolbarStart: React.FC<PropsWithChildren> = ({ children }) => <>{children}</>;\nToolbarStart.displayName = \"Toolbar.Start\";\n\nexport const ToolbarEnd: React.FC<PropsWithChildren> = ({ children }) => <>{children}</>;\nToolbarEnd.displayName = \"Toolbar.End\";\n\ntype ToolbarStartElement = React.ReactElement<{ children: ReactNode }, typeof ToolbarStart>;\ntype ToolbarEndElement = React.ReactElement<{ children: ReactNode }, typeof ToolbarEnd>;\n\ntype ToolbarChildren = [ToolbarStartElement, ToolbarEndElement] | ToolbarStartElement | ToolbarEndElement;\n\ninterface ToolbarProps {\n\tchildren: ToolbarChildren;\n\tclassName?: string;\n}\n\nexport function Toolbar({ children, className }: ToolbarProps) {\n\tlet toolbarStart: ReactNode = null;\n\tlet toolbarEnd: ReactNode = null;\n\n\tconst childArray = Children.toArray(children) as (ToolbarStartElement | ToolbarEndElement)[];\n\n\tfor (const child of childArray) {\n\t\tconst typeName = child.type.displayName;\n\n\t\tswitch (typeName) {\n\t\t\tcase ToolbarStart.displayName:\n\t\t\t\tif (toolbarStart) throw new Error(\"Toolbar: duplicate <ToolbarStart> found\");\n\t\t\t\ttoolbarStart = child.props.children;\n\t\t\t\tbreak;\n\t\t\tcase ToolbarEnd.displayName:\n\t\t\t\tif (toolbarEnd) throw new Error(\"Toolbar: duplicate <ToolbarEnd> found\");\n\t\t\t\ttoolbarEnd = child.props.children;\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn (\n\t\t<Flex.Container wrap align=\"center\" gap=\"md\" className={className}>\n\t\t\t{toolbarStart && (\n\t\t\t\t<Flex.Item flex0>\n\t\t\t\t\t<Grid.Container\n\t\t\t\t\t\ttemplateColumns={`repeat(${childrenCount(toolbarStart)}, calc(15em + var(--width-add)))`}\n\t\t\t\t\t\talign=\"end\"\n\t\t\t\t\t\tgap=\"sm\">\n\t\t\t\t\t\t{toolbarStart}\n\t\t\t\t\t</Grid.Container>\n\t\t\t\t</Flex.Item>\n\t\t\t)}\n\n\t\t\t<FlexSpacer />\n\n\t\t\t{toolbarEnd && (\n\t\t\t\t<Flex.Item flex0>\n\t\t\t\t\t<Grid.Container\n\t\t\t\t\t\ttemplateColumns={`repeat(${childrenCount(toolbarEnd)}, calc(15em + var(--width-add)))`}\n\t\t\t\t\t\talign=\"end\"\n\t\t\t\t\t\tgap=\"sm\">\n\t\t\t\t\t\t{toolbarEnd}\n\t\t\t\t\t</Grid.Container>\n\t\t\t\t</Flex.Item>\n\t\t\t)}\n\t\t</Flex.Container>\n\t);\n}\n"],"mappings":";;;;;;AAOA,IAAa,KAA6C,EAAE,kBAAe,kBAAA,GAAA,EAAG,YAAW,CAAA;AACzF,EAAa,cAAc;AAE3B,IAAa,KAA2C,EAAE,kBAAe,kBAAA,GAAA,EAAG,YAAW,CAAA;AACvF,EAAW,cAAc;AAYzB,SAAgB,EAAQ,EAAE,aAAU,gBAA2B;CAC9D,IAAI,IAA0B,MAC1B,IAAwB,MAEtB,IAAa,EAAS,QAAQ,CAAQ;CAE5C,KAAK,IAAM,KAAS,GAGnB,QAFiB,EAAM,KAAK,aAE5B;EACC,KAAK,EAAa;GACjB,IAAI,GAAc,MAAU,MAAM,yCAAyC;GAC3E,IAAe,EAAM,MAAM;GAC3B;EACD,KAAK,EAAW;GACf,IAAI,GAAY,MAAU,MAAM,uCAAuC;GACvE,IAAa,EAAM,MAAM;GACzB;CACF;CAGD,OACC,kBAAC,EAAK,WAAN;EAAgB,MAAA;EAAK,OAAM;EAAS,KAAI;EAAgB;YAAxD;GACE,KACA,kBAAC,EAAK,MAAN;IAAW,OAAA;cACV,kBAAC,EAAK,WAAN;KACC,iBAAiB,UAAU,EAAc,CAAY,EAAE;KACvD,OAAM;KACN,KAAI;eACH;IACc,CAAA;GACN,CAAA;GAGZ,kBAAC,GAAD,CAAa,CAAA;GAEZ,KACA,kBAAC,EAAK,MAAN;IAAW,OAAA;cACV,kBAAC,EAAK,WAAN;KACC,iBAAiB,UAAU,EAAc,CAAU,EAAE;KACrD,OAAM;KACN,KAAI;eACH;IACc,CAAA;GACN,CAAA;EAEG;;AAElB"}