@rojaostudio/ds 1.0.0

package/dist/targets/native/components/currency-input.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { TextInputProps } from 'react-native';
+
+type Props = Omit<TextInputProps, 'value' | 'onChangeText' | 'keyboardType'> & {
+    value: number;
+    onChangeValueCents: (cents: number) => void;
+    label?: string;
+    accessibilityLabel?: string;
+    disabled?: boolean;
+    error?: boolean;
+    /** Símbolo da moeda à esquerda. default = 'R$'. */
+    currency?: string;
+    /** Casas decimais. default = 2 (BRL/USD). JPY = 0, BTC = 8. */
+    decimals?: number;
+    /** Separador decimal. default = ','. */
+    decimalSeparator?: string;
+    /** Separador de milhar. default = '.'. */
+    thousandSeparator?: string;
+};
+declare function CurrencyInput({ value, onChangeValueCents, label, accessibilityLabel, disabled, error, currency, decimals, decimalSeparator, thousandSeparator, style, onFocus, onBlur, ...rest }: Props): react.JSX.Element;
+
+export { CurrencyInput };

package/dist/targets/native/components/currency-input.js

@@ -0,0 +1,105 @@
+import {
+  __objRest,
+  __spreadValues
+} from "../../../chunk-ORMEWXMH.js";
+import { useState } from "react";
+import { StyleSheet, TextInput, View } from "react-native";
+import { Text } from "./text.js";
+import { useTheme } from "./theme.js";
+function formatAmount(subunits, decimals, decimalSeparator, thousandSeparator) {
+  const divisor = Math.pow(10, decimals);
+  const fixed = (subunits / divisor).toFixed(decimals);
+  const [intPart, decPart] = fixed.split(".");
+  const grouped = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
+  return decimals > 0 ? `${grouped}${decimalSeparator}${decPart}` : grouped;
+}
+function CurrencyInput(_a) {
+  var _b = _a, {
+    value,
+    onChangeValueCents,
+    label,
+    accessibilityLabel,
+    disabled,
+    error,
+    currency = "R$",
+    decimals = 2,
+    decimalSeparator = ",",
+    thousandSeparator = ".",
+    style,
+    onFocus,
+    onBlur
+  } = _b, rest = __objRest(_b, [
+    "value",
+    "onChangeValueCents",
+    "label",
+    "accessibilityLabel",
+    "disabled",
+    "error",
+    "currency",
+    "decimals",
+    "decimalSeparator",
+    "thousandSeparator",
+    "style",
+    "onFocus",
+    "onBlur"
+  ]);
+  const t = useTheme();
+  const [focused, setFocused] = useState(false);
+  const display = formatAmount(value, decimals, decimalSeparator, thousandSeparator);
+  const borderColor = error ? t["--danger"] : focused ? t["--border-focus"] : t["--border-default"];
+  function handle(text) {
+    const digits = text.replace(/\D/g, "").slice(0, 12);
+    onChangeValueCents(digits ? parseInt(digits, 10) : 0);
+  }
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.wrap,
+        {
+          borderColor,
+          backgroundColor: disabled ? t["--surface-raised"] : t["--surface-default"],
+          opacity: disabled ? 0.5 : 1
+        },
+        style
+      ]
+    },
+    /* @__PURE__ */ React.createElement(Text, { variant: "body", color: "muted", style: { marginRight: 6 } }, currency),
+    /* @__PURE__ */ React.createElement(
+      TextInput,
+      __spreadValues({
+        value: display,
+        onChangeText: handle,
+        keyboardType: "number-pad",
+        editable: !disabled,
+        accessibilityLabel: accessibilityLabel != null ? accessibilityLabel : label,
+        accessibilityState: { disabled: !!disabled },
+        selectTextOnFocus: true,
+        placeholderTextColor: t["--text-placeholder"],
+        onFocus: (e) => {
+          setFocused(true);
+          onFocus == null ? void 0 : onFocus(e);
+        },
+        onBlur: (e) => {
+          setFocused(false);
+          onBlur == null ? void 0 : onBlur(e);
+        },
+        style: [styles.input, { color: disabled ? t["--text-disabled"] : t["--text-primary"] }]
+      }, rest)
+    )
+  );
+}
+const styles = StyleSheet.create({
+  wrap: {
+    height: 48,
+    borderRadius: 12,
+    borderWidth: 1,
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  input: { flex: 1, fontSize: 16, padding: 0 }
+});
+export {
+  CurrencyInput
+};

package/dist/targets/native/components/danger-zone.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { ViewStyle } from 'react-native';
+
+interface DangerZoneProps {
+    title?: string;
+    description?: string;
+    children: ReactNode;
+    style?: ViewStyle;
+}
+declare function DangerZone({ title, description, children, style }: DangerZoneProps): react.JSX.Element;
+
+export { DangerZone, type DangerZoneProps };

package/dist/targets/native/components/danger-zone.js

@@ -0,0 +1,27 @@
+import "../../../chunk-ORMEWXMH.js";
+import { StyleSheet, View } from "react-native";
+import { Text } from "./text.js";
+import { useTheme } from "./theme.js";
+function DangerZone({ title, description, children, style }) {
+  const t = useTheme();
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.box,
+        { backgroundColor: t["--danger-soft"], borderColor: t["--danger-border"] },
+        style
+      ]
+    },
+    (title || description) && /* @__PURE__ */ React.createElement(View, { style: styles.header }, title ? /* @__PURE__ */ React.createElement(Text, { variant: "label", color: "danger" }, title) : null, description ? /* @__PURE__ */ React.createElement(Text, { variant: "caption", color: "danger", style: styles.description }, description) : null),
+    children
+  );
+}
+const styles = StyleSheet.create({
+  box: { borderRadius: 12, borderWidth: 1, padding: 20 },
+  header: { marginBottom: 16 },
+  description: { opacity: 0.75, marginTop: 2 }
+});
+export {
+  DangerZone
+};

package/dist/targets/native/components/date-picker.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+
+interface DatePickerProps {
+    value: Date | null;
+    onChange: (date: Date | null) => void;
+    min?: Date;
+    max?: Date;
+    placeholder?: string;
+    disabled?: boolean;
+}
+declare function DatePicker({ value, onChange, min, max, placeholder, disabled }: DatePickerProps): react.JSX.Element;
+
+export { DatePicker, type DatePickerProps };

package/dist/targets/native/components/date-picker.js

@@ -0,0 +1,185 @@
+import "../../../chunk-ORMEWXMH.js";
+import { Calendar, ChevronLeft, ChevronRight } from "lucide-react-native";
+import { useState } from "react";
+import { Modal, Pressable, StyleSheet, View } from "react-native";
+import { Text } from "./text.js";
+import { useTheme } from "./theme.js";
+const WEEKDAYS = ["S", "T", "Q", "Q", "S", "S", "D"];
+const MONTHS = [
+  "Janeiro",
+  "Fevereiro",
+  "Mar\xE7o",
+  "Abril",
+  "Maio",
+  "Junho",
+  "Julho",
+  "Agosto",
+  "Setembro",
+  "Outubro",
+  "Novembro",
+  "Dezembro"
+];
+function pad(n) {
+  return String(n).padStart(2, "0");
+}
+function formatDate(d) {
+  return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()}`;
+}
+function formatLong(d) {
+  return `${d.getDate()} de ${MONTHS[d.getMonth()]} de ${d.getFullYear()}`;
+}
+function sameDay(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function startOfDay(d) {
+  return new Date(d.getFullYear(), d.getMonth(), d.getDate());
+}
+function monthGrid(year, month) {
+  const first = new Date(year, month, 1);
+  const offset = (first.getDay() + 6) % 7;
+  const daysInMonth = new Date(year, month + 1, 0).getDate();
+  const cells = [];
+  for (let i = 0; i < offset; i++) cells.push(null);
+  for (let day = 1; day <= daysInMonth; day++) cells.push(new Date(year, month, day));
+  while (cells.length % 7 !== 0) cells.push(null);
+  return cells;
+}
+function DatePicker({ value, onChange, min, max, placeholder, disabled }) {
+  const t = useTheme();
+  const [open, setOpen] = useState(false);
+  const initial = value != null ? value : /* @__PURE__ */ new Date();
+  const [viewYear, setViewYear] = useState(initial.getFullYear());
+  const [viewMonth, setViewMonth] = useState(initial.getMonth());
+  const minDay = min ? startOfDay(min) : null;
+  const maxDay = max ? startOfDay(max) : null;
+  function isDisabled(d) {
+    const day = startOfDay(d);
+    if (minDay && day < minDay) return true;
+    if (maxDay && day > maxDay) return true;
+    return false;
+  }
+  function openPicker() {
+    if (disabled) return;
+    const base = value != null ? value : /* @__PURE__ */ new Date();
+    setViewYear(base.getFullYear());
+    setViewMonth(base.getMonth());
+    setOpen(true);
+  }
+  function shiftMonth(delta) {
+    const d = new Date(viewYear, viewMonth + delta, 1);
+    setViewYear(d.getFullYear());
+    setViewMonth(d.getMonth());
+  }
+  function pick(d) {
+    if (isDisabled(d)) return;
+    onChange(d);
+    setOpen(false);
+  }
+  const cells = monthGrid(viewYear, viewMonth);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress: openPicker,
+      disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: value ? `Data: ${formatLong(value)}` : placeholder != null ? placeholder : "Selecione uma data",
+      accessibilityState: { disabled: !!disabled },
+      style: [
+        styles.field,
+        {
+          borderColor: t["--border-default"],
+          backgroundColor: t["--surface-default"],
+          opacity: disabled ? 0.5 : 1
+        }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(Text, { variant: "body", color: value ? "primary" : "muted", style: { flex: 1 } }, value ? formatDate(value) : placeholder != null ? placeholder : "Selecione uma data"),
+    /* @__PURE__ */ React.createElement(Calendar, { size: 20, color: t["--text-muted"] })
+  ), /* @__PURE__ */ React.createElement(Modal, { visible: open, transparent: true, animationType: "fade", onRequestClose: () => setOpen(false) }, /* @__PURE__ */ React.createElement(Pressable, { style: styles.backdrop, onPress: () => setOpen(false) }, /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      style: [styles.card, { backgroundColor: t["--surface-default"] }],
+      onPress: (e) => e.stopPropagation(),
+      accessibilityViewIsModal: true
+    },
+    /* @__PURE__ */ React.createElement(View, { style: styles.header }, /* @__PURE__ */ React.createElement(Pressable, { onPress: () => shiftMonth(-1), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "M\xEAs anterior", style: styles.navBtn }, /* @__PURE__ */ React.createElement(ChevronLeft, { size: 22, color: t["--text-primary"] })), /* @__PURE__ */ React.createElement(Text, { variant: "label" }, MONTHS[viewMonth], " ", viewYear), /* @__PURE__ */ React.createElement(Pressable, { onPress: () => shiftMonth(1), hitSlop: 8, accessibilityRole: "button", accessibilityLabel: "Pr\xF3ximo m\xEAs", style: styles.navBtn }, /* @__PURE__ */ React.createElement(ChevronRight, { size: 22, color: t["--text-primary"] }))),
+    /* @__PURE__ */ React.createElement(View, { style: styles.week }, WEEKDAYS.map((w, i) => /* @__PURE__ */ React.createElement(View, { key: i, style: styles.cell }, /* @__PURE__ */ React.createElement(Text, { variant: "caption", color: "muted" }, w)))),
+    /* @__PURE__ */ React.createElement(View, { style: styles.grid }, cells.map((d, i) => {
+      if (!d) return /* @__PURE__ */ React.createElement(View, { key: i, style: styles.cell });
+      const selected = value ? sameDay(d, value) : false;
+      const off = isDisabled(d);
+      return /* @__PURE__ */ React.createElement(
+        Pressable,
+        {
+          key: i,
+          onPress: () => pick(d),
+          disabled: off,
+          accessibilityRole: "button",
+          accessibilityLabel: formatLong(d),
+          accessibilityState: { selected, disabled: off },
+          style: [
+            styles.cell,
+            styles.day,
+            selected ? { backgroundColor: t["--brand-primary"] } : null
+          ]
+        },
+        /* @__PURE__ */ React.createElement(
+          Text,
+          {
+            variant: "body-sm",
+            style: {
+              color: selected ? t["--brand-on-primary"] : off ? t["--text-placeholder"] : t["--text-primary"]
+            }
+          },
+          d.getDate()
+        )
+      );
+    })),
+    value && /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        onPress: () => {
+          onChange(null);
+          setOpen(false);
+        },
+        accessibilityRole: "button",
+        accessibilityLabel: "Limpar data",
+        style: styles.clear
+      },
+      /* @__PURE__ */ React.createElement(Text, { variant: "body-sm", color: "muted" }, "Limpar")
+    )
+  ))));
+}
+const styles = StyleSheet.create({
+  field: {
+    height: 48,
+    borderRadius: 12,
+    borderWidth: 1,
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    alignItems: "center"
+  },
+  backdrop: {
+    flex: 1,
+    backgroundColor: "rgba(0,0,0,0.4)",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 24
+  },
+  card: { width: "100%", maxWidth: 360, borderRadius: 16, padding: 16, gap: 8 },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 4
+  },
+  navBtn: { width: 44, height: 44, alignItems: "center", justifyContent: "center" },
+  week: { flexDirection: "row" },
+  grid: { flexDirection: "row", flexWrap: "wrap" },
+  cell: { width: `${100 / 7}%`, aspectRatio: 1, alignItems: "center", justifyContent: "center" },
+  day: { borderRadius: 999 },
+  clear: { paddingVertical: 10, alignItems: "center", marginTop: 4 }
+});
+export {
+  DatePicker
+};

package/dist/targets/native/components/divider.d.ts

@@ -0,0 +1,9 @@
+import * as react from 'react';
+
+type Props = {
+    vertical?: boolean;
+    spacing?: number;
+};
+declare function Divider({ vertical, spacing }: Props): react.JSX.Element;
+
+export { Divider };

package/dist/targets/native/components/divider.js

@@ -0,0 +1,36 @@
+import "../../../chunk-ORMEWXMH.js";
+import { StyleSheet, View } from "react-native";
+import { useTheme } from "./theme.js";
+function Divider({ vertical, spacing }) {
+  const t = useTheme();
+  const hairline = StyleSheet.hairlineWidth;
+  if (vertical) {
+    return /* @__PURE__ */ React.createElement(
+      View,
+      {
+        accessibilityRole: "none",
+        style: {
+          alignSelf: "stretch",
+          width: hairline,
+          backgroundColor: t["--border-default"],
+          marginHorizontal: spacing != null ? spacing : 0
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      accessibilityRole: "none",
+      style: {
+        alignSelf: "stretch",
+        height: hairline,
+        backgroundColor: t["--border-default"],
+        marginVertical: spacing != null ? spacing : 0
+      }
+    }
+  );
+}
+export {
+  Divider
+};

package/dist/targets/native/components/empty-state.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+
+type Props = {
+    title: string;
+    description?: string;
+    cta?: {
+        label: string;
+        onPress: () => void;
+    };
+};
+declare function EmptyState({ title, description, cta }: Props): react.JSX.Element;
+
+export { EmptyState };

package/dist/targets/native/components/empty-state.js

@@ -0,0 +1,10 @@
+import "../../../chunk-ORMEWXMH.js";
+import { View } from "react-native";
+import { Button } from "./button.js";
+import { Text } from "./text.js";
+function EmptyState({ title, description, cta }) {
+  return /* @__PURE__ */ React.createElement(View, { style: { flex: 1, alignItems: "center", justifyContent: "center", gap: 12, paddingHorizontal: 32 } }, /* @__PURE__ */ React.createElement(Text, { variant: "title", style: { textAlign: "center" } }, title), description ? /* @__PURE__ */ React.createElement(Text, { variant: "body-sm", color: "muted", style: { textAlign: "center" } }, description) : null, cta ? /* @__PURE__ */ React.createElement(Button, { label: cta.label, onPress: cta.onPress, fullWidth: true }) : null);
+}
+export {
+  EmptyState
+};

package/dist/targets/native/components/fab.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type FABProps = {
+    /** Glifo lucide-react-native. Default: Plus. */
+    icon?: ReactNode;
+    onPress: () => void;
+    /** Obrigatório para screen readers (o FAB é só ícone no modo padrão). */
+    accessibilityLabel: string;
+    /** Mostra um label ao lado do ícone (pill estendida). */
+    extended?: boolean;
+    label?: string;
+    disabled?: boolean;
+};
+declare function FAB({ icon, onPress, accessibilityLabel, extended, label, disabled, }: FABProps): react.JSX.Element;
+type FABContextValue = {
+    config: FABProps | null;
+    setFAB: (config: FABProps | null) => void;
+};
+declare function FABProvider({ children }: {
+    children: ReactNode;
+}): react.JSX.Element;
+declare function useFAB(): FABContextValue;
+
+export { FAB, type FABProps, FABProvider, useFAB };

package/dist/targets/native/components/fab.js

@@ -0,0 +1,112 @@
+import {
+  __spreadValues
+} from "../../../chunk-ORMEWXMH.js";
+import { Plus } from "lucide-react-native";
+import {
+  cloneElement,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useState
+} from "react";
+import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useTheme } from "./theme.js";
+function tintIcon(icon, color, size) {
+  var _a, _b;
+  if (!isValidElement(icon)) return icon != null ? icon : null;
+  const el = icon;
+  return cloneElement(el, { color: (_a = el.props.color) != null ? _a : color, size: (_b = el.props.size) != null ? _b : size });
+}
+function FAB({
+  icon,
+  onPress,
+  accessibilityLabel,
+  extended = false,
+  label,
+  disabled = false
+}) {
+  const t = useTheme();
+  const insets = useSafeAreaInsets();
+  const fg = t["--brand-on-primary"];
+  const glyph = tintIcon(icon != null ? icon : /* @__PURE__ */ React.createElement(Plus, null), fg, 24);
+  return /* @__PURE__ */ React.createElement(
+    View,
+    {
+      pointerEvents: "box-none",
+      style: [
+        styles.anchor,
+        { right: 16, bottom: (insets.bottom > 0 ? insets.bottom : 16) + 16 }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(
+      Pressable,
+      {
+        accessibilityRole: "button",
+        accessibilityLabel,
+        accessibilityState: { disabled },
+        disabled,
+        hitSlop: 8,
+        onPress,
+        style: ({ pressed }) => [
+          styles.base,
+          extended ? styles.extended : styles.circle,
+          {
+            backgroundColor: t["--brand-primary"],
+            opacity: disabled ? 0.5 : pressed ? 0.85 : 1
+          }
+        ]
+      },
+      glyph,
+      extended && label ? /* @__PURE__ */ React.createElement(Text, { style: [styles.label, { color: fg }], numberOfLines: 1 }, label) : null
+    )
+  );
+}
+const FABContext = createContext({
+  config: null,
+  setFAB: () => {
+  }
+});
+function FABProvider({ children }) {
+  const [config, setConfig] = useState(null);
+  const setFAB = useCallback((next) => setConfig(next), []);
+  return /* @__PURE__ */ React.createElement(FABContext.Provider, { value: { config, setFAB } }, children, config ? /* @__PURE__ */ React.createElement(FAB, __spreadValues({}, config)) : null);
+}
+function useFAB() {
+  return useContext(FABContext);
+}
+const SHADOW = Platform.OS === "android" ? { elevation: 6 } : {
+  shadowColor: "#000000",
+  shadowOpacity: 0.25,
+  shadowRadius: 8,
+  shadowOffset: { width: 0, height: 4 }
+};
+const styles = StyleSheet.create({
+  anchor: {
+    position: "absolute",
+    alignItems: "flex-end"
+  },
+  base: __spreadValues({
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 8
+  }, SHADOW),
+  circle: {
+    width: 56,
+    height: 56,
+    borderRadius: 28
+  },
+  extended: {
+    height: 56,
+    borderRadius: 28,
+    paddingHorizontal: 20
+  },
+  label: { fontSize: 16, fontWeight: "600" }
+});
+export {
+  FAB,
+  FABProvider,
+  useFAB
+};

package/dist/targets/native/components/filter-chip.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+
+type FilterChipProps = {
+    label: string;
+    active: boolean;
+    onPress: () => void;
+    disabled?: boolean;
+};
+declare function FilterChip({ label, active, onPress, disabled }: FilterChipProps): react.JSX.Element;
+type FilterChipItem<T extends string> = {
+    label: string;
+    value: T;
+};
+type FilterChipGroupProps<T extends string> = {
+    items: FilterChipItem<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    disabled?: boolean;
+};
+declare function FilterChipGroup<T extends string>({ items, value, onChange, disabled, }: FilterChipGroupProps<T>): react.JSX.Element;
+
+export { FilterChip, FilterChipGroup };

package/dist/targets/native/components/filter-chip.js

@@ -0,0 +1,70 @@
+import "../../../chunk-ORMEWXMH.js";
+import { Pressable, StyleSheet, View } from "react-native";
+import { Text } from "./text.js";
+import { useTheme } from "./theme.js";
+function FilterChip({ label, active, onPress, disabled = false }) {
+  const t = useTheme();
+  const bg = active ? t["--brand-primary"] : t["--surface-default"];
+  const fg = active ? t["--brand-on-primary"] : t["--text-primary"];
+  const border = active ? t["--brand-primary"] : t["--border-default"];
+  return /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress: disabled ? void 0 : onPress,
+      disabled,
+      hitSlop: 8,
+      accessibilityRole: "button",
+      accessibilityLabel: label,
+      accessibilityState: { selected: active, disabled: !!disabled },
+      style: ({ pressed }) => [
+        styles.chip,
+        {
+          backgroundColor: bg,
+          borderColor: border,
+          opacity: disabled ? 0.5 : pressed ? 0.85 : 1
+        }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(Text, { variant: "caption", style: [styles.label, { color: fg }] }, label)
+  );
+}
+function FilterChipGroup({
+  items,
+  value,
+  onChange,
+  disabled = false
+}) {
+  return /* @__PURE__ */ React.createElement(View, { style: styles.group }, items.map((item) => /* @__PURE__ */ React.createElement(
+    FilterChip,
+    {
+      key: item.value,
+      label: item.label,
+      active: item.value === value,
+      onPress: () => onChange(item.value),
+      disabled
+    }
+  )));
+}
+const styles = StyleSheet.create({
+  chip: {
+    minHeight: 32,
+    paddingHorizontal: 12,
+    borderRadius: 999,
+    borderWidth: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "flex-start"
+  },
+  label: {
+    fontWeight: "500"
+  },
+  group: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 8
+  }
+});
+export {
+  FilterChip,
+  FilterChipGroup
+};