### Tabs Component Examples in TSX Source: https://context7.com/srcube/srcube-taro/llms.txt Demonstrates the usage of the Tabs component for organizing content into distinct views. Includes examples for basic tab setup, controlled tabs using state, and disabling individual tabs. The component relies on `@srcube-taro/ui` for its implementation. ```tsx import { Tabs, TabsList, Tab, TabPanel } from '@srcube-taro/ui' import { View, Text } from '@tarojs/components' import { useState } from 'react' function TabsExamples() { const [activeTab, setActiveTab] = useState('tab1') return ( <> {/* Basic tabs */} Tab 1 Tab 2 Tab 3 Content for Tab 1 Content for Tab 2 Content for Tab 3 {/* Controlled tabs */} Home Profile Settings Home content Profile content Settings content {/* Disabled tab */} Enabled Disabled ) } ``` -------------------------------- ### Textarea Component Examples in TSX Source: https://context7.com/srcube/srcube-taro/llms.txt Demonstrates the functionality of the Textarea component, offering multi-line text input with features like character count and auto-resizing. Examples cover basic usage, setting maximum length, fixed and auto heights, disabling the input, and error state handling. The component is sourced from `@srcube-taro/ui`. ```tsx import { Textarea } from '@srcube-taro/ui' import { useState } from 'react' function TextareaExamples() { const [text, setText] = useState('') const [comment, setComment] = useState('') return ( <> {/* Basic textarea */}

setText(e.detail.value)}
      />

{/* Textarea with max length */}
      <Textarea
        placeholder="Max 200 characters"
        maxlength={200}
        showCount
        value={comment}
        onInput={(e) => setComment(e.detail.value)}
      />

{/* Textarea with fixed height */}
      <Textarea
        placeholder="Fixed height textarea"
        rows={5}
        value={text}
        onInput={(e) => setText(e.detail.value)}
      />

{/* Auto-height textarea */}
      <Textarea
        placeholder="Auto height"
        autoHeight
        value={text}
        onInput={(e) => setText(e.detail.value)}
      />

{/* Disabled textarea */}
      <Textarea
        placeholder="Disabled"
        isDisabled
        value="Cannot edit this text"
      />

{/* Textarea with error state */}
      <Textarea
        placeholder="With validation"
        isInvalid={text.length > 100}
        errorMessage={text.length > 100 ? 'Text is too long' : ''}
        value={text}
        onInput={(e) => setText(e.detail.value)}
      />
    </>
  )
}

```

--------------------------------

### Basic Dialog Example - TypeScript/React

Source: https://context7.com/srcube/srcube-taro/llms.txt

Demonstrates the basic usage of the Dialog component, including opening, closing, and setting a simple title and content. It relies on the `useDisclosure` hook for state management and imports necessary components from '@srcube-taro/ui'.

```tsx
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogBody,
  DialogFooter,
  useDisclosure,
  Button
} from '@srcube-taro/ui'
import { useState } from 'react'

function DialogExamples() {
  const basic = useDisclosure()
  const colors = useDisclosure()
  const asyncDialog = useDisclosure()
  const i18nDialog = useDisclosure()
  const custom = useDisclosure()

const [color, setColor] = useState('primary')

const handleAsyncAction = async () => {
    await new Promise(resolve => setTimeout(resolve, 3000))
    console.log('Async action completed')
  }

return (
    <>
      {/* Basic dialog with preset title and content */}
      <Button onTap={basic.onOpen}>Open Dialog</Button>
      <Dialog
        isOpen={basic.isOpen}
        onOpenChange={basic.onOpenChange}
        title="Confirmation"
      >
        <DialogContent>
          Are you sure you want to proceed?
        </DialogContent>
      </Dialog>

{/* Dialog with color variants */}
      <Button onTap={() => { setColor('danger'); colors.onOpen() }}>
        Delete Item
      </Button>
      <Dialog
        isOpen={colors.isOpen}
        onOpenChange={colors.onOpenChange}
        title="Delete Confirmation"
        color={color}
      >
        <DialogContent>
          This action cannot be undone.
        </DialogContent>
      </Dialog>

{/* Dialog with async actions (auto loading) */}
      <Button onTap={asyncDialog.onOpen}>Async Actions</Button>
      <Dialog
        isOpen={asyncDialog.isOpen}
        onOpenChange={asyncDialog.onOpenChange}
        title="Save Changes"
        onCancel={handleAsyncAction}
        onConfirm={handleAsyncAction}
      >
        <DialogContent>
          Buttons will show loading state during async operations.
        </DialogContent>
      </Dialog>

{/* Dialog with i18n support */}
      <Button onTap={i18nDialog.onOpen}>中文对话框</Button>
      <Dialog
        isOpen={i18nDialog.isOpen}
        onOpenChange={i18nDialog.onOpenChange}
        title="确认"
        locale="zh-CN"
      >
        <DialogContent>
          这是一个支持国际化的对话框
        </DialogContent>
      </Dialog>

{/* Dialog with custom action buttons */}
      <Dialog
        isOpen={asyncDialog.isOpen}
        onOpenChange={asyncDialog.onOpenChange}
        title="Custom Actions"
        cancelContent="Not Now"
        confirmContent="Yes, Continue"
      >
        <DialogContent>Custom button text</DialogContent>
      </Dialog>

{/* Dialog with fully custom content */}
      <Button onTap={custom.onOpen}>Custom Dialog</Button>
      <Dialog
        isOpen={custom.isOpen}
        onOpenChange={custom.onOpenChange}
      >
        <DialogContent>
          <DialogHeader className="text-lg font-bold text-primary">
            Custom Header
          </DialogHeader>
          <DialogBody className="py-4">
            Fully customizable dialog with slots
          </DialogBody>
          <DialogFooter className="flex justify-end gap-2">
            <Button variant="outline" onTap={custom.onClose}>Cancel</Button>
            <Button color="primary" onTap={custom.onClose}>Confirm</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </>
  )
}

```

--------------------------------

### Switch Component Examples - TypeScript

Source: https://context7.com/srcube/srcube-taro/llms.txt

Demonstrates various configurations of the Switch component, including custom icons, content placement, colors, loading states, and disabled functionality. It utilizes the `@srcube-taro/ui` library and basic React hooks.

```tsx
import { Switch } from '@srcube-taro/ui'
import { View } from '@tarojs/components'
import { useState } from 'react'

function SwitchExamples() {
  const [enabled, setEnabled] = useState(false)
  const [notifications, setNotifications] = useState(true)

return (
    <>
      {/* Basic switch */}
      <Switch>
        Enable feature
      </Switch>

{/* Controlled switch */}
      <Switch
        isSelected={enabled}
        onChange={(e) => setEnabled(e.detail.value)}
      >
        Dark mode
      </Switch>

{/* Switch with colors */}
      <Switch color="primary" isSelected>
        Primary color
      </Switch>
      <Switch color="success" isSelected>
        Success color
      </Switch>
      <Switch color="danger" isSelected>
        Danger color
      </Switch>

{/* Switch with loading state */}
      <Switch isLoading>
        Loading...
      </Switch>

{/* Switch with custom thumb icon */}
      <Switch
        thumbIcon={({ isSelected }) => (
          <View className={isSelected ? "i-[ion--checkmark]" : "i-[ion--close]"} />
        )}
        isSelected={notifications}
        onChange={(e) => setNotifications(e.detail.value)}
      >
        Push notifications
      </Switch>

{/* Switch with start/end content */}
      <Switch
        startContent={<View className="i-[ion--moon]" />}
        endContent={<View className="i-[ion--sunny]" />}
      >
        Theme
      </Switch>

{/* Disabled switch */}
      <Switch isDisabled>
        Disabled
      </Switch>
    </>
  )
}

```

--------------------------------

### useDisclosure Hook Examples - TypeScript

Source: https://context7.com/srcube/srcube-taro/llms.txt

Demonstrates the use of the `useDisclosure` hook for managing the open/close state of disclosure components. It shows basic usage, default open states, and controlled modes with callbacks for state changes.

```tsx
import { useDisclosure } from '@srcube-taro/ui'
import { Modal, ModalContent, Button } from '@srcube-taro/ui'

function UseDisclosureExample() {
  // Basic usage
  const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure()

// With default open state
  const defaultOpen = useDisclosure({ defaultOpen: true })

// Controlled mode with callbacks
  const controlled = useDisclosure({
    isOpen: false,
    onOpen: () => console.log('Modal opened'),
    onClose: () => console.log('Modal closed'),
    onChange: (isOpen) => console.log('State changed:', isOpen),
  })

return (
    <>
      {/* Basic usage */}
      <Button onTap={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
        <ModalContent>
          <Button onTap={onClose}>Close</Button>
        </ModalContent>
      </Modal>

{/* Toggle functionality */}
      <Button onTap={controlled.onOpenChange}>
        {controlled.isOpen ? 'Close' : 'Open'}
      </Button>
    </>
  )
}

```

--------------------------------

### Drawer Component Examples in React (TypeScript)

Source: https://context7.com/srcube/srcube-taro/llms.txt

Demonstrates the usage of the Drawer component for slide-in panels with customizable placement (left, right, bottom). It utilizes the useDisclosure hook for managing open/close states and integrates with @srcube-taro/ui components.

```tsx
import {
  Drawer,
  DrawerContent,
  useDisclosure,
  Button
} from '@srcube-taro/ui'
import { View, Text } from '@tarojs/components'

function DrawerExamples() {
  const leftDrawer = useDisclosure()
  const rightDrawer = useDisclosure()
  const bottomDrawer = useDisclosure()

return (
    <>
      {/* Left drawer */}
      <Button onTap={leftDrawer.onOpen}>Open Left Drawer</Button>
      <Drawer
        isOpen={leftDrawer.isOpen}
        onOpenChange={leftDrawer.onOpenChange}
        placement="left"
      >
        <DrawerContent>
          <View className="p-4">
            <Text className="text-lg font-bold mb-4">Menu</Text>
            <Button onTap={leftDrawer.onClose}>Close</Button>
          </View>
        </DrawerContent>
      </Drawer>

{/* Right drawer */}
      <Button onTap={rightDrawer.onOpen}>Open Right Drawer</Button>
      <Drawer
        isOpen={rightDrawer.isOpen}
        onOpenChange={rightDrawer.onOpenChange}
        placement="right"
      >
        <DrawerContent>
          <View className="p-4">
            <Text className="text-lg font-bold mb-4">Settings</Text>
            <Button onTap={rightDrawer.onClose}>Close</Button>
          </View>
        </DrawerContent>
      </Drawer>

{/* Bottom drawer */}
      <Button onTap={bottomDrawer.onOpen}>Open Bottom Drawer</Button>
      <Drawer
        isOpen={bottomDrawer.isOpen}
        onOpenChange={bottomDrawer.onOpenChange}
        placement="bottom"
      >
        <DrawerContent>
          <View className="p-4">
            <Text className="text-lg font-bold mb-4">Actions</Text>
            <Button fullWidth onTap={bottomDrawer.onClose}>Done</Button>
          </View>
        </DrawerContent>
      </Drawer>
    </>
  )
}
```

--------------------------------

### Input Component Examples in React (TypeScript)

Source: https://context7.com/srcube/srcube-taro/llms.txt

Demonstrates various configurations of the Input component, including basic usage, clear button functionality, start/end adornments, password input, and disabled states. It utilizes the `useState` hook for managing input values and imports `Input` from '@srcube-taro/ui'.

```tsx
import { Input } from '@srcube-taro/ui'
import { View } from '@tarojs/components'
import { useState } from 'react'

function InputExamples() {
  const [value, setValue] = useState('')
  const [password, setPassword] = useState('')

return (
    <>
      {/* Basic input */}
      <Input
        placeholder="Enter your name"
        value={value}
        onInput={(e) => setValue(e.detail.value)}
      />

{/* Input with clear button */}
      <Input
        placeholder="Search..."
        isClearable
        value={value}
        onInput={(e) => setValue(e.detail.value)}
      />

{/* Input with start/end content */}
      <Input
        placeholder="Username"
        startContent={<View className="i-[ion--person]" />}
        value={value}
        onInput={(e) => setValue(e.detail.value)}
      />

<Input
        type="password"
        placeholder="Password"
        endContent={<View className="i-[ion--eye]" />}
        value={password}
        onInput={(e) => setPassword(e.detail.value)}
      />

{/* Disabled input */}
      <Input
        placeholder="Disabled"
        isDisabled
        value="Cannot edit"
      />
    </>
  )
}

```

--------------------------------

### Basic Tabs Component Usage in React

Source: https://github.com/srcube/srcube-taro/blob/main/packages/ui/tabs/DESIGN.md

Demonstrates the basic usage of the Tabs and Tab components from '@srcube-taro/tabs'. This example shows how to import and render a set of tabs with titles, setting an aria-label and color variant for accessibility and styling.

```tsx
import { Tabs, Tab } from '@srcube-taro/tabs'

<Tabs aria-label="Tabs colors" color="primary" radius="full">
  <Tab key="photos" title="Photos" />
  <Tab key="music" title="Music" />
  <Tab key="videos" title="Videos" />
</Tabs>
```

--------------------------------

### Modal Component Examples in React (TypeScript)

Source: https://context7.com/srcube/srcube-taro/llms.txt

Illustrates the usage of the Modal component, showcasing a basic modal and a modal with a custom backdrop. It utilizes the `useDisclosure` hook for managing modal state and imports `Modal`, `ModalBackdrop`, `ModalContent`, and `Button` from '@srcube-taro/ui'.

```tsx
import { Modal, ModalBackdrop, ModalContent, useDisclosure } from '@srcube-taro/ui'
import { Button } from '@srcube-taro/ui'
import { View, Text } from '@tarojs/components'

function ModalExamples() {
  const { isOpen, onOpen, onClose, onOpenChange } = useDisclosure()
  const customModal = useDisclosure()

return (
    <>
      {/* Basic modal */}
      <Button onTap={onOpen}>Open Modal</Button>
      <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
        <ModalContent>
          <View className="p-4">
            <Text>This is a basic modal</Text>
            <Button onTap={onClose}>Close</Button>
          </View>
        </ModalContent>
      </Modal>

{/* Modal with custom backdrop */}
      <Button onTap={customModal.onOpen}>Custom Modal</Button>
      <Modal
        isOpen={customModal.isOpen}
        onOpenChange={customModal.onOpenChange}
      >
        <ModalBackdrop onTap={customModal.onClose} />
        <ModalContent>
          <View className="p-6 bg-white rounded-lg">
            <Text className="text-lg font-bold mb-4">Custom Modal</Text>
            <Text className="mb-4">This modal has a custom backdrop handler</Text>
            <Button color="primary" onTap={customModal.onClose}>
              Got it
            </Button>
          </View>
        </ModalContent>
      </Modal>
    </>
  )
}

```

--------------------------------

### Button Component Examples - React (Taro)

Source: https://context7.com/srcube/srcube-taro/llms.txt

Demonstrates the usage of the Button component from Srcube Taro UI. It showcases various props for color, variant, size, loading states, icon placement, and full width.

```tsx
import { Button } from '@srcube-taro/ui'
import { View } from '@tarojs/components'

// Basic buttons with different colors
function BasicButtons() {
  return (
    <>
      <Button color="default">Default</Button>
      <Button color="primary">Primary</Button>
      <Button color="secondary">Secondary</Button>
      <Button color="success">Success</Button>
      <Button color="warning">Warning</Button>
      <Button color="danger">Danger</Button>
    </>
  )
}

// Button variants and sizes
function ButtonVariants() {
  return (
    <>
      <Button variant="solid" size="sm">Solid</Button>
      <Button variant="outline" size="md">Outline</Button>
      <Button variant="flat" size="lg">Flat</Button>
      <Button variant="text">Text</Button>
    </>
  )
}

// Button with loading states - automatic and manual
function LoadingButtons() {
  const handleAsyncAction = async () => {
    await new Promise(resolve => setTimeout(resolve, 3000))
    console.log('Action completed')
  }

return (
    <>
      {/* Auto loading: button shows spinner during async operation */}
      <Button color="primary" onTap={handleAsyncAction}>
        Auto Loading
      </Button>

{/* Manual loading control */}
      <Button color="primary" isLoading>
        Loading...
      </Button>
    </>
  )
}

// Icon buttons and content placement
function IconButtons() {
  return (
    <>
      {/* Icon only button */}
      <Button isIcon color="primary">
        <View className="i-[ion--home]" />
      </Button>

{/* Button with start/end content */}
      <Button
        startContent={<View className="i-[ion--camera]" />}
        color="primary"
      >
        Take Photo
      </Button>

<Button
        endContent={<View className="i-[ion--arrow-forward]" />}
        color="success"
      >
        Next
      </Button>

{/* Full width button */}
      <Button fullWidth color="primary">
        Submit
      </Button>
    </>
  )
}

```

--------------------------------

### Toast Component Examples - TypeScript

Source: https://context7.com/srcube/srcube-taro/llms.txt

Illustrates the usage of the Toast component for displaying temporary messages with various options like color, duration, and auto-dismiss behavior. It uses functions from `@srcube-taro/ui` to add and clear toasts.

```tsx
import { addToast, clearToasts } from '@srcube-taro/ui'
import { Button } from '@srcube-taro/ui'

function ToastExamples() {
  const showSuccessToast = () => {
    addToast({
      title: 'Success',
      description: 'Your changes have been saved',
      color: 'success',
      duration: 3000,
    })
  }

const showErrorToast = () => {
    addToast({
      title: 'Error',
      description: 'Failed to save changes. Please try again.',
      color: 'danger',
      duration: 5000,
    })
  }

const showInfoToast = () => {
    addToast({
      title: 'Information',
      description: 'This is an informational message',
      color: 'primary',
      duration: 2000,
    })
  }

const showPersistentToast = () => {
    const { close } = addToast({
      title: 'Persistent Toast',
      description: 'This toast will not auto-dismiss',
      autoDismiss: false,
    })

// Manually close after 10 seconds
    setTimeout(() => close(), 10000)
  }

const handleClearAll = () => {
    clearToasts()
  }

return (
    <>
      <Button onTap={showSuccessToast}>Show Success</Button>
      <Button onTap={showErrorToast}>Show Error</Button>
      <Button onTap={showInfoToast}>Show Info</Button>
      <Button onTap={showPersistentToast}>Persistent Toast</Button>
      <Button onTap={handleClearAll} color="danger">Clear All</Button>
    </>
  )
}

```

--------------------------------

### ButtonGroup Component Examples - React (Taro)

Source: https://context7.com/srcube/srcube-taro/llms.txt

Illustrates the use of the ButtonGroup component from Srcube Taro UI for grouping multiple buttons. It covers basic grouping, full-width options, and disabled states.

```tsx
import { Button, ButtonGroup } from '@srcube-taro/ui'
import { View } from '@tarojs/components'

function ButtonGroups() {
  return (
    <>
      {/* Basic button group */}
      <ButtonGroup color="default">
        <Button>Left</Button>
        <Button>Center</Button>
        <Button>Right</Button>
      </ButtonGroup>

{/* Full width button group with mixed content */}
      <ButtonGroup color="primary" radius="full" fullWidth>
        <Button>Action 1</Button>
        <Button>Action 2</Button>
        <Button isIcon>
          <View className="i-[ion--settings]" />
        </Button>
      </ButtonGroup>

{/* Disabled button group */}
      <ButtonGroup color="secondary" isDisabled>
        <Button>Option 1</Button>
        <Button>Option 2</Button>
      </ButtonGroup>
    </>
  )
}

```

--------------------------------

### Radio Component Examples in TSX

Source: https://context7.com/srcube/srcube-taro/llms.txt

Illustrates the implementation of the Radio component for single-choice selections. Features include basic radio groups, styling with colors, horizontal orientation, and disabling specific radio options. This component is part of the `@srcube-taro/ui` library.

```tsx
import { Radio, RadioGroup } from '@srcube-taro/ui'
import { View } from '@tarojs/components'
import { useState } from 'react'

function RadioExamples() {
  const [selected, setSelected] = useState('option1')
  const [color, setColor] = useState('blue')

return (
    <>
      {/* Basic radio group */}
      <RadioGroup value={selected} onChange={(e) => setSelected(e.detail.value)}>
        <Radio value="option1">Option 1</Radio>
        <Radio value="option2">Option 2</Radio>
        <Radio value="option3">Option 3</Radio>
      </RadioGroup>

{/* Radio with colors */}
      <RadioGroup value={color} onChange={(e) => setColor(e.detail.value)}>
        <Radio value="blue" color="primary">Blue</Radio>
        <Radio value="green" color="success">Green</Radio>
        <Radio value="red" color="danger">Red</Radio>
      </RadioGroup>

{/* Horizontal radio group */}
      <RadioGroup
        value={selected}
        onChange={(e) => setSelected(e.detail.value)}
        orientation="horizontal"
      >
        <Radio value="sm">Small</Radio>
        <Radio value="md">Medium</Radio>
        <Radio value="lg">Large</Radio>
      </RadioGroup>

{/* Disabled radio options */}
      <RadioGroup value={selected}>
        <Radio value="enabled">Enabled</Radio>
        <Radio value="disabled" isDisabled>Disabled</Radio>
      </RadioGroup>
    </>
  )
}

```

--------------------------------

### Checkbox Component Examples in React (TypeScript)

Source: https://context7.com/srcube/srcube-taro/llms.txt

Illustrates the functionality of the Checkbox component from @srcube-taro/ui, showcasing features like basic usage, controlled state, indeterminate state, loading indicators, disabled options, and custom icons. It uses React's useState hook for managing component states.

```tsx
import { Checkbox } from '@srcube-taro/ui'
import { View } from '@tarojs/components'
import { useState } from 'react'

function CheckboxExamples() {
  const [checked, setChecked] = useState(false)
  const [indeterminate, setIndeterminate] = useState(true)
  const [loading, setLoading] = useState(false)

const handleChange = async (e) => {
    setLoading(true)
    await new Promise(resolve => setTimeout(resolve, 1000))
    setChecked(e.detail.value[0])
    setLoading(false)
  }

return (
    <>
      {/* Basic checkbox */}
      <Checkbox value="1">
        Accept terms and conditions
      </Checkbox>

{/* Controlled checkbox */}
      <Checkbox
        value="1"
        isSelected={checked}
        onChange={(e) => setChecked(e.detail.value[0])}
      >
        Subscribe to newsletter
      </Checkbox>

{/* Indeterminate checkbox */}
      <Checkbox
        value="1"
        isIndeterminate={indeterminate}
        onChange={() => setIndeterminate(false)}
      >
        Select all items
      </Checkbox>

{/* Loading checkbox */}
      <Checkbox
        value="1"
        isLoading={loading}
        onChange={handleChange}
      >
        Processing...
      </Checkbox>

{/* Disabled checkbox */}
      <Checkbox value="1" isDisabled>
        Disabled option
      </Checkbox>

{/* Checkbox with custom icon */}
      <Checkbox
        value="1"
        icon={({ isIndeterminate }) => (
          <View className={isIndeterminate ? "i-[ion--remove]" : "i-[ion--checkmark]"} />
        )}
      >
        Custom icon
      </Checkbox>
    </>
  )
}
```

--------------------------------

### Project Structure Overview

Source: https://github.com/srcube/srcube-taro/blob/main/README.md

This code snippet outlines the directory structure of the Srcube Taro UI project, illustrating the organization of applications, packages (core, ui, utils), and environment configurations within a monorepo.

```tree
srcube-taro/
├── apps/
│   ├── docs/                   # Docs
│   └── sample/                 # Demo application
├── packages/
│   ├── core/
│   │   ├── ui/                 # Main UI package
│   │   └── theme/              # Components theme, UI plugin
│   ├── ui/                     # UI components
│   │   ├── [components]/
│   └── utils/                  # Shared utilities
│       └── [util]/
└── envs/                       # Shared configurations
    └── [config]/
```

--------------------------------

### Component Directory Structure

Source: https://github.com/srcube/srcube-taro/blob/main/README.md

Details the standard file and directory layout for individual UI components within the Srcube Taro UI library, including source files, build configurations, and metadata.

```tree
packages/ui/[component]/
├── src/
|   ├── [component].tsx
|   ├── index.ts
|   └── use.ts
├── moon.yml
├── package.json
├── tsconfig.json
├── tsup.config.ts
└── README.md
```

--------------------------------

### SrcubeUI App Wrapper: Global UI Management

Source: https://context7.com/srcube/srcube-taro/llms.txt

The SrcubeUI component acts as the main application wrapper, enabling global management of modals, dialogs, drawers, and toasts through imperative APIs. It requires importing necessary functions from '@srcube-taro/ui'. The wrapper accepts children components to be rendered within its context.

```tsx
import { SrcubeUI, openModal, openDialog, openDrawer } from '@srcube-taro/ui'
import { Button } from '@srcube-taro/ui'
import { View, Text } from '@tarojs/components'

// Wrap your app with SrcubeUI
function App({ children }) {
  return (
    <SrcubeUI>
      {children}
    </SrcubeUI>
  )
}

// Use imperative APIs anywhere in your app
function ImperativeModalExample() {
  const handleOpenModal = () => {
    const { close } = openModal({
      content: (
        <View className="p-4">
          <Text>This modal was opened imperatively</Text>
          <Button onTap={close}>Close</Button>
        </View>
      ),
    })
  }

const handleOpenDialog = () => {
    const { close } = openDialog({
      title: 'Confirm Action',
      color: 'primary',
      content: <Text>Are you sure you want to continue?</Text>,
      onConfirm: async () => {
        await new Promise(resolve => setTimeout(resolve, 1000))
        console.log('Confirmed')
        close()
      },
    })
  }

const handleOpenDrawer = () => {
    const { close } = openDrawer({
      placement: 'bottom',
      content: (
        <View className="p-4">
          <Text className="text-lg font-bold mb-4">Drawer Content</Text>
          <Button fullWidth onTap={close}>Done</Button>
        </View>
      ),
    })
  }

return (
    <>
      <Button onTap={handleOpenModal}>Open Modal</Button>
      <Button onTap={handleOpenDialog}>Open Dialog</Button>
      <Button onTap={handleOpenDrawer}>Open Drawer</Button>
    </>
  )
}

export default App

```

--------------------------------

### Skeleton Component: Placeholder Content

Source: https://context7.com/srcube/srcube-taro/llms.txt

The Skeleton component serves as a placeholder for content that is currently being loaded, improving the perceived performance of the application. It allows for the creation of basic and multi-line skeletons, as well as combinations with avatars and text. The component is useful for conditionally displaying loading states before actual data is fetched.

```tsx
import { Skeleton } from '@srcube-taro/ui'
import { View, Text } from '@tarojs/components'
import { useState, useEffect } from 'react'

function SkeletonExamples() {
  const [loading, setLoading] = useState(true)
  const [data, setData] = useState(null)

useEffect(() => {
    setTimeout(() => {
      setData({ title: 'Article Title', content: 'Article content...' })
      setLoading(false)
    }, 3000)
  }, [])

return (
    <>
      {/* Basic skeleton */}
      <Skeleton className="h-4 w-full" />

{/* Multiple skeleton lines */}
      <View className="space-y-2">
        <Skeleton className="h-4 w-full" />
        <Skeleton className="h-4 w-4/5" />
        <Skeleton className="h-4 w-3/5" />
      </View>

{/* Skeleton for avatar and text */}
      <View className="flex items-center gap-4">
        <Skeleton className="h-12 w-12 rounded-full" />
        <View className="flex-1 space-y-2">
          <Skeleton className="h-4 w-3/4" />
          <Skeleton className="h-3 w-1/2" />
        </View>
      </View>

{/* Conditional skeleton loading */}
      {loading ? (
        <View className="space-y-4">
          <Skeleton className="h-8 w-2/3" />
          <Skeleton className="h-4 w-full" />
          <Skeleton className="h-4 w-full" />
          <Skeleton className="h-4 w-4/5" />
        </View>
      ) : (
        <View>
          <Text className="text-xl font-bold">{data.title}</Text>
          <Text>{data.content}</Text>
        </View>
      )}
    </>
  )
}

```

--------------------------------

### Spinner Component: Loading Indicators

Source: https://context7.com/srcube/srcube-taro/llms.txt

The Spinner component provides a visual indication of loading states within the application. It supports various customization options including color and size, and can be automatically integrated into Button components. Conditional rendering is also demonstrated for managing loading states.

```tsx
import { Spinner, Button } from '@srcube-taro/ui'
import { View } from '@tarojs/components'
import { useState } from 'react'

function SpinnerExamples() {
  const [loading, setLoading] = useState(false)

const handleLoad = async () => {
    setLoading(true)
    await new Promise(resolve => setTimeout(resolve, 2000))
    setLoading(false)
  }

return (
    <>
      {/* Basic spinner */}
      <Spinner />

{/* Colored spinners */}
      <Spinner color="primary" />
      <Spinner color="success" />
      <Spinner color="danger" />

{/* Different sizes */}
      <Spinner size="sm" />
      <Spinner size="md" />
      <Spinner size="lg" />

{/* In buttons (automatically handled) */}
      <Button isLoading>Loading...</Button>

{/* Conditional rendering */}
      {loading && (
        <View className="flex items-center justify-center py-4">
          <Spinner size="lg" color="primary" />
        </View>
      )}

<Button onTap={handleLoad}>
        {loading ? 'Loading...' : 'Load Data'}
      </Button>
    </>
  )
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.