@de-kit/st-ui 0.1.8 → 0.1.9

package/dist/components/button/button.scss

@@ -1,147 +1,201 @@
-.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;
-  }
-}
+@use '../../styles/mixins.scss' as mixins;
+
+.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, :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, :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, :disabled) {
+      background-color: transparent;
+    }
+
+    &:active,
+    &:disabled {
+      background-color: transparent;
+    }
+  }
+
+  &--image {
+    --size: 60px;
+    background-color: var(--color-secondary);
+    border: none;
+    padding: 0;
+    border-radius: var(--radius-sm);
+    width: var(--size);
+    height: var(--size);
+    position: relative;
+
+    @include mixins.min-width(md) {
+      --size: 100px;
+    }
+
+    &:hover:not(:active, :disabled) {
+      background-color: var(--color-secondary);
+    }
+
+    &__icon {
+      --size-icon: 32px;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: 1;
+      display: flex;
+      width: var(--size-icon);
+      height: var(--size-icon);
+      border-radius: 50%;
+      background-color: var(--color-primary);
+      color: var(--color-primary-foreground);
+      justify-content: center;
+      align-items: center;
+      transform: translate(-50%, -50%);
+      pointer-events: none;
+
+      @include mixins.min-width(md) {
+        --size-icon: 40px;
+      }
+    }
+  }
+
+  &--icon {
+    --size: 40px;
+    width: var(--size);
+    height: var(--size);
+    border-radius: 50%;
+    justify-content: center;
+    padding: 0;
+  }
+
+  // 12/16 и 16/24 у sm и lg сняты со старого макета и в шкалу --text-* не попадают.
+  &--sm {
+    padding: 5px 12px;
+    font-size: 12px;
+    line-height: 16px;
+    --size: 30px;
+  }
+
+  &--lg {
+    --size: 52px;
+    padding: 12px 24px;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
+  &--full-width {
+    width: 100%;
+    justify-content: center;
+  }
+
+  &--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;
+  }
+
+  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 {\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"}
+{"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"}

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

@@ -1 +1 @@
-{"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"}
+{"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"}