@btndprojects/loam-ui-native 0.0.0-stage → 0.1.1

package/dist/chunk-RIBDXGUG.js

@@ -0,0 +1,108 @@
+import * as React from 'react';
+import { Animated, Easing, AccessibilityInfo, View } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsx } from 'react/jsx-runtime';
+
+// src/skeleton/skeleton.tsx
+var CIRCLE_DEFAULT = 40;
+var TEXT_HEIGHT = 14;
+var RECT_HEIGHT = 120;
+function Skeleton({
+  variant = "text",
+  width,
+  height,
+  radius,
+  style,
+  accessibilityLabel = "Loading",
+  testID
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet, { variant });
+  let resolvedWidth;
+  let resolvedHeight;
+  if (variant === "circle") {
+    const size = width ?? height ?? CIRCLE_DEFAULT;
+    resolvedWidth = size;
+    resolvedHeight = size;
+  } else {
+    resolvedWidth = width ?? "100%";
+    resolvedHeight = height ?? (variant === "text" ? TEXT_HEIGHT : RECT_HEIGHT);
+  }
+  const opacity = React.useRef(new Animated.Value(1)).current;
+  React.useEffect(() => {
+    let cancelled = false;
+    let loop;
+    const bezier = Easing.bezier(...theme.easing.base);
+    AccessibilityInfo.isReduceMotionEnabled().then((reduced) => {
+      if (cancelled || reduced) return;
+      loop = Animated.loop(
+        Animated.sequence([
+          Animated.timing(opacity, {
+            toValue: 0.5,
+            duration: theme.duration.slow,
+            easing: bezier,
+            useNativeDriver: true
+          }),
+          Animated.timing(opacity, {
+            toValue: 1,
+            duration: theme.duration.slow,
+            easing: bezier,
+            useNativeDriver: true
+          })
+        ])
+      );
+      loop.start();
+    });
+    return () => {
+      cancelled = true;
+      loop?.stop();
+    };
+  }, [opacity, theme.duration.slow, theme.easing.base]);
+  return /* @__PURE__ */ jsx(
+    Animated.View,
+    {
+      accessibilityRole: "image",
+      accessibilityLabel,
+      accessibilityState: { busy: true },
+      testID,
+      style: [
+        styles.base,
+        { width: resolvedWidth, height: resolvedHeight, opacity },
+        radius ? { borderRadius: theme.radius[radius] } : null,
+        style
+      ]
+    }
+  );
+}
+function SkeletonText({
+  lines = 3,
+  lastLineWidth = "60%",
+  lineHeight = TEXT_HEIGHT,
+  style,
+  testID
+}) {
+  const theme = useLoamTheme();
+  return /* @__PURE__ */ jsx(View, { style: [{ gap: theme.space.s2 }, style], testID, children: Array.from({ length: Math.max(0, lines) }).map((_, i) => /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      variant: "text",
+      height: lineHeight,
+      style: i === lines - 1 ? { width: lastLineWidth } : void 0
+    },
+    i
+  )) });
+}
+var sheet = createStyleSheet((theme) => ({
+  base: {
+    backgroundColor: theme.color.surface2,
+    variants: {
+      variant: {
+        text: { borderRadius: theme.radius.sm },
+        circle: { borderRadius: theme.radius.full },
+        rect: { borderRadius: theme.radius.lg }
+      }
+    }
+  }
+}));
+
+export { Skeleton, SkeletonText };

package/dist/chunk-RJQOOHT2.js

@@ -0,0 +1,214 @@
+import { Dialog, DialogTitle, DialogFooter } from './chunk-OPXFZ4Y5.js';
+import { Button } from './chunk-3ARE4TES.js';
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { Animated, Easing, Text, Pressable, View } from 'react-native';
+import { createStyleSheet, useLoamTheme, useStyles } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function AnnouncementBar({
+  tone = "info",
+  children,
+  icon,
+  actionLabel,
+  onAction,
+  onDismiss,
+  dismissLabel = "Dismiss",
+  wrap = false,
+  motion = "full"
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet, { tone });
+  const slide = React.useRef(new Animated.Value(0)).current;
+  const animate = motion === "full" && !theme.reduceMotion;
+  React.useEffect(() => {
+    Animated.timing(slide, {
+      toValue: 1,
+      duration: animate ? theme.motion.enter.duration : 0,
+      easing: Easing.bezier(...theme.motion.enter.easing),
+      useNativeDriver: true
+    }).start();
+  }, [slide, animate, theme.motion.enter]);
+  const ink = tone === "info" ? theme.color.infoOnSoft : tone === "warn" ? theme.color.warnOnSoft : tone === "danger" ? theme.color.dangerOnSoft : tone === "good" ? theme.color.goodOnSoft : theme.color.accentOnSoft;
+  const defaultIcon = tone === "warn" ? "alert-triangle" : tone === "danger" ? "alert-circle" : tone === "good" ? "check-circle" : tone === "accent" ? "star" : "info";
+  return /* @__PURE__ */ jsxs(
+    Animated.View,
+    {
+      accessibilityRole: tone === "warn" || tone === "danger" ? "alert" : "text",
+      accessibilityLiveRegion: "polite",
+      style: [
+        styles.bar,
+        {
+          transform: [
+            { translateY: slide.interpolate({ inputRange: [0, 1], outputRange: [-theme.space[40], 0] }) }
+          ]
+        }
+      ],
+      children: [
+        /* @__PURE__ */ jsx(Icon, { name: icon ?? defaultIcon, size: theme.icon.sm, color: ink }),
+        /* @__PURE__ */ jsx(Text, { numberOfLines: wrap ? 2 : 1, style: [styles.text, { color: ink }], children }),
+        actionLabel && onAction ? /* @__PURE__ */ jsxs(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: actionLabel,
+            onPress: onAction,
+            hitSlop: theme.space[10],
+            style: styles.action,
+            children: [
+              /* @__PURE__ */ jsx(Text, { style: [styles.actionLabel, { color: ink }], children: actionLabel }),
+              /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: theme.icon.xs, color: ink })
+            ]
+          }
+        ) : null,
+        onDismiss ? /* @__PURE__ */ jsx(
+          Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: dismissLabel,
+            onPress: onDismiss,
+            hitSlop: theme.space[10],
+            style: styles.iconButton,
+            children: /* @__PURE__ */ jsx(Icon, { name: "x", size: theme.icon.xs, color: ink })
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function AnnouncementHighlights({
+  items
+}) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(sheet, { tone: "info" });
+  if (!items.length) return null;
+  return /* @__PURE__ */ jsx(View, { style: styles.highlights, children: items.map((h) => /* @__PURE__ */ jsxs(View, { style: styles.highlightRow, children: [
+    /* @__PURE__ */ jsx(Icon, { name: "check", size: theme.icon.xs, color: theme.color.good }),
+    /* @__PURE__ */ jsx(Text, { style: styles.highlightText, children: h })
+  ] }, h)) });
+}
+function AnnouncementModal({
+  open,
+  onOpenChange,
+  kicker,
+  title,
+  body,
+  media,
+  highlights,
+  primaryLabel = "See what changed",
+  onPrimary,
+  secondaryLabel = "Later",
+  onSecondary,
+  motion = "full"
+}) {
+  const { styles } = useStyles(sheet, { tone: "info" });
+  return /* @__PURE__ */ jsxs(Dialog, { open, onClose: () => onOpenChange(false), accessibilityLabel: title, motion, children: [
+    /* @__PURE__ */ jsxs(View, { style: styles.modalBody, children: [
+      kicker ? /* @__PURE__ */ jsx(Text, { style: styles.kicker, children: kicker }) : null,
+      /* @__PURE__ */ jsx(DialogTitle, { children: title }),
+      media,
+      body ? /* @__PURE__ */ jsx(Text, { style: styles.modalText, children: body }) : null,
+      highlights ? /* @__PURE__ */ jsx(AnnouncementHighlights, { items: highlights }) : null
+    ] }),
+    /* @__PURE__ */ jsxs(DialogFooter, { children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "lg",
+          variant: "outline",
+          onPress: () => {
+            onSecondary?.();
+            onOpenChange(false);
+          },
+          children: secondaryLabel
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "lg",
+          variant: "primary",
+          onPress: () => {
+            onPrimary?.();
+            onOpenChange(false);
+          },
+          children: primaryLabel
+        }
+      )
+    ] })
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  bar: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space[11],
+    paddingHorizontal: theme.space[12],
+    paddingVertical: theme.space[9],
+    borderBottomWidth: theme.borderWidth.thin,
+    borderBottomColor: theme.color.border,
+    variants: {
+      // Each tint pairs with its own on-soft ink and a tone edge, so the strip
+      // survives high contrast, where the tint collapses to the plain surface.
+      tone: {
+        info: { backgroundColor: theme.color.infoSoft, borderBottomColor: theme.edge.info },
+        warn: { backgroundColor: theme.color.warnSoft, borderBottomColor: theme.edge.warn },
+        danger: { backgroundColor: theme.color.dangerSoft, borderBottomColor: theme.edge.danger },
+        good: { backgroundColor: theme.color.goodSoft, borderBottomColor: theme.edge.good },
+        accent: { backgroundColor: theme.color.accentSoft, borderBottomColor: theme.edge.accent }
+      }
+    }
+  },
+  text: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.footnote.fontSize,
+    lineHeight: theme.type.footnote.lineHeight
+  },
+  action: { flexDirection: "row", alignItems: "center", gap: theme.space[2] },
+  actionLabel: {
+    fontFamily: theme.font.sans,
+    fontWeight: theme.fontWeight.extrabold,
+    fontSize: theme.type.footnote.fontSize,
+    textDecorationLine: "underline"
+  },
+  iconButton: {
+    width: theme.ctl.xs,
+    height: theme.ctl.xs,
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: theme.radius.full
+  },
+  highlights: {
+    gap: theme.space[8],
+    padding: theme.space[12],
+    borderRadius: theme.radius.md,
+    borderWidth: theme.borderWidth.thin,
+    borderColor: theme.color.border,
+    backgroundColor: theme.color.surface2
+  },
+  highlightRow: { flexDirection: "row", alignItems: "flex-start", gap: theme.space[9] },
+  highlightText: {
+    flex: 1,
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.subheadline.fontSize,
+    lineHeight: theme.type.subheadline.lineHeight,
+    color: theme.color.text2
+  },
+  modalBody: { gap: theme.space[12] },
+  modalText: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.type.body.fontSize,
+    lineHeight: theme.type.body.lineHeight,
+    color: theme.color.text2
+  },
+  kicker: {
+    fontFamily: theme.font.mono,
+    fontSize: theme.type.caption2.fontSize,
+    letterSpacing: theme.tracking.caps,
+    textTransform: "uppercase",
+    color: theme.color.accentStrong
+  }
+}));
+
+export { AnnouncementBar, AnnouncementHighlights, AnnouncementModal };

package/dist/chunk-RNGLIHFA.js

@@ -0,0 +1,191 @@
+import * as React from 'react';
+import { View, Text } from 'react-native';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/kbd/kbd.tsx
+var COMMON_GLYPHS = {
+  enter: "\u21B5",
+  return: "\u21B5",
+  esc: "Esc",
+  escape: "Esc",
+  tab: "\u21E5",
+  backspace: "\u232B",
+  delete: "\u2326",
+  del: "\u2326",
+  space: "\u2423",
+  up: "\u2191",
+  down: "\u2193",
+  left: "\u2190",
+  right: "\u2192",
+  arrowup: "\u2191",
+  arrowdown: "\u2193",
+  arrowleft: "\u2190",
+  arrowright: "\u2192",
+  pageup: "\u21DE",
+  pagedown: "\u21DF",
+  home: "\u2196",
+  end: "\u2198",
+  capslock: "\u21EA",
+  win: "\u229E"
+};
+var APPLE_MODIFIERS = {
+  cmd: "\u2318",
+  command: "\u2318",
+  meta: "\u2318",
+  super: "\u2318",
+  shift: "\u21E7",
+  ctrl: "\u2303",
+  control: "\u2303",
+  alt: "\u2325",
+  opt: "\u2325",
+  option: "\u2325"
+};
+var TEXT_MODIFIERS = {
+  cmd: "Cmd",
+  command: "Cmd",
+  meta: "Meta",
+  super: "Super",
+  shift: "Shift",
+  ctrl: "Ctrl",
+  control: "Ctrl",
+  alt: "Alt",
+  opt: "Alt",
+  option: "Alt"
+};
+var SPOKEN = {
+  cmd: "Command",
+  command: "Command",
+  meta: "Command",
+  super: "Command",
+  shift: "Shift",
+  ctrl: "Control",
+  control: "Control",
+  alt: "Option",
+  opt: "Option",
+  option: "Option",
+  enter: "Enter",
+  return: "Return",
+  esc: "Escape",
+  escape: "Escape",
+  tab: "Tab",
+  backspace: "Backspace",
+  delete: "Delete",
+  del: "Delete",
+  space: "Space",
+  up: "Up",
+  down: "Down",
+  left: "Left",
+  right: "Right",
+  arrowup: "Up",
+  arrowdown: "Down",
+  arrowleft: "Left",
+  arrowright: "Right",
+  pageup: "Page Up",
+  pagedown: "Page Down",
+  home: "Home",
+  end: "End",
+  capslock: "Caps Lock",
+  win: "Windows"
+};
+function resolveKey(key, symbols, apple) {
+  if (!symbols) return key;
+  const k = key.trim().toLowerCase();
+  const modifiers = apple ? APPLE_MODIFIERS : TEXT_MODIFIERS;
+  return modifiers[k] ?? COMMON_GLYPHS[k] ?? key;
+}
+function spokenKey(key, apple) {
+  const k = key.trim().toLowerCase();
+  const word = SPOKEN[k];
+  if (word) {
+    if (!apple && (k === "alt" || k === "opt" || k === "option")) return "Alt";
+    return word;
+  }
+  return key.length === 1 ? key.toUpperCase() : key;
+}
+function spokenLabel(parts, apple) {
+  return parts.map((k) => spokenKey(k, apple)).join(" ");
+}
+function Kbd({
+  keys,
+  symbols = true,
+  size = "md",
+  // `motion` is accepted for API parity but intentionally unused — Kbd has no
+  // animation. Destructured so it never lands on the underlying View.
+  motion: _motion = "full",
+  children,
+  accessibilityLabel
+}) {
+  const { styles } = useStyles(sheet, { size });
+  const theme = useLoamTheme();
+  const apple = theme.platform === "iOS";
+  if (keys === void 0) {
+    const label2 = accessibilityLabel ?? (typeof children === "string" ? spokenLabel([children], apple) : void 0);
+    return /* @__PURE__ */ jsx(View, { accessible: true, accessibilityRole: "text", accessibilityLabel: label2, style: styles.cap, children: typeof children === "string" ? /* @__PURE__ */ jsx(Text, { style: styles.label, children }) : children });
+  }
+  const list = Array.isArray(keys) ? keys : String(keys).split("+");
+  const parts = list.map((k) => k.trim()).filter((k) => k.length > 0);
+  const label = accessibilityLabel ?? spokenLabel(parts, apple);
+  return /* @__PURE__ */ jsx(View, { accessible: true, accessibilityRole: "text", accessibilityLabel: label, style: styles.group, children: parts.map((key, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    i > 0 ? /* @__PURE__ */ jsx(Text, { style: styles.plus, children: "+" }) : null,
+    /* @__PURE__ */ jsx(View, { style: styles.cap, children: /* @__PURE__ */ jsx(Text, { style: styles.label, children: resolveKey(key, symbols, apple) }) })
+  ] }, `${key}-${i}`)) });
+}
+var sheet = createStyleSheet((theme) => ({
+  // The row of keycaps. `space.s1` gap matches the web `gap-1` between caps.
+  group: { flexDirection: "row", alignItems: "center", gap: theme.space.s1 },
+  // A single keycap. No native `--kbd-bg` token exists, so — as the native
+  // contract prescribes — the subtle surface falls back to `surface2` + a
+  // hairline border. The tiny `minWidth`/`minHeight` (20 / 24) mirror the web
+  // `kbd`'s raw-px `h-[20px]`/`min-w-[20px]` keycap box one-to-one.
+  cap: {
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: theme.color.surface2,
+    borderWidth: theme.borderWidth.base,
+    borderColor: theme.color.border,
+    borderRadius: theme.radius.sm,
+    variants: {
+      size: {
+        sm: {
+          minWidth: theme.space[20],
+          minHeight: theme.space[20],
+          paddingHorizontal: theme.space.s1
+        },
+        md: {
+          minWidth: theme.space[24],
+          minHeight: theme.space[24],
+          paddingHorizontal: theme.space.s2
+        }
+      }
+    }
+  },
+  // Monospace, tabular figures so combos line up. `text2` matches web `text-ink-2`.
+  label: {
+    fontFamily: theme.font.mono,
+    color: theme.color.text2,
+    textAlign: "center",
+    fontVariant: ["tabular-nums"],
+    variants: {
+      size: {
+        sm: {
+          fontSize: theme.type.caption2.fontSize,
+          lineHeight: theme.type.caption2.lineHeight
+        },
+        md: {
+          fontSize: theme.type.caption1.fontSize,
+          lineHeight: theme.type.caption1.lineHeight
+        }
+      }
+    }
+  },
+  // The `+` between keys — muted (`text3`, web `text-ink-3`), decorative only.
+  plus: {
+    fontFamily: theme.font.mono,
+    color: theme.color.text3,
+    fontSize: theme.type.caption1.fontSize,
+    lineHeight: theme.type.caption1.lineHeight
+  }
+}));
+
+export { Kbd };

package/dist/chunk-RQ3HASCC.js

@@ -0,0 +1,6 @@
+// src/lib/a11y.ts
+function expandedProps(expanded) {
+  return { "aria-expanded": expanded };
+}
+
+export { expandedProps };

package/dist/chunk-RSOJT5YW.js

@@ -0,0 +1,124 @@
+import { Icon } from './chunk-TKVFVF5D.js';
+import * as React from 'react';
+import { View, Pressable, Text } from 'react-native';
+import { Svg, Path } from 'react-native-svg';
+import { icons, ICON_VIEWBOX } from '@btndprojects/loam-icons';
+import { createStyleSheet, useStyles, useLoamTheme } from '@btndprojects/loam-theme-native';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ICON_SIZE = { sm: 20, md: 26, lg: 34 };
+var STAR_PATH = icons.star.flatMap((part) => part.t === "path" ? [part.d] : []).join(" ");
+function toHalfStep(value) {
+  return Math.round(value * 2) / 2;
+}
+function Star({ fraction, size }) {
+  const theme = useLoamTheme();
+  const { styles } = useStyles(starSheet);
+  const filled = Math.max(0, Math.min(1, fraction));
+  return /* @__PURE__ */ jsxs(View, { style: { width: size, height: size }, children: [
+    /* @__PURE__ */ jsx(Icon, { name: "star", size, color: theme.color.text3 }),
+    filled > 0 ? /* @__PURE__ */ jsx(View, { testID: "rating-star-fill", style: [styles.clip, { width: size * filled }], children: /* @__PURE__ */ jsx(View, { style: styles.paint, children: /* @__PURE__ */ jsx(Svg, { width: size, height: size, viewBox: ICON_VIEWBOX, children: /* @__PURE__ */ jsx(
+      Path,
+      {
+        d: STAR_PATH,
+        fill: theme.color.warn,
+        stroke: theme.color.warn,
+        strokeWidth: theme.borderWidth.thick,
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    ) }) }) }) : null
+  ] });
+}
+function Rating({
+  value,
+  defaultValue = 0,
+  onValueChange,
+  max = 5,
+  size = "md",
+  readOnly = false,
+  accessibilityLabel = "Rating",
+  showValue = false,
+  count
+}) {
+  const { styles } = useStyles(sheet, { size });
+  const theme = useLoamTheme();
+  const iconSize = ICON_SIZE[size];
+  const starSlopY = Math.max(0, (theme.tapMin - (iconSize + theme.space.s1 * 2)) / 2);
+  const isControlled = value !== void 0;
+  const [internal, setInternal] = React.useState(defaultValue);
+  const current = isControlled ? value : internal;
+  const setValue = (next) => {
+    if (!isControlled) setInternal(next);
+    onValueChange?.(next);
+  };
+  const snapped = toHalfStep(Math.max(0, Math.min(max, current)));
+  const shown = Number.isInteger(snapped) ? String(snapped) : snapped.toFixed(1);
+  const label = readOnly ? `${accessibilityLabel}: ${shown} out of ${max} stars` : accessibilityLabel;
+  const readoutLabel = count !== void 0 ? `${shown} of ${max} \xB7 ${count} reviews` : `${shown} of ${max}`;
+  return /* @__PURE__ */ jsxs(View, { style: styles.wrapper, children: [
+    /* @__PURE__ */ jsx(View, { style: styles.row, role: "group", accessibilityLabel: label, children: Array.from({ length: max }, (_, i) => {
+      const starValue = i + 1;
+      const fraction = Math.max(0, Math.min(1, snapped - i));
+      return /* @__PURE__ */ jsx(
+        Pressable,
+        {
+          style: styles.star,
+          accessibilityRole: "button",
+          accessibilityLabel: `Rate ${starValue} of ${max}`,
+          accessibilityState: { disabled: readOnly, selected: fraction >= 0.5 },
+          disabled: readOnly,
+          hitSlop: { top: starSlopY, bottom: starSlopY },
+          onPress: readOnly ? void 0 : () => setValue(starValue),
+          children: /* @__PURE__ */ jsx(Star, { fraction, size: iconSize })
+        },
+        i
+      );
+    }) }),
+    showValue ? /* @__PURE__ */ jsx(Text, { testID: "rating-readout", style: styles.readout, children: readoutLabel }) : null
+  ] });
+}
+var sheet = createStyleSheet((theme) => ({
+  // Outer wrapper groups the star row with the optional readout.
+  wrapper: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: theme.space.s2
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    variants: {
+      size: {
+        sm: { gap: theme.space.s1 },
+        md: { gap: theme.space.s1 },
+        lg: { gap: theme.space.s2 }
+      }
+    }
+  },
+  star: {
+    padding: theme.space.s1
+  },
+  // Companion readout — uses body/sm weight and text2 tone so it reads as
+  // secondary information alongside the star icons.
+  readout: {
+    fontFamily: theme.font.sans,
+    fontSize: theme.fontSize[14],
+    color: theme.color.text2
+  }
+}));
+var starSheet = createStyleSheet(() => ({
+  // `start` + `overflow: 'hidden'` is the clip: the painted star inside keeps its
+  // full width and is cropped to the fraction, from the leading edge either way
+  // round, so RTL needs no sign flip.
+  clip: {
+    position: "absolute",
+    top: 0,
+    bottom: 0,
+    start: 0,
+    overflow: "hidden"
+  },
+  paint: { position: "absolute", top: 0, start: 0 }
+}));
+
+export { Rating };

package/dist/chunk-RTIKSY6A.js

@@ -0,0 +1 @@
+