@de-kit/st-ui 0.1.7 → 0.1.8

package/dist/components/button/button.scss

@@ -1,148 +1,147 @@
-.button {
-  box-sizing: border-box;
-  width: fit-content;
-  display: flex;
-  align-items: center;
-  padding: 8px 18px;
-  border-radius: 30px;
-  font-size: var(--text-sm);
-  line-height: var(--text-sm--line-height);
-  background-color: var(--color-primary);
-  color: var(--color-primary-foreground);
-  fill: var(--color-primary-foreground);
-  font-weight: bold;
-  font-family: var(--font-sans);
-  border: 2px solid var(--color-primary);
-  flex-shrink: 0;
-  cursor: pointer;
-  transition: none;
-  gap: 8px;
-  text-decoration: none;
-
-  &:hover:not(:active):not(:disabled) {
-    background-color: var(--color-primary-hover);
-    border-color: var(--color-primary-hover);
-  }
-
-  &:focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-  }
-
-  &:active {
-    background-color: var(--color-muted);
-    color: var(--color-muted-foreground);
-    fill: currentColor;
-    border-color: var(--color-muted);
-  }
-
-  // pointer-events не гасим: нативный disabled и так не пускает клик, а так
-  // на кнопку можно навести тултип «почему недоступна».
-  &:disabled {
-    background-color: var(--color-muted);
-    color: var(--color-muted-foreground);
-    fill: currentColor;
-    border-color: var(--color-muted);
-    cursor: default;
-    user-select: none;
-  }
-
-  &--outline {
-    background-color: transparent;
-    color: var(--color-foreground);
-    fill: currentColor;
-    border: 2px solid var(--color-foreground);
-
-    &:hover:not(:active):not(:disabled) {
-      background-color: var(--color-secondary);
-      border-color: var(--color-foreground);
-      color: var(--color-foreground);
-      fill: currentColor;
-    }
-
-    &:disabled {
-      background-color: transparent;
-    }
-  }
-
-  &--link {
-    border: none;
-    background-color: transparent;
-    color: var(--color-foreground);
-    fill: currentColor;
-    border-radius: 0;
-    padding: 0;
-
-    &:hover:not(:active):not(:disabled) {
-      background-color: transparent;
-      text-decoration: underline;
-    }
-
-    &:active,
-    &:disabled {
-      background-color: transparent;
-    }
-  }
-
-  &--loading {
-    position: relative;
-  }
-
-  &__label {
-    display: flex;
-    align-items: center;
-    gap: inherit;
-    opacity: 0;
-  }
-
-  &__spinner {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    pointer-events: none;
-  }
-
-  // 12/16 и 16/24 у sm и lg сняты со старого макета и в шкалу --text-* не попадают.
-  &--sm {
-    padding: 5px 12px;
-    font-size: 12px;
-    line-height: 16px;
-  }
-
-  &--lg {
-    padding: 12px 24px;
-    font-size: 16px;
-    line-height: 24px;
-  }
-
-  &--full-width {
-    width: 100%;
-    justify-content: center;
-  }
-
-  svg {
-    flex-shrink: 0;
-  }
-}
-
-.button__icon--spin {
-  animation: button-spin 0.8s linear infinite;
-}
-
-@keyframes button-spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .button__icon--spin {
-    animation: none;
-  }
-}
+.button {
+  box-sizing: border-box;
+  width: fit-content;
+  display: flex;
+  align-items: center;
+  padding: 8px 18px;
+  border-radius: 30px;
+  font-size: var(--text-sm);
+  line-height: var(--text-sm--line-height);
+  background-color: var(--color-primary);
+  color: var(--color-primary-foreground);
+  fill: var(--color-primary-foreground);
+  font-weight: bold;
+  font-family: var(--font-sans);
+  border: 2px solid var(--color-primary);
+  flex-shrink: 0;
+  cursor: pointer;
+  transition: none;
+  gap: 8px;
+  text-decoration: none;
+
+  &:hover:not(:active):not(:disabled) {
+    background-color: var(--color-primary-hover);
+    border-color: var(--color-primary-hover);
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  &:active {
+    background-color: var(--color-muted);
+    color: var(--color-muted-foreground);
+    fill: currentColor;
+    border-color: var(--color-muted);
+  }
+
+  // pointer-events не гасим: нативный disabled и так не пускает клик, а так
+  // на кнопку можно навести тултип «почему недоступна».
+  &:disabled {
+    background-color: var(--color-muted);
+    color: var(--color-muted-foreground);
+    fill: currentColor;
+    border-color: var(--color-muted);
+    cursor: default;
+    user-select: none;
+  }
+
+  &--outline {
+    background-color: transparent;
+    color: var(--color-foreground);
+    fill: currentColor;
+    border: 2px solid var(--color-foreground);
+
+    &:hover:not(:active):not(:disabled) {
+      background-color: transparent;
+      border-color: var(--color-foreground);
+      color: var(--color-foreground);
+      fill: currentColor;
+    }
+
+    &:disabled {
+      background-color: transparent;
+    }
+  }
+
+  &--link {
+    border: none;
+    background-color: transparent;
+    color: var(--color-foreground);
+    fill: currentColor;
+    border-radius: 0;
+    padding: 0;
+
+    &:hover:not(:active):not(:disabled) {
+      background-color: transparent;
+    }
+
+    &:active,
+    &:disabled {
+      background-color: transparent;
+    }
+  }
+
+  &--loading {
+    position: relative;
+  }
+
+  &__label {
+    display: flex;
+    align-items: center;
+    gap: inherit;
+    opacity: 0;
+  }
+
+  &__spinner {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+  }
+
+  // 12/16 и 16/24 у sm и lg сняты со старого макета и в шкалу --text-* не попадают.
+  &--sm {
+    padding: 5px 12px;
+    font-size: 12px;
+    line-height: 16px;
+  }
+
+  &--lg {
+    padding: 12px 24px;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  &--full-width {
+    width: 100%;
+    justify-content: center;
+  }
+
+  svg {
+    flex-shrink: 0;
+  }
+}
+
+.button__icon--spin {
+  animation: button-spin 0.8s linear infinite;
+}
+
+@keyframes button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .button__icon--spin {
+    animation: none;
+  }
+}

package/dist/components/checkbox/checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.cjs","names":["forwardRef","useFieldControl","useId","useRef","useCallback","cn","when"],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport { useFieldControl } from '@/components/field/field-context';\nimport { cn, when } from '@/lib/cn';\nimport './checkbox.scss';\n\nexport interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: ReactNode;\n  /** Красная рамка. Внутри `Field` состоянием ошибки распоряжается он. */\n  error?: boolean;\n  /** «Выбрать все»: IDL `indeterminate`, React его атрибутом не прокидывает. */\n  indeterminate?: boolean;\n  /**\n   * false — `pointer-events: none` на input (`checkbox__input--no-events`).\n   * Клик по лейблу по-прежнему переключает.\n   */\n  clickable?: boolean;\n}\n\nconst assignRef = (\n  ref: Ref<HTMLInputElement> | null,\n  node: HTMLInputElement | null,\n) => {\n  if (typeof ref === 'function') {\n    ref(node);\n    return;\n  }\n\n  if (ref) ref.current = node;\n};\n\nconst mergeDescribedBy = (\n  fromField: string | undefined,\n  fromProps: string | undefined,\n) => {\n  const value = [fromField, fromProps].filter(part => Boolean(part)).join(' ');\n  return value || undefined;\n};\n\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  function CheckboxInput(\n    {\n      className,\n      id,\n      label,\n      error,\n      disabled,\n      clickable = true,\n      indeterminate = false,\n      checked,\n      onChange,\n      ...props\n    },\n    ref,\n  ) {\n    const field = useFieldControl();\n    const reportValue = field?.reportValue;\n    const autoId = useId();\n    const inputId = field?.id ?? id ?? autoId;\n    const inputRef = useRef<HTMLInputElement>(null);\n    const isInvalid = Boolean(error) || Boolean(field?.invalid);\n\n    const setRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        assignRef(ref, node);\n      },\n      [ref],\n    );\n\n    useEffect(() => {\n      if (inputRef.current) inputRef.current.indeterminate = indeterminate;\n    }, [indeterminate]);\n\n    // Field ждёт строку: отдаём то же, что ушло бы в FormData — 'on' или пусто.\n    useEffect(() => {\n      const node = inputRef.current;\n      if (node) reportValue?.(node.checked ? 'on' : '');\n    }, [checked, reportValue]);\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (checked === undefined) {\n        reportValue?.(event.target.checked ? 'on' : '');\n      }\n      onChange?.(event);\n    };\n\n    const describedBy = field\n      ? mergeDescribedBy(field.describedBy, props['aria-describedby'])\n      : undefined;\n\n    const fieldAttrs: InputHTMLAttributes<HTMLInputElement> = {};\n\n    if (field?.required) {\n      fieldAttrs.required = true;\n      fieldAttrs['aria-required'] = true;\n    }\n\n    if (isInvalid) fieldAttrs['aria-invalid'] = true;\n    if (describedBy) fieldAttrs['aria-describedby'] = describedBy;\n    if (field?.errorId) fieldAttrs['aria-errormessage'] = field.errorId;\n\n    return (\n      <div className={cn('checkbox', className)}>\n        <input\n          {...props}\n          ref={setRef}\n          type=\"checkbox\"\n          id={inputId}\n          disabled={disabled}\n          {...(checked !== undefined ? { checked } : {})}\n          onChange={handleChange}\n          className={cn(\n            'checkbox__input',\n            when(!clickable, 'checkbox__input--no-events'),\n          )}\n          {...fieldAttrs}\n        />\n        {label ? (\n          <label className=\"checkbox__label\" htmlFor={inputId}>\n            {label}\n          </label>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;AA6BA,MAAM,aACJ,KACA,SACG;CACH,IAAI,OAAO,QAAQ,YAAY;EAC7B,IAAI,IAAI;EACR;CACF;CAEA,IAAI,KAAK,IAAI,UAAU;AACzB;AAEA,MAAM,oBACJ,WACA,cACG;CAEH,OADc,CAAC,WAAW,SAAS,CAAC,CAAC,QAAO,SAAQ,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK,GAC7D,KAAK,KAAA;AAClB;AAEA,MAAa,iBAAA,GAAgBA,MAAAA,WAAAA,CAC3B,SAAS,cACP,EACE,WACA,IACA,OACA,OACA,UACA,YAAY,MACZ,gBAAgB,OAChB,SACA,UACA,GAAG,SAEL,KACA;CACA,MAAM,QAAQC,sBAAAA,gBAAgB;CAC9B,MAAM,cAAc,OAAO;CAC3B,MAAM,UAAA,GAASC,MAAAA,MAAAA,CAAM;CACrB,MAAM,UAAU,OAAO,MAAM,MAAM;CACnC,MAAM,YAAA,GAAWC,MAAAA,OAAAA,CAAyB,IAAI;CAC9C,MAAM,YAAY,QAAQ,KAAK,KAAK,QAAQ,OAAO,OAAO;CAE1D,MAAM,UAAA,GAASC,MAAAA,YAAAA,EACZ,SAAkC;EACjC,SAAS,UAAU;EACnB,UAAU,KAAK,IAAI;CACrB,GACA,CAAC,GAAG,CACN;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,SAAS,SAAS,SAAS,QAAQ,gBAAgB;CACzD,GAAG,CAAC,aAAa,CAAC;CAGlB,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,OAAO,SAAS;EACtB,IAAI,MAAM,cAAc,KAAK,UAAU,OAAO,EAAE;CAClD,GAAG,CAAC,SAAS,WAAW,CAAC;CAEzB,MAAM,gBAAgB,UAAyC;EAC7D,IAAI,YAAY,KAAA,GACd,cAAc,MAAM,OAAO,UAAU,OAAO,EAAE;EAEhD,WAAW,KAAK;CAClB;CAEA,MAAM,cAAc,QAChB,iBAAiB,MAAM,aAAa,MAAM,mBAAmB,IAC7D,KAAA;CAEJ,MAAM,aAAoD,CAAC;CAE3D,IAAI,OAAO,UAAU;EACnB,WAAW,WAAW;EACtB,WAAW,mBAAmB;CAChC;CAEA,IAAI,WAAW,WAAW,kBAAkB;CAC5C,IAAI,aAAa,WAAW,sBAAsB;CAClD,IAAI,OAAO,SAAS,WAAW,uBAAuB,MAAM;CAE5D,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAWC,WAAAA,GAAG,YAAY,SAAS;EAAxC,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GACE,GAAI;GACJ,KAAK;GACL,MAAK;GACL,IAAI;GACM;GACV,GAAK,YAAY,KAAA,IAAY,EAAE,QAAQ,IAAI,CAAC;GAC5C,UAAU;GACV,WAAWA,WAAAA,GACT,mBACAC,WAAAA,KAAK,CAAC,WAAW,4BAA4B,CAC/C;GACA,GAAI;EACL,CAAA,GACA,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GAAO,WAAU;GAAkB,SAAS;GACzC,UAAA;EACI,CAAA,IACL,IACD;;AAET,CACF"}
+{"version":3,"file":"checkbox.cjs","names":["forwardRef","useFieldControl","useId","useRef","useCallback","cn","when"],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import {\r\n  forwardRef,\r\n  useCallback,\r\n  useEffect,\r\n  useId,\r\n  useRef,\r\n  type ChangeEvent,\r\n  type InputHTMLAttributes,\r\n  type ReactNode,\r\n  type Ref,\r\n} from 'react';\r\n\r\nimport { useFieldControl } from '@/components/field/field-context';\r\nimport { cn, when } from '@/lib/cn';\r\nimport './checkbox.scss';\r\n\r\nexport interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement> {\r\n  label?: ReactNode;\r\n  /** Красная рамка. Внутри `Field` состоянием ошибки распоряжается он. */\r\n  error?: boolean;\r\n  /** «Выбрать все»: IDL `indeterminate`, React его атрибутом не прокидывает. */\r\n  indeterminate?: boolean;\r\n  /**\r\n   * false — `pointer-events: none` на input (`checkbox__input--no-events`).\r\n   * Клик по лейблу по-прежнему переключает.\r\n   */\r\n  clickable?: boolean;\r\n}\r\n\r\nconst assignRef = (\r\n  ref: Ref<HTMLInputElement> | null,\r\n  node: HTMLInputElement | null,\r\n) => {\r\n  if (typeof ref === 'function') {\r\n    ref(node);\r\n    return;\r\n  }\r\n\r\n  if (ref) ref.current = node;\r\n};\r\n\r\nconst mergeDescribedBy = (\r\n  fromField: string | undefined,\r\n  fromProps: string | undefined,\r\n) => {\r\n  const value = [fromField, fromProps].filter(part => Boolean(part)).join(' ');\r\n  return value || undefined;\r\n};\r\n\r\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\r\n  function CheckboxInput(\r\n    {\r\n      className,\r\n      id,\r\n      label,\r\n      error,\r\n      disabled,\r\n      clickable = true,\r\n      indeterminate = false,\r\n      checked,\r\n      onChange,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) {\r\n    const field = useFieldControl();\r\n    const reportValue = field?.reportValue;\r\n    const autoId = useId();\r\n    const inputId = field?.id ?? id ?? autoId;\r\n    const inputRef = useRef<HTMLInputElement>(null);\r\n    const isInvalid = Boolean(error) || Boolean(field?.invalid);\r\n\r\n    const setRef = useCallback(\r\n      (node: HTMLInputElement | null) => {\r\n        inputRef.current = node;\r\n        assignRef(ref, node);\r\n      },\r\n      [ref],\r\n    );\r\n\r\n    useEffect(() => {\r\n      if (inputRef.current) inputRef.current.indeterminate = indeterminate;\r\n    }, [indeterminate]);\r\n\r\n    // Field ждёт строку: отдаём то же, что ушло бы в FormData — 'on' или пусто.\r\n    useEffect(() => {\r\n      const node = inputRef.current;\r\n      if (node) reportValue?.(node.checked ? 'on' : '');\r\n    }, [checked, reportValue]);\r\n\r\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\r\n      if (checked === undefined) {\r\n        reportValue?.(event.target.checked ? 'on' : '');\r\n      }\r\n      onChange?.(event);\r\n    };\r\n\r\n    const describedBy = field\r\n      ? mergeDescribedBy(field.describedBy, props['aria-describedby'])\r\n      : undefined;\r\n\r\n    const fieldAttrs: InputHTMLAttributes<HTMLInputElement> = {};\r\n\r\n    if (field?.required) {\r\n      fieldAttrs.required = true;\r\n      fieldAttrs['aria-required'] = true;\r\n    }\r\n\r\n    if (isInvalid) fieldAttrs['aria-invalid'] = true;\r\n    if (describedBy) fieldAttrs['aria-describedby'] = describedBy;\r\n    if (field?.errorId) fieldAttrs['aria-errormessage'] = field.errorId;\r\n\r\n    return (\r\n      <div className={cn('checkbox', className)}>\r\n        <input\r\n          {...props}\r\n          ref={setRef}\r\n          type=\"checkbox\"\r\n          id={inputId}\r\n          disabled={disabled}\r\n          {...(checked !== undefined ? { checked } : {})}\r\n          onChange={handleChange}\r\n          className={cn(\r\n            'checkbox__input',\r\n            when(!clickable, 'checkbox__input--no-events'),\r\n          )}\r\n          {...fieldAttrs}\r\n        />\r\n        {label ? (\r\n          <label className=\"checkbox__label\" htmlFor={inputId}>\r\n            {label}\r\n          </label>\r\n        ) : null}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n"],"mappings":";;;;;;AA6BA,MAAM,aACJ,KACA,SACG;CACH,IAAI,OAAO,QAAQ,YAAY;EAC7B,IAAI,IAAI;EACR;CACF;CAEA,IAAI,KAAK,IAAI,UAAU;AACzB;AAEA,MAAM,oBACJ,WACA,cACG;CAEH,OADc,CAAC,WAAW,SAAS,CAAC,CAAC,QAAO,SAAQ,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK,GAC7D,KAAK,KAAA;AAClB;AAEA,MAAa,iBAAA,GAAgBA,MAAAA,WAAAA,CAC3B,SAAS,cACP,EACE,WACA,IACA,OACA,OACA,UACA,YAAY,MACZ,gBAAgB,OAChB,SACA,UACA,GAAG,SAEL,KACA;CACA,MAAM,QAAQC,sBAAAA,gBAAgB;CAC9B,MAAM,cAAc,OAAO;CAC3B,MAAM,UAAA,GAASC,MAAAA,MAAAA,CAAM;CACrB,MAAM,UAAU,OAAO,MAAM,MAAM;CACnC,MAAM,YAAA,GAAWC,MAAAA,OAAAA,CAAyB,IAAI;CAC9C,MAAM,YAAY,QAAQ,KAAK,KAAK,QAAQ,OAAO,OAAO;CAE1D,MAAM,UAAA,GAASC,MAAAA,YAAAA,EACZ,SAAkC;EACjC,SAAS,UAAU;EACnB,UAAU,KAAK,IAAI;CACrB,GACA,CAAC,GAAG,CACN;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,IAAI,SAAS,SAAS,SAAS,QAAQ,gBAAgB;CACzD,GAAG,CAAC,aAAa,CAAC;CAGlB,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,OAAO,SAAS;EACtB,IAAI,MAAM,cAAc,KAAK,UAAU,OAAO,EAAE;CAClD,GAAG,CAAC,SAAS,WAAW,CAAC;CAEzB,MAAM,gBAAgB,UAAyC;EAC7D,IAAI,YAAY,KAAA,GACd,cAAc,MAAM,OAAO,UAAU,OAAO,EAAE;EAEhD,WAAW,KAAK;CAClB;CAEA,MAAM,cAAc,QAChB,iBAAiB,MAAM,aAAa,MAAM,mBAAmB,IAC7D,KAAA;CAEJ,MAAM,aAAoD,CAAC;CAE3D,IAAI,OAAO,UAAU;EACnB,WAAW,WAAW;EACtB,WAAW,mBAAmB;CAChC;CAEA,IAAI,WAAW,WAAW,kBAAkB;CAC5C,IAAI,aAAa,WAAW,sBAAsB;CAClD,IAAI,OAAO,SAAS,WAAW,uBAAuB,MAAM;CAE5D,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAWC,WAAAA,GAAG,YAAY,SAAS;EAAxC,UAAA,CACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GACE,GAAI;GACJ,KAAK;GACL,MAAK;GACL,IAAI;GACM;GACV,GAAK,YAAY,KAAA,IAAY,EAAE,QAAQ,IAAI,CAAC;GAC5C,UAAU;GACV,WAAWA,WAAAA,GACT,mBACAC,WAAAA,KAAK,CAAC,WAAW,4BAA4B,CAC/C;GACA,GAAI;EACL,CAAA,GACA,QACC,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;GAAO,WAAU;GAAkB,SAAS;GACzC,UAAA;EACI,CAAA,IACL,IACD;;AAET,CACF"}

package/dist/components/checkbox/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":[],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport { useFieldControl } from '@/components/field/field-context';\nimport { cn, when } from '@/lib/cn';\nimport './checkbox.scss';\n\nexport interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label?: ReactNode;\n  /** Красная рамка. Внутри `Field` состоянием ошибки распоряжается он. */\n  error?: boolean;\n  /** «Выбрать все»: IDL `indeterminate`, React его атрибутом не прокидывает. */\n  indeterminate?: boolean;\n  /**\n   * false — `pointer-events: none` на input (`checkbox__input--no-events`).\n   * Клик по лейблу по-прежнему переключает.\n   */\n  clickable?: boolean;\n}\n\nconst assignRef = (\n  ref: Ref<HTMLInputElement> | null,\n  node: HTMLInputElement | null,\n) => {\n  if (typeof ref === 'function') {\n    ref(node);\n    return;\n  }\n\n  if (ref) ref.current = node;\n};\n\nconst mergeDescribedBy = (\n  fromField: string | undefined,\n  fromProps: string | undefined,\n) => {\n  const value = [fromField, fromProps].filter(part => Boolean(part)).join(' ');\n  return value || undefined;\n};\n\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\n  function CheckboxInput(\n    {\n      className,\n      id,\n      label,\n      error,\n      disabled,\n      clickable = true,\n      indeterminate = false,\n      checked,\n      onChange,\n      ...props\n    },\n    ref,\n  ) {\n    const field = useFieldControl();\n    const reportValue = field?.reportValue;\n    const autoId = useId();\n    const inputId = field?.id ?? id ?? autoId;\n    const inputRef = useRef<HTMLInputElement>(null);\n    const isInvalid = Boolean(error) || Boolean(field?.invalid);\n\n    const setRef = useCallback(\n      (node: HTMLInputElement | null) => {\n        inputRef.current = node;\n        assignRef(ref, node);\n      },\n      [ref],\n    );\n\n    useEffect(() => {\n      if (inputRef.current) inputRef.current.indeterminate = indeterminate;\n    }, [indeterminate]);\n\n    // Field ждёт строку: отдаём то же, что ушло бы в FormData — 'on' или пусто.\n    useEffect(() => {\n      const node = inputRef.current;\n      if (node) reportValue?.(node.checked ? 'on' : '');\n    }, [checked, reportValue]);\n\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n      if (checked === undefined) {\n        reportValue?.(event.target.checked ? 'on' : '');\n      }\n      onChange?.(event);\n    };\n\n    const describedBy = field\n      ? mergeDescribedBy(field.describedBy, props['aria-describedby'])\n      : undefined;\n\n    const fieldAttrs: InputHTMLAttributes<HTMLInputElement> = {};\n\n    if (field?.required) {\n      fieldAttrs.required = true;\n      fieldAttrs['aria-required'] = true;\n    }\n\n    if (isInvalid) fieldAttrs['aria-invalid'] = true;\n    if (describedBy) fieldAttrs['aria-describedby'] = describedBy;\n    if (field?.errorId) fieldAttrs['aria-errormessage'] = field.errorId;\n\n    return (\n      <div className={cn('checkbox', className)}>\n        <input\n          {...props}\n          ref={setRef}\n          type=\"checkbox\"\n          id={inputId}\n          disabled={disabled}\n          {...(checked !== undefined ? { checked } : {})}\n          onChange={handleChange}\n          className={cn(\n            'checkbox__input',\n            when(!clickable, 'checkbox__input--no-events'),\n          )}\n          {...fieldAttrs}\n        />\n        {label ? (\n          <label className=\"checkbox__label\" htmlFor={inputId}>\n            {label}\n          </label>\n        ) : null}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;AA6BA,MAAM,aACJ,KACA,SACG;CACH,IAAI,OAAO,QAAQ,YAAY;EAC7B,IAAI,IAAI;EACR;CACF;CAEA,IAAI,KAAK,IAAI,UAAU;AACzB;AAEA,MAAM,oBACJ,WACA,cACG;CAEH,OADc,CAAC,WAAW,SAAS,CAAC,CAAC,QAAO,SAAQ,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK,GAC7D,KAAK,KAAA;AAClB;AAEA,MAAa,gBAAgB,WAC3B,SAAS,cACP,EACE,WACA,IACA,OACA,OACA,UACA,YAAY,MACZ,gBAAgB,OAChB,SACA,UACA,GAAG,SAEL,KACA;CACA,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,cAAc,OAAO;CAC3B,MAAM,SAAS,MAAM;CACrB,MAAM,UAAU,OAAO,MAAM,MAAM;CACnC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,QAAQ,KAAK,KAAK,QAAQ,OAAO,OAAO;CAE1D,MAAM,SAAS,aACZ,SAAkC;EACjC,SAAS,UAAU;EACnB,UAAU,KAAK,IAAI;CACrB,GACA,CAAC,GAAG,CACN;CAEA,gBAAgB;EACd,IAAI,SAAS,SAAS,SAAS,QAAQ,gBAAgB;CACzD,GAAG,CAAC,aAAa,CAAC;CAGlB,gBAAgB;EACd,MAAM,OAAO,SAAS;EACtB,IAAI,MAAM,cAAc,KAAK,UAAU,OAAO,EAAE;CAClD,GAAG,CAAC,SAAS,WAAW,CAAC;CAEzB,MAAM,gBAAgB,UAAyC;EAC7D,IAAI,YAAY,KAAA,GACd,cAAc,MAAM,OAAO,UAAU,OAAO,EAAE;EAEhD,WAAW,KAAK;CAClB;CAEA,MAAM,cAAc,QAChB,iBAAiB,MAAM,aAAa,MAAM,mBAAmB,IAC7D,KAAA;CAEJ,MAAM,aAAoD,CAAC;CAE3D,IAAI,OAAO,UAAU;EACnB,WAAW,WAAW;EACtB,WAAW,mBAAmB;CAChC;CAEA,IAAI,WAAW,WAAW,kBAAkB;CAC5C,IAAI,aAAa,WAAW,sBAAsB;CAClD,IAAI,OAAO,SAAS,WAAW,uBAAuB,MAAM;CAE5D,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,SAAS;EAAxC,UAAA,CACE,oBAAC,SAAD;GACE,GAAI;GACJ,KAAK;GACL,MAAK;GACL,IAAI;GACM;GACV,GAAK,YAAY,KAAA,IAAY,EAAE,QAAQ,IAAI,CAAC;GAC5C,UAAU;GACV,WAAW,GACT,mBACA,KAAK,CAAC,WAAW,4BAA4B,CAC/C;GACA,GAAI;EACL,CAAA,GACA,QACC,oBAAC,SAAD;GAAO,WAAU;GAAkB,SAAS;GACzC,UAAA;EACI,CAAA,IACL,IACD;;AAET,CACF"}
+{"version":3,"file":"checkbox.js","names":[],"sources":["../../../src/components/checkbox/checkbox.tsx"],"sourcesContent":["import {\r\n  forwardRef,\r\n  useCallback,\r\n  useEffect,\r\n  useId,\r\n  useRef,\r\n  type ChangeEvent,\r\n  type InputHTMLAttributes,\r\n  type ReactNode,\r\n  type Ref,\r\n} from 'react';\r\n\r\nimport { useFieldControl } from '@/components/field/field-context';\r\nimport { cn, when } from '@/lib/cn';\r\nimport './checkbox.scss';\r\n\r\nexport interface CheckboxInputProps extends InputHTMLAttributes<HTMLInputElement> {\r\n  label?: ReactNode;\r\n  /** Красная рамка. Внутри `Field` состоянием ошибки распоряжается он. */\r\n  error?: boolean;\r\n  /** «Выбрать все»: IDL `indeterminate`, React его атрибутом не прокидывает. */\r\n  indeterminate?: boolean;\r\n  /**\r\n   * false — `pointer-events: none` на input (`checkbox__input--no-events`).\r\n   * Клик по лейблу по-прежнему переключает.\r\n   */\r\n  clickable?: boolean;\r\n}\r\n\r\nconst assignRef = (\r\n  ref: Ref<HTMLInputElement> | null,\r\n  node: HTMLInputElement | null,\r\n) => {\r\n  if (typeof ref === 'function') {\r\n    ref(node);\r\n    return;\r\n  }\r\n\r\n  if (ref) ref.current = node;\r\n};\r\n\r\nconst mergeDescribedBy = (\r\n  fromField: string | undefined,\r\n  fromProps: string | undefined,\r\n) => {\r\n  const value = [fromField, fromProps].filter(part => Boolean(part)).join(' ');\r\n  return value || undefined;\r\n};\r\n\r\nexport const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(\r\n  function CheckboxInput(\r\n    {\r\n      className,\r\n      id,\r\n      label,\r\n      error,\r\n      disabled,\r\n      clickable = true,\r\n      indeterminate = false,\r\n      checked,\r\n      onChange,\r\n      ...props\r\n    },\r\n    ref,\r\n  ) {\r\n    const field = useFieldControl();\r\n    const reportValue = field?.reportValue;\r\n    const autoId = useId();\r\n    const inputId = field?.id ?? id ?? autoId;\r\n    const inputRef = useRef<HTMLInputElement>(null);\r\n    const isInvalid = Boolean(error) || Boolean(field?.invalid);\r\n\r\n    const setRef = useCallback(\r\n      (node: HTMLInputElement | null) => {\r\n        inputRef.current = node;\r\n        assignRef(ref, node);\r\n      },\r\n      [ref],\r\n    );\r\n\r\n    useEffect(() => {\r\n      if (inputRef.current) inputRef.current.indeterminate = indeterminate;\r\n    }, [indeterminate]);\r\n\r\n    // Field ждёт строку: отдаём то же, что ушло бы в FormData — 'on' или пусто.\r\n    useEffect(() => {\r\n      const node = inputRef.current;\r\n      if (node) reportValue?.(node.checked ? 'on' : '');\r\n    }, [checked, reportValue]);\r\n\r\n    const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\r\n      if (checked === undefined) {\r\n        reportValue?.(event.target.checked ? 'on' : '');\r\n      }\r\n      onChange?.(event);\r\n    };\r\n\r\n    const describedBy = field\r\n      ? mergeDescribedBy(field.describedBy, props['aria-describedby'])\r\n      : undefined;\r\n\r\n    const fieldAttrs: InputHTMLAttributes<HTMLInputElement> = {};\r\n\r\n    if (field?.required) {\r\n      fieldAttrs.required = true;\r\n      fieldAttrs['aria-required'] = true;\r\n    }\r\n\r\n    if (isInvalid) fieldAttrs['aria-invalid'] = true;\r\n    if (describedBy) fieldAttrs['aria-describedby'] = describedBy;\r\n    if (field?.errorId) fieldAttrs['aria-errormessage'] = field.errorId;\r\n\r\n    return (\r\n      <div className={cn('checkbox', className)}>\r\n        <input\r\n          {...props}\r\n          ref={setRef}\r\n          type=\"checkbox\"\r\n          id={inputId}\r\n          disabled={disabled}\r\n          {...(checked !== undefined ? { checked } : {})}\r\n          onChange={handleChange}\r\n          className={cn(\r\n            'checkbox__input',\r\n            when(!clickable, 'checkbox__input--no-events'),\r\n          )}\r\n          {...fieldAttrs}\r\n        />\r\n        {label ? (\r\n          <label className=\"checkbox__label\" htmlFor={inputId}>\r\n            {label}\r\n          </label>\r\n        ) : null}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n"],"mappings":";;;;;;AA6BA,MAAM,aACJ,KACA,SACG;CACH,IAAI,OAAO,QAAQ,YAAY;EAC7B,IAAI,IAAI;EACR;CACF;CAEA,IAAI,KAAK,IAAI,UAAU;AACzB;AAEA,MAAM,oBACJ,WACA,cACG;CAEH,OADc,CAAC,WAAW,SAAS,CAAC,CAAC,QAAO,SAAQ,QAAQ,IAAI,CAAC,CAAC,CAAC,KAAK,GAC7D,KAAK,KAAA;AAClB;AAEA,MAAa,gBAAgB,WAC3B,SAAS,cACP,EACE,WACA,IACA,OACA,OACA,UACA,YAAY,MACZ,gBAAgB,OAChB,SACA,UACA,GAAG,SAEL,KACA;CACA,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,cAAc,OAAO;CAC3B,MAAM,SAAS,MAAM;CACrB,MAAM,UAAU,OAAO,MAAM,MAAM;CACnC,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,QAAQ,KAAK,KAAK,QAAQ,OAAO,OAAO;CAE1D,MAAM,SAAS,aACZ,SAAkC;EACjC,SAAS,UAAU;EACnB,UAAU,KAAK,IAAI;CACrB,GACA,CAAC,GAAG,CACN;CAEA,gBAAgB;EACd,IAAI,SAAS,SAAS,SAAS,QAAQ,gBAAgB;CACzD,GAAG,CAAC,aAAa,CAAC;CAGlB,gBAAgB;EACd,MAAM,OAAO,SAAS;EACtB,IAAI,MAAM,cAAc,KAAK,UAAU,OAAO,EAAE;CAClD,GAAG,CAAC,SAAS,WAAW,CAAC;CAEzB,MAAM,gBAAgB,UAAyC;EAC7D,IAAI,YAAY,KAAA,GACd,cAAc,MAAM,OAAO,UAAU,OAAO,EAAE;EAEhD,WAAW,KAAK;CAClB;CAEA,MAAM,cAAc,QAChB,iBAAiB,MAAM,aAAa,MAAM,mBAAmB,IAC7D,KAAA;CAEJ,MAAM,aAAoD,CAAC;CAE3D,IAAI,OAAO,UAAU;EACnB,WAAW,WAAW;EACtB,WAAW,mBAAmB;CAChC;CAEA,IAAI,WAAW,WAAW,kBAAkB;CAC5C,IAAI,aAAa,WAAW,sBAAsB;CAClD,IAAI,OAAO,SAAS,WAAW,uBAAuB,MAAM;CAE5D,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,YAAY,SAAS;EAAxC,UAAA,CACE,oBAAC,SAAD;GACE,GAAI;GACJ,KAAK;GACL,MAAK;GACL,IAAI;GACM;GACV,GAAK,YAAY,KAAA,IAAY,EAAE,QAAQ,IAAI,CAAC;GAC5C,UAAU;GACV,WAAW,GACT,mBACA,KAAK,CAAC,WAAW,4BAA4B,CAC/C;GACA,GAAI;EACL,CAAA,GACA,QACC,oBAAC,SAAD;GAAO,WAAU;GAAkB,SAAS;GACzC,UAAA;EACI,CAAA,IACL,IACD;;AAET,CACF"}

package/dist/components/checkbox/checkbox.scss

@@ -1,137 +1,137 @@
-// data-uri не читает custom properties, поэтому галочка — маска: цвет берёт background-color.
-@function get-check-icon() {
-  @return url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20px' height='20px'%3E%3Cpath d='M15.71,6.29c-0.39-0.39-1.02-0.39-1.41,0c-0.31,0.31-3.76,3.76-5.29,5.29c-0.81-0.81-2.01-2.01-2.29-2.29c-0.39-0.39-1.02-0.39-1.41,0c-0.39,0.39-0.39,1.02,0,1.41c0.39,0.39,2.61,2.61,3,3c0.39,0.39,1.02,0.39,1.41,0c0.39-0.39,5.61-5.61,6-6C16.1,7.32,16.1,6.68,15.71,6.29z'/%3E%3C/svg%3E");
-}
-
-.checkbox {
-  display: flex;
-  align-items: flex-start;
-}
-
-.checkbox__label {
-  font-size: var(--text-sm);
-  line-height: var(--text-sm--line-height);
-  display: inline-block;
-  vertical-align: top;
-  padding-left: var(--space-1);
-  user-select: none;
-  cursor: pointer;
-}
-
-.checkbox__input {
-  --active: var(--color-primary);
-  --active-inner: var(--color-primary-foreground);
-  --border: var(--color-muted);
-  --border-hover: var(--color-foreground);
-  --background: var(--color-background);
-  --disabled: var(--color-muted);
-  --disabled-inner: var(--color-muted);
-  box-sizing: border-box;
-  appearance: none;
-  width: 20px;
-  height: 20px;
-  outline: none;
-  display: inline-block;
-  vertical-align: top;
-  position: relative;
-  margin: 0;
-  flex-shrink: 0;
-  border: 1px solid var(--bc, var(--border));
-  background: var(--b, var(--background));
-  border-radius: var(--radius-sm);
-  transition:
-    background 0.3s,
-    border-color 0.3s,
-    box-shadow 0.2s;
-  cursor: pointer;
-
-  &::after {
-    content: '';
-    display: block;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    position: absolute;
-    transition: opacity var(--d-o, 0.2s);
-    opacity: var(--o, 0);
-    background-color: var(--active-inner);
-    -webkit-mask: get-check-icon() center / 20px 20px no-repeat;
-    mask: get-check-icon() center / 20px 20px no-repeat;
-  }
-
-  // Красным красит состояние ошибки, а не сам по себе required: моментом ошибки
-  // внутри Field распоряжается он. Рамка держится и под курсором — ховер только
-  // добавляет к ней толщину.
-  &[aria-invalid='true']:not(:disabled) {
-    border-color: var(--color-destructive);
-  }
-
-  &:checked {
-    --b: var(--active);
-    --bc: var(--active);
-    --o: 1;
-  }
-
-  &:indeterminate {
-    --b: var(--active);
-    --bc: var(--active);
-    --o: 1;
-
-    &::after {
-      -webkit-mask: none;
-      mask: none;
-      top: 9px;
-      right: 4px;
-      bottom: 9px;
-      left: 4px;
-    }
-  }
-
-  &:hover:not(:checked):not(:disabled) {
-    border-width: 2px;
-    --bc: var(--active);
-  }
-
-  &:focus {
-    border-color: var(--border-hover);
-    border-width: 2px;
-  }
-
-  &:focus:not(:focus-visible) {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-  }
-
-  &:disabled {
-    --b: var(--disabled);
-    border: 1px solid var(--disabled);
-    cursor: not-allowed;
-    opacity: 1;
-
-    &:checked {
-      --b: var(--disabled-inner);
-      --active-inner: var(--color-muted-foreground);
-    }
-
-    & + .checkbox__label {
-      color: var(--color-muted-foreground);
-      cursor: not-allowed;
-    }
-  }
-
-  &--no-events {
-    pointer-events: none;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .checkbox__input,
-  .checkbox__input::after {
-    transition: none;
-  }
-}
+// data-uri не читает custom properties, поэтому галочка — маска: цвет берёт background-color.
+@function get-check-icon() {
+  @return url("data:image/svg+xml,%3Csvg fill='%23fff' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' width='20px' height='20px'%3E%3Cpath d='M15.71,6.29c-0.39-0.39-1.02-0.39-1.41,0c-0.31,0.31-3.76,3.76-5.29,5.29c-0.81-0.81-2.01-2.01-2.29-2.29c-0.39-0.39-1.02-0.39-1.41,0c-0.39,0.39-0.39,1.02,0,1.41c0.39,0.39,2.61,2.61,3,3c0.39,0.39,1.02,0.39,1.41,0c0.39-0.39,5.61-5.61,6-6C16.1,7.32,16.1,6.68,15.71,6.29z'/%3E%3C/svg%3E");
+}
+
+.checkbox {
+  display: flex;
+  align-items: flex-start;
+}
+
+.checkbox__label {
+  font-size: var(--text-sm);
+  line-height: var(--text-sm--line-height);
+  display: inline-block;
+  vertical-align: top;
+  padding-left: var(--space-1);
+  user-select: none;
+  cursor: pointer;
+}
+
+.checkbox__input {
+  --active: var(--color-primary);
+  --active-inner: var(--color-primary-foreground);
+  --border: var(--color-muted);
+  --border-hover: var(--color-foreground);
+  --background: var(--color-background);
+  --disabled: var(--color-muted);
+  --disabled-inner: var(--color-muted);
+  box-sizing: border-box;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  outline: none;
+  display: inline-block;
+  vertical-align: top;
+  position: relative;
+  margin: 0;
+  flex-shrink: 0;
+  border: 1px solid var(--bc, var(--border));
+  background: var(--b, var(--background));
+  border-radius: var(--radius-sm);
+  transition:
+    background 0.3s,
+    border-color 0.3s,
+    box-shadow 0.2s;
+  cursor: pointer;
+
+  &::after {
+    content: '';
+    display: block;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    position: absolute;
+    transition: opacity var(--d-o, 0.2s);
+    opacity: var(--o, 0);
+    background-color: var(--active-inner);
+    -webkit-mask: get-check-icon() center / 20px 20px no-repeat;
+    mask: get-check-icon() center / 20px 20px no-repeat;
+  }
+
+  // Красным красит состояние ошибки, а не сам по себе required: моментом ошибки
+  // внутри Field распоряжается он. Рамка держится и под курсором — ховер только
+  // добавляет к ней толщину.
+  &[aria-invalid='true']:not(:disabled) {
+    border-color: var(--color-destructive);
+  }
+
+  &:checked {
+    --b: var(--active);
+    --bc: var(--active);
+    --o: 1;
+  }
+
+  &:indeterminate {
+    --b: var(--active);
+    --bc: var(--active);
+    --o: 1;
+
+    &::after {
+      -webkit-mask: none;
+      mask: none;
+      top: 9px;
+      right: 4px;
+      bottom: 9px;
+      left: 4px;
+    }
+  }
+
+  &:hover:not(:checked):not(:disabled) {
+    border-width: 2px;
+    --bc: var(--active);
+  }
+
+  &:focus {
+    border-color: var(--border-hover);
+    border-width: 2px;
+  }
+
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+  }
+
+  &:disabled {
+    --b: var(--disabled);
+    border: 1px solid var(--disabled);
+    cursor: not-allowed;
+    opacity: 1;
+
+    &:checked {
+      --b: var(--disabled-inner);
+      --active-inner: var(--color-muted-foreground);
+    }
+
+    & + .checkbox__label {
+      color: var(--color-muted-foreground);
+      cursor: not-allowed;
+    }
+  }
+
+  &--no-events {
+    pointer-events: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .checkbox__input,
+  .checkbox__input::after {
+    transition: none;
+  }
+}

package/dist/components/field/field-context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"field-context.cjs","names":["createContext","useContext"],"sources":["../../../src/components/field/field-context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface FieldControlContext {\n  id: string;\n  /** Для контролов без собственного лейбла: группа ссылается на него aria-labelledby. */\n  labelId?: string;\n  invalid: boolean;\n  required: boolean;\n  describedBy?: string;\n  errorId?: string;\n  /** Контрол сообщает показанное значение: текст поля или 'on' у отмеченного чекбокса. */\n  reportValue?: (value: string) => void;\n}\n\nconst FieldControlReactContext = createContext<FieldControlContext | null>(\n  null,\n);\n\nexport const FieldControlProvider = FieldControlReactContext.Provider;\n\nexport const useFieldControl = (): FieldControlContext | null =>\n  useContext(FieldControlReactContext);\n"],"mappings":";;AAcA,MAAM,4BAAA,GAA2BA,MAAAA,cAAAA,CAC/B,IACF;AAEA,MAAa,uBAAuB,yBAAyB;AAE7D,MAAa,yBAAA,GACXC,MAAAA,WAAAA,CAAW,wBAAwB"}
+{"version":3,"file":"field-context.cjs","names":["createContext","useContext"],"sources":["../../../src/components/field/field-context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\r\n\r\nexport interface FieldControlContext {\r\n  id: string;\r\n  /** Для контролов без собственного лейбла: группа ссылается на него aria-labelledby. */\r\n  labelId?: string;\r\n  invalid: boolean;\r\n  required: boolean;\r\n  describedBy?: string;\r\n  errorId?: string;\r\n  /** Контрол сообщает показанное значение: текст поля или 'on' у отмеченного чекбокса. */\r\n  reportValue?: (value: string) => void;\r\n}\r\n\r\nconst FieldControlReactContext = createContext<FieldControlContext | null>(\r\n  null,\r\n);\r\n\r\nexport const FieldControlProvider = FieldControlReactContext.Provider;\r\n\r\nexport const useFieldControl = (): FieldControlContext | null =>\r\n  useContext(FieldControlReactContext);\r\n"],"mappings":";;AAcA,MAAM,4BAAA,GAA2BA,MAAAA,cAAAA,CAC/B,IACF;AAEA,MAAa,uBAAuB,yBAAyB;AAE7D,MAAa,yBAAA,GACXC,MAAAA,WAAAA,CAAW,wBAAwB"}

package/dist/components/field/field-context.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-context.js","names":[],"sources":["../../../src/components/field/field-context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nexport interface FieldControlContext {\n  id: string;\n  /** Для контролов без собственного лейбла: группа ссылается на него aria-labelledby. */\n  labelId?: string;\n  invalid: boolean;\n  required: boolean;\n  describedBy?: string;\n  errorId?: string;\n  /** Контрол сообщает показанное значение: текст поля или 'on' у отмеченного чекбокса. */\n  reportValue?: (value: string) => void;\n}\n\nconst FieldControlReactContext = createContext<FieldControlContext | null>(\n  null,\n);\n\nexport const FieldControlProvider = FieldControlReactContext.Provider;\n\nexport const useFieldControl = (): FieldControlContext | null =>\n  useContext(FieldControlReactContext);\n"],"mappings":";;AAcA,MAAM,2BAA2B,cAC/B,IACF;AAEA,MAAa,uBAAuB,yBAAyB;AAE7D,MAAa,wBACX,WAAW,wBAAwB"}
+{"version":3,"file":"field-context.js","names":[],"sources":["../../../src/components/field/field-context.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\r\n\r\nexport interface FieldControlContext {\r\n  id: string;\r\n  /** Для контролов без собственного лейбла: группа ссылается на него aria-labelledby. */\r\n  labelId?: string;\r\n  invalid: boolean;\r\n  required: boolean;\r\n  describedBy?: string;\r\n  errorId?: string;\r\n  /** Контрол сообщает показанное значение: текст поля или 'on' у отмеченного чекбокса. */\r\n  reportValue?: (value: string) => void;\r\n}\r\n\r\nconst FieldControlReactContext = createContext<FieldControlContext | null>(\r\n  null,\r\n);\r\n\r\nexport const FieldControlProvider = FieldControlReactContext.Provider;\r\n\r\nexport const useFieldControl = (): FieldControlContext | null =>\r\n  useContext(FieldControlReactContext);\r\n"],"mappings":";;AAcA,MAAM,2BAA2B,cAC/B,IACF;AAEA,MAAa,uBAAuB,yBAAyB;AAE7D,MAAa,wBACX,WAAW,wBAAwB"}