panelui-native 0.1.0 → 0.4.0

package/lib/module/components/typography/index.js

@@ -0,0 +1,126 @@
+"use strict";
+
+/**
+ * Typography — semantic text presets.
+ *
+ * Adapted from: heroui-inc/heroui-native (Typography `type` scale and the
+ * Heading / Paragraph / Code compound parts), built on PanelUI's Text
+ * primitive so every preset keeps `className` passthrough and theme colours.
+ */
+import { forwardRef } from 'react';
+import { View } from 'react-native';
+import { tv } from 'tailwind-variants';
+import { Text } from "../../primitives/text.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const typographyVariants = tv({
+  base: 'text-foreground',
+  variants: {
+    type: {
+      h1: 'text-4xl font-bold tracking-tight',
+      h2: 'text-3xl font-semibold tracking-tight',
+      h3: 'text-2xl font-semibold tracking-tight',
+      h4: 'text-xl font-semibold',
+      h5: 'text-lg font-semibold',
+      h6: 'text-base font-semibold',
+      body: 'text-base font-normal',
+      'body-sm': 'text-sm font-normal',
+      'body-xs': 'text-xs font-normal',
+      code: 'font-mono text-sm text-foreground'
+    },
+    muted: {
+      true: 'text-muted-foreground'
+    }
+  },
+  defaultVariants: {
+    type: 'body'
+  }
+});
+
+/** Heading levels, for `Typography.Heading`. */
+
+/** Body sizes, for `Typography.Paragraph`. */
+
+/** Maps a heading preset to its accessibility heading level. */
+const HEADING_LEVEL = {
+  h1: 1,
+  h2: 2,
+  h3: 3,
+  h4: 4,
+  h5: 5,
+  h6: 6
+};
+const TypographyRoot = /*#__PURE__*/forwardRef(({
+  className,
+  type,
+  muted,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(Text, {
+  ref: ref,
+  className: typographyVariants({
+    type,
+    muted,
+    className
+  }),
+  ...props
+}));
+TypographyRoot.displayName = 'Typography';
+/** Heading text, wired up with the matching accessibility heading level. */
+const TypographyHeading = /*#__PURE__*/forwardRef(({
+  className,
+  type = 'h2',
+  muted,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(Text, {
+  ref: ref,
+  accessibilityRole: "header",
+  "aria-level": HEADING_LEVEL[type],
+  className: typographyVariants({
+    type,
+    muted,
+    className
+  }),
+  ...props
+}));
+TypographyHeading.displayName = 'Typography.Heading';
+const TypographyParagraph = /*#__PURE__*/forwardRef(({
+  className,
+  type = 'body',
+  muted,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(Text, {
+  ref: ref,
+  className: typographyVariants({
+    type,
+    muted,
+    className
+  }),
+  ...props
+}));
+TypographyParagraph.displayName = 'Typography.Paragraph';
+/** Inline code on a muted surface. */
+const TypographyCode = /*#__PURE__*/forwardRef(({
+  className,
+  containerClassName,
+  muted,
+  testID,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(View, {
+  ref: ref,
+  testID: testID,
+  className: `self-start rounded-md bg-muted px-1.5 py-1 ${containerClassName ?? ''}`,
+  children: /*#__PURE__*/_jsx(Text, {
+    className: typographyVariants({
+      type: 'code',
+      muted,
+      className
+    }),
+    ...props
+  })
+}));
+TypographyCode.displayName = 'Typography.Code';
+export const Typography = Object.assign(TypographyRoot, {
+  Heading: TypographyHeading,
+  Paragraph: TypographyParagraph,
+  Code: TypographyCode
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/typography/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["forwardRef","View","tv","Text","jsx","_jsx","typographyVariants","base","variants","type","h1","h2","h3","h4","h5","h6","body","code","muted","true","defaultVariants","HEADING_LEVEL","TypographyRoot","className","props","ref","displayName","TypographyHeading","accessibilityRole","TypographyParagraph","TypographyCode","containerClassName","testID","children","Typography","Object","assign","Heading","Paragraph","Code"],"sourceRoot":"../../../../src","sources":["components/typography/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/icons/index.js

@@ -1,7 +1,30 @@
 "use strict";
 
-import Svg, { Path } from 'react-native-svg';
-import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Icon set.
+ *
+ * Two families live here:
+ * - Stroked 24×24 icons (Lucide geometry, as used by shadcn-ui/ui) for chrome
+ *   such as chevrons and the close button.
+ * - Filled 16×16 status icons for Alert and Toast indicators.
+ *   Adapted from: heroui-inc/heroui-native src/components/alert/{default,success,warning}-icon.tsx
+ *
+ * `color` has no default on the status icons on purpose — callers resolve it
+ * from the active theme with `useCSSVariable`, so icons follow the theme
+ * instead of a hardcoded hex.
+ */
+import Svg, { Circle, Path } from 'react-native-svg';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Props for icons that must never be announced by a screen reader. */
+const decorative = {
+  accessibilityElementsHidden: true,
+  importantForAccessibility: 'no-hide-descendants'
+};
+
+/* -------------------------------------------------------------------------- */
+/* Stroked chrome icons                                                       */
+/* -------------------------------------------------------------------------- */
+
 export function CheckIcon({
   size = 14,
   color = '#fff',
@@ -42,6 +65,46 @@ export function ChevronDownIcon({
     })
   });
 }
+export function ChevronLeftIcon({
+  size = 16,
+  color = '#737373',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Svg, {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    ...props,
+    children: /*#__PURE__*/_jsx(Path, {
+      d: "m15 18-6-6 6-6",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+}
+export function ChevronRightIcon({
+  size = 16,
+  color = '#737373',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Svg, {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    ...props,
+    children: /*#__PURE__*/_jsx(Path, {
+      d: "m9 18 6-6-6-6",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+}
 export function XIcon({
   size = 16,
   color = '#737373',
@@ -62,4 +125,162 @@ export function XIcon({
     })
   });
 }
+export function SearchIcon({
+  size = 16,
+  color = '#737373',
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs(Svg, {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    ...props,
+    children: [/*#__PURE__*/_jsx(Circle, {
+      cx: 11,
+      cy: 11,
+      r: 8,
+      stroke: color,
+      strokeWidth: 2
+    }), /*#__PURE__*/_jsx(Path, {
+      d: "m21 21-4.3-4.3",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })]
+  });
+}
+export function ArrowUpRightIcon({
+  size = 20,
+  color = '#fff',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Svg, {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    ...props,
+    children: /*#__PURE__*/_jsx(Path, {
+      d: "M7 17 17 7M8 7h9v9",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+}
+export function SunIcon({
+  size = 18,
+  color = '#f5f5f5',
+  ...props
+}) {
+  return /*#__PURE__*/_jsxs(Svg, {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    ...props,
+    children: [/*#__PURE__*/_jsx(Circle, {
+      cx: 12,
+      cy: 12,
+      r: 4,
+      stroke: color,
+      strokeWidth: 2
+    }), /*#__PURE__*/_jsx(Path, {
+      d: "M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round"
+    })]
+  });
+}
+export function MoonIcon({
+  size = 18,
+  color = '#262626',
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Svg, {
+    width: size,
+    height: size,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    ...props,
+    children: /*#__PURE__*/_jsx(Path, {
+      d: "M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79",
+      stroke: color,
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+}
+
+/* -------------------------------------------------------------------------- */
+/* Filled status icons (Alert / Toast indicators)                             */
+/* -------------------------------------------------------------------------- */
+
+/** Info circle. Used for `default`, `info` and `destructive` status. */
+export function InfoIcon({
+  size = 20,
+  color,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Svg, {
+    width: size,
+    height: size,
+    viewBox: "0 0 16 16",
+    fill: color,
+    ...decorative,
+    ...props,
+    children: /*#__PURE__*/_jsx(Path, {
+      d: "M8 13.5a5.5 5.5 0 1 0 0-11a5.5 5.5 0 0 0 0 11M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14m1-9.5a1 1 0 1 1-2 0a1 1 0 0 1 2 0m-.25 3a.75.75 0 0 0-1.5 0V11a.75.75 0 0 0 1.5 0z",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    })
+  });
+}
+
+/** Check circle. Used for `success` status. */
+export function CheckCircleIcon({
+  size = 20,
+  color,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Svg, {
+    width: size,
+    height: size,
+    viewBox: "0 0 16 16",
+    fill: color,
+    ...decorative,
+    ...props,
+    children: /*#__PURE__*/_jsx(Path, {
+      d: "M13.5 8a5.5 5.5 0 1 1-11 0a5.5 5.5 0 0 1 11 0M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0m-3.9-1.55a.75.75 0 1 0-1.2-.9L7.419 8.858L6.03 7.47a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.13-.08z",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    })
+  });
+}
+
+/** Warning triangle. Used for `warning` status. */
+export function AlertTriangleIcon({
+  size = 20,
+  color,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(Svg, {
+    width: size,
+    height: size,
+    viewBox: "0 0 16 16",
+    fill: color,
+    ...decorative,
+    ...props,
+    children: /*#__PURE__*/_jsx(Path, {
+      d: "M7.134 2.994L2.217 11.5a1 1 0 0 0 .866 1.5h9.834a1 1 0 0 0 .866-1.5L8.866 2.993a1 1 0 0 0-1.732 0m3.03-.75c-.962-1.665-3.366-1.665-4.329 0L.918 10.749c-.963 1.666.24 3.751 2.165 3.751h9.834c1.925 0 3.128-2.085 2.164-3.751zM8 5a.75.75 0 0 1 .75.75v2a.75.75 0 0 1-1.5 0v-2A.75.75 0 0 1 8 5m1 5.75a1 1 0 1 1-2 0a1 1 0 0 1 2 0",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    })
+  });
+}
 //# sourceMappingURL=index.js.map

package/lib/module/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Svg","Path","jsx","_jsx","CheckIcon","size","color","props","width","height","viewBox","fill","children","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","ChevronDownIcon","XIcon"],"sourceRoot":"../../../src","sources":["icons/index.tsx"],"mappings":";;AAAA,OAAOA,GAAG,IAAIC,IAAI,QAAuB,kBAAkB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAO5D,OAAO,SAASC,SAASA,CAAC;EAAEC,IAAI,GAAG,EAAE;EAAEC,KAAK,GAAG,MAAM;EAAE,GAAGC;AAAiB,CAAC,EAAE;EAC5E,oBACEJ,IAAA,CAACH,GAAG;IAACQ,KAAK,EAAEH,IAAK;IAACI,MAAM,EAAEJ,IAAK;IAACK,OAAO,EAAC,WAAW;IAACC,IAAI,EAAC,MAAM;IAAA,GAAKJ,KAAK;IAAAK,QAAA,eACvET,IAAA,CAACF,IAAI;MACHY,CAAC,EAAC,iBAAiB;MACnBC,MAAM,EAAER,KAAM;MACdS,WAAW,EAAE,CAAE;MACfC,aAAa,EAAC,OAAO;MACrBC,cAAc,EAAC;IAAO,CACvB;EAAC,CACC,CAAC;AAEV;AAEA,OAAO,SAASC,eAAeA,CAAC;EAAEb,IAAI,GAAG,EAAE;EAAEC,KAAK,GAAG,SAAS;EAAE,GAAGC;AAAiB,CAAC,EAAE;EACrF,oBACEJ,IAAA,CAACH,GAAG;IAACQ,KAAK,EAAEH,IAAK;IAACI,MAAM,EAAEJ,IAAK;IAACK,OAAO,EAAC,WAAW;IAACC,IAAI,EAAC,MAAM;IAAA,GAAKJ,KAAK;IAAAK,QAAA,eACvET,IAAA,CAACF,IAAI;MACHY,CAAC,EAAC,cAAc;MAChBC,MAAM,EAAER,KAAM;MACdS,WAAW,EAAE,CAAE;MACfC,aAAa,EAAC,OAAO;MACrBC,cAAc,EAAC;IAAO,CACvB;EAAC,CACC,CAAC;AAEV;AAEA,OAAO,SAASE,KAAKA,CAAC;EAAEd,IAAI,GAAG,EAAE;EAAEC,KAAK,GAAG,SAAS;EAAE,GAAGC;AAAiB,CAAC,EAAE;EAC3E,oBACEJ,IAAA,CAACH,GAAG;IAACQ,KAAK,EAAEH,IAAK;IAACI,MAAM,EAAEJ,IAAK;IAACK,OAAO,EAAC,WAAW;IAACC,IAAI,EAAC,MAAM;IAAA,GAAKJ,KAAK;IAAAK,QAAA,eACvET,IAAA,CAACF,IAAI;MACHY,CAAC,EAAC,sBAAsB;MACxBC,MAAM,EAAER,KAAM;MACdS,WAAW,EAAE,CAAE;MACfC,aAAa,EAAC,OAAO;MACrBC,cAAc,EAAC;IAAO,CACvB;EAAC,CACC,CAAC;AAEV","ignoreList":[]}
+{"version":3,"names":["Svg","Circle","Path","jsx","_jsx","jsxs","_jsxs","decorative","accessibilityElementsHidden","importantForAccessibility","CheckIcon","size","color","props","width","height","viewBox","fill","children","d","stroke","strokeWidth","strokeLinecap","strokeLinejoin","ChevronDownIcon","ChevronLeftIcon","ChevronRightIcon","XIcon","SearchIcon","cx","cy","r","ArrowUpRightIcon","SunIcon","MoonIcon","InfoIcon","fillRule","clipRule","CheckCircleIcon","AlertTriangleIcon"],"sourceRoot":"../../../src","sources":["icons/index.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/index.js

@@ -4,7 +4,7 @@
 export { PanelUIProvider } from "./providers/panel-ui-provider.js";
 
 // Theme
-export { useTheme } from "./theme/use-theme.js";
+export { useTheme, useThemeMode, PANEL_THEMES, PANEL_THEME_NAMES, PANEL_EXTRA_THEMES } from "./theme/use-theme.js";
 
 // Primitives
 export { Portal, PortalHost, PortalProvider } from "./primitives/portal.js";
@@ -18,18 +18,27 @@ export { Badge } from "./components/badge/index.js";
 export { BottomSheet } from "./components/bottom-sheet/index.js";
 export { Button } from "./components/button/index.js";
 export { Dialog } from "./components/dialog/index.js";
+export { Frame } from "./components/frame/index.js";
+export { InlineSelect } from "./components/inline-select/index.js";
 export { Select } from "./components/select/index.js";
 export { Tabs } from "./components/tabs/index.js";
 export { Card } from "./components/card/index.js";
 export { Checkbox } from "./components/checkbox/index.js";
+export { EmptyState } from "./components/empty-state/index.js";
 export { Input } from "./components/input/index.js";
+export { InputGroup } from "./components/input-group/index.js";
+export { Label } from "./components/label/index.js";
+export { Progress } from "./components/progress/index.js";
 export { RadioGroup } from "./components/radio-group/index.js";
 export { Skeleton } from "./components/skeleton/index.js";
 export { Spinner } from "./components/spinner/index.js";
+export { Steps } from "./components/steps/index.js";
 export { Switch } from "./components/switch/index.js";
+export { Toast, ToastViewport, toast, useToast } from "./components/toast/index.js";
+export { Typography } from "./components/typography/index.js";
 
 // Icons
-export { CheckIcon, ChevronDownIcon, XIcon } from "./icons/index.js";
+export { AlertTriangleIcon, ArrowUpRightIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, InfoIcon, MoonIcon, SearchIcon, SunIcon, XIcon } from "./icons/index.js";
 
 // Utils
 export { cn } from "./utils/cn.js";

package/lib/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["PanelUIProvider","useTheme","Portal","PortalHost","PortalProvider","Text","AnimatedPressable","Alert","Avatar","Badge","BottomSheet","Button","Dialog","Select","Tabs","Card","Checkbox","Input","RadioGroup","Skeleton","Spinner","Switch","CheckIcon","ChevronDownIcon","XIcon","cn"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA,SAASA,eAAe,QAAmC,kCAA+B;;AAE1F;AACA,SAASC,QAAQ,QAAwB,sBAAmB;;AAE5D;AACA,SAASC,MAAM,EAAEC,UAAU,EAAEC,cAAc,QAAQ,wBAAqB;AACxE,SAASC,IAAI,QAAwB,sBAAmB;AACxD,SACEC,iBAAiB,QAEZ,oCAAiC;;AAExC;AACA,SAASC,KAAK,QAAyB,6BAAoB;AAC3D,SAASC,MAAM,QAA0B,8BAAqB;AAC9D,SAASC,KAAK,QAAyB,6BAAoB;AAC3D,SACEC,WAAW,QAGN,oCAA2B;AAClC,SAASC,MAAM,QAA0B,8BAAqB;AAC9D,SACEC,MAAM,QAGD,8BAAqB;AAC5B,SAASC,MAAM,QAAgD,8BAAqB;AACpF,SACEC,IAAI,QAKC,4BAAmB;AAC1B,SAASC,IAAI,QAAwB,4BAAmB;AACxD,SAASC,QAAQ,QAA4B,gCAAuB;AACpE,SAASC,KAAK,QAAyB,6BAAoB;AAC3D,SACEC,UAAU,QAGL,mCAA0B;AACjC,SAASC,QAAQ,QAA4B,gCAAuB;AACpE,SAASC,OAAO,QAA2B,+BAAsB;AACjE,SAASC,MAAM,QAA0B,8BAAqB;;AAE9D;AACA,SAASC,SAAS,EAAEC,eAAe,EAAEC,KAAK,QAAwB,kBAAS;;AAE3E;AACA,SAASC,EAAE,QAAQ,eAAY","ignoreList":[]}
+{"version":3,"names":["PanelUIProvider","useTheme","useThemeMode","PANEL_THEMES","PANEL_THEME_NAMES","PANEL_EXTRA_THEMES","Portal","PortalHost","PortalProvider","Text","AnimatedPressable","Alert","Avatar","Badge","BottomSheet","Button","Dialog","Frame","InlineSelect","Select","Tabs","Card","Checkbox","EmptyState","Input","InputGroup","Label","Progress","RadioGroup","Skeleton","Spinner","Steps","Switch","Toast","ToastViewport","toast","useToast","Typography","AlertTriangleIcon","ArrowUpRightIcon","CheckCircleIcon","CheckIcon","ChevronDownIcon","ChevronLeftIcon","ChevronRightIcon","InfoIcon","MoonIcon","SearchIcon","SunIcon","XIcon","cn"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AAAA;AACA,SAASA,eAAe,QAAmC,kCAA+B;;AAE1F;AACA,SACEC,QAAQ,EACRC,YAAY,EACZC,YAAY,EACZC,iBAAiB,EACjBC,kBAAkB,QAKb,sBAAmB;;AAE1B;AACA,SAASC,MAAM,EAAEC,UAAU,EAAEC,cAAc,QAAQ,wBAAqB;AACxE,SAASC,IAAI,QAAwB,sBAAmB;AACxD,SACEC,iBAAiB,QAEZ,oCAAiC;;AAExC;AACA,SACEC,KAAK,QAGA,6BAAoB;AAC3B,SAASC,MAAM,QAA0B,8BAAqB;AAC9D,SAASC,KAAK,QAAyB,6BAAoB;AAC3D,SACEC,WAAW,QAGN,oCAA2B;AAClC,SAASC,MAAM,QAA0B,8BAAqB;AAC9D,SACEC,MAAM,QAGD,8BAAqB;AAC5B,SAASC,KAAK,QAAyB,6BAAoB;AAC3D,SACEC,YAAY,QAGP,qCAA4B;AACnC,SAASC,MAAM,QAAgD,8BAAqB;AACpF,SACEC,IAAI,QAKC,4BAAmB;AAC1B,SAASC,IAAI,QAAwB,4BAAmB;AACxD,SAASC,QAAQ,QAA4B,gCAAuB;AACpE,SACEC,UAAU,QAGL,mCAA0B;AACjC,SAASC,KAAK,QAAyB,6BAAoB;AAC3D,SACEC,UAAU,QAIL,mCAA0B;AACjC,SAASC,KAAK,QAA8C,6BAAoB;AAChF,SAASC,QAAQ,QAA4B,gCAAuB;AACpE,SACEC,UAAU,QAGL,mCAA0B;AACjC,SAASC,QAAQ,QAA4B,gCAAuB;AACpE,SAASC,OAAO,QAA2B,+BAAsB;AACjE,SACEC,KAAK,QAQA,6BAAoB;AAC3B,SAASC,MAAM,QAA0B,8BAAqB;AAC9D,SACEC,KAAK,EACLC,aAAa,EACbC,KAAK,EACLC,QAAQ,QASH,6BAAoB;AAC3B,SACEC,UAAU,QAML,kCAAyB;;AAEhC;AACA,SACEC,iBAAiB,EACjBC,gBAAgB,EAChBC,eAAe,EACfC,SAAS,EACTC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EAChBC,QAAQ,EACRC,QAAQ,EACRC,UAAU,EACVC,OAAO,EACPC,KAAK,QAEA,kBAAS;;AAEhB;AACA,SAASC,EAAE,QAAQ,eAAY","ignoreList":[]}

package/lib/module/providers/panel-ui-provider.js

@@ -1,23 +1,35 @@
 "use strict";
 
-import { StyleSheet } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { PortalHost, PortalProvider } from "../primitives/portal.js";
+import { ToastViewport } from "../components/toast/index.js";
+import { cn } from "../utils/cn.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * Root provider for PanelUI. Wraps the app with the gesture handler root and
- * the portal host used by overlay components (Dialog, BottomSheet, Select).
+ * Root provider for PanelUI. Owns three things:
+ * the gesture handler root, the themed page background, and the portal host
+ * used by overlay components (Dialog, BottomSheet, Select).
  *
- * Theme switching is handled natively by Uniwind — use `Uniwind.setTheme()`
- * or the `useTheme()` hook exported from panelui-native.
+ * The background lives here because native wrappers like SafeAreaView do not
+ * accept `className` — putting `bg-background` on one silently does nothing,
+ * leaving the page unthemed while its children follow the theme.
+ *
+ * Theme switching is handled natively by Uniwind — use the `useTheme()` hook
+ * exported from panelui-native.
  */
 export function PanelUIProvider({
-  children
+  children,
+  className,
+  background = true
 }) {
   return /*#__PURE__*/_jsx(GestureHandlerRootView, {
     style: styles.root,
-    children: /*#__PURE__*/_jsxs(PortalProvider, {
-      children: [children, /*#__PURE__*/_jsx(PortalHost, {})]
+    children: /*#__PURE__*/_jsx(View, {
+      className: cn('flex-1', background && 'bg-background', className),
+      children: /*#__PURE__*/_jsxs(PortalProvider, {
+        children: [children, /*#__PURE__*/_jsx(ToastViewport, {}), /*#__PURE__*/_jsx(PortalHost, {})]
+      })
     })
   });
 }

package/lib/module/providers/panel-ui-provider.js.map

@@ -1 +1 @@
-{"version":3,"names":["StyleSheet","GestureHandlerRootView","PortalHost","PortalProvider","jsx","_jsx","jsxs","_jsxs","PanelUIProvider","children","style","styles","root","create","flex"],"sourceRoot":"../../../src","sources":["providers/panel-ui-provider.tsx"],"mappings":";;AACA,SAASA,UAAU,QAAQ,cAAc;AACzC,SAASC,sBAAsB,QAAQ,8BAA8B;AACrE,SAASC,UAAU,EAAEC,cAAc,QAAQ,yBAAsB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAMlE;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAAC;EAAEC;AAA+B,CAAC,EAAE;EAClE,oBACEJ,IAAA,CAACJ,sBAAsB;IAACS,KAAK,EAAEC,MAAM,CAACC,IAAK;IAAAH,QAAA,eACzCF,KAAA,CAACJ,cAAc;MAAAM,QAAA,GACZA,QAAQ,eACTJ,IAAA,CAACH,UAAU,IAAE,CAAC;IAAA,CACA;EAAC,CACK,CAAC;AAE7B;AAEA,MAAMS,MAAM,GAAGX,UAAU,CAACa,MAAM,CAAC;EAC/BD,IAAI,EAAE;IAAEE,IAAI,EAAE;EAAE;AAClB,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["StyleSheet","View","GestureHandlerRootView","PortalHost","PortalProvider","ToastViewport","cn","jsx","_jsx","jsxs","_jsxs","PanelUIProvider","children","className","background","style","styles","root","create","flex"],"sourceRoot":"../../../src","sources":["providers/panel-ui-provider.tsx"],"mappings":";;AACA,SAASA,UAAU,EAAEC,IAAI,QAAQ,cAAc;AAC/C,SAASC,sBAAsB,QAAQ,8BAA8B;AACrE,SAASC,UAAU,EAAEC,cAAc,QAAQ,yBAAsB;AACjE,SAASC,aAAa,QAAQ,8BAAqB;AACnD,SAASC,EAAE,QAAQ,gBAAa;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAgBjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,eAAeA,CAAC;EAC9BC,QAAQ;EACRC,SAAS;EACTC,UAAU,GAAG;AACO,CAAC,EAAE;EACvB,oBACEN,IAAA,CAACN,sBAAsB;IAACa,KAAK,EAAEC,MAAM,CAACC,IAAK;IAAAL,QAAA,eACzCJ,IAAA,CAACP,IAAI;MAACY,SAAS,EAAEP,EAAE,CAAC,QAAQ,EAAEQ,UAAU,IAAI,eAAe,EAAED,SAAS,CAAE;MAAAD,QAAA,eACtEF,KAAA,CAACN,cAAc;QAAAQ,QAAA,GACZA,QAAQ,eAETJ,IAAA,CAACH,aAAa,IAAE,CAAC,eACjBG,IAAA,CAACL,UAAU,IAAE,CAAC;MAAA,CACA;IAAC,CACb;EAAC,CACe,CAAC;AAE7B;AAEA,MAAMa,MAAM,GAAGhB,UAAU,CAACkB,MAAM,CAAC;EAC/BD,IAAI,EAAE;IAAEE,IAAI,EAAE;EAAE;AAClB,CAAC,CAAC","ignoreList":[]}

package/lib/module/theme/use-theme.js

@@ -1,6 +1,58 @@
 "use strict";
 
 import { Uniwind, useUniwind } from 'uniwind';
+
+/** Themes shipped in `panelui-native/theme.css`. */
+
+/** Light/dark mode within a theme family. */
+
+/** A theme family — one look, in its light and dark form. */
+
+/**
+ * The theme families PanelUI ships. Each sets its own palette *and* its own
+ * radius scale, so switching family changes the shape of the UI as well as
+ * its colour — Panel is the Coss default, Moon is sharp and monochrome,
+ * Grass is soft and green.
+ *
+ * Everything beyond `panel` must be registered in your metro config, or
+ * `setTheme` throws "it was not registered":
+ *
+ * ```js
+ * withUniwindConfig(config, {
+ *   cssEntryFile: './global.css',
+ *   extraThemes: ['moon', 'moon-dark', 'grass', 'grass-dark'],
+ * });
+ * ```
+ */
+export const PANEL_THEMES = [{
+  id: 'panel',
+  name: 'Panel',
+  light: 'light',
+  dark: 'dark',
+  swatch: ['#262626', '#f5f5f5']
+}, {
+  id: 'moon',
+  name: 'Moon',
+  light: 'moon',
+  dark: 'moon-dark',
+  swatch: ['#0070f3', '#0070f3']
+}, {
+  id: 'grass',
+  name: 'Grass',
+  light: 'grass',
+  dark: 'grass-dark',
+  swatch: ['#24b47e', '#3ecf8e']
+}];
+
+/** Every concrete theme name, in registration order. */
+export const PANEL_THEME_NAMES = PANEL_THEMES.flatMap(family => [family.light, family.dark]);
+
+/** The names to pass as `extraThemes` in your metro config. */
+export const PANEL_EXTRA_THEMES = PANEL_THEME_NAMES.filter(name => name !== 'light' && name !== 'dark');
+function findFamily(theme) {
+  return PANEL_THEMES.find(family => family.light === theme || family.dark === theme) ?? PANEL_THEMES[0];
+}
+
 /**
  * Reactive access to the current Uniwind theme plus a setter.
  * Theme changes are applied natively by Uniwind without re-rendering the tree.
@@ -10,10 +62,45 @@ export function useTheme() {
     theme
   } = useUniwind();
   return {
-    /** Currently resolved theme ('light' or 'dark'). */
-    theme,
-    /** Switch theme: 'light', 'dark', or 'system' (follows device). */
+    /** The active theme name, e.g. `'dark'` or `'moon-dark'`. */
+    theme: theme,
+    /** Switch theme by name, or `'system'` to follow the device. */
     setTheme: name => Uniwind.setTheme(name)
   };
 }
+
+/**
+ * Theme family and light/dark mode as two separate axes — what a picker like
+ * "choose a brand, then toggle the sun" actually needs.
+ *
+ * Named themes are not adaptive in Uniwind, so each brand ships as a
+ * light/dark pair. Toggling the mode keeps the current family, so a user in
+ * Moon dark lands in Moon light rather than the default theme.
+ *
+ * ```tsx
+ * const { family, mode, setFamily, toggleMode } = useThemeMode();
+ * ```
+ */
+export function useThemeMode() {
+  const {
+    theme
+  } = useUniwind();
+  const family = findFamily(theme);
+  const mode = theme === family.dark ? 'dark' : 'light';
+  return {
+    /** The active theme family. */
+    family,
+    /** `'light'` or `'dark'` within that family. */
+    mode,
+    /** Switch brand, staying in the current light/dark mode. */
+    setFamily: id => {
+      const next = PANEL_THEMES.find(candidate => candidate.id === id);
+      if (next) Uniwind.setTheme(next[mode]);
+    },
+    /** Set the mode, staying in the current family. */
+    setMode: next => Uniwind.setTheme(family[next]),
+    /** Flip light ↔ dark within the current family. */
+    toggleMode: () => Uniwind.setTheme(mode === 'dark' ? family.light : family.dark)
+  };
+}
 //# sourceMappingURL=use-theme.js.map

package/lib/module/theme/use-theme.js.map

@@ -1 +1 @@
-{"version":3,"names":["Uniwind","useUniwind","useTheme","theme","setTheme","name"],"sourceRoot":"../../../src","sources":["theme/use-theme.ts"],"mappings":";;AAAA,SAASA,OAAO,EAAEC,UAAU,QAAQ,SAAS;AAI7C;AACA;AACA;AACA;AACA,OAAO,SAASC,QAAQA,CAAA,EAAG;EACzB,MAAM;IAAEC;EAAM,CAAC,GAAGF,UAAU,CAAC,CAAC;EAE9B,OAAO;IACL;IACAE,KAAK;IACL;IACAC,QAAQ,EAAGC,IAAe,IAAKL,OAAO,CAACI,QAAQ,CAACC,IAAI;EACtD,CAAC;AACH","ignoreList":[]}
+{"version":3,"names":["Uniwind","useUniwind","PANEL_THEMES","id","name","light","dark","swatch","PANEL_THEME_NAMES","flatMap","family","PANEL_EXTRA_THEMES","filter","findFamily","theme","find","useTheme","setTheme","useThemeMode","mode","setFamily","next","candidate","setMode","toggleMode"],"sourceRoot":"../../../src","sources":["theme/use-theme.ts"],"mappings":";;AAAA,SAASA,OAAO,EAAEC,UAAU,QAAQ,SAAS;;AAE7C;;AAWA;;AAGA;;AAYA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,YAAyC,GAAG,CACvD;EACEC,EAAE,EAAE,OAAO;EACXC,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE,OAAO;EACdC,IAAI,EAAE,MAAM;EACZC,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS;AAC/B,CAAC,EACD;EACEJ,EAAE,EAAE,MAAM;EACVC,IAAI,EAAE,MAAM;EACZC,KAAK,EAAE,MAAM;EACbC,IAAI,EAAE,WAAW;EACjBC,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS;AAC/B,CAAC,EACD;EACEJ,EAAE,EAAE,OAAO;EACXC,IAAI,EAAE,OAAO;EACbC,KAAK,EAAE,OAAO;EACdC,IAAI,EAAE,YAAY;EAClBC,MAAM,EAAE,CAAC,SAAS,EAAE,SAAS;AAC/B,CAAC,CACF;;AAED;AACA,OAAO,MAAMC,iBAAwC,GAAGN,YAAY,CAACO,OAAO,CACzEC,MAAM,IAAK,CAACA,MAAM,CAACL,KAAK,EAAEK,MAAM,CAACJ,IAAI,CACxC,CAAC;;AAED;AACA,OAAO,MAAMK,kBAAqC,GAAGH,iBAAiB,CAACI,MAAM,CAC1ER,IAAI,IAAKA,IAAI,KAAK,OAAO,IAAIA,IAAI,KAAK,MACzC,CAAC;AAED,SAASS,UAAUA,CAACC,KAAa,EAAoB;EACnD,OACEZ,YAAY,CAACa,IAAI,CAAEL,MAAM,IAAKA,MAAM,CAACL,KAAK,KAAKS,KAAK,IAAIJ,MAAM,CAACJ,IAAI,KAAKQ,KAAK,CAAC,IAC9EZ,YAAY,CAAC,CAAC,CAAE;AAEpB;;AAEA;AACA;AACA;AACA;AACA,OAAO,SAASc,QAAQA,CAAA,EAAG;EACzB,MAAM;IAAEF;EAAM,CAAC,GAAGb,UAAU,CAAC,CAAC;EAE9B,OAAO;IACL;IACAa,KAAK,EAAEA,KAAmB;IAC1B;IACAG,QAAQ,EAAGb,IAAe,IAAKJ,OAAO,CAACiB,QAAQ,CAACb,IAAI;EACtD,CAAC;AACH;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASc,YAAYA,CAAA,EAAG;EAC7B,MAAM;IAAEJ;EAAM,CAAC,GAAGb,UAAU,CAAC,CAAC;EAC9B,MAAMS,MAAM,GAAGG,UAAU,CAACC,KAAK,CAAC;EAChC,MAAMK,IAAe,GAAGL,KAAK,KAAKJ,MAAM,CAACJ,IAAI,GAAG,MAAM,GAAG,OAAO;EAEhE,OAAO;IACL;IACAI,MAAM;IACN;IACAS,IAAI;IACJ;IACAC,SAAS,EAAGjB,EAAU,IAAK;MACzB,MAAMkB,IAAI,GAAGnB,YAAY,CAACa,IAAI,CAAEO,SAAS,IAAKA,SAAS,CAACnB,EAAE,KAAKA,EAAE,CAAC;MAClE,IAAIkB,IAAI,EAAErB,OAAO,CAACiB,QAAQ,CAACI,IAAI,CAACF,IAAI,CAAC,CAAC;IACxC,CAAC;IACD;IACAI,OAAO,EAAGF,IAAe,IAAKrB,OAAO,CAACiB,QAAQ,CAACP,MAAM,CAACW,IAAI,CAAC,CAAC;IAC5D;IACAG,UAAU,EAAEA,CAAA,KAAMxB,OAAO,CAACiB,QAAQ,CAACE,IAAI,KAAK,MAAM,GAAGT,MAAM,CAACL,KAAK,GAAGK,MAAM,CAACJ,IAAI;EACjF,CAAC;AACH","ignoreList":[]}