ost-components 0.0.1

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 (76) hide show
  1. package/README.md +136 -0
  2. package/dist/896f1dcf256d0c8af555.svg +3 -0
  3. package/dist/components/Button/Button.d.ts +16 -0
  4. package/dist/components/Button/Button.d.ts.map +1 -0
  5. package/dist/components/Button/index.css +165 -0
  6. package/dist/components/Button/index.d.ts +2 -0
  7. package/dist/components/Button/index.d.ts.map +1 -0
  8. package/dist/components/Button/index.js +1 -0
  9. package/dist/components/FAQ/FAQ.d.ts +20 -0
  10. package/dist/components/FAQ/FAQ.d.ts.map +1 -0
  11. package/dist/components/FAQ/index.css +101 -0
  12. package/dist/components/FAQ/index.d.ts +2 -0
  13. package/dist/components/FAQ/index.d.ts.map +1 -0
  14. package/dist/components/FAQ/index.js +1 -0
  15. package/dist/components/Footer/Footer.d.ts +12 -0
  16. package/dist/components/Footer/Footer.d.ts.map +1 -0
  17. package/dist/components/Footer/index.css +411 -0
  18. package/dist/components/Footer/index.d.ts +2 -0
  19. package/dist/components/Footer/index.d.ts.map +1 -0
  20. package/dist/components/Footer/index.js +1 -0
  21. package/dist/components/Header/Header.d.ts +21 -0
  22. package/dist/components/Header/Header.d.ts.map +1 -0
  23. package/dist/components/Header/Modal.d.ts +1 -0
  24. package/dist/components/Header/Modal.d.ts.map +1 -0
  25. package/dist/components/Header/index.css +321 -0
  26. package/dist/components/Header/index.d.ts +3 -0
  27. package/dist/components/Header/index.d.ts.map +1 -0
  28. package/dist/components/Header/index.js +1 -0
  29. package/dist/components/Heading/Heading.d.ts +11 -0
  30. package/dist/components/Heading/Heading.d.ts.map +1 -0
  31. package/dist/components/Heading/index.css +46 -0
  32. package/dist/components/Heading/index.d.ts +3 -0
  33. package/dist/components/Heading/index.d.ts.map +1 -0
  34. package/dist/components/Heading/index.js +1 -0
  35. package/dist/components/HotelCard/HotelCard.d.ts +18 -0
  36. package/dist/components/HotelCard/HotelCard.d.ts.map +1 -0
  37. package/dist/components/HotelCard/index.css +150 -0
  38. package/dist/components/HotelCard/index.d.ts +3 -0
  39. package/dist/components/HotelCard/index.d.ts.map +1 -0
  40. package/dist/components/HotelCard/index.js +1 -0
  41. package/dist/components/Text/Text.d.ts +12 -0
  42. package/dist/components/Text/Text.d.ts.map +1 -0
  43. package/dist/components/Text/index.css +65 -0
  44. package/dist/components/Text/index.d.ts +3 -0
  45. package/dist/components/Text/index.d.ts.map +1 -0
  46. package/dist/components/Text/index.js +1 -0
  47. package/dist/components/index.d.ts +10 -0
  48. package/dist/components/index.d.ts.map +1 -0
  49. package/dist/index.css +741 -0
  50. package/dist/index.d.ts +3 -0
  51. package/dist/index.d.ts.map +1 -0
  52. package/dist/index.js +1 -0
  53. package/dist/store/fluidMode.d.ts +37 -0
  54. package/dist/store/fluidMode.d.ts.map +1 -0
  55. package/dist/store/fluidMode.js +1 -0
  56. package/dist/storybook/decorator.d.ts +3 -0
  57. package/dist/storybook/decorator.d.ts.map +1 -0
  58. package/dist/themes/layout.d.ts +3 -0
  59. package/dist/themes/layout.d.ts.map +1 -0
  60. package/dist/themes/ostrovok/index.css +8 -0
  61. package/dist/themes/ostrovok/index.d.ts +9 -0
  62. package/dist/themes/ostrovok/index.d.ts.map +1 -0
  63. package/dist/themes/ostrovok/index.js +1 -0
  64. package/dist/themes/ostrovok/ostrovok.d.ts +64 -0
  65. package/dist/themes/ostrovok/ostrovok.d.ts.map +1 -0
  66. package/dist/themes/ostrovok/ostrovok.js +1 -0
  67. package/dist/utils/classes.d.ts +2 -0
  68. package/dist/utils/classes.d.ts.map +1 -0
  69. package/dist/utils/index.d.ts +3 -0
  70. package/dist/utils/index.d.ts.map +1 -0
  71. package/dist/utils/index.js +1 -0
  72. package/dist/utils/isValidEmail.d.ts +2 -0
  73. package/dist/utils/isValidEmail.d.ts.map +1 -0
  74. package/dist/utils/throttle.d.ts +2 -0
  75. package/dist/utils/throttle.d.ts.map +1 -0
  76. package/package.json +147 -0
package/README.md ADDED
@@ -0,0 +1,136 @@
1
+ # Ostrovok components
2
+
3
+ Островковые и рейтхочные компоненты.
4
+ Storybook https://ostrovok-frontend.s3.amazonaws.com/mrktg/components/index.html
5
+
6
+ ## Содержание
7
+ - [Подключение компонентов](#подключение-компонентов)
8
+ - [Компоненты Ostrovok (`components/*`)](#компоненты-ostrovok-components)
9
+ - [Импорт стилей](#импорт-стилей)
10
+ - [Fluid mode](#fluid-mode)
11
+ - [Публикация пакета](#публикация-пакета)
12
+
13
+ ## Подключение компонентов
14
+ ## Компоненты Ostrovok (`components/*`)
15
+ Для компонентов Ostrovok необходимо подключить провайдер темы и импортировать CSS файлы.
16
+
17
+ #### Пример использования в Astro
18
+ Layout.astro:
19
+ ```astro
20
+ ---
21
+ import { ThemeProvider } from "ostrovok-components/themes";
22
+ import ostrovokTheme from "ostrovok-components/themes/ostrovok";
23
+ import "ostrovok-components/index.css"; // Импорт всех стилей
24
+ ---
25
+
26
+ <html lang="en">
27
+ <ThemeProvider theme={ostrovokTheme}>
28
+ ...
29
+ </ThemeProvider>
30
+ </html>
31
+ ```
32
+
33
+ Header.astro:
34
+ ```astro
35
+ ---
36
+ import "ostrovok-components/components/Header/index.css";
37
+ import Header from "ostrovok-components/components/Header";
38
+ ---
39
+
40
+ <Header
41
+ client:load
42
+ rightButton={{ text: "Кнопка" }}
43
+ menu={[
44
+ { title: "Пункт 1" },
45
+ {
46
+ title: "Пункт 2",
47
+ onClick: () => {
48
+ alert('test');
49
+ },
50
+ },
51
+ ]}
52
+ />
53
+ ```
54
+
55
+ **ThemeProvider** подключает шрифты и набор CSS-переменных из переданной темы.
56
+
57
+ ### Пример использования в Astro
58
+
59
+ Layout.astro:
60
+ ```astro
61
+ ---
62
+ import { ThemeProvider } from "ostrovok-components/themes/ratehawk";
63
+ import "ostrovok-components/index.css"; // Импорт всех стилей, опционально
64
+ ---
65
+
66
+ <html lang="en">
67
+ <ThemeProvider>
68
+ ...
69
+ </ThemeProvider>
70
+ </html>
71
+ ```
72
+
73
+ Header.astro:
74
+ ```astro
75
+ ---
76
+ // Можно импортировать не все стили, а только нужные
77
+ import "ostrovok-components/components/Header/index.css";
78
+ import Header from "ostrovok-components/components/Header";
79
+ ---
80
+
81
+ <Header
82
+ client:load
83
+ menu={[
84
+ { title: "Пункт 1" },
85
+ {
86
+ title: "Пункт 2",
87
+ onClick: () => {
88
+ alert('test');
89
+ },
90
+ },
91
+ ]}
92
+ />
93
+ ```
94
+
95
+ **ThemeProvider** автоматически подключает шрифты Aeonik и ABCGravity. Можно убрать отдельные font-face из проекта.
96
+
97
+ ## Импорт стилей
98
+
99
+ ### Вариант 1: Импорт всех стилей
100
+ ```javascript
101
+ import "ostrovok-components/index.css";
102
+ ```
103
+
104
+ ### Вариант 2: Импорт стилей отдельных компонентов
105
+ ```javascript
106
+ import "ostrovok-components/components/Button/index.css";
107
+ ```
108
+
109
+ **Важно для SSR:** Импорт CSS файлов необходим для избежания CLS (Cumulative Layout Shift) при серверном рендеринге.
110
+ CSS будет включен в `<head>` при SSR, и стили применятся мгновенно.
111
+
112
+ **Оптимизация:** Не беспокойтесь о дублирующихся импортах! Astro (Vite) автоматически дедуплицирует CSS — если вы
113
+ импортируете один и тот же файл стилей в нескольких компонентах, он будет включен в финальную сборку только один раз.
114
+ Поэтому безопасно импортировать стили компонента в каждом `.astro` файле, где он используется.
115
+
116
+ ## Fluid mode
117
+ Fluid mode привязывает размер компонентов к ширине окна браузера, что улучшает адаптивность интерфейса.
118
+ Чтобы включить fluid mode, передайте проп `fluidMode` в провайдер темы. Также можно передать аналогичный проп в каждый
119
+ из компонентов, чтобы переопределить глобальную настройку. Оценить работу fluid mode можно в Storybook, тумблер
120
+ находится рядом с верхним меню.
121
+
122
+ ## Публикация пакета
123
+ Auth token лежит в [bitwarden](https://bitwarden.emergingtravel.com/#/vault?action=view&itemId=8d539336-49ca-448a-a5d9-b36b0086b0ad).
124
+ Для получения доступов необходимо письмо в it@ с руководителем в копии. Для установки токена нужно создать файл .npmrc
125
+ в корне проекта с содержимым:
126
+
127
+ ```
128
+ //registry.npmjs.org/:_authToken=<auth token>
129
+ ```
130
+
131
+ <auth token> соответственно заменить на токен из bitwarden.
132
+
133
+ Затем выполнить команду:
134
+ ```
135
+ npm run publish:patch
136
+ ```
package/dist/896f1dcf256d0c8af555.svg ADDED
@@ -0,0 +1,3 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="57" height="79" fill="none">
2
+ <path fill="#ACEF81" d="M.383 0h56.616v76.989a1.975 1.975 0 0 1-2.432 1.92l-25.57-6.092c-.201-.047-.41-.047-.611 0L2.816 78.91a1.975 1.975 0 0 1-2.433-1.921V0Z"/>
3
+ </svg>
package/dist/components/Button/Button.d.ts ADDED
@@ -0,0 +1,16 @@
1
+ import type React from 'react';
2
+ interface ButtonProps {
3
+ className?: string;
4
+ children: React.ReactNode;
5
+ dimension?: 'xs' | 's' | 'm' | 'l';
6
+ theme?: 'primary' | 'secondary';
7
+ variant?: 'green' | 'blue' | 'white' | 'black';
8
+ onClick?: () => void;
9
+ disabled?: boolean;
10
+ type?: 'button' | 'submit' | 'reset';
11
+ url?: string;
12
+ fluidMode?: boolean;
13
+ }
14
+ declare const Button: React.FC<ButtonProps>;
15
+ export default Button;
16
+ //# sourceMappingURL=Button.d.ts.map
package/dist/components/Button/Button.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,UAAU,WAAW;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;IACnC,KAAK,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAChC,OAAO,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,OAAO,CAAC;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqCjC,CAAC;AAEF,eAAe,MAAM,CAAC"}
package/dist/components/Button/index.css ADDED
@@ -0,0 +1,165 @@
1
+ .layout-module__fluidLayout--BNE04[class] {
2
+ font-size: 1rem;
3
+ }
4
+
5
+ .layout-module__staticLayout--x_6dR[class] {
6
+ font-size: 1px;
7
+ }
8
+
9
+ .Button-module__text--fXCJk {
10
+ font-size: var(--button-font-size, 16em);
11
+ white-space: nowrap;
12
+ }
13
+
14
+ .Button-module__root--JgX5G {
15
+ all: unset;
16
+ display: inline-flex;
17
+ border-radius: 60em;
18
+ font-family: var(--font-family);
19
+ font-weight: 500;
20
+ cursor: pointer;
21
+ box-sizing: border-box;
22
+ line-height: var(--button-line-height, 1.5);
23
+ color: var(--button-color);
24
+ background-color: var(--button-bg);
25
+ align-items: center;
26
+ justify-content: center;
27
+ -webkit-font-smoothing: antialiased;
28
+ -moz-osx-font-smoothing: grayscale;
29
+ }
30
+
31
+ @media (hover: hover) and (pointer: fine) {
32
+ .Button-module__root--JgX5G:hover {
33
+ --button-bg: var(--button-bg-hover);
34
+ }
35
+
36
+ .Button-module__root--JgX5G:active {
37
+ --button-bg: var(--button-bg-active);
38
+ }
39
+ }
40
+
41
+ .Button-module__root--JgX5G:disabled {
42
+ cursor: default;
43
+ --button-bg: var(--button-bg-disabled);
44
+ --button-color: var(--button-color-disabled);
45
+ }
46
+
47
+ .Button-module__root--JgX5G:disabled .Button-module__text--fXCJk {
48
+ opacity: var(--disabled-text-opacity, 0.4);
49
+ }
50
+
51
+ .Button-module__xs--QiLu6 {
52
+ padding: 5em 16em 7em;
53
+ }
54
+
55
+ .Button-module__s--BPnwl {
56
+ padding: 7em 18em 9em;
57
+ }
58
+
59
+ .Button-module__m--Za884 {
60
+ padding: 10em 22em 12em;
61
+ --button-line-height: 1.444;
62
+ --button-font-size: 18em;
63
+ }
64
+
65
+ .Button-module__l--ERI3t {
66
+ padding: 13em 28em 15em;
67
+ --button-line-height: 1.333;
68
+ --button-font-size: 24em;
69
+ }
70
+
71
+ .Button-module__primary--cdc4_.Button-module__green--alhqL {
72
+ --button-color: var(--primary-green-button-text);
73
+ --button-bg: var(--primary-green-button-bg);
74
+ --button-bg-hover: var(--primary-green-button-bg-hover);
75
+ --button-bg-active: var(--primary-green-button-bg-active);
76
+ --button-bg-disabled: var(--primary-green-button-bg-disabled);
77
+ }
78
+
79
+ .Button-module__primary--cdc4_.Button-module__blue--NCGMs {
80
+ --button-color: var(--primary-blue-button-text);
81
+ --button-bg: var(--primary-blue-button-bg);
82
+ --button-bg-hover: var(--primary-blue-button-bg-hover);
83
+ --button-bg-active: var(--primary-blue-button-bg-active);
84
+ --button-bg-disabled: var(--primary-blue-button-bg-disabled);
85
+ --button-color-disabled: var(--primary-blue-button-color-disabled);
86
+ }
87
+
88
+ .Button-module__primary--cdc4_.Button-module__white--zRU5W {
89
+ --button-color: var(--primary-white-button-text);
90
+ --button-bg: var(--primary-white-button-bg);
91
+ --button-bg-hover: var(--primary-white-button-bg-hover);
92
+ --button-bg-active: var(--primary-white-button-bg-active);
93
+ --button-bg-disabled: var(--primary-white-button-bg-disabled);
94
+ }
95
+
96
+ .Button-module__primary--cdc4_.Button-module__black--Yi4Rj {
97
+ --button-color: var(--primary-black-button-text);
98
+ --button-bg: var(--primary-black-button-bg);
99
+ --button-bg-hover: var(--primary-black-button-bg-hover);
100
+ --button-bg-active: var(--primary-black-button-bg-active);
101
+ --button-bg-disabled: var(--primary-black-button-bg-disabled);
102
+ --button-color-disabled: var(--primary-black-button-color-disabled);
103
+ }
104
+
105
+ .Button-module__secondary--pJ5lp {
106
+ box-shadow: inset 0 0 0 var(--secondary-border-width, 1em)
107
+ var(--secondary-border-color);
108
+ }
109
+
110
+ .Button-module__secondary--pJ5lp.Button-module__l--ERI3t {
111
+ --secondary-border-width: 2em;
112
+ }
113
+
114
+ .Button-module__secondary--pJ5lp.Button-module__green--alhqL {
115
+ --disabled-text-opacity: 0.6;
116
+ --button-color: var(--secondary-green-button-text);
117
+ --secondary-border-color: var(--secondary-green-button-border);
118
+ --secondary-button-border-hover: var(--secondary-green-button-border-hover);
119
+ --secondary-button-color-hover: var(--secondary-green-button-color-hover);
120
+ --secondary-button-border-active: var(
121
+ --secondary-green-button-border-active
122
+ );
123
+ --secondary-button-color-active: var(--secondary-green-button-color-active);
124
+ --secondary-button-color-disabled: var(
125
+ --secondary-green-button-color-disabled
126
+ );
127
+ --secondary-button-border-disabled: var(
128
+ --secondary-green-button-border-disabled
129
+ );
130
+ }
131
+
132
+ .Button-module__secondary--pJ5lp.Button-module__blue--NCGMs {
133
+ --button-color: var(--secondary-blue-button-text);
134
+ --secondary-border-color: var(--secondary-blue-button-border);
135
+ --secondary-button-border-hover: var(--secondary-blue-button-border-hover);
136
+ --secondary-button-color-hover: var(--secondary-blue-button-color-hover);
137
+ --secondary-button-border-active: var(
138
+ --secondary-blue-button-border-active
139
+ );
140
+ --secondary-button-color-active: var(--secondary-blue-button-color-active);
141
+ --secondary-button-color-disabled: var(
142
+ --secondary-blue-button-color-disabled
143
+ );
144
+ --secondary-button-border-disabled: var(
145
+ --secondary-blue-button-border-disabled
146
+ );
147
+ }
148
+
149
+ @media (hover: hover) and (pointer: fine) {
150
+ .Button-module__secondary--pJ5lp:hover {
151
+ --button-color: var(--secondary-button-color-hover);
152
+ --secondary-border-color: var(--secondary-button-border-hover);
153
+ }
154
+
155
+ .Button-module__secondary--pJ5lp:active {
156
+ --button-color: var(--secondary-button-color-active);
157
+ --secondary-border-color: var(--secondary-button-border-active);
158
+ }
159
+ }
160
+
161
+ .Button-module__secondary--pJ5lp:disabled {
162
+ --button-color: var(--secondary-button-color-disabled);
163
+ --secondary-border-color: var(--secondary-button-border-disabled);
164
+ }
165
+
package/dist/components/Button/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default } from './Button';
2
+ //# sourceMappingURL=index.d.ts.map
package/dist/components/Button/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}
package/dist/components/Button/index.js ADDED
@@ -0,0 +1 @@
1
+ import*as t from"react/jsx-runtime";var o={39:(t,o,n)=>{n.d(o,{L:()=>e});const e=(...t)=>t.filter(Boolean).join(" ")},58:(t,o,n)=>{n.d(o,{N:()=>a,u:()=>r}),n(178);var e=n(992);const a=({theme:t,children:o,fluidMode:n=!1})=>{fluidModeState.state=n;const e=[];Object.entries(t).forEach(([t,o])=>{e.push(`--${t}: ${o}`)});const a=`\n @font-face {\n font-family: 'FactorA';\n src: url('https://of.worldota.net/fonts/factora/Factor-A-Regular-Web.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'FactorA';\n src: url('https://of.worldota.net/fonts/factora/Factor-A-Medium-Web.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: 'Spoof';\n src: url('https://of.worldota.net/fonts/spoof/Spoof-Regular.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'Spoof';\n src: url('https://of.worldota.net/fonts/spoof/Spoof-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n }\n\n :root {\n ${e.join(";\n")};\n }\n ${n?fluidLayoutCss:staticLayoutCss};\n `;return _jsxs(_Fragment,{children:[_jsx("style",{dangerouslySetInnerHTML:{__html:a}}),o]})},r=t=>("boolean"==typeof t?t:e.b.state)?"layout-module__fluidLayout--BNE04":"layout-module__staticLayout--x_6dR"},178:(o,n,e)=>{var a,r;o.exports=(a={jsx:()=>t.jsx},r={},e.d(r,a),r)},992:(t,o,n)=>{n.d(o,{b:()=>e}),globalThis.__fluidModeState||(globalThis.__fluidModeState={state:!1});const e=globalThis.__fluidModeState}},n={};function e(t){var a=n[t];if(void 0!==a)return a.exports;var r=n[t]={exports:{}};return o[t](r,r.exports,e),r.exports}e.d=(t,o)=>{for(var n in o)e.o(o,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:o[n]})},e.o=(t,o)=>Object.prototype.hasOwnProperty.call(t,o);var a=e(178),r=e(58),l=e(39);const f={text:"Button-module__text--fXCJk",root:"Button-module__root--JgX5G",xs:"Button-module__xs--QiLu6",s:"Button-module__s--BPnwl",m:"Button-module__m--Za884",l:"Button-module__l--ERI3t",primary:"Button-module__primary--cdc4_",green:"Button-module__green--alhqL",blue:"Button-module__blue--NCGMs",white:"Button-module__white--zRU5W",black:"Button-module__black--Yi4Rj",secondary:"Button-module__secondary--pJ5lp"},s=({className:t,children:o,dimension:n="s",fluidMode:e,theme:s="primary",onClick:u,disabled:d=!1,type:i="button",variant:c="green",url:m})=>{const _=(0,r.u)(e),p=f[n]||"",y=f[s]||"",h=f[c]||"",w=m?"a":"button",b=m?{target:"_blank",href:m}:{type:i};return(0,a.jsx)(w,{...b,onClick:u,className:(0,l.L)(f.root,t,p,y,h,_),disabled:d,children:(0,a.jsx)("span",{className:f.text,children:o})})};export{s as default};
package/dist/components/FAQ/FAQ.d.ts ADDED
@@ -0,0 +1,20 @@
1
+ import type React from 'react';
2
+ export interface FAQItem {
3
+ question: string;
4
+ answer: string;
5
+ }
6
+ export interface FAQProps {
7
+ theme?: 'withBorder' | 'withBg';
8
+ className?: string;
9
+ items: FAQItem[];
10
+ allowMultipleOpen?: boolean;
11
+ iconStyle?: 'filled' | 'stroked';
12
+ openIcon?: React.ReactNode;
13
+ closeIcon?: React.ReactNode;
14
+ openBgIcon?: React.ReactNode;
15
+ closeBgIcon?: React.ReactNode;
16
+ fluidMode?: boolean;
17
+ }
18
+ declare const FAQ: React.FC<FAQProps>;
19
+ export default FAQ;
20
+ //# sourceMappingURL=FAQ.d.ts.map
package/dist/components/FAQ/FAQ.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"FAQ.d.ts","sourceRoot":"","sources":["../../../src/components/FAQ/FAQ.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,WAAW,OAAO;IACtB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,YAAY,GAAG,QAAQ,CAAC;IAChC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,GAAG,EAAE,KAAK,CAAC,EAAE,CAAC,QAAQ,CAgF3B,CAAC;AAEF,eAAe,GAAG,CAAC"}
package/dist/components/FAQ/index.css ADDED
@@ -0,0 +1,101 @@
1
+ .layout-module__fluidLayout--BNE04[class] {
2
+ font-size: 1rem;
3
+ }
4
+
5
+ .layout-module__staticLayout--x_6dR[class] {
6
+ font-size: 1px;
7
+ }
8
+
9
+ .FAQ-module__root--XQD00 {
10
+ font-family: var(--font-family);
11
+ display: grid;
12
+ grid-gap: 24em;
13
+ gap: 24em;
14
+ }
15
+
16
+ .FAQ-module__item--MhSbC {
17
+ border-radius: 16em;
18
+ background-color: #fff;
19
+ padding: 24em 32em 32em;
20
+ display: grid;
21
+ grid-gap: 16em;
22
+ gap: 16em;
23
+ }
24
+
25
+ .FAQ-module__question--tbhzI {
26
+ --icon-fill-color: var(--blue80);
27
+ --icon-stroke-color: var(--static-black);
28
+ all: unset;
29
+ width: 100%;
30
+ text-align: left;
31
+ cursor: pointer;
32
+ display: grid;
33
+ grid-template-columns: 1fr auto;
34
+ grid-gap: 16em;
35
+ gap: 16em;
36
+ align-items: center;
37
+ font-weight: 500;
38
+ }
39
+
40
+ .FAQ-module__question--tbhzI:hover {
41
+ --icon-fill-color: var(--blue60);
42
+ --icon-stroke-color: var(--blue80);
43
+ }
44
+
45
+ .FAQ-module__question--tbhzI:active {
46
+ --icon-fill-color: #0a35ad; /* TODO токена нет, потом пересадить */
47
+ --icon-stroke-color: var(--static-black);
48
+ }
49
+
50
+ .FAQ-module__questionText--rAQxb {
51
+ font-family: var(--font-family-typo);
52
+ font-size: 24em;
53
+ }
54
+
55
+ .FAQ-module__iconContainer--FS6za {
56
+ display: flex;
57
+ align-items: center;
58
+ justify-content: center;
59
+ }
60
+
61
+ .FAQ-module__iconContainer--FS6za svg {
62
+ width: 40em;
63
+ height: 40em;
64
+ }
65
+
66
+ .FAQ-module__answer--Gt_RM {
67
+ font-size: 18em;
68
+ line-height: 1.5;
69
+ color: rgba(0, 0, 0, 0.48);
70
+ }
71
+
72
+ .FAQ-module__withBorder--C3IMS .FAQ-module__item--MhSbC {
73
+ border: 2em solid var(--static-grey);
74
+ }
75
+
76
+ .FAQ-module__withBg--ruCY8 {
77
+ background-color: var(--static-grey);
78
+ padding: 20em;
79
+ }
80
+
81
+ @media screen and (max-width: 768px) {
82
+ .FAQ-module__root--XQD00 {
83
+ gap: 16em;
84
+ padding: 20em;
85
+ }
86
+
87
+ .FAQ-module__item--MhSbC {
88
+ padding: 16em 16em 20em;
89
+ }
90
+ }
91
+
92
+ @media screen and (max-width: 360px) {
93
+ .FAQ-module__questionText--rAQxb {
94
+ font-size: 16em;
95
+ }
96
+
97
+ .FAQ-module__answer--Gt_RM {
98
+ font-size: 16em;
99
+ }
100
+ }
101
+
package/dist/components/FAQ/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ export { default } from './FAQ';
2
+ //# sourceMappingURL=index.d.ts.map
package/dist/components/FAQ/index.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/FAQ/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC"}
package/dist/components/FAQ/index.js ADDED
@@ -0,0 +1 @@
1
+ import*as t from"react/jsx-runtime";import*as e from"react";var n={39:(t,e,n)=>{n.d(e,{L:()=>o});const o=(...t)=>t.filter(Boolean).join(" ")},58:(t,e,n)=>{n.d(e,{N:()=>r,u:()=>a}),n(178);var o=n(992);const r=({theme:t,children:e,fluidMode:n=!1})=>{fluidModeState.state=n;const o=[];Object.entries(t).forEach(([t,e])=>{o.push(`--${t}: ${e}`)});const r=`\n @font-face {\n font-family: 'FactorA';\n src: url('https://of.worldota.net/fonts/factora/Factor-A-Regular-Web.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'FactorA';\n src: url('https://of.worldota.net/fonts/factora/Factor-A-Medium-Web.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n }\n \n @font-face {\n font-family: 'Spoof';\n src: url('https://of.worldota.net/fonts/spoof/Spoof-Regular.woff2') format('woff2');\n font-weight: 400;\n font-style: normal;\n font-display: swap;\n }\n\n @font-face {\n font-family: 'Spoof';\n src: url('https://of.worldota.net/fonts/spoof/Spoof-Medium.woff2') format('woff2');\n font-weight: 500;\n font-style: normal;\n font-display: swap;\n }\n\n :root {\n ${o.join(";\n")};\n }\n ${n?fluidLayoutCss:staticLayoutCss};\n `;return _jsxs(_Fragment,{children:[_jsx("style",{dangerouslySetInnerHTML:{__html:r}}),e]})},a=t=>("boolean"==typeof t?t:o.b.state)?"layout-module__fluidLayout--BNE04":"layout-module__staticLayout--x_6dR"},178:(e,n,o)=>{var r,a;e.exports=(r={jsx:()=>t.jsx,jsxs:()=>t.jsxs},a={},o.d(a,r),a)},649:(t,n,o)=>{var r,a;t.exports=(r={createElement:()=>e.createElement,useState:()=>e.useState},a={},o.d(a,r),a)},992:(t,e,n)=>{n.d(e,{b:()=>o}),globalThis.__fluidModeState||(globalThis.__fluidModeState={state:!1});const o=globalThis.__fluidModeState}},o={};function r(t){var e=o[t];if(void 0!==e)return e.exports;var a=o[t]={exports:{}};return n[t](a,a.exports,r),a.exports}r.d=(t,e)=>{for(var n in e)r.o(e,n)&&!r.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:e[n]})},r.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var a,s=r(178),l=r(58),i=r(39),f=r(649);function c(){return c=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)({}).hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},c.apply(null,arguments)}const u=t=>f.createElement("svg",c({xmlns:"http://www.w3.org/2000/svg",width:40,height:40,fill:"none"},t),a||(a=f.createElement("path",{stroke:"var(--icon-stroke-color)",strokeWidth:2,d:"m11.484 11.515 16.97 16.97m-16.97 0 16.97-16.97"})));var d,h;function m(){return m=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)({}).hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},m.apply(null,arguments)}const p=t=>f.createElement("svg",m({xmlns:"http://www.w3.org/2000/svg",width:40,height:40,fill:"none"},t),d||(d=f.createElement("circle",{cx:20,cy:20,r:20,fill:"var(--icon-fill-color)"})),h||(h=f.createElement("path",{fill:"#fff",d:"M12 21.088V19h14.616v2.088z"})));var w;function v(){return v=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)({}).hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},v.apply(null,arguments)}const g=t=>f.createElement("svg",v({xmlns:"http://www.w3.org/2000/svg",width:40,height:40,fill:"none"},t),w||(w=f.createElement("path",{stroke:"var(--icon-stroke-color)",strokeWidth:2,d:"M20 8v24M8 20h24"})));var x,y;function _(){return _=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)({}).hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},_.apply(null,arguments)}const b=t=>f.createElement("svg",_({xmlns:"http://www.w3.org/2000/svg",width:40,height:40,fill:"none"},t),x||(x=f.createElement("circle",{cx:20,cy:20,r:20,fill:"var(--icon-fill-color)"})),y||(y=f.createElement("path",{fill:"#fff",d:"M18.68 25.304v-4.656H14v-2.016h4.68V14h1.968v4.632h4.68v2.016h-4.68v4.656z"}))),j={root:"FAQ-module__root--XQD00",item:"FAQ-module__item--MhSbC",question:"FAQ-module__question--tbhzI",questionText:"FAQ-module__questionText--rAQxb",iconContainer:"FAQ-module__iconContainer--FS6za",answer:"FAQ-module__answer--Gt_RM",withBorder:"FAQ-module__withBorder--C3IMS",withBg:"FAQ-module__withBg--ruCY8"},S=({theme:t="withBg",className:e="",items:n=[],allowMultipleOpen:o=!1,iconStyle:r="filled",openIcon:a,closeIcon:c,openBgIcon:d,closeBgIcon:h,fluidMode:m})=>{const[w,v]=(0,f.useState)(new Set),x=j[t],y=(0,l.u)(m),_=t=>"filled"===r?t?h??(0,s.jsx)(p,{}):d??(0,s.jsx)(b,{}):t?c??(0,s.jsx)(u,{}):a??(0,s.jsx)(g,{});return(0,s.jsx)("div",{className:(0,i.L)(j.root,e,x,y),children:n.map((t,e)=>{const n=w.has(e);return(0,s.jsxs)("div",{className:j.item,children:[(0,s.jsxs)("button",{type:"button",tabIndex:0,className:(0,i.L)(j.question,y,n?j.open:""),onClick:()=>(t=>{v(e=>{const n=new Set(e);return n.has(t)?n.delete(t):(o||n.clear(),n.add(t)),n})})(e),children:[(0,s.jsx)("span",{className:j.questionText,children:t.question}),(0,s.jsx)("span",{className:j.iconContainer,children:_(n)})]}),n&&(0,s.jsx)("div",{className:j.answer,children:t.answer})]},t.question)})})};export{S as default};
package/dist/components/Footer/Footer.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { type HeaderProps } from '@components/Header/index';
2
+ import type React from 'react';
3
+ export interface FooterProps {
4
+ theme?: Theme;
5
+ className?: string;
6
+ menu?: HeaderProps['menu'];
7
+ rightButton?: HeaderProps['rightButton'];
8
+ fluidMode?: boolean;
9
+ }
10
+ declare const Footer: React.FC<FooterProps>;
11
+ export default Footer;
12
+ //# sourceMappingURL=Footer.d.ts.map
package/dist/components/Footer/Footer.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../../src/components/Footer/Footer.tsx"],"names":[],"mappings":"AAAA,OAAe,EAAE,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AAGpE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,WAAW,CAAC,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,QAAA,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CA4EjC,CAAC;AAEF,eAAe,MAAM,CAAC"}