ics-ui-kit 1.0.0 → 1.0.2

package/dist/FormFooterTemplate-CRkxi-Mh.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFooterTemplate-CRkxi-Mh.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\";\nimport { LucideIcon } from \"lucide-react\";\nimport React, { HTMLAttributes, PropsWithChildren } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { FormDescription, FormHeader, FormTitle } from \"../../components/form-header/FormHeader\";\nimport { VariantsConfig } from \"@/lib/utils/variants\";\n\nexport interface FormHeaderTemplateVariants {\n\talignment?: \"compact\" | \"left\" | \"center\";\n}\n\nconst formHeaderTemplateStyles = tv({\n\tslots: {\n\t\theader: \"flex items-start gap-4\",\n\t\tcontentWrapper: \"flex flex-col gap-px lg:gap-1.5\",\n\t\ticon: \"shrink-0 rounded-lg ring-0\"\n\t},\n\tvariants: {\n\t\talignment: {\n\t\t\tcompact: {\n\t\t\t\theader: \"flex-row pr-9\"\n\t\t\t},\n\t\t\tleft: {\n\t\t\t\theader: \"flex-col gap-2 lg:gap-4\",\n\t\t\t\tcontentWrapper: \"gap-0.5 lg:gap-1\"\n\t\t\t},\n\t\t\tcenter: {\n\t\t\t\theader: \"flex-col items-center gap-2 text-center lg:gap-4\",\n\t\t\t\tcontentWrapper: \"gap-0.5 lg:gap-1\"\n\t\t\t}\n\t\t}\n\t} satisfies VariantsConfig<FormHeaderTemplateVariants>,\n\tdefaultVariants: {\n\t\talignment: \"compact\"\n\t}\n});\n\nexport type BaseHeaderTemplateProps = Omit<HTMLAttributes<HTMLDivElement>, \"title\"> &\n\tFormHeaderTemplateVariants & {\n\t\t/** Заголовок формы */\n\t\ttitle: React.ReactNode;\n\t\t/** Описание формы */\n\t\tdescription?: React.ReactNode;\n\t\t/** Иконка заголовка */\n\t\ticon?: LucideIcon;\n\t\t/** Кастомная иконка заголовка */\n\t\tcustomIcon?: React.ReactNode;\n\t};\n\nexport const BaseHeaderTemplate = React.forwardRef<HTMLDivElement, PropsWithChildren<BaseHeaderTemplateProps>>(\n\t({ className, icon: Icon, title, alignment, description, customIcon, ...props }, ref) => {\n\t\tconst { header, contentWrapper, icon } = formHeaderTemplateStyles({ alignment });\n\n\t\treturn (\n\t\t\t<FormHeader ref={ref} className={header({ class: className })} {...props}>\n\t\t\t\t{Icon && <FeatureIcon size=\"xl\" icon={Icon} className={icon()} />}\n\t\t\t\t{customIcon && customIcon}\n\t\t\t\t<div className={contentWrapper()}>\n\t\t\t\t\t{title}\n\t\t\t\t\t{description}\n\t\t\t\t</div>\n\t\t\t</FormHeader>\n\t\t);\n\t}\n);\n\n/**\n * Темплейт заголовка формы. Содержит иконку, заголовок и описание.\n * Имеет различные варианты расположения элементов\n */\nexport const FormHeaderTemplate = React.forwardRef<HTMLDivElement, PropsWithChildren<BaseHeaderTemplateProps>>(\n\t({ title, description, ...props }, ref) => {\n\t\treturn (\n\t\t\t<BaseHeaderTemplate\n\t\t\t\ttitle={<FormTitle>{title}</FormTitle>}\n\t\t\t\tdescription={<FormDescription>{description}</FormDescription>}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t}\n);\n\nFormHeaderTemplate.displayName = \"FormHeaderTemplate\";\n","import { Button, ButtonProps } from \"@/components/button/button/Button\";\nimport { CheckboxField, CheckboxFieldProps } from \"@/components/checkbox/checkbox-field/CheckboxField\";\nimport { useIsMobile } from \"@/hooks/useBreakpoints\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { FormFooter } from \"../../components/form-footer/FormFooter\";\n\nconst formFooterTemplateStyles = tv({\n\tslots: {\n\t\tcontainer: \"flex w-full flex-col gap-3 lg:flex-row\",\n\t\tstartBlock: \"flex items-center py-1 lg:py-2.5\",\n\t\tendBlock: \"ml-auto flex w-full flex-col gap-3 lg:w-auto lg:flex-row\"\n\t}\n});\n\nexport interface FormFooterTemplateProps {\n\t/** Дополнительные классы */\n\tclassName?: string;\n\t/** Текст для чекбокса */\n\tcheckboxLabel?: string;\n\t/** Пропсы для чекбокса */\n\tcheckboxProps?: CheckboxFieldProps;\n\t/** Основная кнопка */\n\tprimaryButton?: React.ReactNode;\n\t/** Пропсы для основной кнопки */\n\tprimaryButtonProps?: ButtonProps;\n\t/** Вторичная кнопка */\n\tsecondaryButton?: React.ReactNode;\n\t/** Пропсы для вторичной кнопки */\n\tsecondaryButtonProps?: ButtonProps;\n}\n\n/**\n * Темплейт футера формы. Содержит чекбокс и 2 кнопки, которыми можно управлять.\n * Адаптивен к размерам устройств\n */\nexport const FormFooterTemplate = React.forwardRef<HTMLDivElement, FormFooterTemplateProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\tprimaryButton,\n\t\t\tsecondaryButton,\n\t\t\tcheckboxLabel,\n\t\t\tcheckboxProps,\n\t\t\tprimaryButtonProps,\n\t\t\tsecondaryButtonProps\n\t\t},\n\t\tref\n\t) => {\n\t\tconst isMobile = useIsMobile();\n\t\tconst { container, startBlock, endBlock } = formFooterTemplateStyles();\n\n\t\tif (isMobile) {\n\t\t\tprimaryButtonProps = { ...primaryButtonProps, size: \"xl\" };\n\t\t\tsecondaryButtonProps = { ...secondaryButtonProps, size: \"xl\" };\n\t\t}\n\t\tconst primaryButtonElement = primaryButton && (\n\t\t\t<Button key=\"primary-button\" variant=\"primary\" {...primaryButtonProps}>\n\t\t\t\t{primaryButton}\n\t\t\t</Button>\n\t\t);\n\n\t\tconst secondaryButtonElement = secondaryButton && (\n\t\t\t<Button key=\"secondary-button\" variant=\"outline\" {...secondaryButtonProps}>\n\t\t\t\t{secondaryButton}\n\t\t\t</Button>\n\t\t);\n\n\t\treturn (\n\t\t\t<FormFooter className={className} ref={ref}>\n\t\t\t\t<div className={container()}>\n\t\t\t\t\t{checkboxLabel && (\n\t\t\t\t\t\t<div className={startBlock()}>\n\t\t\t\t\t\t\t<CheckboxField label={checkboxLabel} {...checkboxProps} />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t\t<div className={endBlock()}>\n\t\t\t\t\t\t{isMobile\n\t\t\t\t\t\t\t? [primaryButtonElement, secondaryButtonElement]\n\t\t\t\t\t\t\t: [secondaryButtonElement, primaryButtonElement]}\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</FormFooter>\n\t\t);\n\t}\n);\n\nFormFooterTemplate.displayName = \"FormFooterTemplate\";\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":"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"}

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

@@ -1,5 +1,5 @@
 import { jsx as t, Fragment as m } from "react/jsx-runtime";
-import { S as d } from "./ScrollShadowContainer-DdrnF8qU.js";
+import { S as d } from "./ScrollShadowContainer-KUmqA25a.js";
 import a from "react";
 import { T as n } from "./index-BVqs-uqP.js";
 const i = n({
@@ -46,4 +46,4 @@ export {
   F as e,
   x as f
 };
-//# sourceMappingURL=FormHeader-PE63OqG9.js.map
+//# sourceMappingURL=FormHeader-CX2jsIcI.js.map

package/dist/FormHeader-CX2jsIcI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormHeader-CX2jsIcI.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\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst formBodyStyles = tv({\n\tslots: {\n\t\tcontent: \"px-4 py-5 lg:p-6\"\n\t}\n});\n\n/**\n * Тело формы\n */\nexport const FormBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n\t({ className, children, ...props }, ref) => {\n\t\tconst styles = formBodyStyles();\n\n\t\treturn (\n\t\t\t<ScrollShadowContainer className={styles.content({ className })} {...props} ref={ref}>\n\t\t\t\t{children}\n\t\t\t</ScrollShadowContainer>\n\t\t);\n\t}\n);\n\nFormBody.displayName = \"FormBody\";\n","import React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst formFooterStyles = tv({\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\"\n});\n\n/**\n * Футер формы\n */\nexport const FormFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n\t({ className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<div ref={ref} className={formFooterStyles({ class: className })} {...props}>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nFormFooter.displayName = \"FormFooter\";\n","import React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nconst formHeaderStyles = tv({\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\"\n});\n\n/**\n * Заголовок формы\n */\nexport const FormHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n\t({ className, children, ...props }, ref) => {\n\t\treturn (\n\t\t\t<>\n\t\t\t\t<div ref={ref} className={formHeaderStyles({ class: className })} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</>\n\t\t);\n\t}\n);\n\nFormHeader.displayName = \"FormHeader\";\n\nexport const formTitleStyles = tv({\n\tbase: \"font-sans text-base font-semibold leading-none tracking-tight text-primary-fg lg:text-lg lg:leading-none\"\n});\n\n/**\n * Заголовок поля\n */\nexport const FormTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(\n\t({ className, ...props }, ref) => {\n\t\treturn <h2 ref={ref} className={formTitleStyles({ class: className })} {...props} />;\n\t}\n);\n\nFormTitle.displayName = \"FormTitle\";\n\nexport const formDescriptionStyles = tv({\n\tbase: \"font-sans text-sm font-normal tracking-tight text-muted\"\n});\n\n/**\n * Описание поля\n */\nexport const FormDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n\t({ className, ...props }, ref) => {\n\t\treturn <div ref={ref} className={formDescriptionStyles({ class: className })} {...props} />;\n\t}\n);\n\nFormDescription.displayName = \"FormDescription\";\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;"}