@ryuzaki13/react-foundation-ui 3.5.0 → 3.6.0

package/dist/chunks/flex-D86M_h-0.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex-D86M_h-0.js","names":[],"sources":["../../src/flex/Flex.module.scss","../../src/flex/useFlexClasses.ts","../../src/flex/FlexContainer.tsx","../../src/flex/FlexItem.tsx","../../src/flex/PredefinedFlex.tsx","../../src/flex/Flex.tsx","../../src/flex/FlexCenter.tsx","../../src/flex/FlexSpacer.tsx"],"sourcesContent":[".container {\n\tdisplay: flex;\n\n\t// Display variants\n\t&.inline {\n\t\tdisplay: inline-flex;\n\t\tvertical-align: middle;\n\t}\n\n\t// Direction\n\t&.row {\n\t\tflex-direction: row;\n\t}\n\t&.column {\n\t\tflex-direction: column;\n\t}\n\t&.rowReverse {\n\t\tflex-direction: row-reverse;\n\t}\n\t&.columnReverse {\n\t\tflex-direction: column-reverse;\n\t}\n\n\t// Wrap\n\t&.wrap {\n\t\tflex-wrap: wrap;\n\t}\n\t&.nowrap {\n\t\tflex-wrap: nowrap;\n\t}\n\t&.wrapReverse {\n\t\tflex-wrap: wrap-reverse;\n\t}\n\n\t// Align items\n\t&.alignStart {\n\t\talign-items: start;\n\t}\n\t&.alignCenter {\n\t\talign-items: center;\n\t}\n\t&.alignEnd {\n\t\talign-items: end;\n\t}\n\t&.alignStretch {\n\t\talign-items: stretch;\n\t}\n\t&.alignBaseline {\n\t\talign-items: baseline;\n\t}\n\n\t// Justify content\n\t&.justifyStart {\n\t\tjustify-content: start;\n\t}\n\t&.justifyCenter {\n\t\tjustify-content: center;\n\t}\n\t&.justifyEnd {\n\t\tjustify-content: end;\n\t}\n\t&.justifyStretch {\n\t\tjustify-content: stretch;\n\t}\n\t&.justifyBetween {\n\t\tjustify-content: space-between;\n\t}\n\t&.justifyAround {\n\t\tjustify-content: space-around;\n\t}\n\t&.justifyEvenly {\n\t\tjustify-content: space-evenly;\n\t}\n\n\t// Align content\n\t&.alignContentStart {\n\t\talign-content: start;\n\t}\n\t&.alignContentCenter {\n\t\talign-content: center;\n\t}\n\t&.alignContentEnd {\n\t\talign-content: end;\n\t}\n\t&.alignContentStretch {\n\t\talign-content: stretch;\n\t}\n\t&.alignContentBetween {\n\t\talign-content: space-between;\n\t}\n\t&.alignContentAround {\n\t\talign-content: space-around;\n\t}\n\t&.alignContentEvenly {\n\t\talign-content: space-evenly;\n\t}\n\n\t// Gap properties\n\t&.gapNone {\n\t\tgap: unset;\n\t}\n\n\t// Row gaps\n\t&.gapRowXs {\n\t\trow-gap: var(--space-xs);\n\t}\n\t&.gapRowSm {\n\t\trow-gap: var(--space-sm);\n\t}\n\t&.gapRowMd {\n\t\trow-gap: var(--space-md);\n\t}\n\t&.gapRowLg {\n\t\trow-gap: var(--space-lg);\n\t}\n\t&.gapRowXl {\n\t\trow-gap: var(--space-xl);\n\t}\n\n\t// Column gaps\n\t&.gapColumnXs {\n\t\tcolumn-gap: var(--space-xs);\n\t}\n\t&.gapColumnSm {\n\t\tcolumn-gap: var(--space-sm);\n\t}\n\t&.gapColumnMd {\n\t\tcolumn-gap: var(--space-md);\n\t}\n\t&.gapColumnLg {\n\t\tcolumn-gap: var(--space-lg);\n\t}\n\t&.gapColumnXl {\n\t\tcolumn-gap: var(--space-xl);\n\t}\n\n\t// Combined gaps\n\t&.gapXs {\n\t\trow-gap: var(--space-xs);\n\t\tcolumn-gap: var(--space-xs);\n\t}\n\t&.gapSm {\n\t\trow-gap: var(--space-sm);\n\t\tcolumn-gap: var(--space-sm);\n\t}\n\t&.gapMd {\n\t\trow-gap: var(--space-md);\n\t\tcolumn-gap: var(--space-md);\n\t}\n\t&.gapLg {\n\t\trow-gap: var(--space-lg);\n\t\tcolumn-gap: var(--space-lg);\n\t}\n\t&.gapXl {\n\t\trow-gap: var(--space-xl);\n\t\tcolumn-gap: var(--space-xl);\n\t}\n}\n\n.item {\n\t// Grow & Shrink with defaults (grow: 0, shrink: 1)\n\t&.grow {\n\t\tflex-grow: 1;\n\t}\n\t&.grow0 {\n\t\tflex-grow: 0;\n\t}\n\n\t&.shrink {\n\t\tflex-shrink: 1;\n\t}\n\t&.shrink0 {\n\t\tflex-shrink: 0;\n\t}\n\n\t// Basis\n\t&.basis0 {\n\t\tflex-basis: 0;\n\t}\n\t&.basisAuto {\n\t\tflex-basis: auto;\n\t}\n\n\t// Composite classes\n\t&.flex0 {\n\t\tflex-grow: 0;\n\t\tflex-shrink: 0;\n\t\tflex-basis: auto;\n\t}\n\n\t&.flex1 {\n\t\tflex-grow: 1;\n\t\tflex-shrink: 1;\n\t\tflex-basis: auto;\n\t}\n\n\t// Align self\n\t&.alignSelfStart {\n\t\talign-self: start;\n\t}\n\t&.alignSelfCenter {\n\t\talign-self: center;\n\t}\n\t&.alignSelfEnd {\n\t\talign-self: end;\n\t}\n\t&.alignSelfStretch {\n\t\talign-self: stretch;\n\t}\n\t&.alignSelfBaseline {\n\t\talign-self: baseline;\n\t}\n\n\t// Justify self\n\t&.justifySelfCenter {\n\t\tjustify-self: center;\n\t}\n\t&.justifySelfEnd {\n\t\tjustify-self: end;\n\t}\n\t&.justifySelfStretch {\n\t\tjustify-self: stretch;\n\t}\n}\n\n// Predefined compositions\n\n.center {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n}\n\n.centerBetween {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: space-between;\n}\n\n.columnCenter {\n\t@extend .center;\n\tflex-direction: column;\n\theight: 100%;\n}\n","import { useMemo } from \"react\";\n\nimport { ResolvedProps } from \"@ryuzaki13/react-foundation-lib/media\";\n\nimport styles from \"./Flex.module.scss\";\n\nimport type { FlexContainerLayoutProps, FlexItemLayoutProps } from \"./types\";\n\ntype ClassName = string | undefined | null | false;\n\nexport type ResolvedFlexContainerProps = ResolvedProps<FlexContainerLayoutProps>;\nexport type ResolvedFlexItemProps = ResolvedProps<FlexItemLayoutProps>;\n\nexport const useFlexContainerClasses = (props: ResolvedFlexContainerProps) => {\n\treturn useMemo(() => {\n\t\tconst classes: ClassName[] = [styles.container];\n\n\t\t// Display\n\t\tif (props.inline) classes.push(styles.inline);\n\n\t\t// Direction (mutually exclusive)\n\t\tif (props.row) classes.push(styles.row);\n\t\telse if (props.column) classes.push(styles.column);\n\t\telse if (props.rowReverse) classes.push(styles.rowReverse);\n\t\telse if (props.columnReverse) classes.push(styles.columnReverse);\n\n\t\t// Wrap (mutually exclusive)\n\t\tif (props.wrap) classes.push(styles.wrap);\n\t\telse if (props.nowrap) classes.push(styles.nowrap);\n\t\telse if (props.wrapReverse) classes.push(styles.wrapReverse);\n\n\t\t// Alignment\n\t\tif (props.align) classes.push(styles[`align${props.align.charAt(0).toUpperCase() + props.align.slice(1)}` as keyof typeof styles]);\n\n\t\t// Justify\n\t\tif (props.justify)\n\t\t\tclasses.push(styles[`justify${props.justify.charAt(0).toUpperCase() + props.justify.slice(1)}` as keyof typeof styles]);\n\n\t\t// Align content\n\t\tif (props.alignContent)\n\t\t\tclasses.push(\n\t\t\t\tstyles[`alignContent${props.alignContent.charAt(0).toUpperCase() + props.alignContent.slice(1)}` as keyof typeof styles]\n\t\t\t);\n\n\t\t// Gap properties\n\t\tif (props.gap === \"none\") classes.push(styles.gapNone);\n\t\telse if (props.gap) classes.push(styles[`gap${props.gap.charAt(0).toUpperCase() + props.gap.slice(1)}` as keyof typeof styles]);\n\n\t\tif (props.gapRow)\n\t\t\tclasses.push(styles[`gapRow${props.gapRow.charAt(0).toUpperCase() + props.gapRow.slice(1)}` as keyof typeof styles]);\n\t\tif (props.gapColumn)\n\t\t\tclasses.push(styles[`gapColumn${props.gapColumn.charAt(0).toUpperCase() + props.gapColumn.slice(1)}` as keyof typeof styles]);\n\n\t\treturn classes.filter(Boolean).join(\" \");\n\t}, [props]);\n};\n\nexport const useFlexItemClasses = (props: ResolvedFlexItemProps) => {\n\treturn useMemo(() => {\n\t\tconst classes: ClassName[] = [styles.item];\n\n\t\t// Composite classes (highest priority)\n\t\tif (props.flex0) classes.push(styles.flex0);\n\t\tif (props.flex1) classes.push(styles.flex1);\n\n\t\t// Individual properties (only if composite not used)\n\t\tif (!props.flex0 && !props.flex1) {\n\t\t\t// Grow (default: false = 0)\n\t\t\tif (props.grow) classes.push(styles.grow);\n\t\t\telse classes.push(styles.grow0);\n\n\t\t\t// Shrink (default: true = 1)\n\t\t\tif (props.shrink === false) classes.push(styles.shrink0);\n\t\t\telse classes.push(styles.shrink);\n\n\t\t\t// Basis\n\t\t\tif (props.basis === \"0\") classes.push(styles.basis0);\n\t\t\telse if (props.basis === \"auto\") classes.push(styles.basisAuto);\n\t\t}\n\n\t\t// Self alignment\n\t\tif (props.alignSelf)\n\t\t\tclasses.push(styles[`alignSelf${props.alignSelf.charAt(0).toUpperCase() + props.alignSelf.slice(1)}` as keyof typeof styles]);\n\n\t\t// Justify self\n\t\tif (props.justifySelf)\n\t\t\tclasses.push(\n\t\t\t\tstyles[`justifySelf${props.justifySelf.charAt(0).toUpperCase() + props.justifySelf.slice(1)}` as keyof typeof styles]\n\t\t\t);\n\n\t\treturn classes.filter(Boolean).join(\" \");\n\t}, [props]);\n};\n\nexport const useFlexPredefinedClasses = (variant: string) => {\n\treturn styles[variant as keyof typeof styles];\n};\n","import { type Ref, useMemo } from \"react\";\n\nimport { resolveProps, useMatchMedia } from \"@ryuzaki13/react-foundation-lib/media\";\n\nimport { PolymorphicComponent } from \"../polymorphic\";\n\nimport { FlexContainerLayoutProps, FlexContainerProps } from \"./types\";\nimport { useFlexContainerClasses } from \"./useFlexClasses\";\n\nconst RESPONSIVE_KEYS = [\n\t\"inline\",\n\t\"row\",\n\t\"column\",\n\t\"rowReverse\",\n\t\"columnReverse\",\n\t\"wrap\",\n\t\"nowrap\",\n\t\"wrapReverse\",\n\t\"align\",\n\t\"justify\",\n\t\"alignContent\",\n\t\"gap\",\n\t\"gapRow\",\n\t\"gapColumn\"\n] as const satisfies readonly (keyof FlexContainerLayoutProps)[];\n\nexport function FlexContainer({\n\tref,\n\tchildren,\n\tclassName = \"\",\n\tas,\n\tstyle,\n\tinline,\n\trow,\n\tcolumn,\n\trowReverse,\n\tcolumnReverse,\n\twrap,\n\tnowrap,\n\twrapReverse,\n\talign,\n\tjustify,\n\talignContent,\n\tgap,\n\tgapRow,\n\tgapColumn,\n\t...htmlProps\n}: FlexContainerProps & { ref?: Ref<HTMLElement> }) {\n\tconst { activeBreakpoint } = useMatchMedia();\n\n\tconst resolvedProps = useMemo(\n\t\t() =>\n\t\t\tresolveProps(\n\t\t\t\t{\n\t\t\t\t\tinline,\n\t\t\t\t\trow,\n\t\t\t\t\tcolumn,\n\t\t\t\t\trowReverse,\n\t\t\t\t\tcolumnReverse,\n\t\t\t\t\twrap,\n\t\t\t\t\tnowrap,\n\t\t\t\t\twrapReverse,\n\t\t\t\t\talign,\n\t\t\t\t\tjustify,\n\t\t\t\t\talignContent,\n\t\t\t\t\tgap,\n\t\t\t\t\tgapRow,\n\t\t\t\t\tgapColumn\n\t\t\t\t},\n\t\t\t\tactiveBreakpoint,\n\t\t\t\tRESPONSIVE_KEYS\n\t\t\t),\n\t\t[\n\t\t\tactiveBreakpoint,\n\t\t\talign,\n\t\t\talignContent,\n\t\t\tcolumn,\n\t\t\tcolumnReverse,\n\t\t\tgap,\n\t\t\tgapColumn,\n\t\t\tgapRow,\n\t\t\tinline,\n\t\t\tjustify,\n\t\t\tnowrap,\n\t\t\trow,\n\t\t\trowReverse,\n\t\t\twrap,\n\t\t\twrapReverse\n\t\t]\n\t);\n\n\tconst flexClasses = useFlexContainerClasses(resolvedProps);\n\n\tconst finalClassName = [flexClasses, className].filter(Boolean).join(\" \");\n\treturn (\n\t\t<PolymorphicComponent as={as} {...htmlProps} ref={ref} className={finalClassName} style={style}>\n\t\t\t{children}\n\t\t</PolymorphicComponent>\n\t);\n}\n\nFlexContainer.displayName = \"FlexContainer\";\n","import { type Ref, useMemo } from \"react\";\n\nimport { resolveProps, useMatchMedia } from \"@ryuzaki13/react-foundation-lib/media\";\n\nimport { PolymorphicComponent } from \"../polymorphic\";\n\nimport { FlexItemLayoutProps, FlexItemProps } from \"./types\";\nimport { useFlexItemClasses } from \"./useFlexClasses\";\n\nconst RESPONSIVE_KEYS = [\n\t\"flex0\",\n\t\"flex1\",\n\t\"grow\",\n\t\"shrink\",\n\t\"basis\",\n\t\"alignSelf\",\n\t\"justifySelf\"\n] as const satisfies readonly (keyof FlexItemLayoutProps)[];\n\nexport function FlexItem({\n\tref,\n\tchildren,\n\tclassName = \"\",\n\tas,\n\tstyle,\n\tflex0,\n\tflex1,\n\tgrow,\n\tshrink,\n\tbasis,\n\talignSelf,\n\tjustifySelf,\n\t...htmlProps\n}: FlexItemProps & { ref?: Ref<HTMLElement> }) {\n\tconst { activeBreakpoint } = useMatchMedia();\n\n\tconst resolvedProps = useMemo(\n\t\t() => resolveProps({ flex0, flex1, grow, shrink, basis, alignSelf, justifySelf }, activeBreakpoint, RESPONSIVE_KEYS),\n\t\t[activeBreakpoint, alignSelf, basis, flex0, flex1, grow, justifySelf, shrink]\n\t);\n\n\tconst flexClasses = useFlexItemClasses(resolvedProps);\n\n\tconst finalClassName = [flexClasses, className].filter(Boolean).join(\" \");\n\treturn (\n\t\t<PolymorphicComponent as={as} {...htmlProps} ref={ref} className={finalClassName} style={style}>\n\t\t\t{children}\n\t\t</PolymorphicComponent>\n\t);\n}\n\nFlexItem.displayName = \"FlexItem\";\n","import { type Ref } from \"react\";\n\nimport { FlexContainer } from \"./FlexContainer\";\nimport { PredefinedFlexProps } from \"./types\";\nimport { useFlexPredefinedClasses } from \"./useFlexClasses\";\n\nexport function PredefinedFlex({ ref, variant, children, className = \"\", ...props }: PredefinedFlexProps & { ref?: Ref<HTMLElement> }) {\n\tconst predefinedClass = useFlexPredefinedClasses(variant ?? \"\");\n\tconst finalClassName = [predefinedClass, className].filter(Boolean).join(\" \");\n\n\treturn (\n\t\t<FlexContainer ref={ref} className={finalClassName} {...props}>\n\t\t\t{children}\n\t\t</FlexContainer>\n\t);\n}\n\nPredefinedFlex.displayName = \"PredefinedFlex\";\n","import { FlexContainer } from \"./FlexContainer\";\nimport { FlexItem } from \"./FlexItem\";\nimport { PredefinedFlex } from \"./PredefinedFlex\";\n\nexport const Flex = {\n\tContainer: FlexContainer,\n\tItem: FlexItem,\n\tPredefined: PredefinedFlex\n};\n","import type { HTMLAttributes, ReactNode } from \"react\";\n\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\n\nexport interface FlexCenterProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n\tchildren?: ReactNode;\n\tminHeight?: string | number;\n}\n\nexport function FlexCenter({ className, minHeight, children, style, ...htmlProps }: FlexCenterProps) {\n\tconst finalStyle = minHeight === undefined ? style : { ...style, minHeight };\n\n\treturn (\n\t\t<div {...htmlProps} className={cn(\"flexCenter h100\", className)} style={finalStyle}>\n\t\t\t{children}\n\t\t</div>\n\t);\n}\n","import { type Ref } from \"react\";\n\nimport { FlexItem } from \"./FlexItem\";\n\nimport type { FlexItemProps } from \"./types\";\n\nexport type FlexSpacerProps = Omit<FlexItemProps, \"children\" | \"flex1\">;\n\nexport function FlexSpacer({ ref, ...props }: FlexSpacerProps & { ref?: Ref<HTMLElement> }) {\n\treturn <FlexItem {...props} ref={ref} flex1 />;\n}\n\nFlexSpacer.displayName = \"FlexSpacer\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCaa,KAA2B,MAChC,QAAc;CACpB,IAAM,IAAuB,CAAC,EAAO,SAAS;CAsC9C,OAnCI,EAAM,UAAQ,EAAQ,KAAK,EAAO,MAAM,GAGxC,EAAM,MAAK,EAAQ,KAAK,EAAO,GAAG,IAC7B,EAAM,SAAQ,EAAQ,KAAK,EAAO,MAAM,IACxC,EAAM,aAAY,EAAQ,KAAK,EAAO,UAAU,IAChD,EAAM,iBAAe,EAAQ,KAAK,EAAO,aAAa,GAG3D,EAAM,OAAM,EAAQ,KAAK,EAAO,IAAI,IAC/B,EAAM,SAAQ,EAAQ,KAAK,EAAO,MAAM,IACxC,EAAM,eAAa,EAAQ,KAAK,EAAO,WAAW,GAGvD,EAAM,SAAO,EAAQ,KAAK,EAAO,QAAQ,EAAM,MAAM,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAM,MAAM,MAAM,CAAC,IAA2B,GAG7H,EAAM,WACT,EAAQ,KAAK,EAAO,UAAU,EAAM,QAAQ,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAM,QAAQ,MAAM,CAAC,IAA2B,GAGnH,EAAM,gBACT,EAAQ,KACP,EAAO,eAAe,EAAM,aAAa,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAM,aAAa,MAAM,CAAC,IAC9F,GAGG,EAAM,QAAQ,SAAQ,EAAQ,KAAK,EAAO,OAAO,IAC5C,EAAM,OAAK,EAAQ,KAAK,EAAO,MAAM,EAAM,IAAI,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAM,IAAI,MAAM,CAAC,IAA2B,GAE1H,EAAM,UACT,EAAQ,KAAK,EAAO,SAAS,EAAM,OAAO,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAM,OAAO,MAAM,CAAC,IAA2B,GAChH,EAAM,aACT,EAAQ,KAAK,EAAO,YAAY,EAAM,UAAU,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAM,UAAU,MAAM,CAAC,IAA2B,GAEtH,EAAQ,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACxC,GAAG,CAAC,CAAK,CAAC,GAGE,KAAsB,MAC3B,QAAc;CACpB,IAAM,IAAuB,CAAC,EAAO,IAAI;CA+BzC,OA5BI,EAAM,SAAO,EAAQ,KAAK,EAAO,KAAK,GACtC,EAAM,SAAO,EAAQ,KAAK,EAAO,KAAK,GAGtC,CAAC,EAAM,SAAS,CAAC,EAAM,UAEtB,EAAM,OAAM,EAAQ,KAAK,EAAO,IAAI,IACnC,EAAQ,KAAK,EAAO,KAAK,GAG1B,EAAM,WAAW,KAAO,EAAQ,KAAK,EAAO,OAAO,IAClD,EAAQ,KAAK,EAAO,MAAM,GAG3B,EAAM,UAAU,MAAK,EAAQ,KAAK,EAAO,MAAM,IAC1C,EAAM,UAAU,UAAQ,EAAQ,KAAK,EAAO,SAAS,IAI3D,EAAM,aACT,EAAQ,KAAK,EAAO,YAAY,EAAM,UAAU,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAM,UAAU,MAAM,CAAC,IAA2B,GAGzH,EAAM,eACT,EAAQ,KACP,EAAO,cAAc,EAAM,YAAY,OAAO,CAAC,CAAC,CAAC,YAAY,IAAI,EAAM,YAAY,MAAM,CAAC,IAC3F,GAEM,EAAQ,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;AACxC,GAAG,CAAC,CAAK,CAAC,GAGE,KAA4B,MACjC,EAAO,ICtFT,IAAkB;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACD;AAEA,SAAgB,EAAc,EAC7B,QACA,aACA,eAAY,IACZ,OACA,UACA,WACA,QACA,WACA,eACA,kBACA,SACA,WACA,gBACA,UACA,YACA,iBACA,QACA,WACA,cACA,GAAG,KACgD;CACnD,IAAM,EAAE,wBAAqB,EAAc,GA6CrC,IAAiB,CAFH,EAzCE,QAEpB,EACC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,GACA,GACA,CACD,GACD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACD,CAG2C,CAEpB,GAAa,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CACxE,OACC,kBAAC,GAAD;EAA0B;EAAI,GAAI;EAAgB;EAAK,WAAW;EAAuB;EACvF;CACoB,CAAA;AAExB;AAEA,EAAc,cAAc;;;AC5F5B,IAAM,IAAkB;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;AACD;AAEA,SAAgB,EAAS,EACxB,QACA,aACA,eAAY,IACZ,OACA,UACA,UACA,UACA,SACA,WACA,UACA,cACA,gBACA,GAAG,KAC2C;CAC9C,IAAM,EAAE,wBAAqB,EAAc,GASrC,IAAiB,CAFH,EALE,QACf,EAAa;EAAE;EAAO;EAAO;EAAM;EAAQ;EAAO;EAAW;CAAY,GAAG,GAAkB,CAAe,GACnH;EAAC;EAAkB;EAAW;EAAO;EAAO;EAAO;EAAM;EAAa;CAAM,CAGtC,CAEf,GAAa,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CACxE,OACC,kBAAC,GAAD;EAA0B;EAAI,GAAI;EAAgB;EAAK,WAAW;EAAuB;EACvF;CACoB,CAAA;AAExB;AAEA,EAAS,cAAc;;;AC7CvB,SAAgB,EAAe,EAAE,QAAK,YAAS,aAAU,eAAY,IAAI,GAAG,KAA2D;CAEtI,IAAM,IAAiB,CADC,EAAyB,KAAW,EACpC,GAAiB,CAAS,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;CAE5E,OACC,kBAAC,GAAD;EAAoB;EAAK,WAAW;EAAgB,GAAI;EACtD;CACa,CAAA;AAEjB;AAEA,EAAe,cAAc;;;ACb7B,IAAa,IAAO;CACnB,WAAW;CACX,MAAM;CACN,YAAY;AACb;;;ACCA,SAAgB,EAAW,EAAE,cAAW,cAAW,aAAU,UAAO,GAAG,KAA8B;CACpG,IAAM,IAAa,MAAc,KAAA,IAAY,IAAQ;EAAE,GAAG;EAAO;CAAU;CAE3E,OACC,kBAAC,OAAD;EAAK,GAAI;EAAW,WAAW,EAAG,mBAAmB,CAAS;EAAG,OAAO;EACtE;CACG,CAAA;AAEP;;;ACTA,SAAgB,EAAW,EAAE,QAAK,GAAG,KAAuD;CAC3F,OAAO,kBAAC,GAAD;EAAU,GAAI;EAAY;EAAK,OAAA;CAAO,CAAA;AAC9C;AAEA,EAAW,cAAc"}

package/dist/chunks/{floating-arrow-DKUKx2ZQ.js → floating-arrow-B_iSbzUZ.js}

@@ -1,7 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
 //#region src/floating-arrow/getArrowStyle.ts
-function n(e, t) {
+function t(e, t) {
 	if (!t?.arrow) return {};
 	let { x: n, y: r } = t.arrow, i = e.split("-")[0], a = {
 		top: "bottom",
@@ -28,21 +27,23 @@ function n(e, t) {
 }
 //#endregion
 //#region src/floating-arrow/FloatingArrow.tsx
-var r = t(({ placement: t, middlewareData: r }, i) => /* @__PURE__ */ e("div", {
-	ref: i,
-	style: n(t, r),
-	children: /* @__PURE__ */ e("svg", {
-		width: "16",
-		height: "16",
-		viewBox: "0 0 16 16",
-		fill: "var(--border-2)",
-		stroke: "var(--border-2)",
-		strokeWidth: "var(--border-width)",
-		style: { display: "block" },
-		children: /* @__PURE__ */ e("polygon", { points: "8,8 16,16 0,16" })
-	})
-}));
+function n({ ref: n, placement: r, middlewareData: i }) {
+	return /* @__PURE__ */ e("div", {
+		ref: n,
+		style: t(r, i),
+		children: /* @__PURE__ */ e("svg", {
+			width: "16",
+			height: "16",
+			viewBox: "0 0 16 16",
+			fill: "var(--border-2)",
+			stroke: "var(--border-2)",
+			strokeWidth: "var(--border-width)",
+			style: { display: "block" },
+			children: /* @__PURE__ */ e("polygon", { points: "8,8 16,16 0,16" })
+		})
+	});
+}
 //#endregion
-export { r as t };
+export { n as t };
 
-//# sourceMappingURL=floating-arrow-DKUKx2ZQ.js.map
+//# sourceMappingURL=floating-arrow-B_iSbzUZ.js.map

package/dist/chunks/{floating-arrow-DKUKx2ZQ.js.map → floating-arrow-B_iSbzUZ.js.map}

@@ -1 +1 @@
-{"version":3,"file":"floating-arrow-DKUKx2ZQ.js","names":[],"sources":["../../src/floating-arrow/getArrowStyle.ts","../../src/floating-arrow/FloatingArrow.tsx"],"sourcesContent":["import { MiddlewareData } from \"@floating-ui/react\";\n\nexport function getArrowStyle(placement: string, middlewareData?: MiddlewareData): React.CSSProperties {\n\tif (!middlewareData?.arrow) return {};\n\n\tconst { x, y } = middlewareData.arrow;\n\tconst place = placement.split(\"-\")[0];\n\n\tconst staticSide = {\n\t\ttop: \"bottom\",\n\t\tright: \"left\",\n\t\tbottom: \"top\",\n\t\tleft: \"right\"\n\t}[place] as keyof React.CSSProperties;\n\n\tconst rotate = {\n\t\ttop: \"rotate(180deg)\",\n\t\tright: \"rotate(-90deg)\",\n\t\tbottom: \"rotate(0deg)\",\n\t\tleft: \"rotate(90deg)\"\n\t}[place] as keyof React.CSSProperties;\n\n\treturn {\n\t\tpointerEvents: \"none\",\n\t\tposition: \"absolute\",\n\t\tzIndex: -5,\n\t\twidth: \"16px\",\n\t\theight: \"16px\",\n\t\tleft: x != null ? `${x}px` : \"\",\n\t\ttop: y != null ? `${y}px` : \"\",\n\t\ttransform: rotate,\n\t\t[staticSide]: \"-16px\" // позиция стрелки в зависимости от стороны\n\t};\n}\n","import { forwardRef } from \"react\";\n\nimport { MiddlewareData, Placement } from \"@floating-ui/react\";\n\nimport { getArrowStyle } from \"./getArrowStyle\";\n\ninterface TooltipArrowProps {\n\tplacement: Placement;\n\tmiddlewareData: MiddlewareData;\n}\n\nexport const FloatingArrow = forwardRef<HTMLDivElement, TooltipArrowProps>(({ placement, middlewareData }, ref) => {\n\treturn (\n\t\t<div ref={ref} style={getArrowStyle(placement, middlewareData)}>\n\t\t\t<svg\n\t\t\t\twidth=\"16\"\n\t\t\t\theight=\"16\"\n\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\tfill=\"var(--border-2)\"\n\t\t\t\tstroke=\"var(--border-2)\"\n\t\t\t\tstrokeWidth=\"var(--border-width)\"\n\t\t\t\tstyle={{ display: \"block\" }}>\n\t\t\t\t<polygon points=\"8,8 16,16 0,16\" />\n\t\t\t</svg>\n\t\t</div>\n\t);\n});\n"],"mappings":";;;AAEA,SAAgB,EAAc,GAAmB,GAAsD;CACtG,IAAI,CAAC,GAAgB,OAAO,OAAO,CAAC;CAEpC,IAAM,EAAE,MAAG,SAAM,EAAe,OAC1B,IAAQ,EAAU,MAAM,GAAG,CAAC,CAAC,IAE7B,IAAa;EAClB,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;CACP,EAAE,IAEI,IAAS;EACd,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;CACP,EAAE;CAEF,OAAO;EACN,eAAe;EACf,UAAU;EACV,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,MAAM,KAAK,OAAkB,KAAX,GAAG,EAAE;EACvB,KAAK,KAAK,OAAkB,KAAX,GAAG,EAAE;EACtB,WAAW;GACV,IAAa;CACf;AACD;;;ACtBA,IAAa,IAAgB,GAA+C,EAAE,cAAW,qBAAkB,MAEzG,kBAAC,OAAD;CAAU;CAAK,OAAO,EAAc,GAAW,CAAc;CAC5D,UAAA,kBAAC,OAAD;EACC,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAY;EACZ,OAAO,EAAE,SAAS,QAAQ;EAC1B,UAAA,kBAAC,WAAD,EAAS,QAAO,iBAAkB,CAAA;CAC9B,CAAA;AACD,CAAA,CAEN"}
+{"version":3,"file":"floating-arrow-B_iSbzUZ.js","names":[],"sources":["../../src/floating-arrow/getArrowStyle.ts","../../src/floating-arrow/FloatingArrow.tsx"],"sourcesContent":["import { MiddlewareData } from \"@floating-ui/react\";\n\nexport function getArrowStyle(placement: string, middlewareData?: MiddlewareData): React.CSSProperties {\n\tif (!middlewareData?.arrow) return {};\n\n\tconst { x, y } = middlewareData.arrow;\n\tconst place = placement.split(\"-\")[0];\n\n\tconst staticSide = {\n\t\ttop: \"bottom\",\n\t\tright: \"left\",\n\t\tbottom: \"top\",\n\t\tleft: \"right\"\n\t}[place] as keyof React.CSSProperties;\n\n\tconst rotate = {\n\t\ttop: \"rotate(180deg)\",\n\t\tright: \"rotate(-90deg)\",\n\t\tbottom: \"rotate(0deg)\",\n\t\tleft: \"rotate(90deg)\"\n\t}[place] as keyof React.CSSProperties;\n\n\treturn {\n\t\tpointerEvents: \"none\",\n\t\tposition: \"absolute\",\n\t\tzIndex: -5,\n\t\twidth: \"16px\",\n\t\theight: \"16px\",\n\t\tleft: x != null ? `${x}px` : \"\",\n\t\ttop: y != null ? `${y}px` : \"\",\n\t\ttransform: rotate,\n\t\t[staticSide]: \"-16px\" // позиция стрелки в зависимости от стороны\n\t};\n}\n","import { type Ref } from \"react\";\n\nimport { MiddlewareData, Placement } from \"@floating-ui/react\";\n\nimport { getArrowStyle } from \"./getArrowStyle\";\n\ninterface TooltipArrowProps {\n\tplacement: Placement;\n\tmiddlewareData: MiddlewareData;\n}\n\nexport function FloatingArrow({ ref, placement, middlewareData }: TooltipArrowProps & { ref?: Ref<HTMLDivElement> }) {\n\treturn (\n\t\t<div ref={ref} style={getArrowStyle(placement, middlewareData)}>\n\t\t\t<svg\n\t\t\t\twidth=\"16\"\n\t\t\t\theight=\"16\"\n\t\t\t\tviewBox=\"0 0 16 16\"\n\t\t\t\tfill=\"var(--border-2)\"\n\t\t\t\tstroke=\"var(--border-2)\"\n\t\t\t\tstrokeWidth=\"var(--border-width)\"\n\t\t\t\tstyle={{ display: \"block\" }}>\n\t\t\t\t<polygon points=\"8,8 16,16 0,16\" />\n\t\t\t</svg>\n\t\t</div>\n\t);\n}\n"],"mappings":";;AAEA,SAAgB,EAAc,GAAmB,GAAsD;CACtG,IAAI,CAAC,GAAgB,OAAO,OAAO,CAAC;CAEpC,IAAM,EAAE,MAAG,SAAM,EAAe,OAC1B,IAAQ,EAAU,MAAM,GAAG,CAAC,CAAC,IAE7B,IAAa;EAClB,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;CACP,EAAE,IAEI,IAAS;EACd,KAAK;EACL,OAAO;EACP,QAAQ;EACR,MAAM;CACP,EAAE;CAEF,OAAO;EACN,eAAe;EACf,UAAU;EACV,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,MAAM,KAAK,OAAkB,KAAX,GAAG,EAAE;EACvB,KAAK,KAAK,OAAkB,KAAX,GAAG,EAAE;EACtB,WAAW;GACV,IAAa;CACf;AACD;;;ACtBA,SAAgB,EAAc,EAAE,QAAK,cAAW,qBAAqE;CACpH,OACC,kBAAC,OAAD;EAAU;EAAK,OAAO,EAAc,GAAW,CAAc;EAC5D,UAAA,kBAAC,OAAD;GACC,OAAM;GACN,QAAO;GACP,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,OAAO,EAAE,SAAS,QAAQ;GAC1B,UAAA,kBAAC,WAAD,EAAS,QAAO,iBAAkB,CAAA;EAC9B,CAAA;CACD,CAAA;AAEP"}

package/dist/chunks/{grid-dI94AAbi.js → grid-CFuzBigM.js}

@@ -1,4 +1,6 @@
-import { createElement as e, forwardRef as t, useMemo as n } from "react";
+import { PolymorphicComponent as e } from "../polymorphic/index.js";
+import { jsx as t } from "react/jsx-runtime";
+import { useMemo as n } from "react";
 import { resolveResponsiveValue as r, useMatchMedia as i } from "@ryuzaki13/react-foundation-lib/media";
 var a = {
 	grid: "_5Z2YQF",
@@ -81,89 +83,96 @@ var a = {
 	e.area,
 	e.column,
 	e.row
-]), u = t(({ children: t, className: a = "", as: c, style: l, inline: u, row: d, column: f, dense: p, gap: m, gapRow: h, gapColumn: g, align: _, justify: v, alignContent: y, justifyContent: b, templateColumns: x, templateRows: S, autoColumns: C, autoRows: w, areas: T, variant: E, ...D }, O) => {
-	let { activeBreakpoint: k } = i(), A = n(() => ({
-		inline: r(u, k),
-		row: r(d, k),
-		column: r(f, k),
-		dense: r(p, k),
-		gap: r(m, k),
-		gapRow: r(h, k),
-		gapColumn: r(g, k),
-		align: r(_, k),
-		justify: r(v, k),
-		alignContent: r(y, k),
-		justifyContent: r(b, k),
-		variant: r(E, k)
+]);
+//#endregion
+//#region src/grid/GridContainer.tsx
+function u({ ref: a, children: c, className: l = "", as: u, style: d, inline: f, row: p, column: m, dense: h, gap: g, gapRow: _, gapColumn: v, align: y, justify: b, alignContent: x, justifyContent: S, templateColumns: C, templateRows: w, autoColumns: T, autoRows: E, areas: D, variant: O, ...k }) {
+	let { activeBreakpoint: A } = i(), j = n(() => ({
+		inline: r(f, A),
+		row: r(p, A),
+		column: r(m, A),
+		dense: r(h, A),
+		gap: r(g, A),
+		gapRow: r(_, A),
+		gapColumn: r(v, A),
+		align: r(y, A),
+		justify: r(b, A),
+		alignContent: r(x, A),
+		justifyContent: r(S, A),
+		variant: r(O, A)
 	}), [
-		k,
-		_,
+		A,
 		y,
-		f,
-		p,
+		x,
 		m,
-		g,
 		h,
-		u,
+		g,
 		v,
+		_,
+		f,
 		b,
-		d,
-		E
-	]), j = n(() => ({
-		templateColumns: r(x, k),
-		templateRows: r(S, k),
-		autoColumns: r(C, k),
-		autoRows: r(w, k),
-		areas: r(T, k)
-	}), [
-		k,
-		x,
 		S,
+		p,
+		O
+	]), M = n(() => ({
+		templateColumns: r(C, A),
+		templateRows: r(w, A),
+		autoColumns: r(T, A),
+		autoRows: r(E, A),
+		areas: r(D, A)
+	}), [
+		A,
 		C,
 		w,
-		T
-	]), M = o(A), N = s(j), P = [M, a].filter(Boolean).join(" "), F = {
-		...N,
-		...l
+		T,
+		E,
+		D
+	]), N = o(j), P = s(M), F = [N, l].filter(Boolean).join(" "), I = {
+		...P,
+		...d
 	};
-	return e(c || "div", {
-		...D,
-		ref: O,
-		className: P,
-		style: F
-	}, t);
-});
+	return /* @__PURE__ */ t(e, {
+		as: u,
+		...k,
+		ref: a,
+		className: F,
+		style: I,
+		children: c
+	});
+}
 u.displayName = "GridContainer";
 //#endregion
 //#region src/grid/GridItem.tsx
-var d = t(({ children: t, className: a = "", as: o, style: s, area: u, column: d, row: f, alignSelf: p, justifySelf: m, ...h }, g) => {
-	let { activeBreakpoint: _ } = i(), v = n(() => ({
-		alignSelf: r(p, _),
-		justifySelf: r(m, _)
+function d({ ref: a, children: o, className: s = "", as: u, style: d, area: f, column: p, row: m, alignSelf: h, justifySelf: g, ..._ }) {
+	let { activeBreakpoint: v } = i(), y = n(() => ({
+		alignSelf: r(h, v),
+		justifySelf: r(g, v)
 	}), [
-		_,
+		v,
+		h,
+		g
+	]), b = n(() => ({
+		area: r(f, v),
+		column: r(p, v),
+		row: r(m, v)
+	}), [
+		v,
+		f,
 		p,
 		m
-	]), y = n(() => ({
-		area: r(u, _),
-		column: r(d, _),
-		row: r(f, _)
-	}), [
-		_,
-		u,
-		d,
-		f
-	]), b = c(v), x = l(y), S = [b, a].filter(Boolean).join(" "), C = {
-		...x,
-		...s
+	]), x = c(y), S = l(b), C = [x, s].filter(Boolean).join(" "), w = {
+		...S,
+		...d
 	};
-	return e(o || "div", {
-		...h,
-		ref: g,
-		className: S,
-		style: C
-	}, t);
-});
+	return /* @__PURE__ */ t(e, {
+		as: u,
+		..._,
+		ref: a,
+		className: C,
+		style: w,
+		children: o
+	});
+}
 d.displayName = "GridItem";
 //#endregion
 //#region src/grid/Grid.tsx
@@ -174,4 +183,4 @@ var f = {
 //#endregion
 export { d as n, u as r, f as t };
 
-//# sourceMappingURL=grid-dI94AAbi.js.map
+//# sourceMappingURL=grid-CFuzBigM.js.map

package/dist/chunks/grid-CFuzBigM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-CFuzBigM.js","names":[],"sources":["../../src/grid/Grid.module.scss","../../src/grid/useGridClasses.ts","../../src/grid/GridContainer.tsx","../../src/grid/GridItem.tsx","../../src/grid/Grid.tsx"],"sourcesContent":[".grid {\n\tdisplay: grid;\n\n\t// Display variants\n\t&.inline {\n\t\tdisplay: inline-grid;\n\t\tvertical-align: middle;\n\t}\n\n\t// Auto flow\n\t&.row {\n\t\tgrid-auto-flow: row;\n\t}\n\t&.column {\n\t\tgrid-auto-flow: column;\n\t}\n\t&.dense {\n\t\tgrid-auto-flow: dense;\n\t}\n\n\t// Gap properties (аналогично Flex)\n\t&.gapNone {\n\t\tgap: unset;\n\t}\n\n\t// Row gaps\n\t&.gapRowXs {\n\t\trow-gap: var(--space-xs);\n\t}\n\t&.gapRowSm {\n\t\trow-gap: var(--space-sm);\n\t}\n\t&.gapRowMd {\n\t\trow-gap: var(--space-md);\n\t}\n\t&.gapRowLg {\n\t\trow-gap: var(--space-lg);\n\t}\n\t&.gapRowXl {\n\t\trow-gap: var(--space-xl);\n\t}\n\n\t// Column gaps\n\t&.gapColumnXs {\n\t\tcolumn-gap: var(--space-xs);\n\t}\n\t&.gapColumnSm {\n\t\tcolumn-gap: var(--space-sm);\n\t}\n\t&.gapColumnMd {\n\t\tcolumn-gap: var(--space-md);\n\t}\n\t&.gapColumnLg {\n\t\tcolumn-gap: var(--space-lg);\n\t}\n\t&.gapColumnXl {\n\t\tcolumn-gap: var(--space-xl);\n\t}\n\n\t// Combined gaps\n\t&.gapXs {\n\t\trow-gap: var(--space-xs);\n\t\tcolumn-gap: var(--space-xs);\n\t}\n\t&.gapSm {\n\t\trow-gap: var(--space-sm);\n\t\tcolumn-gap: var(--space-sm);\n\t}\n\t&.gapMd {\n\t\trow-gap: var(--space-md);\n\t\tcolumn-gap: var(--space-md);\n\t}\n\t&.gapLg {\n\t\trow-gap: var(--space-lg);\n\t\tcolumn-gap: var(--space-lg);\n\t}\n\t&.gapXl {\n\t\trow-gap: var(--space-xl);\n\t\tcolumn-gap: var(--space-xl);\n\t}\n\n\t// Align items\n\t&.alignStart {\n\t\talign-items: start;\n\t}\n\t&.alignCenter {\n\t\talign-items: center;\n\t}\n\t&.alignEnd {\n\t\talign-items: end;\n\t}\n\t&.alignStretch {\n\t\talign-items: stretch;\n\t}\n\t&.alignBaseline {\n\t\talign-items: baseline;\n\t}\n\n\t// Justify items\n\t&.justifyStart {\n\t\tjustify-items: start;\n\t}\n\t&.justifyCenter {\n\t\tjustify-items: center;\n\t}\n\t&.justifyEnd {\n\t\tjustify-items: end;\n\t}\n\t&.justifyStretch {\n\t\tjustify-items: stretch;\n\t}\n\n\t// Align content\n\t&.alignContentStart {\n\t\talign-content: start;\n\t}\n\t&.alignContentCenter {\n\t\talign-content: center;\n\t}\n\t&.alignContentEnd {\n\t\talign-content: end;\n\t}\n\t&.alignContentStretch {\n\t\talign-content: stretch;\n\t}\n\t&.alignContentBetween {\n\t\talign-content: space-between;\n\t}\n\t&.alignContentAround {\n\t\talign-content: space-around;\n\t}\n\t&.alignContentEvenly {\n\t\talign-content: space-evenly;\n\t}\n\n\t// Justify content\n\t&.justifyContentStart {\n\t\tjustify-content: start;\n\t}\n\t&.justifyContentCenter {\n\t\tjustify-content: center;\n\t}\n\t&.justifyContentEnd {\n\t\tjustify-content: end;\n\t}\n\t&.justifyContentStretch {\n\t\tjustify-content: stretch;\n\t}\n\t&.justifyContentBetween {\n\t\tjustify-content: space-between;\n\t}\n\t&.justifyContentAround {\n\t\tjustify-content: space-around;\n\t}\n\t&.justifyContentEvenly {\n\t\tjustify-content: space-evenly;\n\t}\n}\n\n// Grid Item\n.item {\n\t// Grid placement\n\t&.areaAuto {\n\t\tgrid-area: auto;\n\t}\n\n\t// Align self\n\t&.alignSelfStart {\n\t\talign-self: start;\n\t}\n\t&.alignSelfCenter {\n\t\talign-self: center;\n\t}\n\t&.alignSelfEnd {\n\t\talign-self: end;\n\t}\n\t&.alignSelfStretch {\n\t\talign-self: stretch;\n\t}\n\t&.alignSelfBaseline {\n\t\talign-self: baseline;\n\t}\n\n\t// Justify self\n\t&.justifySelfStart {\n\t\tjustify-self: start;\n\t}\n\t&.justifySelfCenter {\n\t\tjustify-self: center;\n\t}\n\t&.justifySelfEnd {\n\t\tjustify-self: end;\n\t}\n\t&.justifySelfStretch {\n\t\tjustify-self: stretch;\n\t}\n}\n\n// Предопределенные композиции\n.autoRows1fr {\n\tgrid-auto-rows: 1fr;\n}\n\n.columnsAuto1fr {\n\tgrid-template-columns: auto 1fr;\n\tgrid-auto-rows: auto;\n}\n\n.singleColumn {\n\tgrid-template-columns: 100%;\n\tgrid-auto-rows: auto 1fr;\n}\n","import { CSSProperties, useMemo } from \"react\";\n\nimport { ResolvedProps } from \"@ryuzaki13/react-foundation-lib/media\";\n\nimport styles from \"./Grid.module.scss\";\n\nimport type { GridContainerLayoutProps, GridItemLayoutProps } from \"./types\";\n\ntype ClassName = string | undefined | null | false;\n\nexport type ResolvedGridContainerProps = ResolvedProps<GridContainerLayoutProps>;\nexport type ResolvedGridItemProps = ResolvedProps<GridItemLayoutProps>;\n\nexport const useGridContainerClasses = (props: ResolvedGridContainerProps) => {\n\treturn useMemo(() => {\n\t\tconst classes: ClassName[] = [styles.grid];\n\n\t\t// Display\n\t\tif (props.inline) classes.push(styles.inline);\n\n\t\t// Auto flow\n\t\tif (props.column) classes.push(styles.column);\n\t\telse if (props.dense) classes.push(styles.dense);\n\t\telse if (props.row) classes.push(styles.row);\n\n\t\t// Alignment\n\t\tif (props.align) classes.push(styles[`align${props.align.charAt(0).toUpperCase() + props.align.slice(1)}` as keyof typeof styles]);\n\n\t\t// Justify items\n\t\tif (props.justify)\n\t\t\tclasses.push(styles[`justify${props.justify.charAt(0).toUpperCase() + props.justify.slice(1)}` as keyof typeof styles]);\n\n\t\t// Justify content\n\t\tif (props.justifyContent)\n\t\t\tclasses.push(\n\t\t\t\tstyles[\n\t\t\t\t\t`justifyContent${props.justifyContent.charAt(0).toUpperCase() + props.justifyContent.slice(1)}` as keyof typeof styles\n\t\t\t\t]\n\t\t\t);\n\n\t\t// Align content\n\t\tif (props.alignContent)\n\t\t\tclasses.push(\n\t\t\t\tstyles[`alignContent${props.alignContent.charAt(0).toUpperCase() + props.alignContent.slice(1)}` as keyof typeof styles]\n\t\t\t);\n\n\t\t// Gap properties\n\t\tif (props.gap === \"none\") classes.push(styles.gapNone);\n\t\telse if (props.gap) classes.push(styles[`gap${props.gap.charAt(0).toUpperCase() + props.gap.slice(1)}` as keyof typeof styles]);\n\n\t\tif (props.gapRow)\n\t\t\tclasses.push(styles[`gapRow${props.gapRow.charAt(0).toUpperCase() + props.gapRow.slice(1)}` as keyof typeof styles]);\n\t\tif (props.gapColumn)\n\t\t\tclasses.push(styles[`gapColumn${props.gapColumn.charAt(0).toUpperCase() + props.gapColumn.slice(1)}` as keyof typeof styles]);\n\n\t\t// Предопределенные варианты\n\t\tif (props.variant === \"single-column\") classes.push(styles.singleColumn);\n\t\telse if (props.variant === \"auto-1fr\") classes.push(styles.autoRows1fr);\n\t\telse if (props.variant === \"auto1fr-rows-auto\") classes.push(styles.columnsAuto1fr);\n\n\t\treturn classes.filter(Boolean).join(\" \");\n\t}, [props]);\n};\n\nexport const useGridContainerStyles = (\n\tprops: Pick<ResolvedGridContainerProps, \"templateColumns\" | \"templateRows\" | \"autoColumns\" | \"autoRows\" | \"areas\">\n) => {\n\treturn useMemo(() => {\n\t\tconst styles: CSSProperties = {};\n\n\t\tif (props.templateColumns) {\n\t\t\t// if (typeof props.templateColumns === \"object\") {\n\t\t\t//     styles.gridTemplateColumns = props.templateColumns;\n\t\t\t// } else {\n\t\t\tstyles.gridTemplateColumns = props.templateColumns;\n\t\t\t// }\n\t\t}\n\t\tif (props.templateRows) {\n\t\t\tstyles.gridTemplateRows = props.templateRows;\n\t\t}\n\t\tif (props.autoColumns) {\n\t\t\tstyles.gridAutoColumns = props.autoColumns;\n\t\t}\n\t\tif (props.autoRows) {\n\t\t\tstyles.gridAutoRows = props.autoRows;\n\t\t}\n\t\tif (props.areas) {\n\t\t\tstyles.gridTemplateAreas = props.areas;\n\t\t}\n\n\t\treturn styles;\n\t}, [props.templateColumns, props.templateRows, props.autoColumns, props.autoRows, props.areas]);\n};\n\nexport const useGridItemClasses = (props: ResolvedGridItemProps) => {\n\treturn useMemo(() => {\n\t\tconst classes: ClassName[] = [styles.item];\n\n\t\t// Self alignment\n\t\tif (props.alignSelf)\n\t\t\tclasses.push(styles[`alignSelf${props.alignSelf.charAt(0).toUpperCase() + props.alignSelf.slice(1)}` as keyof typeof styles]);\n\n\t\t// Justify self\n\t\tif (props.justifySelf)\n\t\t\tclasses.push(\n\t\t\t\tstyles[`justifySelf${props.justifySelf.charAt(0).toUpperCase() + props.justifySelf.slice(1)}` as keyof typeof styles]\n\t\t\t);\n\n\t\treturn classes.filter(Boolean).join(\" \");\n\t}, [props]);\n};\n\nexport const useGridItemStyles = (props: Pick<ResolvedGridItemProps, \"area\" | \"column\" | \"row\">) => {\n\treturn useMemo(() => {\n\t\tconst styles: CSSProperties = {};\n\n\t\tif (props.area) {\n\t\t\tstyles.gridArea = props.area;\n\t\t}\n\t\tif (props.column) {\n\t\t\tstyles.gridColumn = props.column;\n\t\t}\n\t\tif (props.row) {\n\t\t\tstyles.gridRow = props.row;\n\t\t}\n\n\t\treturn styles;\n\t}, [props.area, props.column, props.row]);\n};\n","import { type Ref, useMemo } from \"react\";\n\nimport { resolveResponsiveValue, useMatchMedia } from \"@ryuzaki13/react-foundation-lib/media\";\n\nimport { PolymorphicComponent } from \"../polymorphic\";\n\nimport { GridContainerProps } from \"./types\";\nimport { useGridContainerClasses, useGridContainerStyles } from \"./useGridClasses\";\n\nexport function GridContainer({\n\tref,\n\tchildren,\n\tclassName = \"\",\n\tas,\n\tstyle,\n\tinline,\n\trow,\n\tcolumn,\n\tdense,\n\tgap,\n\tgapRow,\n\tgapColumn,\n\talign,\n\tjustify,\n\talignContent,\n\tjustifyContent,\n\ttemplateColumns,\n\ttemplateRows,\n\tautoColumns,\n\tautoRows,\n\tareas,\n\tvariant,\n\t...htmlProps\n}: GridContainerProps & { ref?: Ref<HTMLElement> }) {\n\tconst { activeBreakpoint } = useMatchMedia();\n\n\tconst resolved = useMemo(() => {\n\t\treturn {\n\t\t\tinline: resolveResponsiveValue(inline, activeBreakpoint),\n\n\t\t\trow: resolveResponsiveValue(row, activeBreakpoint),\n\t\t\tcolumn: resolveResponsiveValue(column, activeBreakpoint),\n\t\t\tdense: resolveResponsiveValue(dense, activeBreakpoint),\n\n\t\t\tgap: resolveResponsiveValue(gap, activeBreakpoint),\n\t\t\tgapRow: resolveResponsiveValue(gapRow, activeBreakpoint),\n\t\t\tgapColumn: resolveResponsiveValue(gapColumn, activeBreakpoint),\n\n\t\t\talign: resolveResponsiveValue(align, activeBreakpoint),\n\t\t\tjustify: resolveResponsiveValue(justify, activeBreakpoint),\n\t\t\talignContent: resolveResponsiveValue(alignContent, activeBreakpoint),\n\t\t\tjustifyContent: resolveResponsiveValue(justifyContent, activeBreakpoint),\n\n\t\t\tvariant: resolveResponsiveValue(variant, activeBreakpoint)\n\t\t};\n\t}, [activeBreakpoint, align, alignContent, column, dense, gap, gapColumn, gapRow, inline, justify, justifyContent, row, variant]);\n\n\tconst resolvedStyles = useMemo(() => {\n\t\treturn {\n\t\t\ttemplateColumns: resolveResponsiveValue(templateColumns, activeBreakpoint),\n\t\t\ttemplateRows: resolveResponsiveValue(templateRows, activeBreakpoint),\n\t\t\tautoColumns: resolveResponsiveValue(autoColumns, activeBreakpoint),\n\t\t\tautoRows: resolveResponsiveValue(autoRows, activeBreakpoint),\n\t\t\tareas: resolveResponsiveValue(areas, activeBreakpoint)\n\t\t};\n\t}, [activeBreakpoint, templateColumns, templateRows, autoColumns, autoRows, areas]);\n\n\tconst gridClasses = useGridContainerClasses(resolved);\n\tconst gridStyles = useGridContainerStyles(resolvedStyles);\n\n\tconst finalClassName = [gridClasses, className].filter(Boolean).join(\" \");\n\tconst finalStyle = { ...gridStyles, ...style };\n\treturn (\n\t\t<PolymorphicComponent as={as} {...htmlProps} ref={ref} className={finalClassName} style={finalStyle}>\n\t\t\t{children}\n\t\t</PolymorphicComponent>\n\t);\n}\n\nGridContainer.displayName = \"GridContainer\";\n","import { type Ref, useMemo } from \"react\";\n\nimport { resolveResponsiveValue, useMatchMedia } from \"@ryuzaki13/react-foundation-lib/media\";\n\nimport { PolymorphicComponent } from \"../polymorphic\";\n\nimport { GridItemProps } from \"./types\";\nimport { useGridItemClasses, useGridItemStyles } from \"./useGridClasses\";\n\nexport function GridItem({\n\tref,\n\tchildren,\n\tclassName = \"\",\n\tas,\n\tstyle,\n\tarea,\n\tcolumn,\n\trow,\n\talignSelf,\n\tjustifySelf,\n\t...htmlProps\n}: GridItemProps & { ref?: Ref<HTMLElement> }) {\n\tconst { activeBreakpoint } = useMatchMedia();\n\n\tconst resolvedProps = useMemo(() => {\n\t\treturn {\n\t\t\talignSelf: resolveResponsiveValue(alignSelf, activeBreakpoint),\n\t\t\tjustifySelf: resolveResponsiveValue(justifySelf, activeBreakpoint)\n\t\t};\n\t}, [activeBreakpoint, alignSelf, justifySelf]);\n\n\tconst resolvedPlacement = useMemo(() => {\n\t\treturn {\n\t\t\tarea: resolveResponsiveValue(area, activeBreakpoint),\n\t\t\tcolumn: resolveResponsiveValue(column, activeBreakpoint),\n\t\t\trow: resolveResponsiveValue(row, activeBreakpoint)\n\t\t};\n\t}, [activeBreakpoint, area, column, row]);\n\n\tconst gridClasses = useGridItemClasses(resolvedProps);\n\tconst gridStyles = useGridItemStyles(resolvedPlacement);\n\n\tconst finalClassName = [gridClasses, className].filter(Boolean).join(\" \");\n\tconst finalStyle = { ...gridStyles, ...style };\n\treturn (\n\t\t<PolymorphicComponent as={as} {...htmlProps} ref={ref} className={finalClassName} style={finalStyle}>\n\t\t\t{children}\n\t\t</PolymorphicComponent>\n\t);\n}\n\nGridItem.displayName = \"GridItem\";\n","import { GridContainer } from \"./GridContainer\";\nimport { GridItem } from \"./GridItem\";\n\nexport const Grid = {\n\tContainer: GridContainer,\n\tItem: GridItem\n};\n"],"mappings":"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"}