jfs-components 0.0.1

package/src/components/UpiHandle/UpiHandle.mdx

@@ -0,0 +1,73 @@
+import { Meta, Story, Canvas, PureArgsTable as ArgsTable } from '@storybook/addon-docs/blocks';
+import * as UpiHandleStories from './UpiHandle.stories';
+import UpiHandle from './UpiHandle';
+import { AccessibilitySection, AnatomySection, UsageConstraintsSection } from '../docs/DocSections';
+
+<Meta of={UpiHandleStories} />
+
+# UpiHandle
+
+UpiHandle pill that mirrors the Figma "UPI Handle" component.
+
+## Available Collections and Modes
+
+This component uses the following design token collections. Each collection supports multiple modes that can be configured via the `modes` prop.
+
+### Color Mode
+- **Modes:** Light | Dark
+- **Default:** Light
+## Usage
+
+<Canvas>
+  <Story of={UpiHandleStories.Default} />
+</Canvas>
+
+
+<AccessibilitySection
+  items={[
+    'Set `accessibilityLabel` with the handle text; default is `UPI handle {label}`.',
+    'Keep the component non-interactive; wrap it in a Pressable if you need tap behavior.',
+    'Ensure the trailing icon is decorative unless it opens an action elsewhere.',
+  ]}
+/>
+
+<AnatomySection>
+  <ul>
+    <li><strong>Avatar</strong> — circular image on the left.</li>
+    <li><strong>Label</strong> — UPI handle text centered.</li>
+    <li><strong>Icon</strong> — optional QR/scan icon on the right.</li>
+  </ul>
+</AnatomySection>
+
+<UsageConstraintsSection
+  items={[
+    'Keep labels short so they do not truncate; expose the full handle via accessibility label.',
+    'Use `modes` to align pill height with adjacent inputs/buttons.',
+    'Avoid stacking multiple pills without spacing—place them in a vertical list or wrap.',
+  ]}
+/>
+## Props
+
+<ArgsTable of={UpiHandle} />
+
+## Design Tokens
+
+This component uses the following design tokens, resolved through `getVariableByName`:
+
+- **`upiHandle/background`**
+- **`upiHandle/gap`**
+- **`upiHandle/icon/color`**
+- **`upiHandle/icon/size`**
+- **`upiHandle/image/radius`**
+- **`upiHandle/image/size`**
+- **`upiHandle/label/color`**
+- **`upiHandle/label/fontFamily`**
+- **`upiHandle/label/fontSize`**
+- **`upiHandle/label/fontWeight`**
+- **`upiHandle/label/lineHeight`**
+- **`upiHandle/padding/left`**
+- **`upiHandle/padding/right`**
+- **`upiHandle/padding/vertical`**
+- **`upiHandle/radius`**
+
+All tokens support mode-based theming through the `modes` prop.

package/src/components/UpiHandle/UpiHandle.tsx

@@ -0,0 +1,192 @@
+import React, { useState } from 'react'
+import { Pressable, View, Text, Image, type ViewStyle, type TextStyle, type ImageStyle } from 'react-native'
+import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
+import Icon from '../../icons/Icon'
+
+// Default static asset from the component folder.
+// Consumers can override the image via the `avatarSource` prop if needed.
+const DEFAULT_AVATAR_IMAGE = require('./Image.png')
+
+type UpiHandleProps = {
+  label?: string;
+  modes?: Record<string, any>;
+  showIcon?: boolean;
+  iconName?: string;
+  accessibilityLabel?: string;
+  accessibilityHint?: string;
+  onPress?: () => void;
+  disabled?: boolean;
+} & Omit<React.ComponentProps<typeof View>, 'style' | 'accessibilityRole' | 'accessibilityLabel' | 'accessibilityHint'>;
+
+/**
+ * UpiHandle pill that mirrors the Figma "UPI Handle" component.
+ *
+ * Layout:
+ *  - Circular image/avatar on the left
+ *  - Label text in the center
+ *  - Optional QR-code style icon on the right
+ *
+ * All visual styling is resolved from Figma variables via `getVariableByName`
+ * using a `modes` configuration object, matching the rest of this library.
+ *
+ * @component
+ * @param {Object} props
+ * @param {string} [props.label="Label"] - UPI handle text to display.
+ * @param {Object} [props.modes={}] - Modes object passed directly to `getVariableByName`.
+ * @param {boolean} [props.showIcon=true] - Toggles the trailing icon visibility.
+ * @param {string} [props.iconName='ic_scan_qr_code'] - Icon name from the actions set (e.g. 'ic_qr_code', 'ic_scan_qr_code').
+ * @param {string} [props.accessibilityLabel] - Accessibility label for screen readers. If not provided, uses label
+ * @param {string} [props.accessibilityHint] - Additional accessibility hint for screen readers
+ */
+function UpiHandle({
+  label = 'Label',
+  modes = {},
+  showIcon = true,
+  iconName = 'ic_scan_qr_code',
+  onPress,
+  disabled,
+  accessibilityLabel,
+  accessibilityHint,
+  ...rest
+}: UpiHandleProps) {
+  // Token‑driven container styling
+  const backgroundColor =
+    getVariableByName('upiHandle/background', modes) || '#f5f5f5'
+  const radius = getVariableByName('upiHandle/radius', modes) || 99999
+  const paddingLeft =
+    getVariableByName('upiHandle/padding/left', modes) || 4
+  const paddingRight =
+    getVariableByName('upiHandle/padding/right', modes) || 14
+  const paddingVertical =
+    getVariableByName('upiHandle/padding/vertical', modes) || 3
+  const gap = getVariableByName('upiHandle/gap', modes) || 6
+
+  // Avatar
+  const avatarSize =
+    getVariableByName('upiHandle/image/size', modes) || 23
+  const avatarRadius =
+    getVariableByName('upiHandle/image/radius', modes) || 99999
+
+  // Label typography
+  const labelColor =
+    getVariableByName('upiHandle/label/color', modes) || '#0d0d0f'
+  const labelFontSize =
+    getVariableByName('upiHandle/label/fontSize', modes) || 12
+  const labelLineHeight =
+    getVariableByName('upiHandle/label/lineHeight', modes) || 23
+  const labelFontFamily =
+    getVariableByName('upiHandle/label/fontFamily', modes) || 'System'
+  const labelFontWeightRaw =
+    getVariableByName('upiHandle/label/fontWeight', modes) || 500
+  const labelFontWeight =
+    typeof labelFontWeightRaw === 'number'
+      ? labelFontWeightRaw.toString()
+      : labelFontWeightRaw
+
+  // Icon sizing
+  const iconColor =
+    getVariableByName('upiHandle/icon/color', modes) || '#0d0d0f'
+  const iconSize =
+    getVariableByName('upiHandle/icon/size', modes) || 12
+
+  const containerStyle: ViewStyle = {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor,
+    paddingLeft,
+    paddingRight,
+    paddingVertical,
+    borderRadius: radius,
+    gap,
+  }
+
+  const avatarBaseStyle: ImageStyle = {
+    width: avatarSize,
+    height: avatarSize,
+    borderRadius: avatarRadius,
+    overflow: 'hidden',
+  }
+
+  const labelBaseStyle: TextStyle = {
+    color: labelColor,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    fontFamily: labelFontFamily,
+    fontWeight: labelFontWeight,
+  }
+
+  const iconPlaceholderStyle = {
+    width: iconSize,
+    height: iconSize
+  }
+
+  // Use provided accessibilityLabel or fall back to label
+  const defaultAccessibilityLabel = accessibilityLabel || `UPI handle ${label}`
+  const [isPressed, setIsPressed] = useState(false)
+  const [isFocused, setIsFocused] = useState(false)
+  const pressedStyle = isPressed ? { transform: [{ scale: 0.98 }] } : null
+  const focusStyle = isFocused ? { borderWidth: 1, borderColor: '#222' } : null
+
+  const Wrapper: any = (rest as any)?.onPress || onPress ? Pressable : View
+
+  return (
+    <Wrapper
+      style={[containerStyle, pressedStyle, focusStyle]}
+      accessibilityRole="text"
+      accessibilityLabel={defaultAccessibilityLabel}
+      {...(accessibilityHint !== undefined ? { accessibilityHint } : {})}
+      onPress={onPress}
+      disabled={(rest as any)?.disabled ?? disabled}
+      onPressIn={(e: any) => {
+        setIsPressed(true)
+          ; (rest as any)?.onPressIn?.(e)
+      }}
+      onPressOut={(e: any) => {
+        setIsPressed(false)
+          ; (rest as any)?.onPressOut?.(e)
+      }}
+      onFocus={(e: any) => {
+        setIsFocused(true)
+          ; (rest as any)?.onFocus?.(e)
+      }}
+      onBlur={(e: any) => {
+        setIsFocused(false)
+          ; (rest as any)?.onBlur?.(e)
+      }}
+      {...rest}
+    >
+      <Image
+        source={DEFAULT_AVATAR_IMAGE}
+        style={avatarBaseStyle}
+        resizeMode="cover"
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no"
+      />
+      <Text
+        style={labelBaseStyle}
+        numberOfLines={1}
+        ellipsizeMode="tail"
+        accessibilityElementsHidden={true}
+        importantForAccessibility="no"
+      >
+        {label}
+      </Text>
+      {showIcon && (
+        <Icon
+          name={iconName}
+          size={iconSize}
+          color={iconColor}
+          style={iconPlaceholderStyle}
+          accessibilityElementsHidden={true}
+          importantForAccessibility="no"
+        />
+      )}
+    </Wrapper>
+  )
+}
+
+export default UpiHandle
+
+
+

package/src/components/c4b0de0906123cdb35951bb4102c213e3c3550db.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 16 3" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M1.5 0C1.20333 0 0.913319 0.0879731 0.666645 0.252795C0.419972 0.417617 0.227713 0.651886 0.114181 0.925975C0.000649929 1.20006 -0.0290551 1.50166 0.0288228 1.79264C0.0867006 2.08361 0.229562 2.35088 0.43934 2.56066C0.649119 2.77044 0.916394 2.9133 1.20737 2.97118C1.49834 3.02906 1.79994 2.99935 2.07403 2.88582C2.34812 2.77229 2.58238 2.58003 2.74721 2.33335C2.91203 2.08668 3 1.79667 3 1.5C3 1.10218 2.84197 0.720644 2.56066 0.43934C2.27936 0.158035 1.89783 0 1.5 0V0ZM8 0C7.70333 0 7.41332 0.0879731 7.16665 0.252795C6.91997 0.417617 6.72771 0.651886 6.61418 0.925975C6.50065 1.20006 6.47095 1.50166 6.52882 1.79264C6.5867 2.08361 6.72956 2.35088 6.93934 2.56066C7.14912 2.77044 7.41639 2.9133 7.70737 2.97118C7.99834 3.02906 8.29994 2.99935 8.57403 2.88582C8.84812 2.77229 9.08238 2.58003 9.24721 2.33335C9.41203 2.08668 9.5 1.79667 9.5 1.5C9.5 1.10218 9.34197 0.720644 9.06066 0.43934C8.77936 0.158035 8.39783 0 8 0ZM14.5 0C14.2033 0 13.9133 0.0879731 13.6666 0.252795C13.42 0.417617 13.2277 0.651886 13.1142 0.925975C13.0007 1.20006 12.9709 1.50166 13.0288 1.79264C13.0867 2.08361 13.2296 2.35088 13.4393 2.56066C13.6491 2.77044 13.9164 2.9133 14.2074 2.97118C14.4983 3.02906 14.7999 2.99935 15.074 2.88582C15.3481 2.77229 15.5824 2.58003 15.7472 2.33335C15.912 2.08668 16 1.79667 16 1.5C16 1.10218 15.842 0.720644 15.5607 0.43934C15.2794 0.158035 14.8978 0 14.5 0Z" fill="var(--fill-0, #141414)"/>
+</svg>

package/src/components/ce4bf7a690c9f61024e89918adb592bfd7ebb3bb.svg

@@ -0,0 +1,12 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Logo">
+<path id="circle" d="M0 16C0 7.16344 7.16344 0 16 0V0C24.8366 0 32 7.16344 32 16V16C32 24.8366 24.8366 32 16 32V32C7.16344 32 0 24.8366 0 16V16Z" fill="url(#paint0_linear_614_9329)"/>
+<path id="text" d="M11.3039 9.64982H10.7705C9.75837 9.64982 9.20548 10.2205 9.20548 11.3621V16.8679C9.20548 18.2854 8.72667 18.7829 7.60341 18.7829C6.71985 18.7829 6.00192 18.3959 5.43096 17.6963C5.37555 17.6229 4.21615 18.1749 4.21615 19.5378C4.21615 21.0107 5.59629 21.9132 8.15689 21.9132C11.268 21.9132 12.9077 20.3479 12.9077 16.9233V11.3621C12.9059 10.222 12.3536 9.64982 11.3039 9.64982ZM23.7039 12.3381C20.6837 12.3381 18.6769 14.2531 18.6769 17.1085C18.6769 20.0365 20.6096 21.915 23.6482 21.915C26.6674 21.915 28.6556 20.0365 28.6556 17.1274C28.6573 14.2531 26.6867 12.3381 23.7039 12.3381ZM23.6668 19.206C22.4879 19.206 21.6781 18.3408 21.6781 17.107C21.6781 15.8922 22.5077 15.0264 23.6668 15.0264C24.8259 15.0264 25.6553 15.8922 25.6553 17.1257C25.6556 18.3221 24.8087 19.206 23.6671 19.206H23.6668ZM16.1252 12.43H15.7563C14.8547 12.43 14.1735 12.8531 14.1735 14.1426V20.0347C14.1735 21.3423 14.8366 21.7476 15.7936 21.7476H16.1622C17.0644 21.7476 17.7086 21.3052 17.7086 20.0347V14.1426C17.7086 12.8169 17.0831 12.43 16.1252 12.43ZM15.9228 8.15885C14.7809 8.15885 14.063 8.8036 14.063 9.81634C14.063 10.8469 14.7999 11.4913 15.9779 11.4913C17.1196 11.4913 17.8378 10.8469 17.8378 9.81634C17.8378 8.78582 17.1012 8.15885 15.9228 8.15885Z" fill="var(--fill-0, white)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_614_9329" x1="11.085" y1="9.25442" x2="22.3469" y2="15.7638" gradientUnits="userSpaceOnUse">
+<stop stop-color="#F9D9AF"/>
+<stop offset="1" stop-color="#BD8A4A"/>
+</linearGradient>
+</defs>
+</svg>

package/src/components/d03eb5c26442dd98ddb7f0b85b5cf0872ecb8c53.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M8.00387 4.75376e-06C7.13834 0.000930009 6.29013 0.242543 5.55403 0.697838C4.81793 1.15313 4.22296 1.80417 3.83561 2.57818C3.44826 3.35219 3.28379 4.21867 3.3606 5.08079C3.4374 5.9429 3.75245 6.76666 4.27053 7.46L0.197199 11.5267C0.134713 11.5886 0.0851171 11.6624 0.0512713 11.7436C0.0174255 11.8249 0 11.912 0 12C0 12.088 0.0174255 12.1751 0.0512713 12.2564C0.0851171 12.3376 0.134713 12.4114 0.197199 12.4733C0.259174 12.5358 0.332908 12.5854 0.414148 12.6193C0.495387 12.6531 0.582524 12.6705 0.670532 12.6705C0.75854 12.6705 0.845677 12.6531 0.926917 12.6193C1.00816 12.5854 1.08189 12.5358 1.14387 12.4733L5.21053 8.4C5.80231 8.84384 6.49112 9.14063 7.22016 9.26592C7.9492 9.3912 8.69757 9.34138 9.40357 9.12056C10.1096 8.89975 10.753 8.51427 11.2807 7.99591C11.8084 7.47755 12.2053 6.84116 12.4388 6.13923C12.6722 5.4373 12.7354 4.68994 12.6232 3.95878C12.511 3.22761 12.2266 2.5336 11.7934 1.93397C11.3602 1.33433 10.7907 0.846267 10.1318 0.510012C9.47297 0.173757 8.74359 -0.00105099 8.00387 4.75376e-06V4.75376e-06ZM8.00387 8C7.34459 8 6.70013 7.80451 6.15197 7.43824C5.6038 7.07196 5.17656 6.55137 4.92427 5.94228C4.67197 5.3332 4.60596 4.66297 4.73458 4.01637C4.8632 3.36977 5.18067 2.77582 5.64684 2.30965C6.11302 1.84347 6.70696 1.526 7.35356 1.39739C8.00017 1.26877 8.67039 1.33478 9.27948 1.58707C9.88856 1.83937 10.4092 2.26661 10.7754 2.81477C11.1417 3.36293 11.3372 4.0074 11.3372 4.66667C11.3372 5.10441 11.251 5.53786 11.0835 5.94228C10.9159 6.3467 10.6704 6.71416 10.3609 7.02369C10.0514 7.33322 9.6839 7.57875 9.27948 7.74627C8.87506 7.91379 8.44161 8 8.00387 8V8Z" fill="var(--fill-0, #24262B)"/>
+</svg>

package/src/components/docs/DocSections.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+type SectionProps = {
+  title: string;
+  id?: string;
+  items?: string[];
+  children?: React.ReactNode;
+}
+
+function Section({ title, id, items = [], children }: SectionProps) {
+  const sectionId = id || title.toLowerCase().replace(/\s+/g, '-')
+
+  return (
+    <section aria-labelledby={`${sectionId}-title`} style={{ marginTop: 24 }}>
+      <h2 id={`${sectionId}-title`}>{title}</h2>
+      {items.length ? (
+        <ul>
+          {items.map((item) => (
+            <li key={item}>{item}</li>
+          ))}
+        </ul>
+      ) : null}
+      {children}
+    </section>
+  )
+}
+
+export function AccessibilitySection(props: Omit<SectionProps, 'title'>) {
+  return <Section title="Accessibility" {...props} />
+}
+
+export function AnatomySection(props: Omit<SectionProps, 'title'>) {
+  return <Section title="Anatomy" {...props} />
+}
+
+export function UsageConstraintsSection(props: Omit<SectionProps, 'title'>) {
+  return <Section title="Usage Constraints" {...props} />
+}
+
+export default Section

package/src/components/e090008060ec2cad5b9fe01a0be64f0436a0edcc.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M9.00435 5.34799e-06C8.03063 0.00104626 7.07639 0.272861 6.24828 0.785068C5.42017 1.29728 4.75083 2.02969 4.31506 2.90045C3.87929 3.77121 3.69427 4.74601 3.78067 5.71588C3.86708 6.68576 4.22151 7.61249 4.80435 8.3925L0.221849 12.9675C0.151552 13.0372 0.0957567 13.1202 0.0576802 13.2116C0.0196037 13.303 0 13.401 0 13.5C0 13.599 0.0196037 13.697 0.0576802 13.7884C0.0957567 13.8798 0.151552 13.9628 0.221849 14.0325C0.291571 14.1028 0.374522 14.1586 0.465916 14.1967C0.557311 14.2348 0.65534 14.2544 0.754349 14.2544C0.853358 14.2544 0.951387 14.2348 1.04278 14.1967C1.13418 14.1586 1.21713 14.1028 1.28685 14.0325L5.86185 9.45001C6.5276 9.94932 7.30251 10.2832 8.12268 10.4242C8.94285 10.5651 9.78477 10.5091 10.579 10.2606C11.3733 10.0122 12.0971 9.57855 12.6908 8.9954C13.2845 8.41224 13.731 7.69631 13.9936 6.90664C14.2562 6.11697 14.3273 5.27618 14.2011 4.45362C14.0749 3.63106 13.7549 2.8503 13.2676 2.17571C12.7803 1.50113 12.1396 0.95205 11.3983 0.573763C10.6571 0.195476 9.83654 -0.00118236 9.00435 5.34799e-06V5.34799e-06ZM9.00435 9.00001C8.26267 9.00001 7.53764 8.78007 6.92096 8.36802C6.30428 7.95596 5.82363 7.37029 5.5398 6.68507C5.25597 5.99984 5.18171 5.24585 5.3264 4.51842C5.4711 3.79099 5.82825 3.1228 6.3527 2.59835C6.87715 2.07391 7.54533 1.71676 8.27276 1.57206C9.00019 1.42737 9.75419 1.50163 10.4394 1.78546C11.1246 2.06929 11.7103 2.54993 12.1224 3.16662C12.5344 3.7833 12.7543 4.50833 12.7543 5.25001C12.7543 5.74246 12.6574 6.2301 12.4689 6.68507C12.2804 7.14004 12.0042 7.55344 11.656 7.90166C11.3078 8.24988 10.8944 8.5261 10.4394 8.71455C9.98444 8.90301 9.49681 9.00001 9.00435 9.00001V9.00001Z" fill="var(--fill-0, #24262B)"/>
+</svg>

package/src/components/e445d95f528295fe9e16d4a8e5f40128ccfabee9.svg

@@ -0,0 +1,3 @@
+<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 11 2" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Vector" d="M1 0C0.802219 0 0.608879 0.0586487 0.44443 0.16853C0.279981 0.278412 0.151809 0.43459 0.0761209 0.617317C0.000433286 0.800043 -0.0193701 1.00111 0.0192152 1.19509C0.0578004 1.38907 0.153041 1.56725 0.292894 1.70711C0.432746 1.84696 0.610929 1.9422 0.80491 1.98079C0.998891 2.01937 1.19996 1.99957 1.38268 1.92388C1.56541 1.84819 1.72159 1.72002 1.83147 1.55557C1.94135 1.39112 2 1.19778 2 1C2 0.734784 1.89464 0.480429 1.70711 0.292893C1.51957 0.105357 1.26522 0 1 0V0ZM5.33333 0C5.13555 0 4.94221 0.0586487 4.77776 0.16853C4.61331 0.278412 4.48514 0.43459 4.40945 0.617317C4.33377 0.800043 4.31396 1.00111 4.35255 1.19509C4.39113 1.38907 4.48637 1.56725 4.62623 1.70711C4.76608 1.84696 4.94426 1.9422 5.13824 1.98079C5.33222 2.01937 5.53329 1.99957 5.71602 1.92388C5.89874 1.84819 6.05492 1.72002 6.1648 1.55557C6.27469 1.39112 6.33333 1.19778 6.33333 1C6.33333 0.734784 6.22798 0.480429 6.04044 0.292893C5.8529 0.105357 5.59855 0 5.33333 0ZM9.66667 0C9.46889 0 9.27555 0.0586487 9.1111 0.16853C8.94665 0.278412 8.81848 0.43459 8.74279 0.617317C8.6671 0.800043 8.6473 1.00111 8.68588 1.19509C8.72447 1.38907 8.81971 1.56725 8.95956 1.70711C9.09941 1.84696 9.2776 1.9422 9.47158 1.98079C9.66556 2.01937 9.86662 1.99957 10.0494 1.92388C10.2321 1.84819 10.3883 1.72002 10.4981 1.55557C10.608 1.39112 10.6667 1.19778 10.6667 1C10.6667 0.734784 10.5613 0.480429 10.3738 0.292893C10.1862 0.105357 9.93188 0 9.66667 0Z" fill="var(--fill-0, #24262B)"/>
+</svg>

package/src/components/index.ts

@@ -0,0 +1,27 @@
+export { default as AppBar } from './AppBar/AppBar';
+export { default as Avatar, type AvatarProps } from './Avatar/Avatar';
+export { default as AvatarGroup } from './AvatarGroup/AvatarGroup';
+export { default as Badge } from './Badge/Badge';
+export { default as BottomNav } from './BottomNav/BottomNav';
+export { default as BottomNavItem } from './BottomNavItem/BottomNavItem';
+export { default as Button, type ButtonProps } from './Button/Button';
+export { default as Card } from './Card/Card';
+export { default as CardFeedback } from './CardFeedback/CardFeedback';
+export { default as Disclaimer } from './Disclaimer/Disclaimer';
+export { default as Drawer } from './Drawer/Drawer';
+export { default as FilterBar } from './FilterBar/FilterBar';
+export { default as IconButton } from './IconButton/IconButton';
+export { default as IconCapsule } from './IconCapsule/IconCapsule';
+export { default as LazyList } from './LazyList/LazyList';
+export { default as ListGroup } from './ListGroup/ListGroup';
+export { default as ListItem } from './ListItem/ListItem';
+export { default as MediaCard } from './MediaCard/MediaCard';
+export { default as MoneyValue } from './MoneyValue/MoneyValue';
+export { default as PageTitle } from './PageTitle/PageTitle';
+export { default as Section } from './Section/Section';
+export { default as Stepper } from './Stepper/Stepper';
+export { Step } from './Stepper/Step';
+export { StepLabel } from './Stepper/StepLabel';
+export { default as TextInput } from './TextInput/TextInput';
+export { Tooltip } from './Tooltip/Tooltip';
+export { default as UpiHandle } from './UpiHandle/UpiHandle';