panelui-native 0.91.0 → 0.93.0

package/lib/module/components/page-header/index.js

@@ -0,0 +1,577 @@
+"use strict";
+
+/**
+ * PageHeader — the top of a profile screen: a cover, the face over it, who it
+ * belongs to, and what you can do about them.
+ *
+ * Every social app opens a profile the same way, and rebuilding it per screen
+ * is how the cover ends up a different height on each one. The parts here are
+ * the pieces that arrangement is made of, and the two variants are the two
+ * places it lives: `card`, a self-contained surface in a scroll of other
+ * cards, and `page`, the header of the screen itself.
+ *
+ * ```tsx
+ * <PageHeader>
+ *   <PageHeader.Cover />
+ *   <PageHeader.Avatar source={face} fallback="OR" verified />
+ *   <PageHeader.Content>
+ *     <PageHeader.Title>Olivia Rhye</PageHeader.Title>
+ *     <PageHeader.Description>@oliviarhye</PageHeader.Description>
+ *   </PageHeader.Content>
+ *   <PageHeader.Actions>
+ *     <Button className="flex-1">Follow</Button>
+ *   </PageHeader.Actions>
+ * </PageHeader>
+ * ```
+ *
+ * The cover in `card` is held off the card's edges and rounded on its top
+ * corners only, so its bottom edge meets the content rather than floating
+ * above it. The radius pair is `rounded-3xl` on the card and `rounded-2xl` on
+ * the cover, one step apart on the theme's own scale — which is the same 8
+ * points the card is padded by, so the two curves stay concentric without a
+ * hardcoded number that would be wrong in half the themes.
+ *
+ * The avatar lifts itself over the cover's bottom edge, and it works out
+ * whether to: the root looks for a `PageHeader.Cover` among its children and
+ * says so through context, because a header with no cover has nothing to
+ * overlap and an avatar that lifted anyway would hang off the top of it.
+ *
+ * The ring around the face is drawn in the surface behind it — the card, or
+ * the page — rather than in a border colour, so the face reads as punched out
+ * of the cover instead of outlined on top of it.
+ */
+import { Children, cloneElement, createContext, forwardRef, isValidElement, useContext, useMemo } from 'react';
+import { Image, StyleSheet, View } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { AnimatedPressable } from "../../primitives/animated-pressable.js";
+import { Text, textChildren } from "../../primitives/text.js";
+import { cn } from "../../utils/cn.js";
+import { BadgeCheckIcon, IconColorProvider } from "../../icons/index.js";
+import { Avatar, AVATAR_SIZE_POINTS } from "../avatar/index.js";
+
+/** Height of a cover that is not given one. Two lines of nothing, and enough
+ * of a band for a face to sit half over. */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const COVER_HEIGHT = 120;
+
+/** Points of surface drawn around the face. */
+const AVATAR_RING = 4;
+
+/** The rosette, as a share of the face it sits on. */
+const BADGE_RATIO = 0.3;
+
+/** The cover gradient, when no image is given. Both are series tokens, so an
+ * app that puts its charts on brand puts this on brand with them. */
+const GRADIENT = ['--color-chart-2', '--color-chart-5'];
+const GRADIENT_FALLBACK = ['#3b82f6', '#8b5cf6'];
+const pageHeaderVariants = tv({
+  slots: {
+    root: 'w-full',
+    cover: 'overflow-hidden bg-muted',
+    avatar: 'self-start',
+    ring: 'overflow-hidden rounded-full',
+    row: 'flex-row items-center gap-5',
+    content: 'gap-1',
+    meta: 'flex-row items-center gap-1.5',
+    stats: 'flex-row items-center',
+    actions: 'flex-row items-center gap-2'
+  },
+  variants: {
+    variant: {
+      // `overflow-hidden` clips the cover's own square bottom corners to the
+      // card's radius on the way down; `p-2` is what holds the cover off the
+      // card's edges, and is the difference between the two radii above.
+      card: {
+        root: 'overflow-hidden rounded-3xl border border-border bg-card p-2',
+        cover: 'rounded-t-2xl',
+        ring: 'border-card',
+        avatar: 'px-3',
+        row: 'px-3',
+        content: 'px-3 pt-3',
+        actions: 'px-3 pb-2 pt-4'
+      },
+      // No surface of its own, and the cover runs to the screen's edges.
+      page: {
+        root: 'bg-background',
+        ring: 'border-background',
+        avatar: 'px-4',
+        row: 'px-4',
+        content: 'px-4 pt-3',
+        actions: 'px-4 pb-4 pt-4'
+      }
+    },
+    align: {
+      start: {},
+      center: {
+        avatar: 'self-center',
+        row: 'justify-center',
+        content: 'items-center',
+        meta: 'justify-center',
+        stats: 'justify-center',
+        actions: 'justify-center'
+      }
+    }
+  },
+  defaultVariants: {
+    variant: 'card',
+    align: 'center'
+  }
+});
+
+/** Where the header lives: a card in a scroll, or the top of the screen. */
+
+/** Which edge the face and the text line up on. */
+
+const PageHeaderContext = /*#__PURE__*/createContext(undefined);
+function usePageHeader(component) {
+  const context = useContext(PageHeaderContext);
+  if (!context) throw new Error(`${component} must be used within a <PageHeader>`);
+  return context;
+}
+
+/**
+ * True inside a `PageHeader.Row`. The avatar carries the body's inset and its
+ * own alignment when it stands alone, and neither when something else is
+ * already holding the row it sits in.
+ */
+const PageHeaderRowContext = /*#__PURE__*/createContext(false);
+
+/** How a stats row reads its numbers out. */
+const PageHeaderStatsContext = /*#__PURE__*/createContext('stacked');
+const PageHeaderRoot = /*#__PURE__*/forwardRef(({
+  className,
+  variant = 'card',
+  align = 'center',
+  children,
+  ...props
+}, ref) => {
+  // Whether the avatar has anything to overlap. Read off the children rather
+  // than asked for, because a caller who has written a cover should not also
+  // have to say that they have.
+  const hasCover = Children.toArray(children).some(child => /*#__PURE__*/isValidElement(child) && child.type === PageHeaderCover);
+  const context = useMemo(() => ({
+    variant,
+    align,
+    hasCover
+  }), [variant, align, hasCover]);
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
+    ref: ref,
+    className: pageHeaderVariants({
+      variant,
+      align
+    }).root({
+      className
+    }),
+    children: /*#__PURE__*/_jsx(PageHeaderContext.Provider, {
+      value: context,
+      children: children
+    })
+  });
+});
+PageHeaderRoot.displayName = 'PageHeader';
+/**
+ * The banner. An image when given one, a gradient when not — a header with no
+ * banner still has to read as a header, and an empty band reads as a bug.
+ */
+const PageHeaderCover = /*#__PURE__*/forwardRef(({
+  className,
+  source,
+  height = COVER_HEIGHT,
+  colors,
+  alt,
+  style,
+  children,
+  ...props
+}, ref) => {
+  const {
+    variant
+  } = usePageHeader('PageHeader.Cover');
+  const from = useCSSVariable(GRADIENT[0]);
+  const to = useCSSVariable(GRADIENT[1]);
+
+  // `useCSSVariable` can hand back something that is not a colour string, and
+  // a gradient given one paints nothing at all.
+  const ramp = colors ?? [typeof from === 'string' ? from : GRADIENT_FALLBACK[0], typeof to === 'string' ? to : GRADIENT_FALLBACK[1]];
+  return /*#__PURE__*/_jsxs(View, {
+    ...props,
+    ref: ref,
+    className: pageHeaderVariants({
+      variant
+    }).cover({
+      className
+    }),
+    style: [{
+      height
+    }, style],
+    children: [source ? /*#__PURE__*/_jsx(Image, {
+      source: source,
+      resizeMode: "cover",
+      style: StyleSheet.absoluteFill,
+      accessible: !!alt,
+      accessibilityRole: alt ? 'image' : undefined,
+      accessibilityLabel: alt
+    }) : /*#__PURE__*/_jsx(LinearGradient, {
+      colors: ramp,
+      start: {
+        x: 0,
+        y: 0
+      },
+      end: {
+        x: 0,
+        y: 1
+      }
+      // Filled by style rather than by class. `className` on a component
+      // from another package is only as good as that package's style
+      // forwarding, and a gradient that silently measures zero is a
+      // banner that is simply not there.
+      ,
+      style: StyleSheet.absoluteFill,
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants"
+    }), children]
+  });
+});
+PageHeaderCover.displayName = 'PageHeader.Cover';
+/**
+ * The face, in a ring of whatever surface is behind it.
+ *
+ * The badge is drawn here rather than with `Avatar.Badge` because that one is
+ * pinned to the top corner, where an unread count belongs. A verification mark
+ * belongs at the bottom, beside the name it is vouching for.
+ */
+const PageHeaderAvatar = /*#__PURE__*/forwardRef(({
+  className,
+  size = 'xl',
+  verified,
+  badge,
+  overlap,
+  source,
+  fallback,
+  imageProps,
+  children,
+  style,
+  ...props
+}, ref) => {
+  const {
+    variant,
+    align,
+    hasCover
+  } = usePageHeader('PageHeader.Avatar');
+  const inRow = useContext(PageHeaderRowContext);
+  const slots = pageHeaderVariants({
+    variant,
+    align
+  });
+  const primary = useCSSVariable('--color-primary');
+  const onPrimary = useCSSVariable('--color-primary-foreground');
+  const diameter = AVATAR_SIZE_POINTS[size] ?? AVATAR_SIZE_POINTS.xl;
+  const lifts = overlap ?? hasCover;
+  const mark = badge ?? (verified ? /*#__PURE__*/_jsx(BadgeCheckIcon, {
+    size: Math.round(diameter * BADGE_RATIO),
+    color: typeof primary === 'string' ? primary : '#2563eb',
+    checkColor: typeof onPrimary === 'string' ? onPrimary : '#ffffff'
+  }) : null);
+  return /*#__PURE__*/_jsxs(View, {
+    ...props,
+    ref: ref
+    // Inside a row the row is already holding the inset and the alignment;
+    // repeating them here would indent the face past the text under it.
+    ,
+    className: inRow ? cn('self-start', className) : slots.avatar({
+      className
+    }),
+    style: [lifts ? {
+      marginTop: -Math.round(diameter / 2)
+    } : null, style],
+    children: [/*#__PURE__*/_jsx(View, {
+      className: slots.ring(),
+      style:
+      // With a face inside, the ring is the face plus its own border.
+      // With anything else there is nothing to measure, so the ring is
+      // given the size the face would have made.
+      children ? {
+        borderWidth: AVATAR_RING,
+        width: diameter + AVATAR_RING * 2,
+        height: diameter + AVATAR_RING * 2
+      } : {
+        borderWidth: AVATAR_RING
+      },
+      children: children ?? /*#__PURE__*/_jsx(Avatar, {
+        size: size,
+        source: source,
+        fallback: fallback,
+        imageProps: imageProps,
+        className: "border-0"
+      })
+    }), mark ? /*#__PURE__*/_jsx(View, {
+      className: "absolute bottom-0.5 end-0.5",
+      children: mark
+    }) : null]
+  });
+});
+PageHeaderAvatar.displayName = 'PageHeader.Avatar';
+/**
+ * The face, and whatever sits beside it. For the profile that puts its counts
+ * next to the picture rather than under the name.
+ */
+const PageHeaderRow = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  const {
+    variant,
+    align
+  } = usePageHeader('PageHeader.Row');
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
+    ref: ref,
+    className: pageHeaderVariants({
+      variant,
+      align
+    }).row({
+      className
+    }),
+    children: /*#__PURE__*/_jsx(PageHeaderRowContext.Provider, {
+      value: true,
+      children: children
+    })
+  });
+});
+PageHeaderRow.displayName = 'PageHeader.Row';
+/** The text block: the name, the handle, and anything under them. */
+const PageHeaderContent = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  const {
+    variant,
+    align
+  } = usePageHeader('PageHeader.Content');
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
+    ref: ref,
+    className: pageHeaderVariants({
+      variant,
+      align
+    }).content({
+      className
+    }),
+    children: textChildren(children)
+  });
+});
+PageHeaderContent.displayName = 'PageHeader.Content';
+
+/** Whose page it is. Announces itself as a heading. */
+const PageHeaderTitle = /*#__PURE__*/forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(Text, {
+  ...props,
+  ref: ref,
+  size: "xl",
+  weight: "semibold",
+  accessibilityRole: "header",
+  className: cn('text-foreground', className)
+}));
+PageHeaderTitle.displayName = 'PageHeader.Title';
+
+/** The handle, the email, the bio — the quiet line under the name. */
+const PageHeaderDescription = /*#__PURE__*/forwardRef(({
+  className,
+  ...props
+}, ref) => /*#__PURE__*/_jsx(Text, {
+  ...props,
+  ref: ref,
+  size: "sm",
+  muted: true,
+  className: className
+}));
+PageHeaderDescription.displayName = 'PageHeader.Description';
+/**
+ * One fact about the account — a link, a location, the month it was opened.
+ */
+const PageHeaderMeta = /*#__PURE__*/forwardRef(({
+  className,
+  icon,
+  children,
+  ...props
+}, ref) => {
+  const {
+    variant,
+    align
+  } = usePageHeader('PageHeader.Meta');
+  const muted = useCSSVariable('--color-muted-foreground');
+  return /*#__PURE__*/_jsxs(View, {
+    ...props,
+    ref: ref,
+    className: pageHeaderVariants({
+      variant,
+      align
+    }).meta({
+      className
+    }),
+    children: [icon ? /*#__PURE__*/_jsx(IconColorProvider, {
+      color: typeof muted === 'string' ? muted : undefined,
+      children: icon
+    }) : null, textChildren(children, text => /*#__PURE__*/_jsx(Text, {
+      size: "sm",
+      muted: true,
+      children: text
+    }))]
+  });
+});
+PageHeaderMeta.displayName = 'PageHeader.Meta';
+
+/** How a stats row reads its numbers out. */
+
+/**
+ * The row of counts.
+ *
+ * Centred and stacked, the counts take equal widths across the full row. Left
+ * to their content they are centred as a block but not as figures: "Followers"
+ * is twice the width of "Posts", so the middle count sits off the centre line
+ * the name and the buttons are on, and the row reads as very slightly wrong
+ * without it being obvious why.
+ */
+const PageHeaderStats = /*#__PURE__*/forwardRef(({
+  className,
+  layout = 'stacked',
+  divided,
+  children,
+  ...props
+}, ref) => {
+  const {
+    variant,
+    align
+  } = usePageHeader('PageHeader.Stats');
+  const stacked = layout === 'stacked';
+  const measured = stacked && align === 'center';
+
+  // React Native has no `:first-child`, so the rule between two counts
+  // cannot be a style rule. Place it on every count but the first.
+  const items = divided || measured ? Children.map(children, (child, index) => {
+    if (! /*#__PURE__*/isValidElement(child)) return child;
+    if (child.type !== PageHeaderStat) return child;
+    const next = {};
+    if (divided && child.props.divided === undefined) {
+      next.divided = index > 0;
+    }
+    if (measured) {
+      next.className = cn('flex-1', child.props.className);
+    }
+    return /*#__PURE__*/cloneElement(child, next);
+  }) : children;
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
+    ref: ref,
+    className: pageHeaderVariants({
+      variant,
+      align
+    }).stats({
+      className: cn(stacked ? 'gap-6' : 'gap-4', measured && 'w-full', className)
+    }),
+    children: /*#__PURE__*/_jsx(PageHeaderStatsContext.Provider, {
+      value: layout,
+      children: items
+    })
+  });
+});
+PageHeaderStats.displayName = 'PageHeader.Stats';
+/**
+ * One count. Announced as a single thing — "533 Followers" — because a figure
+ * and its label read apart are two pieces of nothing.
+ */
+const PageHeaderStat = /*#__PURE__*/forwardRef(({
+  className,
+  value,
+  label,
+  divided,
+  onPress,
+  accessibilityLabel,
+  ...props
+}, ref) => {
+  const layout = useContext(PageHeaderStatsContext);
+  const inline = layout === 'inline';
+  const spoken = accessibilityLabel ?? (isSpeakable(value) && isSpeakable(label) ? `${value} ${label}` : undefined);
+  const classes = cn(inline ? 'flex-row items-center gap-1' : 'items-center gap-0.5', divided && 'border-s border-border ps-4', className);
+  const body = /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Text, {
+      size: "sm",
+      weight: "semibold",
+      children: value
+    }), /*#__PURE__*/_jsx(Text, {
+      size: "sm",
+      muted: true,
+      children: label
+    })]
+  });
+  if (!onPress) {
+    return /*#__PURE__*/_jsx(View, {
+      ...props,
+      ref: ref,
+      accessible: true,
+      accessibilityLabel: spoken,
+      className: classes,
+      children: body
+    });
+  }
+  return /*#__PURE__*/_jsx(AnimatedPressable, {
+    ...props,
+    ref: ref,
+    accessibilityRole: "button",
+    accessibilityLabel: spoken,
+    onPress: onPress,
+    className: classes,
+    children: body
+  });
+});
+PageHeaderStat.displayName = 'PageHeader.Stat';
+
+/** Whether a node can be read into an accessibility label as it stands. */
+function isSpeakable(node) {
+  return typeof node === 'string' || typeof node === 'number';
+}
+/**
+ * What you can do about the account. Give the buttons `className="flex-1"` for
+ * the pair that splits the width evenly.
+ */
+const PageHeaderActions = /*#__PURE__*/forwardRef(({
+  className,
+  children,
+  ...props
+}, ref) => {
+  const {
+    variant,
+    align
+  } = usePageHeader('PageHeader.Actions');
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
+    ref: ref,
+    className: pageHeaderVariants({
+      variant,
+      align
+    }).actions({
+      className
+    }),
+    children: textChildren(children)
+  });
+});
+PageHeaderActions.displayName = 'PageHeader.Actions';
+export const PageHeader = Object.assign(PageHeaderRoot, {
+  Cover: PageHeaderCover,
+  Avatar: PageHeaderAvatar,
+  Row: PageHeaderRow,
+  Content: PageHeaderContent,
+  Title: PageHeaderTitle,
+  Description: PageHeaderDescription,
+  Meta: PageHeaderMeta,
+  Stats: PageHeaderStats,
+  Stat: PageHeaderStat,
+  Actions: PageHeaderActions
+});
+//# sourceMappingURL=index.js.map

package/lib/module/components/page-header/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Children","cloneElement","createContext","forwardRef","isValidElement","useContext","useMemo","Image","StyleSheet","View","LinearGradient","tv","useCSSVariable","AnimatedPressable","Text","textChildren","cn","BadgeCheckIcon","IconColorProvider","Avatar","AVATAR_SIZE_POINTS","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","COVER_HEIGHT","AVATAR_RING","BADGE_RATIO","GRADIENT","GRADIENT_FALLBACK","pageHeaderVariants","slots","root","cover","avatar","ring","row","content","meta","stats","actions","variants","variant","card","page","align","start","center","defaultVariants","PageHeaderContext","undefined","usePageHeader","component","context","Error","PageHeaderRowContext","PageHeaderStatsContext","PageHeaderRoot","className","children","props","ref","hasCover","toArray","some","child","type","PageHeaderCover","Provider","value","displayName","source","height","colors","alt","style","from","to","ramp","resizeMode","absoluteFill","accessible","accessibilityRole","accessibilityLabel","x","y","end","accessibilityElementsHidden","importantForAccessibility","PageHeaderAvatar","size","verified","badge","overlap","fallback","imageProps","inRow","primary","onPrimary","diameter","xl","lifts","mark","Math","round","color","checkColor","marginTop","borderWidth","width","PageHeaderRow","PageHeaderContent","PageHeaderTitle","weight","PageHeaderDescription","muted","PageHeaderMeta","icon","text","PageHeaderStats","layout","divided","stacked","measured","items","map","index","PageHeaderStat","next","label","onPress","inline","spoken","isSpeakable","classes","body","node","PageHeaderActions","PageHeader","Object","assign","Cover","Row","Content","Title","Description","Meta","Stats","Stat","Actions"],"sourceRoot":"../../../../src","sources":["components/page-header/index.tsx"],"mappings":"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","ignoreList":[]}

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

@@ -30,6 +30,7 @@ const RESTING_OPACITY = 0.7;
  */
 export const Skeleton = /*#__PURE__*/memo(function Skeleton({
   className,
+  style,
   label
 }) {
   const reducedMotion = useReducedMotion();
@@ -57,7 +58,7 @@ export const Skeleton = /*#__PURE__*/memo(function Skeleton({
     } : undefined,
     accessibilityElementsHidden: !announced,
     importantForAccessibility: announced ? 'auto' : 'no-hide-descendants',
-    style: animatedStyle,
+    style: [style, animatedStyle],
     className: cn('rounded-md bg-skeleton', className)
   });
 });

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

@@ -1 +1 @@
-{"version":3,"names":["memo","useEffect","Animated","cancelAnimation","useAnimatedStyle","useReducedMotion","useSharedValue","withRepeat","withTiming","cn","jsx","_jsx","PULSE_DURATION","PULSE_FLOOR","RESTING_OPACITY","Skeleton","className","label","reducedMotion","opacity","value","undefined","duration","animatedStyle","announced","View","accessibilityRole","accessibilityLabel","accessibilityState","busy","accessibilityElementsHidden","importantForAccessibility","style"],"sourceRoot":"../../../../src","sources":["components/skeleton/index.tsx"],"mappings":";;AAAA,SAASA,IAAI,EAAEC,SAAS,QAAQ,OAAO;AACvC,OAAOC,QAAQ,IACbC,eAAe,EACfC,gBAAgB,EAChBC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,EACVC,UAAU,QACL,yBAAyB;AAChC,SAASC,EAAE,QAAQ,mBAAgB;;AAEnC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACA,MAAMC,cAAc,GAAG,GAAG;AAC1B;AACA,MAAMC,WAAW,GAAG,IAAI;AACxB;AACA;AACA;AACA;AACA,MAAMC,eAAe,GAAG,GAAG;AAgB3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAQ,gBAAGf,IAAI,CAAC,SAASe,QAAQA,CAAC;EAC7CC,SAAS;EACTC;AACa,CAAC,EAAE;EAChB,MAAMC,aAAa,GAAGb,gBAAgB,CAAC,CAAC;EACxC,MAAMc,OAAO,GAAGb,cAAc,CAACY,aAAa,GAAGJ,eAAe,GAAG,CAAC,CAAC;EAEnEb,SAAS,CAAC,MAAM;IACd,IAAIiB,aAAa,EAAE;MACjBC,OAAO,CAACC,KAAK,GAAGN,eAAe;MAC/B,OAAOO,SAAS;IAClB;IACAF,OAAO,CAACC,KAAK,GAAG,CAAC;IACjBD,OAAO,CAACC,KAAK,GAAGb,UAAU,CACxBC,UAAU,CAACK,WAAW,EAAE;MAAES,QAAQ,EAAEV;IAAe,CAAC,CAAC,EACrD,CAAC,CAAC,EACF,IACF,CAAC;IACD,OAAO,MAAMT,eAAe,CAACgB,OAAO,CAAC;EACvC,CAAC,EAAE,CAACA,OAAO,EAAED,aAAa,CAAC,CAAC;EAE5B,MAAMK,aAAa,GAAGnB,gBAAgB,CAAC,OAAO;IAC5Ce,OAAO,EAAEA,OAAO,CAACC;EACnB,CAAC,CAAC,CAAC;EAEH,MAAMI,SAAS,GAAGP,KAAK,IAAI,IAAI;EAE/B,oBACEN,IAAA,CAACT,QAAQ,CAACuB,IAAI;IACZC,iBAAiB,EAAEF,SAAS,GAAG,aAAa,GAAGH,SAAU;IACzDM,kBAAkB,EAAEV,KAAM;IAC1BW,kBAAkB,EAAEJ,SAAS,GAAG;MAAEK,IAAI,EAAE;IAAK,CAAC,GAAGR,SAAU;IAC3DS,2BAA2B,EAAE,CAACN,SAAU;IACxCO,yBAAyB,EAAEP,SAAS,GAAG,MAAM,GAAG,qBAAsB;IACtEQ,KAAK,EAAET,aAAc;IACrBP,SAAS,EAAEP,EAAE,CAAC,wBAAwB,EAAEO,SAAS;EAAE,CACpD,CAAC;AAEN,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["memo","useEffect","Animated","cancelAnimation","useAnimatedStyle","useReducedMotion","useSharedValue","withRepeat","withTiming","cn","jsx","_jsx","PULSE_DURATION","PULSE_FLOOR","RESTING_OPACITY","Skeleton","className","style","label","reducedMotion","opacity","value","undefined","duration","animatedStyle","announced","View","accessibilityRole","accessibilityLabel","accessibilityState","busy","accessibilityElementsHidden","importantForAccessibility"],"sourceRoot":"../../../../src","sources":["components/skeleton/index.tsx"],"mappings":";;AAAA,SAASA,IAAI,EAAEC,SAAS,QAAQ,OAAO;AAEvC,OAAOC,QAAQ,IACbC,eAAe,EACfC,gBAAgB,EAChBC,gBAAgB,EAChBC,cAAc,EACdC,UAAU,EACVC,UAAU,QACL,yBAAyB;AAChC,SAASC,EAAE,QAAQ,mBAAgB;;AAEnC;AAAA,SAAAC,GAAA,IAAAC,IAAA;AACA,MAAMC,cAAc,GAAG,GAAG;AAC1B;AACA,MAAMC,WAAW,GAAG,IAAI;AACxB;AACA;AACA;AACA;AACA,MAAMC,eAAe,GAAG,GAAG;AAwB3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,QAAQ,gBAAGf,IAAI,CAAC,SAASe,QAAQA,CAAC;EAC7CC,SAAS;EACTC,KAAK;EACLC;AACa,CAAC,EAAE;EAChB,MAAMC,aAAa,GAAGd,gBAAgB,CAAC,CAAC;EACxC,MAAMe,OAAO,GAAGd,cAAc,CAACa,aAAa,GAAGL,eAAe,GAAG,CAAC,CAAC;EAEnEb,SAAS,CAAC,MAAM;IACd,IAAIkB,aAAa,EAAE;MACjBC,OAAO,CAACC,KAAK,GAAGP,eAAe;MAC/B,OAAOQ,SAAS;IAClB;IACAF,OAAO,CAACC,KAAK,GAAG,CAAC;IACjBD,OAAO,CAACC,KAAK,GAAGd,UAAU,CACxBC,UAAU,CAACK,WAAW,EAAE;MAAEU,QAAQ,EAAEX;IAAe,CAAC,CAAC,EACrD,CAAC,CAAC,EACF,IACF,CAAC;IACD,OAAO,MAAMT,eAAe,CAACiB,OAAO,CAAC;EACvC,CAAC,EAAE,CAACA,OAAO,EAAED,aAAa,CAAC,CAAC;EAE5B,MAAMK,aAAa,GAAGpB,gBAAgB,CAAC,OAAO;IAC5CgB,OAAO,EAAEA,OAAO,CAACC;EACnB,CAAC,CAAC,CAAC;EAEH,MAAMI,SAAS,GAAGP,KAAK,IAAI,IAAI;EAE/B,oBACEP,IAAA,CAACT,QAAQ,CAACwB,IAAI;IACZC,iBAAiB,EAAEF,SAAS,GAAG,aAAa,GAAGH,SAAU;IACzDM,kBAAkB,EAAEV,KAAM;IAC1BW,kBAAkB,EAAEJ,SAAS,GAAG;MAAEK,IAAI,EAAE;IAAK,CAAC,GAAGR,SAAU;IAC3DS,2BAA2B,EAAE,CAACN,SAAU;IACxCO,yBAAyB,EAAEP,SAAS,GAAG,MAAM,GAAG,qBAAsB;IACtER,KAAK,EAAE,CAACA,KAAK,EAAEO,aAAa,CAAE;IAC9BR,SAAS,EAAEP,EAAE,CAAC,wBAAwB,EAAEO,SAAS;EAAE,CACpD,CAAC;AAEN,CAAC,CAAC","ignoreList":[]}

package/lib/module/index.js

@@ -84,6 +84,7 @@ export { OtpInput } from "./components/otp-input/index.js";
 export { SearchBar } from "./components/search-bar/index.js";
 export { Panelside, usePanelside } from "./components/panelside/index.js";
 export { Pagination, paginationRange } from "./components/pagination/index.js";
+export { PageHeader } from "./components/page-header/index.js";
 export { PieChart, usePieChart } from "./components/pie-chart/index.js";
 export { LiveLineChart, useLiveLineChart } from "./components/live-line-chart/index.js";
 export { BubbleChart, useBubbleChart } from "./components/bubble-chart/index.js";