ics-ui-kit 0.1.19 → 1.0.0-alpha.1

package/dist/FormFooterTemplate-CHlas_Pp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFooterTemplate-CHlas_Pp.js","sources":["../src/components/form/templates/header-template/FormHeaderTemplate.tsx","../src/components/form/templates/footer-template/FormFooterTemplate.tsx"],"sourcesContent":["import { FeatureIcon } from \"@/components/icon/feature-icon/FeatureIcon\";\r\nimport { LucideIcon } from \"lucide-react\";\r\nimport React, { HTMLAttributes, PropsWithChildren } from \"react\";\r\nimport { tv } from \"tailwind-variants\";\r\nimport { FormDescription, FormHeader, FormTitle } from \"../../components/form-header/FormHeader\";\r\nimport { VariantsConfig } from \"@/lib/utils/variants\";\r\n\r\nexport interface FormHeaderTemplateVariants {\r\n\talignment?: \"compact\" | \"left\" | \"center\";\r\n}\r\n\r\nconst formHeaderTemplateStyles = tv({\r\n\tslots: {\r\n\t\theader: \"flex items-start gap-4\",\r\n\t\tcontentWrapper: \"flex flex-col gap-px lg:gap-1.5\",\r\n\t\ticon: \"shrink-0 rounded-lg ring-0\"\r\n\t},\r\n\tvariants: {\r\n\t\talignment: {\r\n\t\t\tcompact: {\r\n\t\t\t\theader: \"flex-row pr-9\"\r\n\t\t\t},\r\n\t\t\tleft: {\r\n\t\t\t\theader: \"flex-col gap-2 lg:gap-4\",\r\n\t\t\t\tcontentWrapper: \"gap-0.5 lg:gap-1\"\r\n\t\t\t},\r\n\t\t\tcenter: {\r\n\t\t\t\theader: \"flex-col items-center gap-2 text-center lg:gap-4\",\r\n\t\t\t\tcontentWrapper: \"gap-0.5 lg:gap-1\"\r\n\t\t\t}\r\n\t\t}\r\n\t} satisfies VariantsConfig<FormHeaderTemplateVariants>,\r\n\tdefaultVariants: {\r\n\t\talignment: \"compact\"\r\n\t}\r\n});\r\n\r\nexport type BaseHeaderTemplateProps = Omit<HTMLAttributes<HTMLDivElement>, \"title\"> &\r\n\tFormHeaderTemplateVariants & {\r\n\t\t/** Заголовок формы */\r\n\t\ttitle: React.ReactNode;\r\n\t\t/** Описание формы */\r\n\t\tdescription?: React.ReactNode;\r\n\t\t/** Иконка заголовка */\r\n\t\ticon?: LucideIcon;\r\n\t\t/** Кастомная иконка заголовка */\r\n\t\tcustomIcon?: React.ReactNode;\r\n\t};\r\n\r\nexport const BaseHeaderTemplate = React.forwardRef<HTMLDivElement, PropsWithChildren<BaseHeaderTemplateProps>>(\r\n\t({ className, icon: Icon, title, alignment, description, customIcon, ...props }, ref) => {\r\n\t\tconst { header, contentWrapper, icon } = formHeaderTemplateStyles({ alignment });\r\n\r\n\t\treturn (\r\n\t\t\t<FormHeader ref={ref} className={header({ class: className })} {...props}>\r\n\t\t\t\t{Icon && <FeatureIcon size=\"xl\" icon={Icon} className={icon()} />}\r\n\t\t\t\t{customIcon && customIcon}\r\n\t\t\t\t<div className={contentWrapper()}>\r\n\t\t\t\t\t{title}\r\n\t\t\t\t\t{description}\r\n\t\t\t\t</div>\r\n\t\t\t</FormHeader>\r\n\t\t);\r\n\t}\r\n);\r\n\r\n/**\r\n * Темплейт заголовка формы. Содержит иконку, заголовок и описание.\r\n * Имеет различные варианты расположения элементов\r\n */\r\nexport const FormHeaderTemplate = React.forwardRef<HTMLDivElement, PropsWithChildren<BaseHeaderTemplateProps>>(\r\n\t({ title, description, ...props }, ref) => {\r\n\t\treturn (\r\n\t\t\t<BaseHeaderTemplate\r\n\t\t\t\ttitle={<FormTitle>{title}</FormTitle>}\r\n\t\t\t\tdescription={<FormDescription>{description}</FormDescription>}\r\n\t\t\t\tref={ref}\r\n\t\t\t\t{...props}\r\n\t\t\t/>\r\n\t\t);\r\n\t}\r\n);\r\n\r\nFormHeaderTemplate.displayName = \"FormHeaderTemplate\";\r\n","import { Button, ButtonProps } from \"@/components/button/button/Button\";\r\nimport { CheckboxField, CheckboxFieldProps } from \"@/components/checkbox/checkbox-field/CheckboxField\";\r\nimport { useIsMobile } from \"@/hooks/useBreakpoints\";\r\nimport React from \"react\";\r\nimport { tv } from \"tailwind-variants\";\r\nimport { FormFooter } from \"../../components/form-footer/FormFooter\";\r\n\r\nconst formFooterTemplateStyles = tv({\r\n\tslots: {\r\n\t\tcontainer: \"flex w-full flex-col gap-3 lg:flex-row\",\r\n\t\tstartBlock: \"flex items-center py-1 lg:py-2.5\",\r\n\t\tendBlock: \"ml-auto flex w-full flex-col gap-3 lg:w-auto lg:flex-row\"\r\n\t}\r\n});\r\n\r\nexport interface FormFooterTemplateProps {\r\n\t/** Дополнительные классы */\r\n\tclassName?: string;\r\n\t/** Текст для чекбокса */\r\n\tcheckboxLabel?: string;\r\n\t/** Пропсы для чекбокса */\r\n\tcheckboxProps?: CheckboxFieldProps;\r\n\t/** Основная кнопка */\r\n\tprimaryButton?: React.ReactNode;\r\n\t/** Пропсы для основной кнопки */\r\n\tprimaryButtonProps?: ButtonProps;\r\n\t/** Вторичная кнопка */\r\n\tsecondaryButton?: React.ReactNode;\r\n\t/** Пропсы для вторичной кнопки */\r\n\tsecondaryButtonProps?: ButtonProps;\r\n}\r\n\r\n/**\r\n * Темплейт футера формы. Содержит чекбокс и 2 кнопки, которыми можно управлять.\r\n * Адаптивен к размерам устройств\r\n */\r\nexport const FormFooterTemplate = React.forwardRef<HTMLDivElement, FormFooterTemplateProps>(\r\n\t(\r\n\t\t{\r\n\t\t\tclassName,\r\n\t\t\tprimaryButton,\r\n\t\t\tsecondaryButton,\r\n\t\t\tcheckboxLabel,\r\n\t\t\tcheckboxProps,\r\n\t\t\tprimaryButtonProps,\r\n\t\t\tsecondaryButtonProps\r\n\t\t},\r\n\t\tref\r\n\t) => {\r\n\t\tconst isMobile = useIsMobile();\r\n\t\tconst { container, startBlock, endBlock } = formFooterTemplateStyles();\r\n\r\n\t\tif (isMobile) {\r\n\t\t\tprimaryButtonProps = { ...primaryButtonProps, size: \"xl\" };\r\n\t\t\tsecondaryButtonProps = { ...secondaryButtonProps, size: \"xl\" };\r\n\t\t}\r\n\t\tconst primaryButtonElement = primaryButton && (\r\n\t\t\t<Button key=\"primary-button\" variant=\"primary\" {...primaryButtonProps}>\r\n\t\t\t\t{primaryButton}\r\n\t\t\t</Button>\r\n\t\t);\r\n\r\n\t\tconst secondaryButtonElement = secondaryButton && (\r\n\t\t\t<Button key=\"secondary-button\" variant=\"outline\" {...secondaryButtonProps}>\r\n\t\t\t\t{secondaryButton}\r\n\t\t\t</Button>\r\n\t\t);\r\n\r\n\t\treturn (\r\n\t\t\t<FormFooter className={className} ref={ref}>\r\n\t\t\t\t<div className={container()}>\r\n\t\t\t\t\t{checkboxLabel && (\r\n\t\t\t\t\t\t<div className={startBlock()}>\r\n\t\t\t\t\t\t\t<CheckboxField label={checkboxLabel} {...checkboxProps} />\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t)}\r\n\t\t\t\t\t<div className={endBlock()}>\r\n\t\t\t\t\t\t{isMobile\r\n\t\t\t\t\t\t\t? [primaryButtonElement, secondaryButtonElement]\r\n\t\t\t\t\t\t\t: [secondaryButtonElement, primaryButtonElement]}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</FormFooter>\r\n\t\t);\r\n\t}\r\n);\r\n\r\nFormFooterTemplate.displayName = \"FormFooterTemplate\";\r\n"],"names":["formHeaderTemplateStyles","tv","BaseHeaderTemplate","React","className","Icon","title","alignment","description","customIcon","props","ref","header","contentWrapper","icon","jsxs","FormHeader","jsx","FeatureIcon","FormHeaderTemplate","FormTitle","FormDescription","formFooterTemplateStyles","FormFooterTemplate","primaryButton","secondaryButton","checkboxLabel","checkboxProps","primaryButtonProps","secondaryButtonProps","isMobile","useIsMobile","container","startBlock","endBlock","primaryButtonElement","Button","secondaryButtonElement","FormFooter","CheckboxField"],"mappings":";;;;;;;;AAWA,MAAMA,IAA2BC,EAAG;AAAA,EACnC,OAAO;AAAA,IACN,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,MAAM;AAAA,EACP;AAAA,EACA,UAAU;AAAA,IACT,WAAW;AAAA,MACV,SAAS;AAAA,QACR,QAAQ;AAAA,MACT;AAAA,MACA,MAAM;AAAA,QACL,QAAQ;AAAA,QACR,gBAAgB;AAAA,MACjB;AAAA,MACA,QAAQ;AAAA,QACP,QAAQ;AAAA,QACR,gBAAgB;AAAA,MAAA;AAAA,IACjB;AAAA,EAEF;AAAA,EACA,iBAAiB;AAAA,IAChB,WAAW;AAAA,EAAA;AAEb,CAAC,GAcYC,IAAqBC,EAAM;AAAA,EACvC,CAAC,EAAE,WAAAC,GAAW,MAAMC,GAAM,OAAAC,GAAO,WAAAC,GAAW,aAAAC,GAAa,YAAAC,GAAY,GAAGC,EAAM,GAAGC,MAAQ;AAClF,UAAA,EAAE,QAAAC,GAAQ,gBAAAC,GAAgB,MAAAC,MAASd,EAAyB,EAAE,WAAAO,GAAW;AAG9E,WAAA,gBAAAQ,EAACC,GAAW,EAAA,KAAAL,GAAU,WAAWC,EAAO,EAAE,OAAOR,EAAW,CAAA,GAAI,GAAGM,GACjE,UAAA;AAAA,MAAQL,KAAA,gBAAAY,EAACC,KAAY,MAAK,MAAK,MAAMb,GAAM,WAAWS,KAAQ;AAAA,MAC9DL,KAAcA;AAAA,MACd,gBAAAM,EAAA,OAAA,EAAI,WAAWF,EAAA,GACd,UAAA;AAAA,QAAAP;AAAA,QACAE;AAAA,MAAA,EACF,CAAA;AAAA,IAAA,GACD;AAAA,EAAA;AAGH,GAMaW,IAAqBhB,EAAM;AAAA,EACvC,CAAC,EAAE,OAAAG,GAAO,aAAAE,GAAa,GAAGE,EAAA,GAASC,MAEjC,gBAAAM;AAAA,IAACf;AAAA,IAAA;AAAA,MACA,OAAQ,gBAAAe,EAAAG,GAAA,EAAW,UAAMd,EAAA,CAAA;AAAA,MACzB,aAAc,gBAAAW,EAAAI,GAAA,EAAiB,UAAYb,EAAA,CAAA;AAAA,MAC3C,KAAAG;AAAA,MACC,GAAGD;AAAA,IAAA;AAAA,EACL;AAGH;AAEAS,EAAmB,cAAc;AC5EjC,MAAMG,IAA2BrB,EAAG;AAAA,EACnC,OAAO;AAAA,IACN,WAAW;AAAA,IACX,YAAY;AAAA,IACZ,UAAU;AAAA,EAAA;AAEZ,CAAC,GAuBYsB,IAAqBpB,EAAM;AAAA,EACvC,CACC;AAAA,IACC,WAAAC;AAAA,IACA,eAAAoB;AAAA,IACA,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,oBAAAC;AAAA,IACA,sBAAAC;AAAA,KAEDlB,MACI;AACJ,UAAMmB,IAAWC,EAAY,GACvB,EAAE,WAAAC,GAAW,YAAAC,GAAY,UAAAC,EAAA,IAAaZ,EAAyB;AAErE,IAAIQ,MACHF,IAAqB,EAAE,GAAGA,GAAoB,MAAM,KAAK,GACzDC,IAAuB,EAAE,GAAGA,GAAsB,MAAM,KAAK;AAExD,UAAAM,IAAuBX,KAC3B,gBAAAP,EAAAmB,GAAA,EAA4B,SAAQ,WAAW,GAAGR,GACjD,UAAAJ,EAAA,GADU,gBAEZ,GAGKa,IAAyBZ,KAC7B,gBAAAR,EAAAmB,GAAA,EAA8B,SAAQ,WAAW,GAAGP,GACnD,UAAAJ,EAAA,GADU,kBAEZ;AAIA,WAAA,gBAAAR,EAACqB,KAAW,WAAAlC,GAAsB,KAAAO,GACjC,4BAAC,OAAI,EAAA,WAAWqB,KACd,UAAA;AAAA,MACAN,KAAA,gBAAAT,EAAC,OAAI,EAAA,WAAWgB,EAAW,GAC1B,UAAC,gBAAAhB,EAAAsB,GAAA,EAAc,OAAOb,GAAgB,GAAGC,EAAA,CAAe,EACzD,CAAA;AAAA,MAEA,gBAAAV,EAAA,OAAA,EAAI,WAAWiB,EACd,GAAA,UAAAJ,IACE,CAACK,GAAsBE,CAAsB,IAC7C,CAACA,GAAwBF,CAAoB,EACjD,CAAA;AAAA,IAAA,EAAA,CACD,EACD,CAAA;AAAA,EAAA;AAGH;AAEAZ,EAAmB,cAAc;"}

package/dist/{FormHeader--F6b2aRk.js → FormHeader-PE63OqG9.js}

@@ -14,13 +14,13 @@ const i = n({
 );
 c.displayName = "FormBody";
 const p = n({
-  base: "flex-shrink-0 gap-2 border-t border-secondary-border px-4 pb-4 pt-4 lg:px-6 lg:pb-6 lg:pt-5"
+  base: "shrink-0 gap-2 border-t border-secondary-border px-4 pb-4 pt-4 lg:px-6 lg:pb-6 lg:pt-5"
 }), f = a.forwardRef(
   ({ className: r, children: e, ...o }, s) => /* @__PURE__ */ t("div", { ref: s, className: p({ class: r }), ...o, children: e })
 );
 f.displayName = "FormFooter";
 const g = n({
-  base: "relative flex-shrink-0 border-b border-secondary-border px-4 pb-4 pt-4 lg:px-6 lg:pb-5 lg:pt-6"
+  base: "relative shrink-0 border-b border-secondary-border px-4 pb-4 pt-4 lg:px-6 lg:pb-5 lg:pt-6"
 }), b = a.forwardRef(
   ({ className: r, children: e, ...o }, s) => /* @__PURE__ */ t(m, { children: /* @__PURE__ */ t("div", { ref: s, className: g({ class: r }), ...o, children: e }) })
 );
@@ -46,4 +46,4 @@ export {
   F as e,
   x as f
 };
-//# sourceMappingURL=FormHeader--F6b2aRk.js.map
+//# sourceMappingURL=FormHeader-PE63OqG9.js.map

package/dist/FormHeader-PE63OqG9.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormHeader-PE63OqG9.js","sources":["../src/components/form/components/form-body/FormBody.tsx","../src/components/form/components/form-footer/FormFooter.tsx","../src/components/form/components/form-header/FormHeader.tsx"],"sourcesContent":["import { ScrollShadowContainer } from \"@/components/scroll-shadow-container\";\r\nimport React from \"react\";\r\nimport { tv } from \"tailwind-variants\";\r\n\r\nconst formBodyStyles = tv({\r\n\tslots: {\r\n\t\tcontent: \"px-4 py-5 lg:p-6\"\r\n\t}\r\n});\r\n\r\n/**\r\n * Тело формы\r\n */\r\nexport const FormBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n\t({ className, children, ...props }, ref) => {\r\n\t\tconst styles = formBodyStyles();\r\n\r\n\t\treturn (\r\n\t\t\t<ScrollShadowContainer className={styles.content({ className })} {...props} ref={ref}>\r\n\t\t\t\t{children}\r\n\t\t\t</ScrollShadowContainer>\r\n\t\t);\r\n\t}\r\n);\r\n\r\nFormBody.displayName = \"FormBody\";\r\n","import React from \"react\";\r\nimport { tv } from \"tailwind-variants\";\r\n\r\nconst formFooterStyles = tv({\r\n\tbase: \"shrink-0 gap-2 border-t border-secondary-border px-4 pb-4 pt-4 lg:px-6 lg:pb-6 lg:pt-5\"\r\n});\r\n\r\n/**\r\n * Футер формы\r\n */\r\nexport const FormFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n\t({ className, children, ...props }, ref) => {\r\n\t\treturn (\r\n\t\t\t<div ref={ref} className={formFooterStyles({ class: className })} {...props}>\r\n\t\t\t\t{children}\r\n\t\t\t</div>\r\n\t\t);\r\n\t}\r\n);\r\n\r\nFormFooter.displayName = \"FormFooter\";\r\n","import React from \"react\";\r\nimport { tv } from \"tailwind-variants\";\r\n\r\nconst formHeaderStyles = tv({\r\n\tbase: \"relative shrink-0 border-b border-secondary-border px-4 pb-4 pt-4 lg:px-6 lg:pb-5 lg:pt-6\"\r\n});\r\n\r\n/**\r\n * Заголовок формы\r\n */\r\nexport const FormHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n\t({ className, children, ...props }, ref) => {\r\n\t\treturn (\r\n\t\t\t<>\r\n\t\t\t\t<div ref={ref} className={formHeaderStyles({ class: className })} {...props}>\r\n\t\t\t\t\t{children}\r\n\t\t\t\t</div>\r\n\t\t\t</>\r\n\t\t);\r\n\t}\r\n);\r\n\r\nFormHeader.displayName = \"FormHeader\";\r\n\r\nexport const formTitleStyles = tv({\r\n\tbase: \"font-sans text-base font-semibold leading-none tracking-tight text-primary-fg lg:text-lg lg:leading-none\"\r\n});\r\n\r\n/**\r\n * Заголовок поля\r\n */\r\nexport const FormTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\r\n\t({ className, ...props }, ref) => {\r\n\t\treturn <h2 ref={ref} className={formTitleStyles({ class: className })} {...props} />;\r\n\t}\r\n);\r\n\r\nFormTitle.displayName = \"FormTitle\";\r\n\r\nexport const formDescriptionStyles = tv({\r\n\tbase: \"font-sans text-sm font-normal tracking-tight text-muted\"\r\n});\r\n\r\n/**\r\n * Описание поля\r\n */\r\nexport const FormDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\r\n\t({ className, ...props }, ref) => {\r\n\t\treturn <div ref={ref} className={formDescriptionStyles({ class: className })} {...props} />;\r\n\t}\r\n);\r\n\r\nFormDescription.displayName = \"FormDescription\";\r\n"],"names":["formBodyStyles","tv","FormBody","React","className","children","props","ref","styles","jsx","ScrollShadowContainer","formFooterStyles","FormFooter","formHeaderStyles","FormHeader","Fragment","formTitleStyles","FormTitle","formDescriptionStyles","FormDescription"],"mappings":";;;;AAIA,MAAMA,IAAiBC,EAAG;AAAA,EACzB,OAAO;AAAA,IACN,SAAS;AAAA,EAAA;AAEX,CAAC,GAKYC,IAAWC,EAAM;AAAA,EAC7B,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAAQ;AAC3C,UAAMC,IAASR,EAAe;AAE9B,WACE,gBAAAS,EAAAC,GAAA,EAAsB,WAAWF,EAAO,QAAQ,EAAE,WAAAJ,EAAU,CAAC,GAAI,GAAGE,GAAO,KAAAC,GAC1E,UAAAF,EACF,CAAA;AAAA,EAAA;AAGH;AAEAH,EAAS,cAAc;ACtBvB,MAAMS,IAAmBV,EAAG;AAAA,EAC3B,MAAM;AACP,CAAC,GAKYW,IAAaT,EAAM;AAAA,EAC/B,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAEjC,gBAAAE,EAAA,OAAA,EAAI,KAAAF,GAAU,WAAWI,EAAiB,EAAE,OAAOP,EAAA,CAAW,GAAI,GAAGE,GACpE,UAAAD,EACF,CAAA;AAGH;AAEAO,EAAW,cAAc;ACjBzB,MAAMC,IAAmBZ,EAAG;AAAA,EAC3B,MAAM;AACP,CAAC,GAKYa,IAAaX,EAAM;AAAA,EAC/B,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,EAAA,GAASC,MAGjC,gBAAAE,EAAAM,GAAA,EAAA,UAAA,gBAAAN,EAAC,OAAI,EAAA,KAAAF,GAAU,WAAWM,EAAiB,EAAE,OAAOT,EAAW,CAAA,GAAI,GAAGE,GACpE,UAAAD,EACF,CAAA,GACD;AAGH;AAEAS,EAAW,cAAc;AAElB,MAAME,IAAkBf,EAAG;AAAA,EACjC,MAAM;AACP,CAAC,GAKYgB,IAAYd,EAAM;AAAA,EAC9B,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAClB,gBAAAE,EAAC,MAAG,EAAA,KAAAF,GAAU,WAAWS,EAAgB,EAAE,OAAOZ,EAAU,CAAC,GAAI,GAAGE,EAAO,CAAA;AAEpF;AAEAW,EAAU,cAAc;AAEjB,MAAMC,IAAwBjB,EAAG;AAAA,EACvC,MAAM;AACP,CAAC,GAKYkB,IAAkBhB,EAAM;AAAA,EACpC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAClB,gBAAAE,EAAC,OAAI,EAAA,KAAAF,GAAU,WAAWW,EAAsB,EAAE,OAAOd,EAAU,CAAC,GAAI,GAAGE,EAAO,CAAA;AAE3F;AAEAa,EAAgB,cAAc;"}