@alxgrn/telefrag-ui 0.0.12 → 0.0.14

package/dist/assets/Content.css

@@ -1 +1 @@
-.Content{display:flex;align-items:stretch;gap:var(--alxgrn-unit);max-width:var(--alxgrn-layout-width);margin:0 auto;margin-top:var(--alxgrn-layout-header-height)}.Content .ContentMenu{flex:0 0 auto;width:var(--alxgrn-layout-menu-width);color:var(--alxgrn-color-text);background-color:var(--alxgrn-bg-main)}.Content .ContentMenu .ContentMenuInner{position:sticky;top:var(--alxgrn-layout-header-height)}.Content .ContentMain{flex:1 1 auto}@media (max-width: 1024px){.Content .ContentMenu{display:none}}@media (max-width: 768px){.Content{padding-left:0;padding-right:0}}
+.Content{display:flex;align-items:stretch;gap:var(--alxgrn-unit);max-width:var(--alxgrn-layout-width);margin:0 auto;margin-top:calc(var(--alxgrn-unit-half) + var(--alxgrn-layout-header-height))}.Content .ContentMenu{flex:0 0 auto;width:var(--alxgrn-layout-menu-width);color:var(--alxgrn-color-text);background-color:var(--alxgrn-bg-main)}.Content .ContentMenu .ContentMenuInner{position:sticky;top:calc(var(--alxgrn-unit) + var(--alxgrn-layout-header-height))}.Content .ContentMain{flex:1 1 auto}@media (max-width: 1024px){.Content .ContentMenu{display:none}}@media (max-width: 768px){.Content{padding-left:0;padding-right:0}}

package/dist/assets/Header.css

@@ -1 +1 @@
-.HeaderWrapper{z-index:100;display:block;position:fixed;top:0;width:100%;background-color:var(--alxgrn-bg-main)}.Header{display:flex;align-items:center;gap:var(--alxgrn-unit);max-width:var(--alxgrn-layout-width);height:var(--alxgrn-layout-header-height);margin:0 auto}.HeaderLeft{display:none}.HeaderLeft span{cursor:pointer}.HeaderCenter{flex:1 1 auto;display:flex;align-items:center;padding-left:calc(var(--alxgrn-unit) + var(--alxgrn-layout-menu-width))}.HeaderCenter svg{width:auto;height:calc(2 * var(--alxgrn-unit))}@media (max-width: 1024px){.HeaderLeft{flex:0 0 auto;display:flex;align-items:center;justify-content:center}.HeaderCenter{padding-left:0}}
+.HeaderWrapper{z-index:100;display:block;position:fixed;top:0;width:100%;background-color:var(--alxgrn-bg-panel)}.Header{display:flex;align-items:center;gap:var(--alxgrn-unit);max-width:var(--alxgrn-layout-width);height:var(--alxgrn-layout-header-height);margin:0 auto}.HeaderLeft{display:none}.HeaderLeft span{cursor:pointer}.HeaderCenter{flex:1 1 auto;display:flex;align-items:center;padding-left:calc(var(--alxgrn-unit) + var(--alxgrn-layout-menu-width))}.HeaderCenter svg{width:auto;height:calc(2 * var(--alxgrn-unit))}@media (max-width: 1024px){.HeaderLeft{flex:0 0 auto;display:flex;align-items:center;justify-content:center}.HeaderCenter{padding-left:0}}

package/dist/assets/MainMenu.css

@@ -1 +1 @@
-.MainMenu div{display:flex;align-items:center;gap:var(--alxgrn-unit-half);margin-bottom:var(--alxgrn-unit-half);cursor:pointer}.MainMenu div:hover *{color:var(--alxgrn-color-accent)}.MainMenu div svg{font-size:var(--alxgrn-font-size-big)}.MainMenu div span{font-size:var(--alxgrn-font-size)}
+.MainMenu div{display:flex;align-items:center;gap:var(--alxgrn-unit-half);margin-bottom:var(--alxgrn-unit);cursor:pointer}.MainMenu div:hover *{color:var(--alxgrn-color-accent)}.MainMenu div svg{font-size:var(--alxgrn-font-size-big)}.MainMenu div span{font-size:var(--alxgrn-font-size)}

package/dist/components/form/checkbox/Checkbox.js

@@ -1,26 +1,28 @@
 import { jsx as e } from "react/jsx-runtime";
-import { Radio as f } from "../radio/Radio.js";
-const d = ({
-  value: o,
-  onChange: a,
-  label: s,
-  bottom: m,
-  required: r = !1,
-  disabled: t = !1,
-  checked: c = !1
+import { Radio as l } from "../radio/Radio.js";
+const p = ({
+  id: o,
+  value: a,
+  onChange: s,
+  label: m,
+  bottom: r,
+  required: t = !1,
+  disabled: c = !1,
+  checked: f = !1
 }) => /* @__PURE__ */ e("div", { className: "FormItem", children: /* @__PURE__ */ e(
-  f,
+  l,
   {
+    id: o,
     type: "checkbox",
-    label: s,
-    value: o,
-    bottom: m,
-    required: r,
-    disabled: t,
-    checked: c,
-    onChange: a
+    label: m,
+    value: a,
+    bottom: r,
+    required: t,
+    disabled: c,
+    checked: f,
+    onChange: s
   }
 ) });
 export {
-  d as default
+  p as default
 };

package/dist/components/form/checkbox/CheckboxList.d.ts

@@ -9,6 +9,7 @@ export interface CheckboxListOption {
     required?: boolean | null;
 }
 export interface CheckboxListProps {
+    id: string;
     label?: string | null;
     options: CheckboxListOption[];
     onChange: (v: CheckboxListOption[]) => void;

package/dist/components/form/checkbox/CheckboxList.js

@@ -1,32 +1,34 @@
 import { jsx as f } from "react/jsx-runtime";
-import { useState as u, useEffect as b } from "react";
-import i from "../fieldset/Fieldset.js";
-import { Radio as k } from "../radio/Radio.js";
-const g = ({
-  label: d,
-  onChange: n,
+import { useState as b, useEffect as i } from "react";
+import k from "../fieldset/Fieldset.js";
+import { Radio as m } from "../radio/Radio.js";
+const v = ({
+  id: d,
+  label: n,
+  onChange: h,
   required: t = !1,
   disabled: a = !1,
   options: r
 }) => {
-  const [l, s] = u(!1);
-  b(() => {
+  const [l, s] = b(!1);
+  i(() => {
     s(!1), t && r.findIndex((o) => o.checked === !0) < 0 && s(!0);
   }, [t, r]);
-  const h = (e, o) => {
+  const u = (e, o) => {
     const c = [...r];
-    c[e].checked = o, n(c);
+    c[e].checked = o, h(c);
   };
   return /* @__PURE__ */ f(
-    i,
+    k,
     {
-      label: d,
+      label: n,
       error: l,
       disabled: a,
       required: t,
       children: r.map((e, o) => /* @__PURE__ */ f(
-        k,
+        m,
         {
+          id: d,
           type: "checkbox",
           error: l,
           label: e.label,
@@ -35,7 +37,7 @@ const g = ({
           disabled: e.disabled || a,
           required: e.required,
           checked: e.checked,
-          onChange: (c) => h(o, c)
+          onChange: (c) => u(o, c)
         },
         o
       ))
@@ -43,6 +45,6 @@ const g = ({
   );
 };
 export {
-  g as CheckboxList,
-  g as default
+  v as CheckboxList,
+  v as default
 };

package/dist/components/form/radio/Radio.d.ts

@@ -8,6 +8,7 @@ import { default as React } from 'react';
  * отметки элемента.
  */
 export interface RadioProps {
+    id: string;
     type?: 'radio' | 'checkbox';
     value: string | number;
     error?: boolean;

package/dist/components/form/radio/Radio.js

@@ -1,29 +1,31 @@
 import { jsx as t } from "react/jsx-runtime";
-import n from "./RadioLabel.js";
-const p = ({
-  type: l = "radio",
-  value: s,
-  onChange: f,
-  label: o,
-  bottom: u,
-  error: d = !1,
+import c from "./RadioLabel.js";
+const h = ({
+  id: l,
+  type: s = "radio",
+  value: f,
+  onChange: o,
+  label: u,
+  bottom: d,
+  error: i = !1,
   required: e = !1,
   disabled: r = !1,
   checked: a = !1
 }) => /* @__PURE__ */ t(
-  n,
+  c,
   {
-    label: o,
-    bottom: u,
+    label: u,
+    bottom: d,
     required: !!e,
-    error: d || e && !a,
+    error: i || e && !a,
     disabled: !!r,
     checked: !!a,
     children: /* @__PURE__ */ t(
       "input",
       {
-        type: l,
-        onChange: (i) => f(i.target.checked, s),
+        id: l,
+        type: s,
+        onChange: (n) => o(n.target.checked, f),
         checked: !!a,
         disabled: !!r,
         required: !!e
@@ -32,6 +34,6 @@ const p = ({
   }
 );
 export {
-  p as Radio,
-  p as default
+  h as Radio,
+  h as default
 };

package/dist/components/form/radio/RadioList.d.ts

@@ -12,6 +12,7 @@ export interface RadioListOption {
     required?: boolean | null;
 }
 export interface RadioListProps {
+    id: string;
     label?: string | null;
     value: RadioListValue;
     options: RadioListOption[];

package/dist/components/form/radio/RadioList.js

@@ -1,21 +1,22 @@
 import { jsx as d } from "react/jsx-runtime";
-import { useState as m, useEffect as b } from "react";
-import { Radio as x } from "./Radio.js";
-import p from "../fieldset/Fieldset.js";
-const g = ({ label: n, value: r, onChange: i, required: o = !1, disabled: l = !1, options: a }) => {
-  const [t, s] = m(!1);
-  return b(() => {
+import { useState as b, useEffect as x } from "react";
+import { Radio as p } from "./Radio.js";
+import h from "../fieldset/Fieldset.js";
+const j = ({ id: n, label: i, value: r, onChange: c, required: o = !1, disabled: l = !1, options: a }) => {
+  const [t, s] = b(!1);
+  return x(() => {
     s(!1), o && a.findIndex((f) => f.value === r) < 0 && s(!0);
   }, [r, o, a]), /* @__PURE__ */ d(
-    p,
+    h,
     {
-      label: n,
+      label: i,
       error: t,
       disabled: l,
       required: o,
       children: a.map((e, f) => /* @__PURE__ */ d(
-        x,
+        p,
         {
+          id: n,
           label: e.label,
           value: e.value,
           error: t,
@@ -23,7 +24,7 @@ const g = ({ label: n, value: r, onChange: i, required: o = !1, disabled: l = !1
           disabled: e.disabled || l,
           required: e.required,
           checked: e.value === r,
-          onChange: (c, u) => i(u, c)
+          onChange: (u, m) => c(m, u)
         },
         f
       ))
@@ -31,6 +32,6 @@ const g = ({ label: n, value: r, onChange: i, required: o = !1, disabled: l = !1
   );
 };
 export {
-  g as RadioList,
-  g as default
+  j as RadioList,
+  j as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@alxgrn/telefrag-ui",
   "description": "UI library for The Daily Telefrag project",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "private": false,
   "author": "Alexander Fedorov <alex@molner.ru>",
   "license": "Apache-2.0",