panelui-native 0.5.1 → 0.6.0

package/lib/typescript/src/index.d.ts

@@ -22,13 +22,17 @@ export { InputGroup, type InputGroupProps, type InputGroupInputProps, type Input
 export { Label, type LabelProps, type LabelTextProps } from './components/label/index.js';
 export { Progress, type ProgressProps } from './components/progress/index.js';
 export { RadioGroup, type RadioGroupProps, type RadioGroupItemProps, } from './components/radio-group/index.js';
+export { ScrollFade, type ScrollFadeProps, } from './components/scroll-fade/index.js';
+export { Shimmer, type ShimmerProps } from './components/shimmer/index.js';
 export { Skeleton, type SkeletonProps } from './components/skeleton/index.js';
 export { Spinner, type SpinnerProps } from './components/spinner/index.js';
 export { Steps, type StepsProps, type StepsItemProps, type StepsTriggerProps, type StepsIndicatorProps, type StepsSeparatorProps, type StepState, type StepsOrientation, } from './components/steps/index.js';
+export { Surface, type SurfaceProps } from './components/surface/index.js';
 export { Switch, type SwitchProps } from './components/switch/index.js';
 export { Timeline, type TimelineProps, type TimelineItemProps, type TimelineIndicatorProps, type TimelineStatProps, type TimelineVariant, type TimelineTone, } from './components/timeline/index.js';
 export { Toast, ToastViewport, toast, useToast, type ToastProps, type ToastOptions, type ToastItem, type ToastVariant, type ToastPlacement, type ToastHandle, type ToastIndicatorProps, type ToastCloseProps, } from './components/toast/index.js';
 export { Typography, type TypographyProps, type TypographyType, type TypographyHeadingProps, type TypographyParagraphProps, type TypographyCodeProps, } from './components/typography/index.js';
 export { AlertTriangleIcon, AppleIcon, ArrowUpRightIcon, BellIcon, CardIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, FacebookIcon, GoogleIcon, IconColorProvider, InfoIcon, MoonIcon, PackageIcon, PlusSquareIcon, ReceiptIcon, SearchIcon, SendIcon, ShareNodesIcon, ShieldAlertIcon, ShieldCheckIcon, SunIcon, XIcon, useIconColor, type IconProps, } from './icons/index.js';
+export * from './hooks/index.js';
 export { cn } from './utils/cn.js';
 //# sourceMappingURL=index.d.ts.map

package/lib/typescript/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "panelui-native",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "High-performance React Native UI components for Expo. Coss UI design language, powered by Uniwind (Tailwind v4) and Reanimated.",
   "main": "./lib/module/index.js",
   "module": "./lib/module/index.js",
@@ -64,11 +64,13 @@
   "license": "MIT",
   "homepage": "https://github.com/panel-ui/PanelUI#readme",
   "peerDependencies": {
+    "expo-clipboard": ">=7.0.0",
     "react": "*",
     "react-native": "*",
     "react-native-gesture-handler": ">=2.0.0",
     "react-native-reanimated": ">=3.0.0",
     "react-native-safe-area-context": ">=4.0.0",
+    "react-native-svg": ">=15.0.0",
     "tailwindcss": ">=4.0.0",
     "uniwind": ">=1.0.0"
   },
@@ -92,5 +94,10 @@
       ],
       "typescript"
     ]
+  },
+  "peerDependenciesMeta": {
+    "expo-clipboard": {
+      "optional": true
+    }
   }
 }

package/src/components/scroll-fade/index.tsx

@@ -0,0 +1,168 @@
+/**
+ * ScrollFade — fades the edges of a scroll container.
+ *
+ * The React Native equivalent of shadcn-ui/ui's `scroll-fade` utility
+ * (https://ui.shadcn.com/docs/utils/scroll-fade), which is CSS `mask-image`
+ * driven by a scroll timeline. React Native has neither masks nor scroll
+ * timelines, so the fades are SVG gradients overlaid on each edge, with their
+ * opacity following the scroll position.
+ *
+ * Composition follows heroui-native's ScrollShadow: wrap the scrollable and
+ * let the orientation be inferred from its `horizontal` prop.
+ *
+ * ```tsx
+ * <ScrollFade>
+ *   <ScrollView horizontal>…</ScrollView>
+ * </ScrollFade>
+ * ```
+ */
+import {
+  Children,
+  cloneElement,
+  isValidElement,
+  useState,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
+import {
+  View,
+  type NativeScrollEvent,
+  type NativeSyntheticEvent,
+  type ViewProps,
+} from 'react-native';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+import { useCSSVariable } from 'uniwind';
+
+/** Past this many pixels from an edge, that edge's fade is fully shown. */
+const FADE_IN_DISTANCE = 24;
+
+export interface ScrollFadeProps extends ViewProps {
+  className?: string;
+  /** Depth of the fade in pixels. */
+  size?: number;
+  /** Which edges fade. */
+  edges?: 'both' | 'start' | 'end';
+  /**
+   * Colour the fade resolves to — normally whatever sits behind the
+   * scrollable. Defaults to the theme's background.
+   */
+  color?: string;
+  children?: ReactNode;
+}
+
+interface ScrollableProps {
+  horizontal?: boolean;
+  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+  scrollEventThrottle?: number;
+}
+
+export function ScrollFade({
+  className,
+  size = 48,
+  edges = 'both',
+  color,
+  children,
+  ...props
+}: ScrollFadeProps) {
+  const [startOpacity, setStartOpacity] = useState(0);
+  const [endOpacity, setEndOpacity] = useState(0);
+
+  const themeBackground = useCSSVariable('--color-background');
+  const fadeColor =
+    color ?? (typeof themeBackground === 'string' ? themeBackground : '#000000');
+
+  const child = Children.only(children) as ReactElement<ScrollableProps>;
+  const horizontal = isValidElement(child) ? !!child.props.horizontal : false;
+
+  const handleScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
+    const { contentOffset, contentSize, layoutMeasurement } = event.nativeEvent;
+    const offset = horizontal ? contentOffset.x : contentOffset.y;
+    const total = horizontal ? contentSize.width : contentSize.height;
+    const visible = horizontal ? layoutMeasurement.width : layoutMeasurement.height;
+    const remaining = total - visible - offset;
+
+    // Each edge fades in over the first FADE_IN_DISTANCE px of travel, so an
+    // edge with nothing past it shows nothing.
+    setStartOpacity(Math.min(offset / FADE_IN_DISTANCE, 1));
+    setEndOpacity(Math.min(Math.max(remaining, 0) / FADE_IN_DISTANCE, 1));
+
+    child.props.onScroll?.(event);
+  };
+
+  const scrollable = isValidElement(child)
+    ? cloneElement(child, {
+        onScroll: handleScroll,
+        scrollEventThrottle: child.props.scrollEventThrottle ?? 16,
+      })
+    : child;
+
+  const showStart = edges !== 'end';
+  const showEnd = edges !== 'start';
+
+  return (
+    <View {...props} className={className}>
+      {scrollable}
+
+      {showStart ? (
+        <Fade
+          color={fadeColor}
+          size={size}
+          horizontal={horizontal}
+          opacity={startOpacity}
+          edge="start"
+        />
+      ) : null}
+      {showEnd ? (
+        <Fade
+          color={fadeColor}
+          size={size}
+          horizontal={horizontal}
+          opacity={endOpacity}
+          edge="end"
+        />
+      ) : null}
+    </View>
+  );
+}
+
+ScrollFade.displayName = 'ScrollFade';
+
+/** One edge's gradient, opaque at the edge and clear inwards. */
+function Fade({
+  color,
+  size,
+  horizontal,
+  opacity,
+  edge,
+}: {
+  color: string;
+  size: number;
+  horizontal: boolean;
+  opacity: number;
+  edge: 'start' | 'end';
+}) {
+  const isStart = edge === 'start';
+  const id = `scroll-fade-${edge}-${horizontal ? 'x' : 'y'}`;
+
+  const position = horizontal
+    ? { top: 0, bottom: 0, width: size, ...(isStart ? { left: 0 } : { right: 0 }) }
+    : { left: 0, right: 0, height: size, ...(isStart ? { top: 0 } : { bottom: 0 }) };
+
+  // The gradient runs from the screen edge inwards, so it is reversed on the
+  // end edge.
+  const [x2, y2] = horizontal ? [1, 0] : [0, 1];
+
+  return (
+    <View pointerEvents="none" style={{ position: 'absolute', opacity, ...position }}>
+      <Svg width="100%" height="100%">
+        <Defs>
+          <LinearGradient id={id} x1="0" y1="0" x2={String(x2)} y2={String(y2)}>
+            <Stop offset="0" stopColor={color} stopOpacity={isStart ? 1 : 0} />
+            <Stop offset="1" stopColor={color} stopOpacity={isStart ? 0 : 1} />
+          </LinearGradient>
+        </Defs>
+        <Rect x="0" y="0" width="100%" height="100%" fill={`url(#${id})`} />
+      </Svg>
+    </View>
+  );
+}

package/src/components/shimmer/index.tsx

@@ -0,0 +1,135 @@
+/**
+ * Shimmer — an animated highlight sweeping across content.
+ *
+ * The React Native equivalent of shadcn-ui/ui's `shimmer` utility
+ * (https://ui.shadcn.com/docs/utils/shimmer). That one is CSS:
+ * `background-clip: text` with a `color-mix()` highlight. React Native has
+ * neither, so the highlight is drawn as an SVG gradient band swept across an
+ * overlay by Reanimated, on the UI thread.
+ *
+ * The visible difference: the band passes *over* the content rather than
+ * being clipped to glyph shapes. On body-sized text the two read the same; on
+ * very large text the web version is crisper.
+ *
+ * ```tsx
+ * <Shimmer>
+ *   <Text muted>Generating response…</Text>
+ * </Shimmer>
+ * ```
+ */
+import { useEffect, useState, type ReactNode } from 'react';
+import { View, type LayoutChangeEvent, type ViewProps } from 'react-native';
+import Animated, {
+  cancelAnimation,
+  Easing,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withTiming,
+} from 'react-native-reanimated';
+import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
+import { useCSSVariable } from 'uniwind';
+import { cn } from '../../utils/cn';
+
+export interface ShimmerProps extends ViewProps {
+  className?: string;
+  /** Milliseconds for one sweep. */
+  duration?: number;
+  /** Sweep once instead of looping. */
+  once?: boolean;
+  /** Sweep right-to-left. */
+  reverse?: boolean;
+  /** Width of the highlight band, as a fraction of the content width. */
+  spread?: number;
+  /** Highlight colour. Defaults to the theme's foreground. */
+  color?: string;
+  /** Peak opacity of the highlight. */
+  intensity?: number;
+  children?: ReactNode;
+}
+
+export function Shimmer({
+  className,
+  duration = 2000,
+  once = false,
+  reverse = false,
+  spread = 0.4,
+  color,
+  intensity = 0.45,
+  children,
+  ...props
+}: ShimmerProps) {
+  const [width, setWidth] = useState(0);
+  const progress = useSharedValue(0);
+  const reducedMotion = useReducedMotion();
+
+  const themeForeground = useCSSVariable('--color-foreground');
+  const highlight =
+    color ?? (typeof themeForeground === 'string' ? themeForeground : '#ffffff');
+
+  useEffect(() => {
+    // Respect the OS setting rather than animating regardless — the same
+    // thing shadcn's utility does with prefers-reduced-motion.
+    if (reducedMotion || width === 0) return;
+
+    progress.value = 0;
+    progress.value = withRepeat(
+      withTiming(1, { duration, easing: Easing.linear }),
+      once ? 1 : -1,
+      false
+    );
+
+    return () => cancelAnimation(progress);
+  }, [duration, once, reducedMotion, width, progress]);
+
+  const bandWidth = Math.max(width * spread, 1);
+
+  const bandStyle = useAnimatedStyle(() => {
+    // Travel from fully off one edge to fully off the other.
+    const from = -bandWidth;
+    const to = width;
+    const x = reverse
+      ? to - progress.value * (to - from)
+      : from + progress.value * (to - from);
+    return { transform: [{ translateX: x }] };
+  });
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    setWidth(event.nativeEvent.layout.width);
+    props.onLayout?.(event);
+  };
+
+  return (
+    <View
+      {...props}
+      onLayout={onLayout}
+      className={cn('overflow-hidden', className)}
+    >
+      {children}
+
+      {reducedMotion || width === 0 ? null : (
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            { position: 'absolute', top: 0, bottom: 0, width: bandWidth },
+            bandStyle,
+          ]}
+        >
+          <Svg width="100%" height="100%">
+            <Defs>
+              <LinearGradient id="shimmer" x1="0" y1="0" x2="1" y2="0">
+                <Stop offset="0" stopColor={highlight} stopOpacity={0} />
+                <Stop offset="0.5" stopColor={highlight} stopOpacity={intensity} />
+                <Stop offset="1" stopColor={highlight} stopOpacity={0} />
+              </LinearGradient>
+            </Defs>
+            <Rect x="0" y="0" width="100%" height="100%" fill="url(#shimmer)" />
+          </Svg>
+        </Animated.View>
+      )}
+    </View>
+  );
+}
+
+Shimmer.displayName = 'Shimmer';

package/src/components/surface/index.tsx

@@ -0,0 +1,63 @@
+/**
+ * Surface — an elevated container.
+ *
+ * Adapted from: heroui-inc/heroui-native src/components/surface/
+ * (the variant ladder and the nesting model for building hierarchy).
+ *
+ * Both the fill and the corner radius follow the active theme: the variants
+ * resolve to themed `--color-surface-*` tokens, and `rounded-3xl` resolves
+ * through the per-theme radius scale — so Moon's surfaces are tight and
+ * Grass's are soft, without the component knowing anything about either.
+ *
+ * ```tsx
+ * <Surface>
+ *   <Surface variant="secondary">
+ *     <Surface variant="tertiary">…</Surface>
+ *   </Surface>
+ * </Surface>
+ * ```
+ */
+import { forwardRef } from 'react';
+import { StyleSheet, View, type ViewProps } from 'react-native';
+import { tv, type VariantProps } from 'tailwind-variants';
+
+const surfaceVariants = tv({
+  base: 'overflow-hidden rounded-3xl p-4',
+  variants: {
+    variant: {
+      default: 'bg-surface',
+      secondary: 'bg-surface-secondary',
+      tertiary: 'bg-surface-tertiary',
+      transparent: 'bg-transparent',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+});
+
+export interface SurfaceProps
+  extends ViewProps,
+    VariantProps<typeof surfaceVariants> {
+  className?: string;
+}
+
+export const Surface = forwardRef<View, SurfaceProps>(
+  ({ className, variant, style, ...props }, ref) => (
+    <View
+      ref={ref}
+      // `borderCurve` has no Tailwind equivalent. On iOS it gives the
+      // continuous (squircle) corner Apple uses, which is visibly smoother
+      // than a circular arc at this radius; Android ignores it.
+      style={[styles.root, style]}
+      className={surfaceVariants({ variant, className })}
+      {...props}
+    />
+  )
+);
+
+Surface.displayName = 'Surface';
+
+const styles = StyleSheet.create({
+  root: { borderCurve: 'continuous' },
+});

package/src/components/timeline/index.tsx

@@ -58,7 +58,9 @@ const timelineVariants = tv({
     item: 'w-full flex-row gap-3',
     aside: 'w-20 items-end gap-0.5 pt-0.5',
     rail: 'items-center',
-    indicator: 'items-center justify-center rounded-full border-2',
+    // Flat discs, no ring — the same restraint Steps uses. Rings on every node
+    // were most of what made the timeline read as noisy.
+    indicator: 'items-center justify-center rounded-full',
     indicatorLabel: 'text-xs font-medium',
     separator: 'w-0.5 flex-1 rounded-full',
     body: 'flex-1 pb-6',
@@ -112,22 +114,48 @@ const timelineVariants = tv({
   },
 });
 
-/** Node fill and border per tone, split by whether the node is solid. */
-const TONE_NODE: Record<TimelineTone, { solid: string; outline: string }> = {
-  default: { solid: 'border-primary bg-primary', outline: 'border-primary' },
-  info: { solid: 'border-info bg-info', outline: 'border-info' },
-  success: { solid: 'border-success bg-success', outline: 'border-success' },
-  warning: { solid: 'border-warning bg-warning', outline: 'border-warning' },
-  danger: { solid: 'border-destructive bg-destructive', outline: 'border-destructive' },
+/*
+ * Colour rule, matching the Steps component: progress is solid, event kind is
+ * tinted.
+ *
+ * - untoned pending   → bg-muted        (Steps' inactive)
+ * - untoned completed → bg-primary      (Steps' completed)
+ * - toned             → bg-{tone}-soft, content in the tone's foreground
+ *
+ * The `-soft` fills are the same tinted tokens Alert uses, so a toned node sits
+ * in the same family as the rest of the library instead of shouting in raw
+ * brand colour.
+ *
+ * Nodes that hold something — an icon or a number — get a hairline so they read
+ * as a container. The `dot` and `card` discs stay bare: at 16px an outline is
+ * most of what made the original look busy. The border therefore lives on the
+ * tone class rather than the shared `indicator` slot, so a solid disc cannot
+ * pick one up by accident.
+ */
+const TONE_NODE: Record<TimelineTone, { solid: string; tinted: string }> = {
+  default: { solid: 'bg-primary', tinted: 'border border-border bg-muted' },
+  info: { solid: 'bg-info', tinted: 'border border-info/32 bg-info-soft' },
+  success: { solid: 'bg-success', tinted: 'border border-success/32 bg-success-soft' },
+  warning: { solid: 'bg-warning', tinted: 'border border-warning/32 bg-warning-soft' },
+  danger: {
+    solid: 'bg-destructive',
+    tinted: 'border border-destructive/32 bg-destructive-soft',
+  },
 };
 
-/** The node an incomplete, untoned step gets. */
-const PENDING_NODE = 'border-muted bg-background';
+/**
+ * The node an incomplete, untoned step gets — bordered when it holds an icon
+ * or a number, bare when it is a status disc.
+ */
+const PENDING_NODE = {
+  solid: 'bg-muted',
+  tinted: 'border border-border bg-muted',
+} as const;
 
 /**
- * CSS variable an outlined node's icon takes its colour from. The
- * `-foreground` tokens are the ones tuned to read against the page in both
- * light and dark, which is what an outlined node's contents sit on.
+ * CSS variable a tinted node's contents take their colour from. The
+ * `-foreground` tokens are the ones tuned to read in both light and dark,
+ * which is what sits on a soft tint.
  */
 const TONE_ICON_VAR: Record<TimelineTone, string> = {
   default: '--color-primary',
@@ -264,33 +292,31 @@ const TimelineIndicator = forwardRef<View, TimelineIndicatorProps>(
       completed,
     });
 
-    const isSolid = SOLID_VARIANTS.includes(variant);
+    // dot/card nodes are small discs with nothing inside, so they keep full
+    // saturation — a soft tint at 16px would disappear. Nodes that hold an
+    // icon or a number take the tinted fill instead.
+    const isDisc = SOLID_VARIANTS.includes(variant);
     const toned = tone !== 'default';
-    // An untoned, unfinished step stays neutral; everything else takes its
-    // tone (or primary, once complete).
-    const nodeClass =
-      toned || completed
-        ? TONE_NODE[tone][isSolid ? 'solid' : 'outline']
-        : PENDING_NODE;
-
-    const themedIcon = useCSSVariable(
-      completed || toned ? TONE_ICON_VAR[tone] : '--color-muted-foreground'
+
+    const fill = isDisc ? 'solid' : 'tinted';
+    const nodeClass = toned
+      ? TONE_NODE[tone][fill]
+      : completed
+        ? TONE_NODE.default.solid
+        : PENDING_NODE[fill];
+
+    // Contents sit on the tint (or on primary once complete), so they take the
+    // colour tuned to read against it.
+    const tintedContent = useCSSVariable(
+      toned ? TONE_ICON_VAR[tone] : '--color-muted-foreground'
     );
-    const outlineColor = typeof themedIcon === 'string' ? themedIcon : undefined;
-
-    // On a solid node the contents sit on the fill, so they need the colour
-    // that reads against it: the theme's own foreground for `default`, and
-    // white for the saturated status fills, which stay saturated in both
-    // themes.
-    const primaryForeground = useCSSVariable('--color-primary-foreground');
-    const solidColor =
-      tone === 'default'
-        ? typeof primaryForeground === 'string'
-          ? primaryForeground
-          : undefined
-        : '#ffffff';
-
-    const contentColor = isSolid && (completed || toned) ? solidColor : outlineColor;
+    const solidContent = useCSSVariable('--color-primary-foreground');
+
+    const resolved = (value: unknown) =>
+      typeof value === 'string' ? value : undefined;
+
+    const contentColor =
+      !toned && completed ? resolved(solidContent) : resolved(tintedContent);
 
     return (
       <View className={rail()}>

package/src/hooks/index.ts

@@ -0,0 +1,19 @@
+export {
+  useCopyToClipboard,
+  type UseCopyToClipboardOptions,
+  type UseCopyToClipboardResult,
+} from './use-copy-to-clipboard';
+export {
+  useDisclosure,
+  type UseDisclosureOptions,
+  type UseDisclosureResult,
+} from './use-disclosure';
+export {
+  useBreakpoint,
+  BREAKPOINTS,
+  type Breakpoint,
+  type UseBreakpointResult,
+} from './use-breakpoint';
+export { useKeyboard, type UseKeyboardResult } from './use-keyboard';
+export { useDebouncedValue } from './use-debounced-value';
+export { usePrevious } from './use-previous';

package/src/hooks/use-breakpoint.ts

@@ -0,0 +1,52 @@
+import { useWindowDimensions } from 'react-native';
+
+/** Tailwind's breakpoints, minus the ones no phone or tablet reaches. */
+export const BREAKPOINTS = { sm: 640, md: 768, lg: 1024, xl: 1280 } as const;
+
+export type Breakpoint = keyof typeof BREAKPOINTS;
+
+export interface UseBreakpointResult {
+  /** Largest breakpoint the window currently satisfies, or `base`. */
+  current: Breakpoint | 'base';
+  /** True when the window is at least this wide. */
+  isAtLeast: (breakpoint: Breakpoint) => boolean;
+  width: number;
+  height: number;
+  isLandscape: boolean;
+}
+
+/**
+ * Responsive state from the window size — the React Native answer to
+ * coss.com/ui's `useMediaQuery`, which has no equivalent here.
+ *
+ * For styling, prefer Uniwind's responsive class prefixes (`md:flex-row`).
+ * Reach for this when the *behaviour* changes, not just the look — rendering
+ * a sheet on a phone and a dialog on a tablet, say.
+ *
+ * ```tsx
+ * const { isAtLeast } = useBreakpoint();
+ * return isAtLeast('md') ? <Dialog …/> : <BottomSheet …/>;
+ * ```
+ */
+export function useBreakpoint(): UseBreakpointResult {
+  const { width, height } = useWindowDimensions();
+
+  const current: Breakpoint | 'base' =
+    width >= BREAKPOINTS.xl
+      ? 'xl'
+      : width >= BREAKPOINTS.lg
+        ? 'lg'
+        : width >= BREAKPOINTS.md
+          ? 'md'
+          : width >= BREAKPOINTS.sm
+            ? 'sm'
+            : 'base';
+
+  return {
+    current,
+    isAtLeast: (breakpoint) => width >= BREAKPOINTS[breakpoint],
+    width,
+    height,
+    isLandscape: width > height,
+  };
+}