@de-kit/st-ui 0.1.18 → 0.1.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components/form/form.scss +8 -1
  2. package/dist/components/hr/hr.scss +7 -1
  3. package/dist/index.cjs +2 -0
  4. package/dist/index.d.cts +2 -1
  5. package/dist/index.d.ts +2 -1
  6. package/dist/index.js +2 -1
  7. package/dist/lib/hooks/use-media-query.cjs +20 -0
  8. package/dist/lib/hooks/use-media-query.cjs.map +1 -0
  9. package/dist/lib/hooks/use-media-query.d.cts +6 -0
  10. package/dist/lib/hooks/use-media-query.d.ts +6 -0
  11. package/dist/lib/hooks/use-media-query.js +20 -0
  12. package/dist/lib/hooks/use-media-query.js.map +1 -0
  13. package/package.json +3 -2
package/dist/components/form/form.scss CHANGED
@@ -1,9 +1,15 @@
1
+ @use '../../styles/mixins' as Mixins;
2
+
1
3
  .form {
2
4
  display: flex;
3
5
  flex-direction: column;
4
- gap: var(--space-6);
6
+ gap: var(--space-4);
5
7
  width: 100%;
6
8
  margin: 0;
9
+
10
+ @include Mixins.min-width(md) {
11
+ gap: var(--space-6);
12
+ }
7
13
  }
8
14
 
9
15
  .form__buttons {
@@ -11,6 +17,7 @@
11
17
  flex-wrap: wrap;
12
18
  align-items: center;
13
19
  gap: var(--space-2) var(--space-4);
20
+ margin-top: var(--space-2);
14
21
  }
15
22
 
16
23
  .form__consent {
package/dist/components/hr/hr.scss CHANGED
@@ -1,8 +1,14 @@
1
+ @use '../../styles/mixins' as Mixins;
2
+
1
3
  .hr {
2
4
  box-sizing: border-box;
3
5
  width: 100%;
4
6
  height: 1px;
5
- margin: var(--space-12) 0 var(--space-9);
7
+ margin: var(--space-8) 0 var(--space-6);
6
8
  border: none;
7
9
  background-color: var(--color-border);
10
+
11
+ @include Mixins.min-width(md) {
12
+ margin: var(--space-12) 0 var(--space-9);
13
+ }
8
14
  }
package/dist/index.cjs CHANGED
@@ -10,6 +10,7 @@ const require_radio = require("./components/radio/radio.cjs");
10
10
  const require_phone_input = require("./components/phone-input/phone-input.cjs");
11
11
  const require_spinner = require("./components/spinner/spinner.cjs");
12
12
  const require_textarea = require("./components/textarea/textarea.cjs");
13
+ const require_use_media_query = require("./lib/hooks/use-media-query.cjs");
13
14
  require("./styles/vars.scss");
14
15
  exports.Button = require_button.Button;
15
16
  exports.CheckboxInput = require_checkbox.CheckboxInput;
@@ -27,3 +28,4 @@ exports.RadioGroup = require_radio.RadioGroup;
27
28
  exports.RadioInput = require_radio.RadioInput;
28
29
  exports.Spinner = require_spinner.Spinner;
29
30
  exports.TextArea = require_textarea.TextArea;
31
+ exports.useMediaQuery = require_use_media_query.useMediaQuery;
package/dist/index.d.cts CHANGED
@@ -20,4 +20,5 @@ import { Spinner, SpinnerPosition, SpinnerProps } from "./components/spinner/spi
20
20
  import "./components/spinner/index.cjs";
21
21
  import { TextArea, TextAreaProps, TextAreaSize } from "./components/textarea/textarea.cjs";
22
22
  import "./components/textarea/index.cjs";
23
- export { Button, type ButtonAsChildProps, type ButtonComponentProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, DatePicker, type DatePickerProps, Field, type FieldHintPlacement, type FieldProps, Form, FormActions, type FormActionsProps, FormConsent, type FormConsentProps, type FormProps, FormSubmit, HR, type HRProps, Input, type InputProps, type InputSize, PHONE_MASK, PhoneInput, type PhoneInputProps, RadioGroup, type RadioGroupProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps, type TextAreaSize };
23
+ import { useMediaQuery } from "./lib/hooks/use-media-query.cjs";
24
+ export { Button, type ButtonAsChildProps, type ButtonComponentProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, DatePicker, type DatePickerProps, Field, type FieldHintPlacement, type FieldProps, Form, FormActions, type FormActionsProps, FormConsent, type FormConsentProps, type FormProps, FormSubmit, HR, type HRProps, Input, type InputProps, type InputSize, PHONE_MASK, PhoneInput, type PhoneInputProps, RadioGroup, type RadioGroupProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps, type TextAreaSize, useMediaQuery };
package/dist/index.d.ts CHANGED
@@ -20,4 +20,5 @@ import { Spinner, SpinnerPosition, SpinnerProps } from "./components/spinner/spi
20
20
  import "./components/spinner/index.js";
21
21
  import { TextArea, TextAreaProps, TextAreaSize } from "./components/textarea/textarea.js";
22
22
  import "./components/textarea/index.js";
23
- export { Button, type ButtonAsChildProps, type ButtonComponentProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, DatePicker, type DatePickerProps, Field, type FieldHintPlacement, type FieldProps, Form, FormActions, type FormActionsProps, FormConsent, type FormConsentProps, type FormProps, FormSubmit, HR, type HRProps, Input, type InputProps, type InputSize, PHONE_MASK, PhoneInput, type PhoneInputProps, RadioGroup, type RadioGroupProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps, type TextAreaSize };
23
+ import { useMediaQuery } from "./lib/hooks/use-media-query.js";
24
+ export { Button, type ButtonAsChildProps, type ButtonComponentProps, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxInput, type CheckboxInputProps, DatePicker, type DatePickerProps, Field, type FieldHintPlacement, type FieldProps, Form, FormActions, type FormActionsProps, FormConsent, type FormConsentProps, type FormProps, FormSubmit, HR, type HRProps, Input, type InputProps, type InputSize, PHONE_MASK, PhoneInput, type PhoneInputProps, RadioGroup, type RadioGroupProps, RadioInput, type RadioInputProps, Spinner, type SpinnerPosition, type SpinnerProps, TextArea, type TextAreaProps, type TextAreaSize, useMediaQuery };
package/dist/index.js CHANGED
@@ -9,5 +9,6 @@ import { RadioGroup, RadioInput } from "./components/radio/radio.js";
9
9
  import { PHONE_MASK, PhoneInput } from "./components/phone-input/phone-input.js";
10
10
  import { Spinner } from "./components/spinner/spinner.js";
11
11
  import { TextArea } from "./components/textarea/textarea.js";
12
+ import { useMediaQuery } from "./lib/hooks/use-media-query.js";
12
13
  import "./styles/vars.scss";
13
- export { Button, CheckboxInput, DatePicker, Field, Form, FormActions, FormConsent, FormSubmit, HR, Input, PHONE_MASK, PhoneInput, RadioGroup, RadioInput, Spinner, TextArea };
14
+ export { Button, CheckboxInput, DatePicker, Field, Form, FormActions, FormConsent, FormSubmit, HR, Input, PHONE_MASK, PhoneInput, RadioGroup, RadioInput, Spinner, TextArea, useMediaQuery };
package/dist/lib/hooks/use-media-query.cjs ADDED
@@ -0,0 +1,20 @@
1
+ let react = require("react");
2
+ // src/lib/hooks/use-media-query.ts
3
+ /**
4
+ * Подписка на matchMedia. Первое значение берётся сразу, без `undefined`:
5
+ * иначе первый рендер уходит с другим вариантом (например, rows у TextArea).
6
+ */
7
+ const useMediaQuery = (query) => {
8
+ const [matches, setMatches] = (0, react.useState)(() => typeof window !== "undefined" && window.matchMedia(query).matches);
9
+ (0, react.useEffect)(() => {
10
+ const media = window.matchMedia(query);
11
+ const handleChange = () => setMatches(media.matches);
12
+ handleChange();
13
+ media.addEventListener("change", handleChange);
14
+ return () => media.removeEventListener("change", handleChange);
15
+ }, [query]);
16
+ return matches;
17
+ };
18
+ exports.useMediaQuery = useMediaQuery;
19
+
20
+ //# sourceMappingURL=use-media-query.cjs.map
package/dist/lib/hooks/use-media-query.cjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-media-query.cjs","names":["useState"],"sources":["../../../src/lib/hooks/use-media-query.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * Подписка на matchMedia. Первое значение берётся сразу, без `undefined`:\n * иначе первый рендер уходит с другим вариантом (например, rows у TextArea).\n */\nexport const useMediaQuery = (query: string) => {\n const [matches, setMatches] = useState(\n () => typeof window !== 'undefined' && window.matchMedia(query).matches,\n );\n\n useEffect(() => {\n const media = window.matchMedia(query);\n const handleChange = () => setMatches(media.matches);\n\n handleChange();\n media.addEventListener('change', handleChange);\n\n return () => media.removeEventListener('change', handleChange);\n }, [query]);\n\n return matches;\n};\n"],"mappings":";;;;;;AAMA,MAAa,iBAAiB,UAAkB;CAC9C,MAAM,CAAC,SAAS,eAAA,GAAcA,MAAAA,SAAAA,OACtB,OAAO,WAAW,eAAe,OAAO,WAAW,KAAK,CAAC,CAAC,OAClE;CAEA,CAAA,GAAA,MAAA,UAAA,OAAgB;EACd,MAAM,QAAQ,OAAO,WAAW,KAAK;EACrC,MAAM,qBAAqB,WAAW,MAAM,OAAO;EAEnD,aAAa;EACb,MAAM,iBAAiB,UAAU,YAAY;EAE7C,aAAa,MAAM,oBAAoB,UAAU,YAAY;CAC/D,GAAG,CAAC,KAAK,CAAC;CAEV,OAAO;AACT"}
package/dist/lib/hooks/use-media-query.d.cts ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Подписка на matchMedia. Первое значение берётся сразу, без `undefined`:
3
+ * иначе первый рендер уходит с другим вариантом (например, rows у TextArea).
4
+ */
5
+ export declare const useMediaQuery: (query: string) => boolean;
6
+ //# sourceMappingURL=use-media-query.d.cts.map
package/dist/lib/hooks/use-media-query.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ /**
2
+ * Подписка на matchMedia. Первое значение берётся сразу, без `undefined`:
3
+ * иначе первый рендер уходит с другим вариантом (например, rows у TextArea).
4
+ */
5
+ export declare const useMediaQuery: (query: string) => boolean;
6
+ //# sourceMappingURL=use-media-query.d.ts.map
package/dist/lib/hooks/use-media-query.js ADDED
@@ -0,0 +1,20 @@
1
+ import { useEffect, useState } from "react";
2
+ // src/lib/hooks/use-media-query.ts
3
+ /**
4
+ * Подписка на matchMedia. Первое значение берётся сразу, без `undefined`:
5
+ * иначе первый рендер уходит с другим вариантом (например, rows у TextArea).
6
+ */
7
+ const useMediaQuery = (query) => {
8
+ const [matches, setMatches] = useState(() => typeof window !== "undefined" && window.matchMedia(query).matches);
9
+ useEffect(() => {
10
+ const media = window.matchMedia(query);
11
+ const handleChange = () => setMatches(media.matches);
12
+ handleChange();
13
+ media.addEventListener("change", handleChange);
14
+ return () => media.removeEventListener("change", handleChange);
15
+ }, [query]);
16
+ return matches;
17
+ };
18
+ export { useMediaQuery };
19
+
20
+ //# sourceMappingURL=use-media-query.js.map
package/dist/lib/hooks/use-media-query.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"use-media-query.js","names":[],"sources":["../../../src/lib/hooks/use-media-query.ts"],"sourcesContent":["import { useEffect, useState } from 'react';\n\n/**\n * Подписка на matchMedia. Первое значение берётся сразу, без `undefined`:\n * иначе первый рендер уходит с другим вариантом (например, rows у TextArea).\n */\nexport const useMediaQuery = (query: string) => {\n const [matches, setMatches] = useState(\n () => typeof window !== 'undefined' && window.matchMedia(query).matches,\n );\n\n useEffect(() => {\n const media = window.matchMedia(query);\n const handleChange = () => setMatches(media.matches);\n\n handleChange();\n media.addEventListener('change', handleChange);\n\n return () => media.removeEventListener('change', handleChange);\n }, [query]);\n\n return matches;\n};\n"],"mappings":";;;;;;AAMA,MAAa,iBAAiB,UAAkB;CAC9C,MAAM,CAAC,SAAS,cAAc,eACtB,OAAO,WAAW,eAAe,OAAO,WAAW,KAAK,CAAC,CAAC,OAClE;CAEA,gBAAgB;EACd,MAAM,QAAQ,OAAO,WAAW,KAAK;EACrC,MAAM,qBAAqB,WAAW,MAAM,OAAO;EAEnD,aAAa;EACb,MAAM,iBAAiB,UAAU,YAAY;EAE7C,aAAa,MAAM,oBAAoB,UAAU,YAAY;CAC/D,GAAG,CAAC,KAAK,CAAC;CAEV,OAAO;AACT"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@de-kit/st-ui",
3
- "version": "0.1.18",
3
+ "version": "0.1.20",
4
4
  "description": "React-компоненты splittest: глобальный SCSS и токены из основного фронтенда",
5
5
  "license": "UNLICENSED",
6
6
  "repository": {
@@ -33,6 +33,7 @@
33
33
  "./global.scss": "./dist/styles/global.scss",
34
34
  "./vars.scss": "./dist/styles/vars.scss",
35
35
  "./mixins.scss": "./dist/styles/mixins.scss",
36
+ "./typography.scss": "./dist/styles/typography.scss",
36
37
  "./icons": {
37
38
  "import": {
38
39
  "types": "./dist/icons/index.d.ts",
@@ -99,7 +100,7 @@
99
100
  "format:fix": "oxfmt",
100
101
  "test": "vitest run",
101
102
  "test:watch": "vitest",
102
- "check:exports": "publint && attw --pack . --profile node16 --exclude-entrypoints global.scss vars.scss mixins.scss",
103
+ "check:exports": "publint && attw --pack . --profile node16 --exclude-entrypoints global.scss vars.scss mixins.scss typography.scss",
103
104
  "verify": "pnpm run build:icons && pnpm run typecheck && pnpm run lint && pnpm run test && pnpm run build && pnpm run check:exports",
104
105
  "changeset": "changeset",
105
106
  "version": "changeset version",