@situaction/traquiste-mobile 1.0.0 → 1.2.0

package/build/components/Switch/Switch.styles.js

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+    wrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        gap: 8,
+        alignSelf: 'flex-start',
+    },
+    track: {
+        overflow: 'hidden',
+        // shadow on track
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 1,
+        shadowRadius: 5,
+        elevation: 2,
+    },
+    thumb: {
+        position: 'absolute',
+        // shadow on thumb (visible before overflow:hidden clips it)
+        shadowOffset: { width: 0, height: 4 },
+        shadowOpacity: 1,
+        shadowRadius: 5,
+        elevation: 2,
+    },
+});
+//# sourceMappingURL=Switch.styles.js.map

package/build/components/Switch/Switch.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.styles.js","sourceRoot":"","sources":["../../../src/components/Switch/Switch.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACtC,OAAO,EAAE;QACP,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;QACN,SAAS,EAAE,YAAY;KACxB;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,QAAQ;QAClB,kBAAkB;QAClB,YAAY,EAAG,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;QACtC,aAAa,EAAE,CAAC;QAChB,YAAY,EAAG,CAAC;QAChB,SAAS,EAAM,CAAC;KACjB;IACD,KAAK,EAAE;QACL,QAAQ,EAAM,UAAU;QACxB,4DAA4D;QAC5D,YAAY,EAAG,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE;QACtC,aAAa,EAAE,CAAC;QAChB,YAAY,EAAG,CAAC;QAChB,SAAS,EAAM,CAAC;KACjB;CACF,CAAC,CAAC","sourcesContent":["import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n  wrapper: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 8,\n    alignSelf: 'flex-start',\n  },\n  track: {\n    overflow: 'hidden',\n    // shadow on track\n    shadowOffset:  { width: 0, height: 4 },\n    shadowOpacity: 1,\n    shadowRadius:  5,\n    elevation:     2,\n  },\n  thumb: {\n    position:     'absolute',\n    // shadow on thumb (visible before overflow:hidden clips it)\n    shadowOffset:  { width: 0, height: 4 },\n    shadowOpacity: 1,\n    shadowRadius:  5,\n    elevation:     2,\n  },\n});\n"]}

package/build/components/Switch/index.d.ts

@@ -0,0 +1,3 @@
+export { Switch } from './Switch';
+export type { SwitchProps, SwitchSize } from './Switch';
+//# sourceMappingURL=index.d.ts.map

package/build/components/Switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}

package/build/components/Switch/index.js

@@ -0,0 +1,2 @@
+export { Switch } from './Switch';
+//# sourceMappingURL=index.js.map

package/build/components/Switch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Switch/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC","sourcesContent":["export { Switch } from './Switch';\nexport type { SwitchProps, SwitchSize } from './Switch';\n"]}

package/build/components/Tab/Tab.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Tab — horizontal tab navigation bar.
+ *
+ * Two visual variants:
+ *  - 'line'   → underline indicator. Full-width strip, each tab flex:1.
+ *  - 'button' → pill/segmented container. Active tab gets a card background.
+ *
+ * Controlled: activeIndex + onChange always required.
+ * Optional horizontal ScrollView when `scrollable` is true.
+ */
+import React from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+export interface TabItem {
+    /** Tab label text — optional when icon is provided */
+    label?: string;
+    /** Optional Phosphor icon — rendered at 20px */
+    icon?: React.ReactElement;
+    /** Disabled — no interaction, muted color */
+    disabled?: boolean;
+}
+export interface TabProps {
+    /** Tab definitions */
+    items: TabItem[];
+    /** Index of the currently active tab — controlled */
+    activeIndex: number;
+    /** Called with the new index when the user taps a tab */
+    onChange: (index: number) => void;
+    /**
+     * Visual variant:
+     * - 'line'   → underline indicator, tabs stretch to fill width
+     * - 'button' → pill/segmented container
+     */
+    variant?: 'line' | 'button';
+    /** When true, wraps tabs in a horizontal ScrollView (for many tabs) */
+    scrollable?: boolean;
+    /** Hides the container border/background — line: only active indicator visible, button: only active pill visible */
+    showContainerBorder?: boolean;
+    /** When true, truncates labels with "…" — defaults to false (full text, no wrap) */
+    truncateLabels?: boolean;
+    /** Forces the container to fill 100% of its parent width */
+    fullWidth?: boolean;
+    /** Each tab gets flex:1 and shares the container width equally — implies fullWidth */
+    stretchItems?: boolean;
+    /** Horizontal alignment of tabs within the container — defaults to 'left' */
+    align?: 'left' | 'center' | 'right';
+    /** Additional styles on the outer wrapper */
+    style?: StyleProp<ViewStyle>;
+    /** Test ID for automated testing */
+    testID?: string;
+}
+export declare const Tab: ({ items, activeIndex, onChange, variant, scrollable, showContainerBorder, truncateLabels, fullWidth, stretchItems, align, style, testID, }: TabProps) => React.JSX.Element;
+//# sourceMappingURL=Tab.d.ts.map

package/build/components/Tab/Tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../src/components/Tab/Tab.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzD,MAAM,WAAW,OAAO;IACtB,sDAAsD;IACtD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gDAAgD;IAChD,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,sBAAsB;IACtB,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,qDAAqD;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,yDAAyD;IACzD,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,uEAAuE;IACvE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oHAAoH;IACpH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,oFAAoF;IACpF,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,4DAA4D;IAC5D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,sFAAsF;IACtF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,6CAA6C;IAC7C,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAMD,eAAO,MAAM,GAAG,GAAI,4IAajB,QAAQ,sBAkKV,CAAC"}

package/build/components/Tab/Tab.js

@@ -0,0 +1,121 @@
+/**
+ * Tab — horizontal tab navigation bar.
+ *
+ * Two visual variants:
+ *  - 'line'   → underline indicator. Full-width strip, each tab flex:1.
+ *  - 'button' → pill/segmented container. Active tab gets a card background.
+ *
+ * Controlled: activeIndex + onChange always required.
+ * Optional horizontal ScrollView when `scrollable` is true.
+ */
+import React from 'react';
+import { Pressable, ScrollView, Text, View, } from 'react-native';
+import { useTheme } from '../../context/ThemeContext';
+import { styles } from './Tab.styles';
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export const Tab = ({ items, activeIndex, onChange, variant = 'line', scrollable = false, showContainerBorder = true, truncateLabels = false, fullWidth = false, stretchItems = false, align = 'left', style, testID, }) => {
+    const { colors } = useTheme();
+    const t = colors.tabs;
+    const justifyContent = align === 'center' ? 'center' :
+        align === 'right' ? 'flex-end' :
+            'flex-start';
+    // stretchItems implies full-width container
+    const effectiveFullWidth = fullWidth || stretchItems;
+    // items get flex:1 when stretchItems or truncateLabels (truncation needs a bounded width)
+    const itemFlex = !scrollable && (stretchItems || truncateLabels);
+    // autoSize: shrink to content when items are intrinsic width and container not forced full
+    const sizeStyle = !itemFlex && !effectiveFullWidth ? styles.autoSize : undefined;
+    // -----------------------------------------------------------------------
+    // Line variant
+    // -----------------------------------------------------------------------
+    if (variant === 'line') {
+        const tabs = items.map((item, index) => {
+            const isActive = index === activeIndex;
+            const isDisabled = item.disabled ?? false;
+            const textColor = isDisabled
+                ? t.line.disabled.text
+                : isActive
+                    ? t.line.active.text
+                    : t.line.inactive.text;
+            const iconElement = item.icon
+                ? React.cloneElement(item.icon, {
+                    color: textColor,
+                    size: 20,
+                })
+                : null;
+            return (<Pressable key={index} onPress={isDisabled ? undefined : () => onChange(index)} accessibilityRole="tab" accessibilityState={{ selected: isActive, disabled: isDisabled }} style={[
+                    styles.lineTab,
+                    itemFlex && styles.lineTabFlex,
+                    {
+                        borderBottomWidth: 2,
+                        borderBottomColor: isActive ? t.line.active.indicator : 'transparent',
+                        marginBottom: -1,
+                    },
+                ]}>
+          {iconElement}
+          {item.label != null && (<Text numberOfLines={truncateLabels ? 1 : undefined} style={[styles.label, { color: textColor }]}>{item.label}</Text>)}
+        </Pressable>);
+        });
+        const container = (<View style={[
+                styles.lineContainer,
+                {
+                    borderBottomColor: showContainerBorder ? t.line.containerBorder : 'transparent',
+                    justifyContent,
+                },
+                sizeStyle,
+                style,
+            ]} testID={testID}>
+        {scrollable ? (<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.lineScrollContent}>
+            {tabs}
+          </ScrollView>) : (tabs)}
+      </View>);
+        return container;
+    }
+    // -----------------------------------------------------------------------
+    // Button variant
+    // -----------------------------------------------------------------------
+    const tabs = items.map((item, index) => {
+        const isActive = index === activeIndex;
+        const isDisabled = item.disabled ?? false;
+        const textColor = isDisabled
+            ? t.button.disabled.text
+            : isActive
+                ? t.button.active.text
+                : t.button.default.text;
+        const iconElement = item.icon
+            ? React.cloneElement(item.icon, {
+                color: textColor,
+                size: 20,
+            })
+            : null;
+        return (<Pressable key={index} onPress={isDisabled ? undefined : () => onChange(index)} accessibilityRole="tab" accessibilityState={{ selected: isActive, disabled: isDisabled }} style={[
+                styles.buttonTab,
+                itemFlex && styles.buttonTabFlex,
+                {
+                    borderWidth: 1,
+                    borderColor: isActive ? t.button.active.border : 'transparent',
+                    backgroundColor: isActive ? t.button.active.background : 'transparent',
+                },
+            ]}>
+        {iconElement}
+        {item.label != null && (<Text numberOfLines={truncateLabels ? 1 : undefined} style={[styles.label, { color: textColor }]}>{item.label}</Text>)}
+      </Pressable>);
+    });
+    return (<View style={[
+            styles.buttonContainer,
+            {
+                backgroundColor: showContainerBorder ? t.button.container.background : 'transparent',
+                borderColor: showContainerBorder ? t.button.container.border : 'transparent',
+                justifyContent,
+            },
+            sizeStyle,
+            style,
+        ]} testID={testID}>
+      {scrollable ? (<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.buttonScrollContent}>
+          {tabs}
+        </ScrollView>) : (tabs)}
+    </View>);
+};
+//# sourceMappingURL=Tab.js.map

package/build/components/Tab/Tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tab/Tab.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Tab — horizontal tab navigation bar.\n *\n * Two visual variants:\n *  - 'line'   → underline indicator. Full-width strip, each tab flex:1.\n *  - 'button' → pill/segmented container. Active tab gets a card background.\n *\n * Controlled: activeIndex + onChange always required.\n * Optional horizontal ScrollView when `scrollable` is true.\n */\nimport React from 'react';\nimport {\n  Pressable,\n  ScrollView,\n  Text,\n  View,\n} from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport { styles } from './Tab.styles';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface TabItem {\n  /** Tab label text — optional when icon is provided */\n  label?: string;\n  /** Optional Phosphor icon — rendered at 20px */\n  icon?: React.ReactElement;\n  /** Disabled — no interaction, muted color */\n  disabled?: boolean;\n}\n\nexport interface TabProps {\n  /** Tab definitions */\n  items: TabItem[];\n  /** Index of the currently active tab — controlled */\n  activeIndex: number;\n  /** Called with the new index when the user taps a tab */\n  onChange: (index: number) => void;\n  /**\n   * Visual variant:\n   * - 'line'   → underline indicator, tabs stretch to fill width\n   * - 'button' → pill/segmented container\n   */\n  variant?: 'line' | 'button';\n  /** When true, wraps tabs in a horizontal ScrollView (for many tabs) */\n  scrollable?: boolean;\n  /** Hides the container border/background — line: only active indicator visible, button: only active pill visible */\n  showContainerBorder?: boolean;\n  /** When true, truncates labels with \"…\" — defaults to false (full text, no wrap) */\n  truncateLabels?: boolean;\n  /** Forces the container to fill 100% of its parent width */\n  fullWidth?: boolean;\n  /** Each tab gets flex:1 and shares the container width equally — implies fullWidth */\n  stretchItems?: boolean;\n  /** Horizontal alignment of tabs within the container — defaults to 'left' */\n  align?: 'left' | 'center' | 'right';\n  /** Additional styles on the outer wrapper */\n  style?: StyleProp<ViewStyle>;\n  /** Test ID for automated testing */\n  testID?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport const Tab = ({\n  items,\n  activeIndex,\n  onChange,\n  variant = 'line',\n  scrollable = false,\n  showContainerBorder = true,\n  truncateLabels = false,\n  fullWidth = false,\n  stretchItems = false,\n  align = 'left',\n  style,\n  testID,\n}: TabProps) => {\n  const { colors } = useTheme();\n  const t = colors.tabs;\n\n  const justifyContent =\n    align === 'center' ? 'center' :\n    align === 'right'  ? 'flex-end' :\n    'flex-start';\n\n  // stretchItems implies full-width container\n  const effectiveFullWidth = fullWidth || stretchItems;\n  // items get flex:1 when stretchItems or truncateLabels (truncation needs a bounded width)\n  const itemFlex = !scrollable && (stretchItems || truncateLabels);\n  // autoSize: shrink to content when items are intrinsic width and container not forced full\n  const sizeStyle = !itemFlex && !effectiveFullWidth ? styles.autoSize : undefined;\n\n  // -----------------------------------------------------------------------\n  // Line variant\n  // -----------------------------------------------------------------------\n  if (variant === 'line') {\n    const tabs = items.map((item, index) => {\n      const isActive   = index === activeIndex;\n      const isDisabled = item.disabled ?? false;\n\n      const textColor = isDisabled\n        ? t.line.disabled.text\n        : isActive\n          ? t.line.active.text\n          : t.line.inactive.text;\n\n      const iconElement = item.icon\n        ? React.cloneElement(item.icon as React.ReactElement<{ color?: string; size?: number }>, {\n            color: textColor,\n            size:  20,\n          })\n        : null;\n\n      return (\n        <Pressable\n          key={index}\n          onPress={isDisabled ? undefined : () => onChange(index)}\n          accessibilityRole=\"tab\"\n          accessibilityState={{ selected: isActive, disabled: isDisabled }}\n          style={[\n            styles.lineTab,\n            itemFlex && styles.lineTabFlex,\n            {\n              borderBottomWidth: 2,\n              borderBottomColor: isActive ? t.line.active.indicator : 'transparent',\n              marginBottom: -1,\n            },\n          ]}\n        >\n          {iconElement}\n          {item.label != null && (\n            <Text numberOfLines={truncateLabels ? 1 : undefined} style={[styles.label, { color: textColor }]}>{item.label}</Text>\n          )}\n        </Pressable>\n      );\n    });\n\n    const container = (\n      <View\n        style={[\n          styles.lineContainer,\n          {\n            borderBottomColor: showContainerBorder ? t.line.containerBorder : 'transparent',\n            justifyContent,\n          },\n          sizeStyle,\n          style,\n        ]}\n        testID={testID}\n      >\n        {scrollable ? (\n          <ScrollView\n            horizontal\n            showsHorizontalScrollIndicator={false}\n            contentContainerStyle={styles.lineScrollContent}\n          >\n            {tabs}\n          </ScrollView>\n        ) : (\n          tabs\n        )}\n      </View>\n    );\n\n    return container;\n  }\n\n  // -----------------------------------------------------------------------\n  // Button variant\n  // -----------------------------------------------------------------------\n  const tabs = items.map((item, index) => {\n    const isActive   = index === activeIndex;\n    const isDisabled = item.disabled ?? false;\n\n    const textColor = isDisabled\n      ? t.button.disabled.text\n      : isActive\n        ? t.button.active.text\n        : t.button.default.text;\n\n    const iconElement = item.icon\n      ? React.cloneElement(item.icon as React.ReactElement<{ color?: string; size?: number }>, {\n          color: textColor,\n          size:  20,\n        })\n      : null;\n\n    return (\n      <Pressable\n        key={index}\n        onPress={isDisabled ? undefined : () => onChange(index)}\n        accessibilityRole=\"tab\"\n        accessibilityState={{ selected: isActive, disabled: isDisabled }}\n        style={[\n          styles.buttonTab,\n          itemFlex && styles.buttonTabFlex,\n          {\n            borderWidth:     1,\n            borderColor:     isActive ? t.button.active.border : 'transparent',\n            backgroundColor: isActive ? t.button.active.background : 'transparent',\n          },\n        ]}\n      >\n        {iconElement}\n        {item.label != null && (\n          <Text numberOfLines={truncateLabels ? 1 : undefined} style={[styles.label, { color: textColor }]}>{item.label}</Text>\n        )}\n      </Pressable>\n    );\n  });\n\n  return (\n    <View\n      style={[\n        styles.buttonContainer,\n        {\n          backgroundColor: showContainerBorder ? t.button.container.background : 'transparent',\n          borderColor:     showContainerBorder ? t.button.container.border : 'transparent',\n          justifyContent,\n        },\n        sizeStyle,\n        style,\n      ]}\n      testID={testID}\n    >\n      {scrollable ? (\n        <ScrollView\n          horizontal\n          showsHorizontalScrollIndicator={false}\n          contentContainerStyle={styles.buttonScrollContent}\n        >\n          {tabs}\n        </ScrollView>\n      ) : (\n        tabs\n      )}\n    </View>\n  );\n};\n\n"]}

package/build/components/Tab/Tab.styles.d.ts

@@ -0,0 +1,55 @@
+export declare const styles: {
+    autoSize: {
+        alignSelf: "flex-start";
+    };
+    lineContainer: {
+        flexDirection: "row";
+        borderBottomWidth: number;
+        alignItems: "flex-end";
+    };
+    lineTab: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        gap: number;
+        minHeight: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    lineTabFlex: {
+        flex: number;
+    };
+    lineScrollContent: {
+        flexDirection: "row";
+    };
+    buttonContainer: {
+        flexDirection: "row";
+        borderWidth: number;
+        borderRadius: number;
+        padding: number;
+        gap: number;
+    };
+    buttonTab: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "center";
+        gap: number;
+        borderRadius: number;
+        paddingHorizontal: number;
+        paddingVertical: number;
+    };
+    buttonTabFlex: {
+        flex: number;
+    };
+    buttonScrollContent: {
+        flexDirection: "row";
+        gap: number;
+    };
+    label: {
+        fontFamily: string;
+        fontSize: number;
+        fontWeight: "600";
+        lineHeight: number;
+    };
+};
+//# sourceMappingURL=Tab.styles.d.ts.map

package/build/components/Tab/Tab.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tab/Tab.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DjB,CAAC"}

package/build/components/Tab/Tab.styles.js

@@ -0,0 +1,60 @@
+import { StyleSheet } from 'react-native';
+export const styles = StyleSheet.create({
+    // -- Shared
+    autoSize: {
+        alignSelf: 'flex-start',
+    },
+    // -- Line variant
+    lineContainer: {
+        flexDirection: 'row',
+        borderBottomWidth: 1,
+        alignItems: 'flex-end',
+    },
+    lineTab: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+        minHeight: 40,
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+    },
+    lineTabFlex: {
+        flex: 1,
+    },
+    lineScrollContent: {
+        flexDirection: 'row',
+    },
+    // -- Button variant
+    buttonContainer: {
+        flexDirection: 'row',
+        borderWidth: 1,
+        borderRadius: 6,
+        padding: 2,
+        gap: 4,
+    },
+    buttonTab: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 4,
+        borderRadius: 4,
+        paddingHorizontal: 12,
+        paddingVertical: 6,
+    },
+    buttonTabFlex: {
+        flex: 1,
+    },
+    buttonScrollContent: {
+        flexDirection: 'row',
+        gap: 4,
+    },
+    // -- Shared
+    label: {
+        fontFamily: 'Urbanist',
+        fontSize: 14,
+        fontWeight: '600',
+        lineHeight: 20,
+    },
+});
+//# sourceMappingURL=Tab.styles.js.map

package/build/components/Tab/Tab.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tab.styles.js","sourceRoot":"","sources":["../../../src/components/Tab/Tab.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACtC,YAAY;IACZ,QAAQ,EAAE;QACR,SAAS,EAAE,YAAY;KACxB;IAED,kBAAkB;IAClB,aAAa,EAAE;QACb,aAAa,EAAI,KAAK;QACtB,iBAAiB,EAAE,CAAC;QACpB,UAAU,EAAO,UAAU;KAC5B;IACD,OAAO,EAAE;QACP,aAAa,EAAG,KAAK;QACrB,UAAU,EAAM,QAAQ;QACxB,cAAc,EAAE,QAAQ;QACxB,GAAG,EAAa,CAAC;QACjB,SAAS,EAAO,EAAE;QAClB,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAI,CAAC;KACrB;IACD,WAAW,EAAE;QACX,IAAI,EAAE,CAAC;KACR;IACD,iBAAiB,EAAE;QACjB,aAAa,EAAE,KAAK;KACrB;IAED,oBAAoB;IACpB,eAAe,EAAE;QACf,aAAa,EAAE,KAAK;QACpB,WAAW,EAAI,CAAC;QAChB,YAAY,EAAG,CAAC;QAChB,OAAO,EAAQ,CAAC;QAChB,GAAG,EAAY,CAAC;KACjB;IACD,SAAS,EAAE;QACT,aAAa,EAAM,KAAK;QACxB,UAAU,EAAS,QAAQ;QAC3B,cAAc,EAAK,QAAQ;QAC3B,GAAG,EAAgB,CAAC;QACpB,YAAY,EAAO,CAAC;QACpB,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAI,CAAC;KACrB;IACD,aAAa,EAAE;QACb,IAAI,EAAE,CAAC;KACR;IACD,mBAAmB,EAAE;QACnB,aAAa,EAAE,KAAK;QACpB,GAAG,EAAY,CAAC;KACjB;IAED,YAAY;IACZ,KAAK,EAAE;QACL,UAAU,EAAG,UAAU;QACvB,QAAQ,EAAK,EAAE;QACf,UAAU,EAAG,KAAK;QAClB,UAAU,EAAG,EAAE;KAChB;CACF,CAAC,CAAC","sourcesContent":["import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n  // -- Shared\n  autoSize: {\n    alignSelf: 'flex-start',\n  },\n\n  // -- Line variant\n  lineContainer: {\n    flexDirection:   'row',\n    borderBottomWidth: 1,\n    alignItems:      'flex-end',\n  },\n  lineTab: {\n    flexDirection:  'row',\n    alignItems:     'center',\n    justifyContent: 'center',\n    gap:            4,\n    minHeight:      40,\n    paddingHorizontal: 16,\n    paddingVertical:   8,\n  },\n  lineTabFlex: {\n    flex: 1,\n  },\n  lineScrollContent: {\n    flexDirection: 'row',\n  },\n\n  // -- Button variant\n  buttonContainer: {\n    flexDirection: 'row',\n    borderWidth:   1,\n    borderRadius:  6,\n    padding:       2,\n    gap:           4,\n  },\n  buttonTab: {\n    flexDirection:     'row',\n    alignItems:        'center',\n    justifyContent:    'center',\n    gap:               4,\n    borderRadius:      4,\n    paddingHorizontal: 12,\n    paddingVertical:   6,\n  },\n  buttonTabFlex: {\n    flex: 1,\n  },\n  buttonScrollContent: {\n    flexDirection: 'row',\n    gap:           4,\n  },\n\n  // -- Shared\n  label: {\n    fontFamily:  'Urbanist',\n    fontSize:    14,\n    fontWeight:  '600',\n    lineHeight:  20,\n  },\n});"]}

package/build/components/Tab/index.d.ts

@@ -0,0 +1,3 @@
+export { Tab } from './Tab';
+export type { TabProps, TabItem } from './Tab';
+//# sourceMappingURL=index.d.ts.map

package/build/components/Tab/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC"}

package/build/components/Tab/index.js

@@ -0,0 +1,2 @@
+export { Tab } from './Tab';
+//# sourceMappingURL=index.js.map

package/build/components/Tab/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tab/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC","sourcesContent":["export { Tab } from './Tab';\nexport type { TabProps, TabItem } from './Tab';\n"]}

package/build/components/Tag/Tag.d.ts

@@ -0,0 +1,4 @@
+import type { TagProps } from './Tag.types';
+export declare function Tag({ label, size, shape, disabled, color, textColor, iconLeft, onClose, }: TagProps): import("react").JSX.Element;
+export default Tag;
+//# sourceMappingURL=Tag.d.ts.map

package/build/components/Tag/Tag.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG5C,wBAAgB,GAAG,CAAC,EAClB,KAAK,EACL,IAAW,EACX,KAAc,EACd,QAAgB,EAChB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,OAAO,GACR,EAAE,QAAQ,+BA6CV;AAED,eAAe,GAAG,CAAC"}

package/build/components/Tag/Tag.js

@@ -0,0 +1,40 @@
+/**
+ * Tag component — compact label badge with optional icon slot and close button.
+ * Colors come from colors.tag.purple / colors.tag.disabled via useTheme().
+ */
+import { Pressable, Text, View } from 'react-native';
+import { X } from 'phosphor-react-native';
+import { useTheme } from '../../context/ThemeContext';
+import { getBorderRadius, getSizeTokens, styles } from './Tag.styles';
+export function Tag({ label, size = 'md', shape = 'pill', disabled = false, color, textColor, iconLeft, onClose, }) {
+    const { colors, fontFamily } = useTheme();
+    const tagColors = disabled ? colors.tag.disabled : colors.tag.purple;
+    const sizeTokens = getSizeTokens(size);
+    const borderRadius = getBorderRadius(size, shape);
+    // Custom color prop overrides background; textColor overrides text/icon
+    const resolvedBg = !disabled && color ? color : tagColors.background;
+    const resolvedText = !disabled && textColor ? textColor : tagColors.text;
+    const resolvedIcon = !disabled && textColor ? textColor : tagColors.icon;
+    const containerStyle = {
+        paddingHorizontal: sizeTokens.paddingHorizontal,
+        paddingVertical: sizeTokens.paddingVertical,
+        gap: sizeTokens.gap,
+        borderRadius,
+        backgroundColor: resolvedBg,
+    };
+    return (<View style={[styles.row, containerStyle]}>
+      {iconLeft != null && (<View style={{ width: sizeTokens.iconSize, height: sizeTokens.iconSize, alignItems: 'center', justifyContent: 'center' }}>
+          {iconLeft}
+        </View>)}
+
+      <Text style={[styles.label, { fontSize: sizeTokens.fontSize, lineHeight: sizeTokens.lineHeight, color: resolvedText, fontFamily }]} numberOfLines={1}>
+        {label}
+      </Text>
+
+      {onClose != null && (<Pressable style={[styles.closeHitZone, { width: sizeTokens.closeHitZone, height: sizeTokens.closeHitZone }]} onPress={disabled ? undefined : onClose} accessibilityRole="button" accessibilityLabel="Remove tag" pointerEvents={disabled ? 'none' : 'auto'}>
+          <X size={sizeTokens.closeSize} color={resolvedIcon} weight="bold"/>
+        </Pressable>)}
+    </View>);
+}
+export default Tag;
+//# sourceMappingURL=Tag.js.map

package/build/components/Tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sourceRoot":"","sources":["../../../src/components/Tag/Tag.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Tag component — compact label badge with optional icon slot and close button.\n * Colors come from colors.tag.purple / colors.tag.disabled via useTheme().\n */\nimport { Pressable, Text, View } from 'react-native';\nimport { X } from 'phosphor-react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport type { TagProps } from './Tag.types';\nimport { getBorderRadius, getSizeTokens, styles } from './Tag.styles';\n\nexport function Tag({\n  label,\n  size = 'md',\n  shape = 'pill',\n  disabled = false,\n  color,\n  textColor,\n  iconLeft,\n  onClose,\n}: TagProps) {\n  const { colors, fontFamily } = useTheme();\n  const tagColors  = disabled ? colors.tag.disabled : colors.tag.purple;\n\n  const sizeTokens  = getSizeTokens(size);\n  const borderRadius = getBorderRadius(size, shape);\n\n  // Custom color prop overrides background; textColor overrides text/icon\n  const resolvedBg   = !disabled && color ? color : tagColors.background;\n  const resolvedText = !disabled && textColor ? textColor : tagColors.text;\n  const resolvedIcon = !disabled && textColor ? textColor : tagColors.icon;\n\n  const containerStyle = {\n    paddingHorizontal: sizeTokens.paddingHorizontal,\n    paddingVertical:   sizeTokens.paddingVertical,\n    gap:               sizeTokens.gap,\n    borderRadius,\n    backgroundColor:   resolvedBg,\n  };\n\n  return (\n    <View style={[styles.row, containerStyle]}>\n      {iconLeft != null && (\n        <View style={{ width: sizeTokens.iconSize, height: sizeTokens.iconSize, alignItems: 'center', justifyContent: 'center' }}>\n          {iconLeft}\n        </View>\n      )}\n\n      <Text style={[styles.label, { fontSize: sizeTokens.fontSize, lineHeight: sizeTokens.lineHeight, color: resolvedText, fontFamily }]} numberOfLines={1}>\n        {label}\n      </Text>\n\n      {onClose != null && (\n        <Pressable\n          style={[styles.closeHitZone, { width: sizeTokens.closeHitZone, height: sizeTokens.closeHitZone }]}\n          onPress={disabled ? undefined : onClose}\n          accessibilityRole=\"button\"\n          accessibilityLabel=\"Remove tag\"\n          pointerEvents={disabled ? 'none' : 'auto'}\n        >\n          <X size={sizeTokens.closeSize} color={resolvedIcon} weight=\"bold\" />\n        </Pressable>\n      )}\n    </View>\n  );\n}\n\nexport default Tag;"]}

package/build/components/Tag/Tag.styles.d.ts

@@ -0,0 +1,35 @@
+import type { TagSize, TagShape } from './Tag.types';
+interface SizeTokens {
+    paddingHorizontal: number;
+    paddingVertical: number;
+    fontSize: number;
+    lineHeight: number;
+    iconSize: number;
+    closeSize: number;
+    closeHitZone: number;
+    gap: number;
+}
+export declare function getSizeTokens(size: TagSize): SizeTokens;
+export declare function getBorderRadius(size: TagSize, shape: TagShape): number;
+export declare const styles: {
+    row: {
+        flexDirection: "row";
+        alignItems: "center";
+        alignSelf: "flex-start";
+        borderWidth: number;
+        borderColor: string;
+    };
+    label: {
+        fontFamily: string;
+        fontWeight: "600";
+        flexShrink: number;
+        includeFontPadding: false;
+        textAlignVertical: "center";
+    };
+    closeHitZone: {
+        alignItems: "center";
+        justifyContent: "center";
+    };
+};
+export {};
+//# sourceMappingURL=Tag.styles.d.ts.map

package/build/components/Tag/Tag.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.styles.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAIrD,UAAU,UAAU;IAClB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,MAAM,CAAC;IACrB,GAAG,EAAE,MAAM,CAAC;CACb;AAkBD,wBAAgB,aAAa,CAAC,IAAI,EAAE,OAAO,GAAG,UAAU,CAEvD;AAED,wBAAgB,eAAe,CAAC,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,GAAG,MAAM,CAEtE;AAID,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;CAmBjB,CAAC"}

package/build/components/Tag/Tag.styles.js

@@ -0,0 +1,43 @@
+/** Layout tokens and static styles for the Tag component — colors come from useTheme() */
+import { StyleSheet } from 'react-native';
+const SIZE_TOKENS = {
+    xs: { paddingHorizontal: 6, paddingVertical: 4, fontSize: 10, lineHeight: 12, iconSize: 12, closeSize: 8, closeHitZone: 12, gap: 4 },
+    sm: { paddingHorizontal: 8, paddingVertical: 4, fontSize: 12, lineHeight: 14, iconSize: 14, closeSize: 10, closeHitZone: 14, gap: 4 },
+    md: { paddingHorizontal: 10, paddingVertical: 6, fontSize: 13, lineHeight: 16, iconSize: 16, closeSize: 12, closeHitZone: 16, gap: 4 },
+    lg: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 14, lineHeight: 18, iconSize: 18, closeSize: 14, closeHitZone: 18, gap: 6 },
+};
+const BORDER_RADIUS_ROUNDED = {
+    xs: 2,
+    sm: 4,
+    md: 6,
+    lg: 8,
+};
+// --- Helpers ---
+export function getSizeTokens(size) {
+    return SIZE_TOKENS[size];
+}
+export function getBorderRadius(size, shape) {
+    return shape === 'pill' ? 9999 : BORDER_RADIUS_ROUNDED[size];
+}
+// --- Static styles ---
+export const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        alignSelf: 'flex-start',
+        borderWidth: 1,
+        borderColor: 'transparent',
+    },
+    label: {
+        fontFamily: 'Urbanist',
+        fontWeight: '600',
+        flexShrink: 1,
+        includeFontPadding: false,
+        textAlignVertical: 'center',
+    },
+    closeHitZone: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});
+//# sourceMappingURL=Tag.styles.js.map

package/build/components/Tag/Tag.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.styles.js","sourceRoot":"","sources":["../../../src/components/Tag/Tag.styles.ts"],"names":[],"mappings":"AAAA,0FAA0F;AAC1F,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAgB1C,MAAM,WAAW,GAAgC;IAC/C,EAAE,EAAE,EAAE,iBAAiB,EAAE,CAAC,EAAG,eAAe,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,EAAG,YAAY,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;IACtI,EAAE,EAAE,EAAE,iBAAiB,EAAE,CAAC,EAAG,eAAe,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;IACtI,EAAE,EAAE,EAAE,iBAAiB,EAAE,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;IACtI,EAAE,EAAE,EAAE,iBAAiB,EAAE,EAAE,EAAE,eAAe,EAAE,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE;CACvI,CAAC;AAEF,MAAM,qBAAqB,GAA4B;IACrD,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;CACN,CAAC;AAEF,kBAAkB;AAElB,MAAM,UAAU,aAAa,CAAC,IAAa;IACzC,OAAO,WAAW,CAAC,IAAI,CAAC,CAAC;AAC3B,CAAC;AAED,MAAM,UAAU,eAAe,CAAC,IAAa,EAAE,KAAe;IAC5D,OAAO,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,qBAAqB,CAAC,IAAI,CAAC,CAAC;AAC/D,CAAC;AAED,wBAAwB;AAExB,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACtC,GAAG,EAAE;QACH,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,SAAS,EAAE,YAAY;QACvB,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,aAAa;KAC3B;IACD,KAAK,EAAE;QACL,UAAU,EAAE,UAAU;QACtB,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,CAAC;QACb,kBAAkB,EAAE,KAAK;QACzB,iBAAiB,EAAE,QAAQ;KAC5B;IACD,YAAY,EAAE;QACZ,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;CACF,CAAC,CAAC","sourcesContent":["/** Layout tokens and static styles for the Tag component — colors come from useTheme() */\nimport { StyleSheet } from 'react-native';\nimport type { TagSize, TagShape } from './Tag.types';\n\n// --- Size tokens ---\n\ninterface SizeTokens {\n  paddingHorizontal: number;\n  paddingVertical: number;\n  fontSize: number;\n  lineHeight: number;\n  iconSize: number;\n  closeSize: number;\n  closeHitZone: number;\n  gap: number;\n}\n\nconst SIZE_TOKENS: Record<TagSize, SizeTokens> = {\n  xs: { paddingHorizontal: 6,  paddingVertical: 4, fontSize: 10, lineHeight: 12, iconSize: 12, closeSize: 8,  closeHitZone: 12, gap: 4 },\n  sm: { paddingHorizontal: 8,  paddingVertical: 4, fontSize: 12, lineHeight: 14, iconSize: 14, closeSize: 10, closeHitZone: 14, gap: 4 },\n  md: { paddingHorizontal: 10, paddingVertical: 6, fontSize: 13, lineHeight: 16, iconSize: 16, closeSize: 12, closeHitZone: 16, gap: 4 },\n  lg: { paddingHorizontal: 12, paddingVertical: 8, fontSize: 14, lineHeight: 18, iconSize: 18, closeSize: 14, closeHitZone: 18, gap: 6 },\n};\n\nconst BORDER_RADIUS_ROUNDED: Record<TagSize, number> = {\n  xs: 2,\n  sm: 4,\n  md: 6,\n  lg: 8,\n};\n\n// --- Helpers ---\n\nexport function getSizeTokens(size: TagSize): SizeTokens {\n  return SIZE_TOKENS[size];\n}\n\nexport function getBorderRadius(size: TagSize, shape: TagShape): number {\n  return shape === 'pill' ? 9999 : BORDER_RADIUS_ROUNDED[size];\n}\n\n// --- Static styles ---\n\nexport const styles = StyleSheet.create({\n  row: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    alignSelf: 'flex-start',\n    borderWidth: 1,\n    borderColor: 'transparent',\n  },\n  label: {\n    fontFamily: 'Urbanist',\n    fontWeight: '600',\n    flexShrink: 1,\n    includeFontPadding: false,\n    textAlignVertical: 'center',\n  },\n  closeHitZone: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n});"]}

package/build/components/Tag/Tag.types.d.ts

@@ -0,0 +1,23 @@
+/** Types for the Tag component */
+import type { ReactNode } from 'react';
+export type TagSize = 'xs' | 'sm' | 'md' | 'lg';
+export type TagShape = 'pill' | 'rounded';
+export interface TagProps {
+    /** Tag label text */
+    label: string;
+    /** Size */
+    size?: TagSize;
+    /** Shape — pill (9999px) or rounded */
+    shape?: TagShape;
+    /** Disabled state — uses colors.tag.disabled tokens */
+    disabled?: boolean;
+    /** Optional left slot — icon or avatar node */
+    iconLeft?: ReactNode;
+    /** Custom background color override (hex) — overrides colors.tag.purple.background */
+    color?: string;
+    /** Custom text/icon color override — used alongside color prop */
+    textColor?: string;
+    /** Called when close button is pressed — shows close button when defined */
+    onClose?: () => void;
+}
+//# sourceMappingURL=Tag.types.d.ts.map

package/build/components/Tag/Tag.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.types.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"AAAA,kCAAkC;AAClC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,MAAM,OAAO,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAChD,MAAM,MAAM,QAAQ,GAAG,MAAM,GAAG,SAAS,CAAC;AAC1C,MAAM,WAAW,QAAQ;IACvB,qBAAqB;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW;IACX,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,uCAAuC;IACvC,KAAK,CAAC,EAAE,QAAQ,CAAC;IACjB,uDAAuD;IACvD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,sFAAsF;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/build/components/Tag/Tag.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=Tag.types.js.map

package/build/components/Tag/Tag.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.types.js","sourceRoot":"","sources":["../../../src/components/Tag/Tag.types.ts"],"names":[],"mappings":"","sourcesContent":["/** Types for the Tag component */\nimport type { ReactNode } from 'react';\n\nexport type TagSize = 'xs' | 'sm' | 'md' | 'lg';\nexport type TagShape = 'pill' | 'rounded';\nexport interface TagProps {\n  /** Tag label text */\n  label: string;\n  /** Size */\n  size?: TagSize;\n  /** Shape — pill (9999px) or rounded */\n  shape?: TagShape;\n  /** Disabled state — uses colors.tag.disabled tokens */\n  disabled?: boolean;\n  /** Optional left slot — icon or avatar node */\n  iconLeft?: ReactNode;\n  /** Custom background color override (hex) — overrides colors.tag.purple.background */\n  color?: string;\n  /** Custom text/icon color override — used alongside color prop */\n  textColor?: string;\n  /** Called when close button is pressed — shows close button when defined */\n  onClose?: () => void;\n}"]}

package/build/components/Tag/index.d.ts

@@ -0,0 +1,3 @@
+export { Tag } from './Tag';
+export type { TagProps, TagSize, TagShape } from './Tag.types';
+//# sourceMappingURL=index.d.ts.map

package/build/components/Tag/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

package/build/components/Tag/index.js

@@ -0,0 +1,2 @@
+export { Tag } from './Tag';
+//# sourceMappingURL=index.js.map

package/build/components/Tag/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC","sourcesContent":["export { Tag } from './Tag';\nexport type { TagProps, TagSize, TagShape } from './Tag.types';"]}