@tetjana/flowmakers-ds 0.1.0

package/dist/components/Button.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import './Button.css';
+export type ButtonVariant = 'primary' | 'hero' | 'secondary' | 'secondary-large' | 'ghost' | 'ghost-icon';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type ButtonState = 'default' | 'hover' | 'pressed' | 'focused' | 'disabled';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    children?: React.ReactNode;
+    fullWidth?: boolean;
+}
+export declare const Button: React.FC<ButtonProps>;
+export default Button;

package/dist/components/Checkbox.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './Checkbox.css';
+export type CheckboxState = 'idle' | 'clicked' | 'disabled';
+export type CheckboxSelection = 'on' | 'off' | 'mixed';
+export type CheckboxSize = 'small' | 'large';
+export interface CheckboxProps {
+    checked?: boolean;
+    indeterminate?: boolean;
+    onChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    size?: CheckboxSize;
+    label?: string;
+    className?: string;
+}
+export declare const Checkbox: React.FC<CheckboxProps>;
+export default Checkbox;

package/dist/components/Footer.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import './Footer.css';
+export type FooterVariant = 'light' | 'dark';
+export interface FooterLink {
+    label: string;
+    href: string;
+}
+export interface FooterSection {
+    title: string;
+    links: FooterLink[];
+}
+export interface FooterProps {
+    variant?: FooterVariant;
+    headline?: string;
+    ctaLabel?: string;
+    onCtaClick?: () => void;
+    sections?: FooterSection[];
+    copyright?: string;
+    socials?: {
+        twitter?: string;
+        instagram?: string;
+        facebook?: string;
+    };
+    className?: string;
+}
+export declare const Footer: React.FC<FooterProps>;
+export default Footer;

package/dist/components/Header.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './Header.css';
+export type HeaderColor = 'purple' | 'grey';
+export interface HeaderProps {
+    title: string;
+    subtitle?: string;
+    color?: HeaderColor;
+    leftSlot?: React.ReactNode;
+    rightSlot?: React.ReactNode;
+    className?: string;
+}
+export declare const Header: React.FC<HeaderProps>;
+export default Header;

package/dist/components/Input.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './Input.css';
+export type InputState = 'default' | 'hover' | 'focused' | 'filled' | 'error' | 'success';
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    label?: string;
+    placeholder?: string;
+    state?: InputState;
+    errorMessage?: string;
+    successMessage?: string;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+}
+export declare const Input: React.FC<InputProps>;
+export default Input;

package/dist/components/Tag.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import './Tag.css';
+export type TagColor = 'grey' | 'green' | 'yellow' | 'purple' | 'pink';
+export interface TagProps {
+    children: React.ReactNode;
+    color?: TagColor;
+    className?: string;
+}
+export declare const Tag: React.FC<TagProps>;
+export default Tag;

package/dist/components/Toggle.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import './Toggle.css';
+export interface ToggleProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    className?: string;
+}
+export declare const Toggle: React.FC<ToggleProps>;
+export default Toggle;

package/dist/index.cjs.js

@@ -0,0 +1,22 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react");var A={exports:{}},x={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var I;function ee(){if(I)return x;I=1;var l=Symbol.for("react.transitional.element"),c=Symbol.for("react.fragment");function s(n,a,o){var m=null;if(o!==void 0&&(m=""+o),a.key!==void 0&&(m=""+a.key),"key"in a){o={};for(var _ in a)_!=="key"&&(o[_]=a[_])}else o=a;return a=o.ref,{$$typeof:l,type:n,key:m,ref:a!==void 0?a:null,props:o}}return x.Fragment=c,x.jsx=s,x.jsxs=s,x}var j={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var M;function re(){return M||(M=1,process.env.NODE_ENV!=="production"&&function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===Z?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case k:return"Fragment";case U:return"Profiler";case W:return"StrictMode";case G:return"Suspense";case J:return"SuspenseList";case H:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case B:return"Portal";case z:return e.displayName||"Context";case V:return(e._context.displayName||"Context")+".Consumer";case q:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case X:return t=e.displayName||null,t!==null?t:l(e.type)||"Memo";case R:t=e._payload,e=e._init;try{return l(e(t))}catch{}}return null}function c(e){return""+e}function s(e){try{c(e);var t=!1}catch{t=!0}if(t){t=console;var i=t.error,f=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return i.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",f),c(e)}}function n(e){if(e===k)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===R)return"<...>";try{var t=l(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function a(){var e=g.A;return e===null?null:e.getOwner()}function o(){return Error("react-stack-top-frame")}function m(e){if(C.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function _(e,t){function i(){$||($=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}i.isReactWarning=!0,Object.defineProperty(e,"key",{get:i,configurable:!0})}function d(){var e=l(this.type);return Y[e]||(Y[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function p(e,t,i,f,N,w){var u=i.ref;return e={$$typeof:S,type:e,key:t,props:i,_owner:f},(u!==void 0?u:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:d}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:N}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:w}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function b(e,t,i,f,N,w){var u=t.children;if(u!==void 0)if(f)if(Q(u)){for(f=0;f<u.length;f++)v(u[f]);Object.freeze&&Object.freeze(u)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else v(u);if(C.call(t,"key")){u=l(e);var h=Object.keys(t).filter(function(K){return K!=="key"});f=0<h.length?"{key: someKey, "+h.join(": ..., ")+": ...}":"{key: someKey}",D[u+f]||(h=0<h.length?"{"+h.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,f,u,h,u),D[u+f]=!0)}if(u=null,i!==void 0&&(s(i),u=""+i),m(t)&&(s(t.key),u=""+t.key),"key"in t){i={};for(var y in t)y!=="key"&&(i[y]=t[y])}else i=t;return u&&_(i,typeof e=="function"?e.displayName||e.name||"Unknown":e),p(e,u,i,a(),N,w)}function v(e){P(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===R&&(e._payload.status==="fulfilled"?P(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function P(e){return typeof e=="object"&&e!==null&&e.$$typeof===S}var E=O,S=Symbol.for("react.transitional.element"),B=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),W=Symbol.for("react.strict_mode"),U=Symbol.for("react.profiler"),V=Symbol.for("react.consumer"),z=Symbol.for("react.context"),q=Symbol.for("react.forward_ref"),G=Symbol.for("react.suspense"),J=Symbol.for("react.suspense_list"),X=Symbol.for("react.memo"),R=Symbol.for("react.lazy"),H=Symbol.for("react.activity"),Z=Symbol.for("react.client.reference"),g=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,C=Object.prototype.hasOwnProperty,Q=Array.isArray,T=console.createTask?console.createTask:function(){return null};E={react_stack_bottom_frame:function(e){return e()}};var $,Y={},F=E.react_stack_bottom_frame.bind(E,o)(),L=T(n(o)),D={};j.Fragment=k,j.jsx=function(e,t,i){var f=1e4>g.recentlyCreatedOwnerStacks++;return b(e,t,i,!1,f?Error("react-stack-top-frame"):F,f?T(n(e)):L)},j.jsxs=function(e,t,i){var f=1e4>g.recentlyCreatedOwnerStacks++;return b(e,t,i,!0,f?Error("react-stack-top-frame"):F,f?T(n(e)):L)}}()),j}process.env.NODE_ENV==="production"?A.exports=ee():A.exports=re();var r=A.exports;const te=({variant:l="primary",size:c="md",leftIcon:s,rightIcon:n,children:a,fullWidth:o=!1,disabled:m,className:_="",...d})=>{const p=["fm-btn",`fm-btn--${l}`,`fm-btn--${c}`,o?"fm-btn--full":"",m?"fm-btn--disabled":"",_].filter(Boolean).join(" ");return r.jsxs("button",{className:p,disabled:m,...d,children:[s&&r.jsx("span",{className:"fm-btn__icon fm-btn__icon--left",children:s}),a&&r.jsx("span",{className:"fm-btn__label",children:a}),n&&r.jsx("span",{className:"fm-btn__icon fm-btn__icon--right",children:n})]})},ae=({label:l,placeholder:c,state:s="default",errorMessage:n,successMessage:a,leftIcon:o,rightIcon:m,className:_="",disabled:d,...p})=>{const b=["fm-input-wrapper",`fm-input-wrapper--${s}`,d?"fm-input-wrapper--disabled":"",_].filter(Boolean).join(" ");return r.jsxs("div",{className:b,children:[l&&r.jsx("label",{className:"fm-input__label",children:l}),r.jsxs("div",{className:"fm-input__field",children:[o&&r.jsx("span",{className:"fm-input__icon fm-input__icon--left",children:o}),r.jsx("input",{className:"fm-input__el",placeholder:c,disabled:d,...p}),m&&r.jsx("span",{className:"fm-input__icon fm-input__icon--right",children:m})]}),s==="error"&&n&&r.jsx("p",{className:"fm-input__message fm-input__message--error",children:n}),s==="success"&&a&&r.jsx("p",{className:"fm-input__message fm-input__message--success",children:a})]})},se=({children:l,color:c="grey",className:s=""})=>{const n=["fm-tag",`fm-tag--${c}`,s].filter(Boolean).join(" ");return r.jsx("span",{className:n,children:l})},ne=({checked:l,onChange:c,disabled:s,label:n,className:a=""})=>r.jsxs("label",{className:["fm-toggle",s?"fm-toggle--disabled":"",a].filter(Boolean).join(" "),children:[r.jsx("input",{type:"checkbox",className:"fm-toggle__input",checked:l,onChange:o=>c(o.target.checked),disabled:s}),r.jsx("span",{className:"fm-toggle__track",children:r.jsx("span",{className:"fm-toggle__thumb"})}),n&&r.jsx("span",{className:"fm-toggle__label",children:n})]}),oe=({checked:l=!1,indeterminate:c=!1,onChange:s,disabled:n,size:a="small",label:o,className:m=""})=>{const _=O.useRef(null);return O.useEffect(()=>{_.current&&(_.current.indeterminate=c)},[c]),r.jsxs("label",{className:["fm-checkbox",`fm-checkbox--${a}`,n?"fm-checkbox--disabled":"",m].filter(Boolean).join(" "),children:[r.jsx("input",{ref:_,type:"checkbox",className:"fm-checkbox__input",checked:l,onChange:d=>s==null?void 0:s(d.target.checked),disabled:n}),r.jsxs("span",{className:"fm-checkbox__box",children:[l&&!c&&r.jsx("svg",{width:"10",height:"8",viewBox:"0 0 10 8",fill:"none",children:r.jsx("path",{d:"M1 4L3.5 6.5L9 1",stroke:"white",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})}),c&&r.jsx("span",{className:"fm-checkbox__minus"})]}),o&&r.jsx("span",{className:"fm-checkbox__label",children:o})]})},le=({title:l,subtitle:c,color:s="purple",leftSlot:n,rightSlot:a,className:o=""})=>{const m=["fm-header",`fm-header--${s}`,o].filter(Boolean).join(" ");return r.jsxs("div",{className:m,children:[n&&r.jsx("div",{className:"fm-header__slot fm-header__slot--left",children:n}),r.jsxs("div",{className:"fm-header__title-block",children:[r.jsx("h4",{className:"fm-header__title",children:l}),c&&r.jsx("p",{className:"fm-header__subtitle",children:c})]}),a&&r.jsx("div",{className:"fm-header__slot fm-header__slot--right",children:a})]})},ce=({variant:l="light",headline:c="Є ідеї чи пропозиції?",ctaLabel:s="Написати нам",onCtaClick:n,sections:a=[],copyright:o="© 2024 Made by FlowMakers. All rights reserved",className:m=""})=>{const _=["fm-footer",`fm-footer--${l}`,m].filter(Boolean).join(" ");return r.jsxs("footer",{className:_,children:[r.jsxs("div",{className:"fm-footer__top",children:[r.jsxs("div",{className:"fm-footer__cta-block",children:[r.jsx("h3",{className:"fm-footer__headline",children:c}),r.jsx("button",{className:"fm-footer__cta-btn",onClick:n,children:s})]}),r.jsx("div",{className:"fm-footer__sections",children:a.map((d,p)=>r.jsxs("div",{className:"fm-footer__section",children:[r.jsx("p",{className:"fm-footer__section-title",children:d.title}),r.jsx("ul",{className:"fm-footer__section-links",children:d.links.map((b,v)=>r.jsx("li",{children:r.jsx("a",{href:b.href,className:"fm-footer__link",children:b.label})},v))})]},p))})]}),r.jsx("div",{className:"fm-footer__bottom",children:r.jsx("p",{className:"fm-footer__copyright",children:o})})]})};exports.Button=te;exports.Checkbox=oe;exports.Footer=ce;exports.Header=le;exports.Input=ae;exports.Tag=se;exports.Toggle=ne;

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+export { Button } from './components/Button';
+export { Input } from './components/Input';
+export { Tag } from './components/Tag';
+export { Toggle } from './components/Toggle';
+export { Checkbox } from './components/Checkbox';
+export { Header } from './components/Header';
+export { Footer } from './components/Footer';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './components/Button';
+export type { InputProps, InputState } from './components/Input';
+export type { TagProps, TagColor } from './components/Tag';
+export type { ToggleProps } from './components/Toggle';
+export type { CheckboxProps } from './components/Checkbox';
+export type { HeaderProps, HeaderColor } from './components/Header';
+export type { FooterProps, FooterVariant, FooterSection, FooterLink } from './components/Footer';

package/dist/index.esm.js

@@ -0,0 +1,432 @@
+import O from "react";
+var A = { exports: {} }, x = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var I;
+function ee() {
+  if (I) return x;
+  I = 1;
+  var l = Symbol.for("react.transitional.element"), c = Symbol.for("react.fragment");
+  function a(n, s, o) {
+    var m = null;
+    if (o !== void 0 && (m = "" + o), s.key !== void 0 && (m = "" + s.key), "key" in s) {
+      o = {};
+      for (var _ in s)
+        _ !== "key" && (o[_] = s[_]);
+    } else o = s;
+    return s = o.ref, {
+      $$typeof: l,
+      type: n,
+      key: m,
+      ref: s !== void 0 ? s : null,
+      props: o
+    };
+  }
+  return x.Fragment = c, x.jsx = a, x.jsxs = a, x;
+}
+var j = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var M;
+function re() {
+  return M || (M = 1, process.env.NODE_ENV !== "production" && function() {
+    function l(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === Z ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case k:
+          return "Fragment";
+        case U:
+          return "Profiler";
+        case B:
+          return "StrictMode";
+        case J:
+          return "Suspense";
+        case q:
+          return "SuspenseList";
+        case H:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case W:
+            return "Portal";
+          case z:
+            return e.displayName || "Context";
+          case V:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case G:
+            var t = e.render;
+            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case X:
+            return t = e.displayName || null, t !== null ? t : l(e.type) || "Memo";
+          case R:
+            t = e._payload, e = e._init;
+            try {
+              return l(e(t));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function c(e) {
+      return "" + e;
+    }
+    function a(e) {
+      try {
+        c(e);
+        var t = !1;
+      } catch {
+        t = !0;
+      }
+      if (t) {
+        t = console;
+        var i = t.error, f = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return i.call(
+          t,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          f
+        ), c(e);
+      }
+    }
+    function n(e) {
+      if (e === k) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === R)
+        return "<...>";
+      try {
+        var t = l(e);
+        return t ? "<" + t + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function s() {
+      var e = T.A;
+      return e === null ? null : e.getOwner();
+    }
+    function o() {
+      return Error("react-stack-top-frame");
+    }
+    function m(e) {
+      if (C.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function _(e, t) {
+      function i() {
+        $ || ($ = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          t
+        ));
+      }
+      i.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: i,
+        configurable: !0
+      });
+    }
+    function d() {
+      var e = l(this.type);
+      return Y[e] || (Y[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function p(e, t, i, f, N, w) {
+      var u = i.ref;
+      return e = {
+        $$typeof: S,
+        type: e,
+        key: t,
+        props: i,
+        _owner: f
+      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: d
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: N
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: w
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function h(e, t, i, f, N, w) {
+      var u = t.children;
+      if (u !== void 0)
+        if (f)
+          if (Q(u)) {
+            for (f = 0; f < u.length; f++)
+              v(u[f]);
+            Object.freeze && Object.freeze(u);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else v(u);
+      if (C.call(t, "key")) {
+        u = l(e);
+        var b = Object.keys(t).filter(function(K) {
+          return K !== "key";
+        });
+        f = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", D[u + f] || (b = 0 < b.length ? "{" + b.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          f,
+          u,
+          b,
+          u
+        ), D[u + f] = !0);
+      }
+      if (u = null, i !== void 0 && (a(i), u = "" + i), m(t) && (a(t.key), u = "" + t.key), "key" in t) {
+        i = {};
+        for (var y in t)
+          y !== "key" && (i[y] = t[y]);
+      } else i = t;
+      return u && _(
+        i,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), p(
+        e,
+        u,
+        i,
+        s(),
+        N,
+        w
+      );
+    }
+    function v(e) {
+      P(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === R && (e._payload.status === "fulfilled" ? P(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function P(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === S;
+    }
+    var E = O, S = Symbol.for("react.transitional.element"), W = Symbol.for("react.portal"), k = Symbol.for("react.fragment"), B = Symbol.for("react.strict_mode"), U = Symbol.for("react.profiler"), V = Symbol.for("react.consumer"), z = Symbol.for("react.context"), G = Symbol.for("react.forward_ref"), J = Symbol.for("react.suspense"), q = Symbol.for("react.suspense_list"), X = Symbol.for("react.memo"), R = Symbol.for("react.lazy"), H = Symbol.for("react.activity"), Z = Symbol.for("react.client.reference"), T = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, C = Object.prototype.hasOwnProperty, Q = Array.isArray, g = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    E = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var $, Y = {}, F = E.react_stack_bottom_frame.bind(
+      E,
+      o
+    )(), L = g(n(o)), D = {};
+    j.Fragment = k, j.jsx = function(e, t, i) {
+      var f = 1e4 > T.recentlyCreatedOwnerStacks++;
+      return h(
+        e,
+        t,
+        i,
+        !1,
+        f ? Error("react-stack-top-frame") : F,
+        f ? g(n(e)) : L
+      );
+    }, j.jsxs = function(e, t, i) {
+      var f = 1e4 > T.recentlyCreatedOwnerStacks++;
+      return h(
+        e,
+        t,
+        i,
+        !0,
+        f ? Error("react-stack-top-frame") : F,
+        f ? g(n(e)) : L
+      );
+    };
+  }()), j;
+}
+process.env.NODE_ENV === "production" ? A.exports = ee() : A.exports = re();
+var r = A.exports;
+const se = ({
+  variant: l = "primary",
+  size: c = "md",
+  leftIcon: a,
+  rightIcon: n,
+  children: s,
+  fullWidth: o = !1,
+  disabled: m,
+  className: _ = "",
+  ...d
+}) => {
+  const p = [
+    "fm-btn",
+    `fm-btn--${l}`,
+    `fm-btn--${c}`,
+    o ? "fm-btn--full" : "",
+    m ? "fm-btn--disabled" : "",
+    _
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r.jsxs("button", { className: p, disabled: m, ...d, children: [
+    a && /* @__PURE__ */ r.jsx("span", { className: "fm-btn__icon fm-btn__icon--left", children: a }),
+    s && /* @__PURE__ */ r.jsx("span", { className: "fm-btn__label", children: s }),
+    n && /* @__PURE__ */ r.jsx("span", { className: "fm-btn__icon fm-btn__icon--right", children: n })
+  ] });
+}, ae = ({
+  label: l,
+  placeholder: c,
+  state: a = "default",
+  errorMessage: n,
+  successMessage: s,
+  leftIcon: o,
+  rightIcon: m,
+  className: _ = "",
+  disabled: d,
+  ...p
+}) => {
+  const h = [
+    "fm-input-wrapper",
+    `fm-input-wrapper--${a}`,
+    d ? "fm-input-wrapper--disabled" : "",
+    _
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r.jsxs("div", { className: h, children: [
+    l && /* @__PURE__ */ r.jsx("label", { className: "fm-input__label", children: l }),
+    /* @__PURE__ */ r.jsxs("div", { className: "fm-input__field", children: [
+      o && /* @__PURE__ */ r.jsx("span", { className: "fm-input__icon fm-input__icon--left", children: o }),
+      /* @__PURE__ */ r.jsx(
+        "input",
+        {
+          className: "fm-input__el",
+          placeholder: c,
+          disabled: d,
+          ...p
+        }
+      ),
+      m && /* @__PURE__ */ r.jsx("span", { className: "fm-input__icon fm-input__icon--right", children: m })
+    ] }),
+    a === "error" && n && /* @__PURE__ */ r.jsx("p", { className: "fm-input__message fm-input__message--error", children: n }),
+    a === "success" && s && /* @__PURE__ */ r.jsx("p", { className: "fm-input__message fm-input__message--success", children: s })
+  ] });
+}, ne = ({ children: l, color: c = "grey", className: a = "" }) => {
+  const n = ["fm-tag", `fm-tag--${c}`, a].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r.jsx("span", { className: n, children: l });
+}, oe = ({ checked: l, onChange: c, disabled: a, label: n, className: s = "" }) => /* @__PURE__ */ r.jsxs("label", { className: ["fm-toggle", a ? "fm-toggle--disabled" : "", s].filter(Boolean).join(" "), children: [
+  /* @__PURE__ */ r.jsx(
+    "input",
+    {
+      type: "checkbox",
+      className: "fm-toggle__input",
+      checked: l,
+      onChange: (o) => c(o.target.checked),
+      disabled: a
+    }
+  ),
+  /* @__PURE__ */ r.jsx("span", { className: "fm-toggle__track", children: /* @__PURE__ */ r.jsx("span", { className: "fm-toggle__thumb" }) }),
+  n && /* @__PURE__ */ r.jsx("span", { className: "fm-toggle__label", children: n })
+] }), le = ({
+  checked: l = !1,
+  indeterminate: c = !1,
+  onChange: a,
+  disabled: n,
+  size: s = "small",
+  label: o,
+  className: m = ""
+}) => {
+  const _ = O.useRef(null);
+  return O.useEffect(() => {
+    _.current && (_.current.indeterminate = c);
+  }, [c]), /* @__PURE__ */ r.jsxs("label", { className: ["fm-checkbox", `fm-checkbox--${s}`, n ? "fm-checkbox--disabled" : "", m].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ r.jsx(
+      "input",
+      {
+        ref: _,
+        type: "checkbox",
+        className: "fm-checkbox__input",
+        checked: l,
+        onChange: (d) => a == null ? void 0 : a(d.target.checked),
+        disabled: n
+      }
+    ),
+    /* @__PURE__ */ r.jsxs("span", { className: "fm-checkbox__box", children: [
+      l && !c && /* @__PURE__ */ r.jsx("svg", { width: "10", height: "8", viewBox: "0 0 10 8", fill: "none", children: /* @__PURE__ */ r.jsx("path", { d: "M1 4L3.5 6.5L9 1", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
+      c && /* @__PURE__ */ r.jsx("span", { className: "fm-checkbox__minus" })
+    ] }),
+    o && /* @__PURE__ */ r.jsx("span", { className: "fm-checkbox__label", children: o })
+  ] });
+}, ce = ({
+  title: l,
+  subtitle: c,
+  color: a = "purple",
+  leftSlot: n,
+  rightSlot: s,
+  className: o = ""
+}) => {
+  const m = ["fm-header", `fm-header--${a}`, o].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r.jsxs("div", { className: m, children: [
+    n && /* @__PURE__ */ r.jsx("div", { className: "fm-header__slot fm-header__slot--left", children: n }),
+    /* @__PURE__ */ r.jsxs("div", { className: "fm-header__title-block", children: [
+      /* @__PURE__ */ r.jsx("h4", { className: "fm-header__title", children: l }),
+      c && /* @__PURE__ */ r.jsx("p", { className: "fm-header__subtitle", children: c })
+    ] }),
+    s && /* @__PURE__ */ r.jsx("div", { className: "fm-header__slot fm-header__slot--right", children: s })
+  ] });
+}, ie = ({
+  variant: l = "light",
+  headline: c = "Є ідеї чи пропозиції?",
+  ctaLabel: a = "Написати нам",
+  onCtaClick: n,
+  sections: s = [],
+  copyright: o = "© 2024 Made by FlowMakers. All rights reserved",
+  className: m = ""
+}) => {
+  const _ = ["fm-footer", `fm-footer--${l}`, m].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r.jsxs("footer", { className: _, children: [
+    /* @__PURE__ */ r.jsxs("div", { className: "fm-footer__top", children: [
+      /* @__PURE__ */ r.jsxs("div", { className: "fm-footer__cta-block", children: [
+        /* @__PURE__ */ r.jsx("h3", { className: "fm-footer__headline", children: c }),
+        /* @__PURE__ */ r.jsx("button", { className: "fm-footer__cta-btn", onClick: n, children: a })
+      ] }),
+      /* @__PURE__ */ r.jsx("div", { className: "fm-footer__sections", children: s.map((d, p) => /* @__PURE__ */ r.jsxs("div", { className: "fm-footer__section", children: [
+        /* @__PURE__ */ r.jsx("p", { className: "fm-footer__section-title", children: d.title }),
+        /* @__PURE__ */ r.jsx("ul", { className: "fm-footer__section-links", children: d.links.map((h, v) => /* @__PURE__ */ r.jsx("li", { children: /* @__PURE__ */ r.jsx("a", { href: h.href, className: "fm-footer__link", children: h.label }) }, v)) })
+      ] }, p)) })
+    ] }),
+    /* @__PURE__ */ r.jsx("div", { className: "fm-footer__bottom", children: /* @__PURE__ */ r.jsx("p", { className: "fm-footer__copyright", children: o }) })
+  ] });
+};
+export {
+  se as Button,
+  le as Checkbox,
+  ie as Footer,
+  ce as Header,
+  ae as Input,
+  ne as Tag,
+  oe as Toggle
+};

package/dist/styles.css

@@ -0,0 +1 @@
+.fm-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-s, 10px);border:none;cursor:pointer;font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-weight:var(--weight-bold, 700);font-size:var(--font-size-14, 14px);line-height:1;white-space:nowrap;transition:background .15s,border-color .15s,opacity .15s;text-decoration:none}.fm-btn--sm{height:32px;padding:0 var(--space-sm, 12px);border-radius:var(--radius-s, 10px);font-size:var(--font-size-12, 12px)}.fm-btn--md{height:42px;padding:var(--space-s, 10px) var(--space-m, 16px);border-radius:var(--radius-m, 12px)}.fm-btn--lg{height:52px;padding:var(--space-sm, 12px) var(--space-xl, 24px);border-radius:var(--radius-m, 12px);font-size:var(--font-size-16, 16px)}.fm-btn--full{width:100%}.fm-btn--primary{background:var(--bw-fill-black, #121212);color:var(--bw-fill-white, #ffffff)}.fm-btn--primary:hover:not(:disabled){background-image:linear-gradient(90deg,#ffffff0d,#ffffff0d),linear-gradient(90deg,#121212,#121212)}.fm-btn--primary:active:not(:disabled){background:#2a2a2a}.fm-btn--hero{background:var(--bw-fill-black, #121212);color:var(--bw-fill-white, #ffffff)}.fm-btn--hero:hover:not(:disabled){background:var(--bw-fill-black, #121212);border:1.5px solid var(--pink-fill-300, #ffa8f1);padding:var(--space-m, 16px)}.fm-btn--secondary{background:transparent;color:var(--bw-fill-black, #121212);border:1.5px solid var(--bw-fill-black, #121212)}.fm-btn--secondary:hover:not(:disabled){background:var(--bw-fill-100, #eeeef0)}.fm-btn--secondary:active:not(:disabled){background:var(--bw-fill-200, #dcdcdc)}.fm-btn--secondary-large{background:transparent;color:var(--bw-fill-black, #121212);border:1.5px solid var(--bw-fill-black, #121212);height:52px;padding:var(--space-sm, 12px) var(--space-xl, 24px)}.fm-btn--ghost{background:transparent;color:var(--bw-fill-black, #121212);border:none}.fm-btn--ghost:hover:not(:disabled){background:var(--bw-fill-100, #eeeef0)}.fm-btn--ghost-icon{background:transparent;color:var(--bw-fill-black, #121212);border:none;padding:var(--space-xs, 8px);border-radius:var(--radius-s, 10px)}.fm-btn--ghost-icon:hover:not(:disabled){background:var(--bw-fill-100, #eeeef0)}.fm-btn--disabled,.fm-btn:disabled{background:var(--bw-fill-200, #dcdcdc);color:var(--bw-fill-500, #7c7c7c);cursor:not-allowed;border:none}.fm-btn__icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.fm-btn__icon--left{margin-right:-2px}.fm-btn__icon--right{margin-left:-2px}.fm-input-wrapper{display:flex;flex-direction:column;gap:var(--space-sm, 12px);width:100%}.fm-input__label{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-16, 16px);font-weight:var(--weight-medium, 400);color:var(--nature-fill-600, #5d5e6c);line-height:1.4}.fm-input__field{display:flex;align-items:center;gap:var(--space-xs, 8px);height:42px;padding:var(--space-s, 10px) var(--space-m, 16px);border-radius:var(--radius-m, 12px);border:1px solid var(--nature-fill-300, #b8b9c1);background:var(--bw-fill-white, #ffffff);transition:border-color .15s,box-shadow .15s}.fm-input__el{flex:1;border:none;outline:none;background:transparent;font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-medium, 400);color:var(--bw-fill-black, #121212);line-height:1.4}.fm-input__el::placeholder{color:var(--nature-fill-300, #b8b9c1)}.fm-input-wrapper--hover .fm-input__field{border-color:var(--nature-fill-500, #7c7c7c)}.fm-input-wrapper--focused .fm-input__field{border-color:var(--primary-fill-500, #7d65e1);box-shadow:0 0 0 3px #7d65e126}.fm-input-wrapper--filled .fm-input__field{border-color:var(--nature-fill-400, #989898)}.fm-input-wrapper--error .fm-input__field{border-color:#e53e3e}.fm-input-wrapper--success .fm-input__field{border-color:var(--green-fill-500, #27a872)}.fm-input-wrapper--disabled .fm-input__field{background:var(--bw-fill-100, #eeeef0);cursor:not-allowed}.fm-input-wrapper--disabled .fm-input__el{cursor:not-allowed;color:var(--bw-fill-400, #989898)}.fm-input__icon{display:inline-flex;align-items:center;color:var(--nature-fill-400, #989898)}.fm-input__message{font-family:var(--font-family-body);font-size:var(--font-size-12, 12px);margin-top:4px}.fm-input__message--error{color:#e53e3e}.fm-input__message--success{color:var(--green-fill-600, #1e8a5d)}.fm-tag{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-xs, 8px) var(--space-sm, 12px);border-radius:var(--radius-full, 9999px);font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-12, 12px);font-weight:var(--weight-bold, 700);line-height:1.2;white-space:nowrap}.fm-tag--grey{background:var(--nature-fill-100, #eeeef0);color:var(--nature-fill-700, #4c4d58)}.fm-tag--green{background:var(--green-fill-100, #d9f2e7);color:var(--green-fill-700, #1b6153)}.fm-tag--yellow{background:var(--yellow-fill-100, #fff0d4);color:var(--yellow-fill-700, #c54e09)}.fm-tag--purple{background:var(--primary-fill-100,#eeecfb);color:var(--primary-fill-700,#6d45bc)}.fm-tag--pink{background:var(--pink-fill-100, #ffe7fc);color:var(--pink-fill-700, #b51692)}.fm-toggle{display:inline-flex;align-items:center;gap:var(--space-xs, 8px);cursor:pointer;-webkit-user-select:none;user-select:none}.fm-toggle__input{position:absolute;opacity:0;width:0;height:0}.fm-toggle__track{position:relative;width:44px;height:24px;border-radius:var(--radius-full, 9999px);background:var(--nature-fill-300, #b8b9c1);transition:background .2s;flex-shrink:0}.fm-toggle__input:checked~.fm-toggle__track{background:var(--primary-fill-500, #7d65e1)}.fm-toggle__thumb{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--bw-fill-white, #ffffff);box-shadow:0 1px 3px #0003;transition:transform .2s}.fm-toggle__input:checked~.fm-toggle__track .fm-toggle__thumb{transform:translate(20px)}.fm-toggle--disabled{opacity:.5;cursor:not-allowed}.fm-toggle__label{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);color:var(--bw-fill-black, #121212)}.fm-checkbox{display:inline-flex;align-items:center;gap:var(--space-xs, 8px);cursor:pointer;-webkit-user-select:none;user-select:none}.fm-checkbox__input{position:absolute;opacity:0;width:0;height:0}.fm-checkbox__box{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;border:1.5px solid var(--nature-fill-300, #b8b9c1);background:var(--bw-fill-white, #ffffff);flex-shrink:0;transition:background .15s,border-color .15s}.fm-checkbox--large .fm-checkbox__box{width:22px;height:22px;border-radius:6px}.fm-checkbox__input:checked+.fm-checkbox__box{background:var(--primary-fill-500, #7d65e1);border-color:var(--primary-fill-500, #7d65e1)}.fm-checkbox__input:indeterminate+.fm-checkbox__box{background:var(--primary-fill-500, #7d65e1);border-color:var(--primary-fill-500, #7d65e1)}.fm-checkbox__minus{width:10px;height:2px;background:var(--bw-fill-white, #ffffff);border-radius:1px}.fm-checkbox--disabled{opacity:.5;cursor:not-allowed}.fm-checkbox__label{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);color:var(--bw-fill-black, #121212)}.fm-header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-m, 16px);border-radius:var(--radius-xl, 20px) var(--radius-xl, 20px) 0 0;width:100%}.fm-header--purple{background:var(--primary-fill-100, #eeecfb)}.fm-header--grey{background:var(--nature-fill-50, #f7f7f8)}.fm-header__slot{display:flex;align-items:center}.fm-header__title-block{display:flex;flex-direction:column;gap:var(--space-xs, 8px);flex:1;padding:0 var(--space-xs, 8px)}.fm-header__title{font-family:var(--font-family-headings, "Manrope", sans-serif);font-size:var(--font-size-18, 18px);font-weight:var(--weight-bold, 700);color:var(--bw-fill-black, #121212);line-height:.9;margin:0}.fm-header__subtitle{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-medium, 400);color:var(--bw-fill-400, #989898);line-height:1.4;margin:0}.fm-footer{display:flex;flex-direction:column;width:100%}.fm-footer--light{background:var(--nature-fill-50, #f7f7f8);color:var(--bw-fill-black, #121212)}.fm-footer--dark{background:var(--nature-fill-950, #18181b);color:#ffffffbf}.fm-footer__top{display:flex;gap:var(--space-3xl, 48px);padding:var(--space-xl, 24px);align-items:flex-start}.fm-footer__cta-block{display:flex;flex-direction:column;gap:var(--space-xl, 24px);flex-shrink:0}.fm-footer__headline{font-family:var(--font-family-headings, "Manrope", sans-serif);font-size:var(--font-size-30, 30px);font-weight:var(--weight-bold, 700);line-height:.94;margin:0}.fm-footer__cta-btn{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 var(--space-m, 16px);border-radius:var(--radius-m, 12px);font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-bold, 700);cursor:pointer;transition:background .15s}.fm-footer--light .fm-footer__cta-btn{background:var(--bw-fill-black, #121212);color:var(--bw-fill-white, #ffffff);border:none}.fm-footer--dark .fm-footer__cta-btn{background:transparent;color:#ffffffbf;border:1.5px solid var(--pink-fill-300, #ffa8f1)}.fm-footer__sections{display:flex;gap:var(--space-3xl, 48px);flex:1;justify-content:space-between;flex-wrap:wrap}.fm-footer__section{display:flex;flex-direction:column;gap:var(--space-xl, 24px)}.fm-footer__section-title{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-16, 16px);font-weight:var(--weight-semibold, 600);margin:0}.fm-footer__section-links{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:var(--space-m, 16px)}.fm-footer__link{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-light, 300);text-decoration:none;line-height:1.4;color:inherit}.fm-footer__link:hover{text-decoration:underline}.fm-footer__bottom{display:flex;align-items:center;justify-content:space-between;padding:var(--space-xl, 24px);border-top:1px solid rgba(255,255,255,.05)}.fm-footer__copyright{font-family:var(--font-family-body, "Nunito Sans", sans-serif);font-size:var(--font-size-14, 14px);font-weight:var(--weight-medium, 400);line-height:1.4;margin:0}

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@tetjana/flowmakers-ds",
+  "version": "0.1.0",
+  "description": "FlowMakers UI Design System — React components",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles": "./dist/styles.css"
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "vite build && tsc --emitDeclarationOnly --declaration --outDir dist",
+    "dev":   "vite",
+    "lint":  "eslint src"
+  },
+  "peerDependencies": {
+    "react":     ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react":        "^18.0.0",
+    "@types/react-dom":    "^18.0.0",
+    "@vitejs/plugin-react":"^4.0.0",
+    "typescript":          "^5.0.0",
+    "vite":                "^5.0.0",
+    "vite-plugin-dts":     "^3.0.0"
+  },
+  "keywords": ["flowmakers", "design-system", "react", "ui"],
+  "license": "MIT"
+}