@lmb-it/kitsconcerto-native 0.1.236

package/components/Accordion/accordion.js

@@ -0,0 +1,150 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useState, useEffect } from 'react';
+import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionIcon, AccordionContent, AccordionContentText } from '../../apps/mobile/src/ui/accordion/index.js';
+import '../../apps/mobile/src/ui/actionsheet/index.js';
+import '../../apps/mobile/src/ui/alert/index.js';
+import '../../apps/mobile/src/ui/alert-dialog/index.js';
+import '../../apps/mobile/src/ui/avatar/index.js';
+import '../../apps/mobile/src/ui/badge/index.js';
+import '../../apps/mobile/src/ui/bottomsheet/index.js';
+import '../../apps/mobile/src/ui/box/index.js';
+import '../../apps/mobile/src/ui/button/index.js';
+import '../../apps/mobile/src/ui/card/index.js';
+import '../../apps/mobile/src/ui/center/index.js';
+import '../../apps/mobile/src/ui/checkbox/index.js';
+import { Divider } from '../../apps/mobile/src/ui/divider/index.js';
+import '../../apps/mobile/src/ui/drawer/index.js';
+import '../../apps/mobile/src/ui/fab/index.js';
+import 'react-native';
+import '../../apps/mobile/src/ui/form-control/index.js';
+import '../../apps/mobile/src/ui/gluestack-ui-provider/config.js';
+import '@gluestack-ui/core/overlay/creator';
+import '@gluestack-ui/core/toast/creator';
+import 'nativewind';
+import '../../apps/mobile/src/ui/grid/index.js';
+import '../../apps/mobile/src/ui/heading/index.js';
+import '../../apps/mobile/src/ui/hstack/index.js';
+import { ChevronUpIcon, ChevronDownIcon } from '../../apps/mobile/src/ui/icon/index.js';
+import '../../apps/mobile/src/ui/image/index.js';
+import '../../apps/mobile/src/ui/image-background/index.js';
+import '../../apps/mobile/src/ui/input/index.js';
+import '../../apps/mobile/src/ui/link/index.js';
+import '../../apps/mobile/src/ui/menu/index.js';
+import '../../apps/mobile/src/ui/modal/index.js';
+import '../../apps/mobile/src/ui/popover/index.js';
+import '../../apps/mobile/src/ui/portal/index.js';
+import '../../apps/mobile/src/ui/pressable/index.js';
+import '../../apps/mobile/src/ui/progress/index.js';
+import '../../apps/mobile/src/ui/radio/index.js';
+import 'react-native-safe-area-context';
+import '../../apps/mobile/src/ui/select/index.js';
+import '../../apps/mobile/src/ui/skeleton/index.js';
+import '../../apps/mobile/src/ui/slider/index.js';
+import '../../apps/mobile/src/ui/spinner/index.js';
+import '../../apps/mobile/src/ui/switch/index.js';
+import '../../apps/mobile/src/ui/table/index.js';
+import '../../apps/mobile/src/ui/text/index.js';
+import '../../apps/mobile/src/ui/textarea/index.js';
+import '../../apps/mobile/src/ui/toast/index.js';
+import '../../apps/mobile/src/ui/tooltip/index.js';
+import '../../apps/mobile/src/ui/vstack/index.js';
+import 'react-native-reanimated';
+import 'react-icons/fa';
+import 'react-icons/ai';
+import 'react-icons/io';
+import '../../packages/types/src/Components/Molecules/Form/FilePicker/types/filesTypes.js';
+import 'yup';
+import '../../packages/types/src/Css/map/index.js';
+import '../../packages/types/src/Theme/shadows.js';
+import '../../packages/types/src/Theme/defaultTheme.js';
+import '../../apps/mobile/src/Factory/DimensionsContext.js';
+import 'i18next';
+import 'react-i18next';
+import '../../apps/mobile/src/Core/AutoComplete/index.js';
+import '../../apps/mobile/src/Core/Dropdown/index.js';
+import '../../apps/mobile/src/Core/MultiSelect/index.js';
+import '../../apps/mobile/src/Core/Trees/components/CoreTree.js';
+import '../../apps/mobile/src/Core/Trees/components/CoreTreeSelect.js';
+import '../../apps/mobile/src/Core/Trees/components/CoreToolbar.js';
+import '../../apps/mobile/src/Core/Paginator/index.js';
+import 'lucide-react-native';
+import '../../apps/mobile/src/Core/SelectButton/index.js';
+import '../../apps/mobile/src/Core/DataTable/DataTable.js';
+import '../../apps/mobile/src/Core/Tag/index.js';
+import '../../apps/mobile/src/Core/Badge/index.js';
+import '../../apps/mobile/src/Core/ProgressBar/index.js';
+import '../../apps/mobile/src/Core/Checkbox/index.js';
+import '../../apps/mobile/src/Core/RadioButton/index.js';
+import '../../apps/mobile/src/Core/Input/index.js';
+import '../../apps/mobile/src/Core/Input/Field.js';
+import '../../apps/mobile/src/Core/Input/Slot.js';
+import useThemedFont from '../../hooks/useThemedFont.js';
+import Box from '../../primitives/Box/index.js';
+import Heading from '../../primitives/Heading/index.js';
+
+const CustomAccordion = ({
+  accordionTitle,
+  accordionItems,
+  isLoading,
+  allOpenedByDefault,
+  localProps
+}) => {
+  const [expanded, setExpanded] = useState(
+    localProps?.multiple ? ["0"] : "0"
+  );
+  useEffect(() => {
+    if (allOpenedByDefault && accordionItems?.length) {
+      const allValues = accordionItems.map((_, i) => `${i}`);
+      setExpanded(localProps?.multiple ? allValues ?? ["0"] : allValues[0] ?? "0");
+    }
+  }, [allOpenedByDefault]);
+  const type = localProps?.multiple ? "multiple" : "single";
+  const titleFont = useThemedFont("heading");
+  const bodyFont = useThemedFont("body");
+  const handleChange = (val) => {
+    setExpanded(val);
+    if (accordionItems) {
+      if (Array.isArray(val)) {
+        val.forEach((key) => {
+          const index = parseInt(key, 10);
+          accordionItems[index]?.onToggle?.(true);
+        });
+      } else {
+        const index = parseInt(val, 10);
+        accordionItems[index]?.onToggle?.(true);
+      }
+    }
+  };
+  return /* @__PURE__ */ jsxs(Box, { w: "100%", borderRadius: 8, overflow: "hidden", className: "bg-background-0", children: [
+    !!accordionTitle && /* @__PURE__ */ jsx(Heading, { as: "h2", p: 4, fontSize: "lg", className: "bg-background-100", children: accordionTitle }),
+    isLoading ? /* @__PURE__ */ jsx(Box, { p: 4 }) : /* @__PURE__ */ jsx(
+      Accordion,
+      {
+        ...localProps,
+        value: expanded,
+        onValueChange: handleChange,
+        type,
+        className: "w-full",
+        children: accordionItems?.map(({ button, panel }, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsxs(AccordionItem, { value: `${i}`, children: [
+            /* @__PURE__ */ jsx(AccordionHeader, { children: /* @__PURE__ */ jsx(AccordionTrigger, { children: ({ isExpanded }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(AccordionTitleText, { style: titleFont ? { fontFamily: titleFont } : void 0, children: button }),
+              /* @__PURE__ */ jsx(
+                AccordionIcon,
+                {
+                  as: isExpanded ? ChevronUpIcon : ChevronDownIcon,
+                  className: "ms-3"
+                }
+              )
+            ] }) }) }),
+            /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx(AccordionContentText, { style: bodyFont ? { fontFamily: bodyFont } : void 0, children: panel }) })
+          ] }),
+          i !== accordionItems.length - 1 && /* @__PURE__ */ jsx(Divider, {})
+        ] }, i))
+      }
+    )
+  ] });
+};
+
+export { CustomAccordion as default };
+//# sourceMappingURL=accordion.js.map

package/components/Accordion/accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.js","sources":["../../../../src/components/Accordion/accordion.native.tsx"],"sourcesContent":["import React, {useEffect, useState} from \"react\";\nimport type {IAccordionProps} from \"@lmb-it/kitsconcerto-types\";\n\nimport {\n    Accordion,\n    AccordionContent,\n    AccordionContentText,\n    AccordionHeader,\n    AccordionIcon,\n    AccordionItem,\n    AccordionTitleText,\n    AccordionTrigger,\n    ChevronDownIcon,\n    ChevronUpIcon,\n    Divider\n} from \"@lmb-it/kitsconcertomobile\";\n\nimport {Box, Heading} from \"../../_compat\"; // your existing KitsConcerto components\nimport useThemedFont from \"../../hooks/useThemedFont\";\n\nconst CustomAccordion = ({\n                             accordionTitle,\n                             accordionItems,\n                             isLoading,\n                             allOpenedByDefault,\n                             localProps,\n                         }: IAccordionProps<any>) => {\n\n    const [expanded, setExpanded] = useState<string[] | string>(\n        localProps?.multiple ? [\"0\"] : \"0\"\n    );\n\n    // Apply \"open all by default\"\n    useEffect(() => {\n        if (allOpenedByDefault && accordionItems?.length) {\n            const allValues = accordionItems.map((_, i) => `${i}`);\n            setExpanded(localProps?.multiple ? allValues ?? [\"0\"] : allValues[0] ?? \"0\");\n        }\n    }, [allOpenedByDefault]);\n\n    // Gluestack expects:\n    // type=\"single\" or \"multiple\"\n    const type = localProps?.multiple ? \"multiple\" : \"single\";\n\n    const titleFont = useThemedFont('heading');\n    const bodyFont = useThemedFont('body');\n\n    const handleChange = (val: string | string[]) => {\n        setExpanded(val);\n\n        // call item-specific onToggle if provided\n        if (accordionItems) {\n            if (Array.isArray(val)) {\n                val.forEach((key) => {\n                    const index = parseInt(key, 10);\n                    accordionItems[index]?.onToggle?.(true);\n                });\n            } else {\n                const index = parseInt(val, 10);\n                accordionItems[index]?.onToggle?.(true);\n            }\n        }\n    };\n\n    return (\n        <Box w=\"100%\" borderRadius={8} overflow=\"hidden\" className=\"bg-background-0\">\n            {!!accordionTitle && (\n                <Heading as=\"h2\" p={4} fontSize=\"lg\" className=\"bg-background-100\">\n                    {accordionTitle}\n                </Heading>\n            )}\n\n            {isLoading ? (\n                <Box p={4}>\n                    {/* Replace with RN skeleton later */}\n                </Box>\n            ) : (\n                <Accordion\n                    {...localProps}\n                    value={expanded}\n                    onValueChange={handleChange}\n                    type={type}\n                    className=\"w-full\"\n                >\n                    {accordionItems?.map(({button, panel}, i) => (\n                        <React.Fragment key={i}>\n                            <AccordionItem value={`${i}`}>\n                                <AccordionHeader>\n                                    <AccordionTrigger>\n                                        {({isExpanded}:{isExpanded:boolean}) => (\n                                            <>\n                                                <AccordionTitleText style={titleFont ? {fontFamily: titleFont} : undefined}>{button}</AccordionTitleText>\n                                                <AccordionIcon\n                                                    as={isExpanded ? ChevronUpIcon : ChevronDownIcon}\n                                                    className=\"ms-3\"\n                                                />\n                                            </>\n                                        )}\n                                    </AccordionTrigger>\n                                </AccordionHeader>\n\n                                <AccordionContent>\n                                    <AccordionContentText style={bodyFont ? {fontFamily: bodyFont} : undefined}>\n                                        {panel}\n                                    </AccordionContentText>\n                                </AccordionContent>\n                            </AccordionItem>\n\n                            {i !== accordionItems.length - 1 && <Divider/>}\n                        </React.Fragment>\n                    ))}\n                </Accordion>\n            )}\n        </Box>\n    );\n};\n\nexport default CustomAccordion;\n"],"names":[],"mappings":"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"}

package/components/Alert/alert.cjs

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReactNative = require('lucide-react-native');
+var index_native = require('../../primitives/Text/index.cjs');
+var KitsThemeProvider_native = require('../../contexts/Theme/KitsThemeProvider.cjs');
+var index_native$1 = require('../../primitives/Icon/index.cjs');
+var index = require('../../layout/Flex/index.cjs');
+
+const icons = {
+  error: lucideReactNative.CircleX,
+  success: lucideReactNative.CheckCircle2,
+  warning: lucideReactNative.AlertTriangle,
+  info: lucideReactNative.Info
+};
+const alignmentMap = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
+};
+const Alert = ({
+  status = "info",
+  variant = "subtle",
+  children,
+  className,
+  align = "start",
+  textDirection,
+  ...props
+}) => {
+  const { resolveToken } = KitsThemeProvider_native.useKitsTheme();
+  const primary = resolveToken("primary");
+  const statusColors = {
+    error: resolveToken("red.500"),
+    success: resolveToken("green.500"),
+    warning: resolveToken("yellow.500"),
+    info: resolveToken("blue.500"),
+    brand: primary
+  };
+  const color = statusColors[status];
+  let bg = "transparent";
+  let border = void 0;
+  if (variant === "subtle") bg = `${color}22`;
+  if (variant === "solid") bg = color;
+  if (variant === "left-accent") border = { borderStartWidth: 4, borderStartColor: color };
+  if (variant === "top-accent") border = { borderTopWidth: 4, borderTopColor: color };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    index.default,
+    {
+      className,
+      flexDirection: "column",
+      alignItems: alignmentMap[align],
+      gap: 8,
+      style: {
+        padding: 12,
+        borderRadius: 8,
+        backgroundColor: bg,
+        alignSelf: "flex-start",
+        writingDirection: textDirection,
+        ...border ?? {}
+      },
+      ...props,
+      children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { style: { color: variant === "solid" ? "#FFFFFF" : color, writingDirection: textDirection }, children }) : children
+    }
+  );
+};
+const AlertIcon = ({ status = "info" }) => {
+  const { resolveToken, theme } = KitsThemeProvider_native.useKitsTheme();
+  const primary = resolveToken("primary");
+  if (status === "brand" && theme.config.logo) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: theme.config.logo });
+  const statusColors = {
+    error: resolveToken("red.500"),
+    success: resolveToken("green.500"),
+    warning: resolveToken("yellow.500"),
+    info: resolveToken("blue.500"),
+    brand: primary
+  };
+  const IconComponent = icons[status];
+  const color = statusColors[status];
+  return /* @__PURE__ */ jsxRuntime.jsx(index_native$1.Icon, { name: IconComponent, color, size: "lg" });
+};
+const AlertTitle = ({ children, color }) => /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { fontWeight: "bold", style: color ? { color } : void 0, children });
+const AlertDescription = ({ children, color }) => /* @__PURE__ */ jsxRuntime.jsx(index_native.default, { size: "sm", style: color ? { color } : void 0, children });
+
+exports.AlertDescription = AlertDescription;
+exports.AlertIcon = AlertIcon;
+exports.AlertTitle = AlertTitle;
+exports.default = Alert;
+//# sourceMappingURL=alert.cjs.map

package/components/Alert/alert.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.cjs","sources":["../../../../src/components/Alert/alert.native.tsx"],"sourcesContent":["import React from \"react\";\nimport { Flex } from \"../../_compat\";\nimport type { IAlertComponent } from \"@lmb-it/kitsconcerto-types\";\nimport { Text, Icon } from \"../../_compat\";\nimport { useKitsTheme } from \"../../contexts/Theme\";\n\nimport {\n    AlertTriangle,\n    CheckCircle2,\n    Info,\n    CircleX,\n} from \"lucide-react-native\";\n\nconst icons: Record<string, any> = {\n    error: CircleX,\n    success: CheckCircle2,\n    warning: AlertTriangle,\n    info: Info,\n};\n\nconst alignmentMap: Record<NonNullable<IAlertComponent[\"align\"]>, \"flex-start\" | \"center\" | \"flex-end\"> = {\n    start: \"flex-start\",\n    center: \"center\",\n    end: \"flex-end\",\n};\n\nconst Alert: React.FC<IAlertComponent> = ({\n    status = \"info\",\n    variant = \"subtle\",\n    children,\n    className,\n    align = \"start\",\n    textDirection,\n    ...props\n}) => {\n    const { resolveToken } = useKitsTheme();\n    const primary = resolveToken('primary');\n\n    const statusColors: Record<string, string> = {\n        error:   resolveToken('red.500'),\n        success: resolveToken('green.500'),\n        warning: resolveToken('yellow.500'),\n        info:    resolveToken('blue.500'),\n        brand:   primary,\n    };\n\n    const color = statusColors[status!];\n    let bg = \"transparent\";\n    let border: any = undefined;\n\n    if (variant === \"subtle\")      bg = `${color}22`;\n    if (variant === \"solid\")       bg = color;\n    if (variant === \"left-accent\") border = { borderStartWidth: 4, borderStartColor: color };\n    if (variant === \"top-accent\")  border = { borderTopWidth: 4, borderTopColor: color };\n\n    return (\n        <Flex\n            className={className}\n            flexDirection=\"column\"\n            alignItems={alignmentMap[align]}\n            gap={8}\n            style={{\n                padding: 12,\n                borderRadius: 8,\n                backgroundColor: bg,\n                alignSelf: 'flex-start',\n                writingDirection: textDirection,\n                ...(border ?? {}),\n            }}\n            {...props}\n        >\n            {typeof children === \"string\" ? (\n                <Text style={{ color: variant === \"solid\" ? \"#FFFFFF\" : color, writingDirection: textDirection }}>\n                    {children}\n                </Text>\n            ) : (\n                children\n            )}\n        </Flex>\n    );\n};\n\nexport const AlertIcon: React.FC<{ status: IAlertComponent[\"status\"] }> = ({ status = \"info\" }) => {\n    const { resolveToken, theme } = useKitsTheme();\n    const primary = resolveToken('primary');\n\n    if (status === 'brand' && theme.config.logo) return <>{theme.config.logo}</>;\n\n    const statusColors: Record<string, string> = {\n        error:   resolveToken('red.500'),\n        success: resolveToken('green.500'),\n        warning: resolveToken('yellow.500'),\n        info:    resolveToken('blue.500'),\n        brand:   primary,\n    };\n\n    const IconComponent = icons[status!];\n    const color = statusColors[status!];\n\n    return <Icon name={IconComponent} color={color} size=\"lg\" />;\n};\n\nexport const AlertTitle: React.FC<{ children: React.ReactNode; color?: string }> = ({ children, color }) => (\n    <Text fontWeight=\"bold\" style={color ? { color } : undefined}>{children}</Text>\n);\n\nexport const AlertDescription: React.FC<{ children: React.ReactNode; color?: string }> = ({ children, color }) => (\n    <Text size=\"sm\" style={color ? { color } : undefined}>{children}</Text>\n);\n\nexport default Alert;\n"],"names":["CircleX","CheckCircle2","AlertTriangle","Info","useKitsTheme","jsx","Flex","Text","Fragment","Icon"],"mappings":"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"}

package/components/Alert/alert.js

@@ -0,0 +1,83 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { Info, AlertTriangle, CheckCircle2, CircleX } from 'lucide-react-native';
+import Text from '../../primitives/Text/index.js';
+import { useKitsTheme } from '../../contexts/Theme/KitsThemeProvider.js';
+import { Icon } from '../../primitives/Icon/index.js';
+import Flex from '../../layout/Flex/index.js';
+
+const icons = {
+  error: CircleX,
+  success: CheckCircle2,
+  warning: AlertTriangle,
+  info: Info
+};
+const alignmentMap = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end"
+};
+const Alert = ({
+  status = "info",
+  variant = "subtle",
+  children,
+  className,
+  align = "start",
+  textDirection,
+  ...props
+}) => {
+  const { resolveToken } = useKitsTheme();
+  const primary = resolveToken("primary");
+  const statusColors = {
+    error: resolveToken("red.500"),
+    success: resolveToken("green.500"),
+    warning: resolveToken("yellow.500"),
+    info: resolveToken("blue.500"),
+    brand: primary
+  };
+  const color = statusColors[status];
+  let bg = "transparent";
+  let border = void 0;
+  if (variant === "subtle") bg = `${color}22`;
+  if (variant === "solid") bg = color;
+  if (variant === "left-accent") border = { borderStartWidth: 4, borderStartColor: color };
+  if (variant === "top-accent") border = { borderTopWidth: 4, borderTopColor: color };
+  return /* @__PURE__ */ jsx(
+    Flex,
+    {
+      className,
+      flexDirection: "column",
+      alignItems: alignmentMap[align],
+      gap: 8,
+      style: {
+        padding: 12,
+        borderRadius: 8,
+        backgroundColor: bg,
+        alignSelf: "flex-start",
+        writingDirection: textDirection,
+        ...border ?? {}
+      },
+      ...props,
+      children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, { style: { color: variant === "solid" ? "#FFFFFF" : color, writingDirection: textDirection }, children }) : children
+    }
+  );
+};
+const AlertIcon = ({ status = "info" }) => {
+  const { resolveToken, theme } = useKitsTheme();
+  const primary = resolveToken("primary");
+  if (status === "brand" && theme.config.logo) return /* @__PURE__ */ jsx(Fragment, { children: theme.config.logo });
+  const statusColors = {
+    error: resolveToken("red.500"),
+    success: resolveToken("green.500"),
+    warning: resolveToken("yellow.500"),
+    info: resolveToken("blue.500"),
+    brand: primary
+  };
+  const IconComponent = icons[status];
+  const color = statusColors[status];
+  return /* @__PURE__ */ jsx(Icon, { name: IconComponent, color, size: "lg" });
+};
+const AlertTitle = ({ children, color }) => /* @__PURE__ */ jsx(Text, { fontWeight: "bold", style: color ? { color } : void 0, children });
+const AlertDescription = ({ children, color }) => /* @__PURE__ */ jsx(Text, { size: "sm", style: color ? { color } : void 0, children });
+
+export { AlertDescription, AlertIcon, AlertTitle, Alert as default };
+//# sourceMappingURL=alert.js.map

package/components/Alert/alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alert.js","sources":["../../../../src/components/Alert/alert.native.tsx"],"sourcesContent":["import React from \"react\";\nimport { Flex } from \"../../_compat\";\nimport type { IAlertComponent } from \"@lmb-it/kitsconcerto-types\";\nimport { Text, Icon } from \"../../_compat\";\nimport { useKitsTheme } from \"../../contexts/Theme\";\n\nimport {\n    AlertTriangle,\n    CheckCircle2,\n    Info,\n    CircleX,\n} from \"lucide-react-native\";\n\nconst icons: Record<string, any> = {\n    error: CircleX,\n    success: CheckCircle2,\n    warning: AlertTriangle,\n    info: Info,\n};\n\nconst alignmentMap: Record<NonNullable<IAlertComponent[\"align\"]>, \"flex-start\" | \"center\" | \"flex-end\"> = {\n    start: \"flex-start\",\n    center: \"center\",\n    end: \"flex-end\",\n};\n\nconst Alert: React.FC<IAlertComponent> = ({\n    status = \"info\",\n    variant = \"subtle\",\n    children,\n    className,\n    align = \"start\",\n    textDirection,\n    ...props\n}) => {\n    const { resolveToken } = useKitsTheme();\n    const primary = resolveToken('primary');\n\n    const statusColors: Record<string, string> = {\n        error:   resolveToken('red.500'),\n        success: resolveToken('green.500'),\n        warning: resolveToken('yellow.500'),\n        info:    resolveToken('blue.500'),\n        brand:   primary,\n    };\n\n    const color = statusColors[status!];\n    let bg = \"transparent\";\n    let border: any = undefined;\n\n    if (variant === \"subtle\")      bg = `${color}22`;\n    if (variant === \"solid\")       bg = color;\n    if (variant === \"left-accent\") border = { borderStartWidth: 4, borderStartColor: color };\n    if (variant === \"top-accent\")  border = { borderTopWidth: 4, borderTopColor: color };\n\n    return (\n        <Flex\n            className={className}\n            flexDirection=\"column\"\n            alignItems={alignmentMap[align]}\n            gap={8}\n            style={{\n                padding: 12,\n                borderRadius: 8,\n                backgroundColor: bg,\n                alignSelf: 'flex-start',\n                writingDirection: textDirection,\n                ...(border ?? {}),\n            }}\n            {...props}\n        >\n            {typeof children === \"string\" ? (\n                <Text style={{ color: variant === \"solid\" ? \"#FFFFFF\" : color, writingDirection: textDirection }}>\n                    {children}\n                </Text>\n            ) : (\n                children\n            )}\n        </Flex>\n    );\n};\n\nexport const AlertIcon: React.FC<{ status: IAlertComponent[\"status\"] }> = ({ status = \"info\" }) => {\n    const { resolveToken, theme } = useKitsTheme();\n    const primary = resolveToken('primary');\n\n    if (status === 'brand' && theme.config.logo) return <>{theme.config.logo}</>;\n\n    const statusColors: Record<string, string> = {\n        error:   resolveToken('red.500'),\n        success: resolveToken('green.500'),\n        warning: resolveToken('yellow.500'),\n        info:    resolveToken('blue.500'),\n        brand:   primary,\n    };\n\n    const IconComponent = icons[status!];\n    const color = statusColors[status!];\n\n    return <Icon name={IconComponent} color={color} size=\"lg\" />;\n};\n\nexport const AlertTitle: React.FC<{ children: React.ReactNode; color?: string }> = ({ children, color }) => (\n    <Text fontWeight=\"bold\" style={color ? { color } : undefined}>{children}</Text>\n);\n\nexport const AlertDescription: React.FC<{ children: React.ReactNode; color?: string }> = ({ children, color }) => (\n    <Text size=\"sm\" style={color ? { color } : undefined}>{children}</Text>\n);\n\nexport default Alert;\n"],"names":[],"mappings":"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"}

package/components/Alert/index.cjs

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var alert_native = require('./alert.cjs');
+var KitsThemeProvider_native = require('../../contexts/Theme/KitsThemeProvider.cjs');
+var index = require('../../layout/Flex/index.cjs');
+
+const Alert = ({
+  status = "info",
+  variant = "subtle",
+  className,
+  withIcon,
+  children,
+  title,
+  description,
+  align = "start",
+  textDirection = "ltr"
+}) => {
+  const { resolveToken } = KitsThemeProvider_native.useKitsTheme();
+  const primary = resolveToken("primary");
+  const statusColors = {
+    error: resolveToken("red.500"),
+    success: resolveToken("green.500"),
+    warning: resolveToken("yellow.500"),
+    info: resolveToken("blue.500"),
+    brand: primary
+  };
+  const color = statusColors[status];
+  const textColor = variant === "solid" ? "#FFFFFF" : color;
+  const hasIconRow = withIcon || title;
+  const iconTitleDirection = textDirection === "rtl" ? "row-reverse" : "row";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    alert_native.default,
+    {
+      status,
+      className,
+      variant,
+      align,
+      textDirection,
+      children: [
+        hasIconRow && /* @__PURE__ */ jsxRuntime.jsxs(
+          index.default,
+          {
+            flexDirection: iconTitleDirection,
+            alignItems: "center",
+            gap: 6,
+            children: [
+              withIcon && /* @__PURE__ */ jsxRuntime.jsx(alert_native.AlertIcon, { status }),
+              title && /* @__PURE__ */ jsxRuntime.jsx(alert_native.AlertTitle, { color: textColor, children: title })
+            ]
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(alert_native.AlertDescription, { color: textColor, children: description }),
+        typeof children === "string" && /* @__PURE__ */ jsxRuntime.jsx(alert_native.AlertTitle, { color: textColor, children }),
+        React.isValidElement(children) && children
+      ]
+    }
+  );
+};
+
+exports.AlertDescription = alert_native.AlertDescription;
+exports.AlertIcon = alert_native.AlertIcon;
+exports.AlertTitle = alert_native.AlertTitle;
+exports.default = Alert;
+//# sourceMappingURL=index.cjs.map

package/components/Alert/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../../../../src/components/Alert/index.native.tsx"],"sourcesContent":["import React, { isValidElement } from 'react';\nimport AlertEl, { AlertDescription, AlertIcon, AlertTitle } from './alert.native';\nimport { Flex } from '../../_compat';\nimport type { IAlertProps } from \"@lmb-it/kitsconcerto-types\";\nimport { useKitsTheme } from \"../../contexts/Theme\";\n\nconst Alert = ({\n    status = 'info',\n    variant = 'subtle',\n    className,\n    withIcon,\n    children,\n    title,\n    description,\n    align = \"start\",\n    textDirection = \"ltr\",\n}: IAlertProps) => {\n    const { resolveToken } = useKitsTheme();\n    const primary = resolveToken('primary');\n\n    const statusColors: Record<string, string> = {\n        error:   resolveToken('red.500'),\n        success: resolveToken('green.500'),\n        warning: resolveToken('yellow.500'),\n        info:    resolveToken('blue.500'),\n        brand:   primary,\n    };\n\n    const color = statusColors[status!];\n    const textColor = variant === \"solid\" ? \"#FFFFFF\" : color;\n\n    const hasIconRow = withIcon || title;\n    // In RTL the icon-title row is reversed so the icon sits on the right of the title.\n    const iconTitleDirection = textDirection === \"rtl\" ? \"row-reverse\" : \"row\";\n\n    return (\n        <AlertEl\n            status={status}\n            className={className}\n            variant={variant}\n            align={align}\n            textDirection={textDirection}\n        >\n            {/* Row 1 — Icon + Title (always together in one horizontal row) */}\n            {hasIconRow && (\n                <Flex\n                    flexDirection={iconTitleDirection}\n                    alignItems=\"center\"\n                    gap={6}\n                >\n                    {withIcon && <AlertIcon status={status} />}\n                    {title && <AlertTitle color={textColor}>{title}</AlertTitle>}\n                </Flex>\n            )}\n\n            {/* Row 2 — Description */}\n            {description && (\n                <AlertDescription color={textColor}>{description}</AlertDescription>\n            )}\n\n            {/* Row 3+ — Arbitrary children */}\n            {typeof children === \"string\" && (\n                <AlertTitle color={textColor}>{children}</AlertTitle>\n            )}\n            {isValidElement(children) && children}\n        </AlertEl>\n    );\n};\n\nexport { AlertIcon, AlertTitle, AlertDescription };\nexport default Alert;\n"],"names":["useKitsTheme","jsxs","AlertEl","Flex","jsx","AlertIcon","AlertTitle","AlertDescription","isValidElement"],"mappings":";;;;;;;;;;AAMA,MAAM,QAAQ,CAAC;AAAA,EACX,MAAA,GAAS,MAAA;AAAA,EACT,OAAA,GAAU,QAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR,aAAA,GAAgB;AACpB,CAAA,KAAmB;AACf,EAAA,MAAM,EAAE,YAAA,EAAa,GAAIA,qCAAA,EAAa;AACtC,EAAA,MAAM,OAAA,GAAU,aAAa,SAAS,CAAA;AAEtC,EAAA,MAAM,YAAA,GAAuC;AAAA,IACzC,KAAA,EAAS,aAAa,SAAS,CAAA;AAAA,IAC/B,OAAA,EAAS,aAAa,WAAW,CAAA;AAAA,IACjC,OAAA,EAAS,aAAa,YAAY,CAAA;AAAA,IAClC,IAAA,EAAS,aAAa,UAAU,CAAA;AAAA,IAChC,KAAA,EAAS;AAAA,GACb;AAEA,EAAA,MAAM,KAAA,GAAQ,aAAa,MAAO,CAAA;AAClC,EAAA,MAAM,SAAA,GAAY,OAAA,KAAY,OAAA,GAAU,SAAA,GAAY,KAAA;AAEpD,EAAA,MAAM,aAAa,QAAA,IAAY,KAAA;AAE/B,EAAA,MAAM,kBAAA,GAAqB,aAAA,KAAkB,KAAA,GAAQ,aAAA,GAAgB,KAAA;AAErE,EAAA,uBACIC,eAAA;AAAA,IAACC,oBAAA;AAAA,IAAA;AAAA,MACG,MAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA,aAAA;AAAA,MAGC,QAAA,EAAA;AAAA,QAAA,UAAA,oBACGD,eAAA;AAAA,UAACE,aAAA;AAAA,UAAA;AAAA,YACG,aAAA,EAAe,kBAAA;AAAA,YACf,UAAA,EAAW,QAAA;AAAA,YACX,GAAA,EAAK,CAAA;AAAA,YAEJ,QAAA,EAAA;AAAA,cAAA,QAAA,oBAAYC,cAAA,CAACC,0BAAU,MAAA,EAAgB,CAAA;AAAA,cACvC,KAAA,oBAASD,cAAA,CAACE,uBAAA,EAAA,EAAW,KAAA,EAAO,WAAY,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,SACnD;AAAA,QAIH,WAAA,oBACGF,cAAA,CAACG,6BAAA,EAAA,EAAiB,KAAA,EAAO,WAAY,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,QAIpD,OAAO,QAAA,KAAa,QAAA,mCAChBD,uBAAA,EAAA,EAAW,KAAA,EAAO,WAAY,QAAA,EAAS,CAAA;AAAA,QAE3CE,oBAAA,CAAe,QAAQ,CAAA,IAAK;AAAA;AAAA;AAAA,GACjC;AAER;;;;;;;"}

package/components/Alert/index.js

@@ -0,0 +1,61 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
+import Alert$1, { AlertIcon, AlertTitle, AlertDescription } from './alert.js';
+import { useKitsTheme } from '../../contexts/Theme/KitsThemeProvider.js';
+import Flex from '../../layout/Flex/index.js';
+
+const Alert = ({
+  status = "info",
+  variant = "subtle",
+  className,
+  withIcon,
+  children,
+  title,
+  description,
+  align = "start",
+  textDirection = "ltr"
+}) => {
+  const { resolveToken } = useKitsTheme();
+  const primary = resolveToken("primary");
+  const statusColors = {
+    error: resolveToken("red.500"),
+    success: resolveToken("green.500"),
+    warning: resolveToken("yellow.500"),
+    info: resolveToken("blue.500"),
+    brand: primary
+  };
+  const color = statusColors[status];
+  const textColor = variant === "solid" ? "#FFFFFF" : color;
+  const hasIconRow = withIcon || title;
+  const iconTitleDirection = textDirection === "rtl" ? "row-reverse" : "row";
+  return /* @__PURE__ */ jsxs(
+    Alert$1,
+    {
+      status,
+      className,
+      variant,
+      align,
+      textDirection,
+      children: [
+        hasIconRow && /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            flexDirection: iconTitleDirection,
+            alignItems: "center",
+            gap: 6,
+            children: [
+              withIcon && /* @__PURE__ */ jsx(AlertIcon, { status }),
+              title && /* @__PURE__ */ jsx(AlertTitle, { color: textColor, children: title })
+            ]
+          }
+        ),
+        description && /* @__PURE__ */ jsx(AlertDescription, { color: textColor, children: description }),
+        typeof children === "string" && /* @__PURE__ */ jsx(AlertTitle, { color: textColor, children }),
+        isValidElement(children) && children
+      ]
+    }
+  );
+};
+
+export { AlertDescription, AlertIcon, AlertTitle, Alert as default };
+//# sourceMappingURL=index.js.map

package/components/Alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/Alert/index.native.tsx"],"sourcesContent":["import React, { isValidElement } from 'react';\nimport AlertEl, { AlertDescription, AlertIcon, AlertTitle } from './alert.native';\nimport { Flex } from '../../_compat';\nimport type { IAlertProps } from \"@lmb-it/kitsconcerto-types\";\nimport { useKitsTheme } from \"../../contexts/Theme\";\n\nconst Alert = ({\n    status = 'info',\n    variant = 'subtle',\n    className,\n    withIcon,\n    children,\n    title,\n    description,\n    align = \"start\",\n    textDirection = \"ltr\",\n}: IAlertProps) => {\n    const { resolveToken } = useKitsTheme();\n    const primary = resolveToken('primary');\n\n    const statusColors: Record<string, string> = {\n        error:   resolveToken('red.500'),\n        success: resolveToken('green.500'),\n        warning: resolveToken('yellow.500'),\n        info:    resolveToken('blue.500'),\n        brand:   primary,\n    };\n\n    const color = statusColors[status!];\n    const textColor = variant === \"solid\" ? \"#FFFFFF\" : color;\n\n    const hasIconRow = withIcon || title;\n    // In RTL the icon-title row is reversed so the icon sits on the right of the title.\n    const iconTitleDirection = textDirection === \"rtl\" ? \"row-reverse\" : \"row\";\n\n    return (\n        <AlertEl\n            status={status}\n            className={className}\n            variant={variant}\n            align={align}\n            textDirection={textDirection}\n        >\n            {/* Row 1 — Icon + Title (always together in one horizontal row) */}\n            {hasIconRow && (\n                <Flex\n                    flexDirection={iconTitleDirection}\n                    alignItems=\"center\"\n                    gap={6}\n                >\n                    {withIcon && <AlertIcon status={status} />}\n                    {title && <AlertTitle color={textColor}>{title}</AlertTitle>}\n                </Flex>\n            )}\n\n            {/* Row 2 — Description */}\n            {description && (\n                <AlertDescription color={textColor}>{description}</AlertDescription>\n            )}\n\n            {/* Row 3+ — Arbitrary children */}\n            {typeof children === \"string\" && (\n                <AlertTitle color={textColor}>{children}</AlertTitle>\n            )}\n            {isValidElement(children) && children}\n        </AlertEl>\n    );\n};\n\nexport { AlertIcon, AlertTitle, AlertDescription };\nexport default Alert;\n"],"names":["AlertEl"],"mappings":";;;;;;AAMA,MAAM,QAAQ,CAAC;AAAA,EACX,MAAA,GAAS,MAAA;AAAA,EACT,OAAA,GAAU,QAAA;AAAA,EACV,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR,aAAA,GAAgB;AACpB,CAAA,KAAmB;AACf,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,YAAA,EAAa;AACtC,EAAA,MAAM,OAAA,GAAU,aAAa,SAAS,CAAA;AAEtC,EAAA,MAAM,YAAA,GAAuC;AAAA,IACzC,KAAA,EAAS,aAAa,SAAS,CAAA;AAAA,IAC/B,OAAA,EAAS,aAAa,WAAW,CAAA;AAAA,IACjC,OAAA,EAAS,aAAa,YAAY,CAAA;AAAA,IAClC,IAAA,EAAS,aAAa,UAAU,CAAA;AAAA,IAChC,KAAA,EAAS;AAAA,GACb;AAEA,EAAA,MAAM,KAAA,GAAQ,aAAa,MAAO,CAAA;AAClC,EAAA,MAAM,SAAA,GAAY,OAAA,KAAY,OAAA,GAAU,SAAA,GAAY,KAAA;AAEpD,EAAA,MAAM,aAAa,QAAA,IAAY,KAAA;AAE/B,EAAA,MAAM,kBAAA,GAAqB,aAAA,KAAkB,KAAA,GAAQ,aAAA,GAAgB,KAAA;AAErE,EAAA,uBACI,IAAA;AAAA,IAACA,OAAA;AAAA,IAAA;AAAA,MACG,MAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,KAAA;AAAA,MACA,aAAA;AAAA,MAGC,QAAA,EAAA;AAAA,QAAA,UAAA,oBACG,IAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACG,aAAA,EAAe,kBAAA;AAAA,YACf,UAAA,EAAW,QAAA;AAAA,YACX,GAAA,EAAK,CAAA;AAAA,YAEJ,QAAA,EAAA;AAAA,cAAA,QAAA,oBAAY,GAAA,CAAC,aAAU,MAAA,EAAgB,CAAA;AAAA,cACvC,KAAA,oBAAS,GAAA,CAAC,UAAA,EAAA,EAAW,KAAA,EAAO,WAAY,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,SACnD;AAAA,QAIH,WAAA,oBACG,GAAA,CAAC,gBAAA,EAAA,EAAiB,KAAA,EAAO,WAAY,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,QAIpD,OAAO,QAAA,KAAa,QAAA,wBAChB,UAAA,EAAA,EAAW,KAAA,EAAO,WAAY,QAAA,EAAS,CAAA;AAAA,QAE3C,cAAA,CAAe,QAAQ,CAAA,IAAK;AAAA;AAAA;AAAA,GACjC;AAER;;;;"}