@open-dy/vibecoding-sdk-taro 0.0.1-beta.5 → 0.0.1

package/src/ui/item.tsx

@@ -0,0 +1,338 @@
+import * as React from "react"
+import { View, type ViewProps } from "@tarojs/components"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../lib/utils"
+import { Separator } from "./separator"
+
+const ItemContext = React.createContext<{
+  size: "default" | "sm" | "xs"
+  hasDescription: boolean
+}>({
+  size: "default",
+  hasDescription: false,
+})
+
+/**
+ * @desc 信息列表项分组容器。
+ * @param {Parameters<typeof ItemGroup>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ItemGroup>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ItemGroup } from '@open-dy/vibecoding-sdk-taro/ui/item'
+ * <ItemGroup />
+ * ```
+ */
+function ItemGroup({ className, children, ...props }: ViewProps) {
+  const childArray = React.Children.toArray(children)
+  const groupSize =
+    childArray.find(
+      (child) => React.isValidElement(child) && child.type === Item
+    ) as React.ReactElement<{ size?: "default" | "sm" | "xs" }> | undefined
+
+  return (
+    <View
+      data-slot="item-group"
+      className={cn(
+        "group/item-group flex w-full flex-col",
+        groupSize?.props.size === "xs"
+          ? "gap-2"
+          : groupSize?.props.size === "sm"
+            ? "gap-2.5"
+            : "gap-4",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </View>
+  )
+}
+
+/**
+ * @desc 信息列表项分隔线。
+ * @param {Parameters<typeof ItemSeparator>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ItemSeparator>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ItemGroup, ItemSeparator } from '@open-dy/vibecoding-sdk-taro/ui/item'
+ * <ItemGroup><ItemSeparator /></ItemGroup>
+ * ```
+ */
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-2", className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  "group/item flex w-full flex-wrap items-center rounded-lg border text-sm transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors [a]:hover:bg-muted",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent",
+        outline: "border-border",
+        muted: "border-transparent bg-muted/50",
+      },
+      size: {
+        default: "gap-2.5 px-3 py-2.5",
+        sm: "gap-2.5 px-3 py-2.5",
+        xs: "gap-2 px-2.5 py-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+/**
+ * @desc 信息列表项组件。
+ * @param {Parameters<typeof Item>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof Item>[0]["variant"]} props.variant 项目外观，默认 default（透明边框），outline 描边，muted 使用浅底色。
+ * @param {Parameters<typeof Item>[0]["size"]} props.size 项目密度，默认 default；sm 与 default 使用同组根间距但内嵌媒体更小，xs 进一步缩小间距及说明字号。
+ * @return {ReturnType<typeof Item>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ItemGroup, Item } from '@open-dy/vibecoding-sdk-taro/ui/item'
+ * <ItemGroup><Item /></ItemGroup>
+ * ```
+ */
+function Item({
+  className,
+  variant = "default",
+  size,
+  children,
+  ...props
+}: ViewProps & VariantProps<typeof itemVariants>) {
+  const resolvedSize = size ?? "default"
+  const hasDescription = React.useMemo(
+    () =>
+      React.Children.toArray(children).some(
+        (child) => React.isValidElement(child) && child.type === ItemDescription
+      ),
+    [children]
+  )
+
+  return (
+    <ItemContext.Provider value={{ size: resolvedSize, hasDescription }}>
+      <View
+        data-slot="item"
+        className={cn(itemVariants({ variant, size: resolvedSize, className }))}
+        {...props}
+      >
+        {children}
+      </View>
+    </ItemContext.Provider>
+  )
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "[&_svg:not([class*='size-'])]:size-4",
+        image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+/**
+ * @desc 信息列表项媒体区域。
+ * @param {Parameters<typeof ItemMedia>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @param {Parameters<typeof ItemMedia>[0]["variant"]} props.variant 媒体内容样式，默认 default（透明）；icon 调整图标尺寸，image 显示裁切图片框，框尺寸跟随父 Item.size。
+ * @return {ReturnType<typeof ItemMedia>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ItemGroup, ItemMedia } from '@open-dy/vibecoding-sdk-taro/ui/item'
+ * <ItemGroup><ItemMedia /></ItemGroup>
+ * ```
+ */
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: ViewProps & VariantProps<typeof itemMediaVariants>) {
+  const { size, hasDescription } = React.useContext(ItemContext)
+  return (
+    <View
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(
+        itemMediaVariants({ variant }),
+        hasDescription && "translate-y-0.5 self-start",
+        variant === "image" && size === "sm" && "size-8",
+        variant === "image" && size === "xs" && "size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 信息列表项内容容器。
+ * @param {Parameters<typeof ItemContent>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ItemContent>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ItemGroup, ItemContent } from '@open-dy/vibecoding-sdk-taro/ui/item'
+ * <ItemGroup><ItemContent /></ItemGroup>
+ * ```
+ */
+function ItemContent({ className, ...props }: ViewProps) {
+  const { size } = React.useContext(ItemContext)
+  return (
+    <View
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col",
+        size === "xs" ? "gap-0" : "gap-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 信息列表项标题。
+ * @param {Parameters<typeof ItemTitle>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ItemTitle>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ItemGroup, ItemTitle } from '@open-dy/vibecoding-sdk-taro/ui/item'
+ * <ItemGroup><ItemTitle /></ItemGroup>
+ * ```
+ */
+function ItemTitle({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="item-title"
+      className={cn(
+        "line-clamp-1 flex w-fit items-center gap-2 text-sm leading-snug font-medium underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 信息列表项说明文本。
+ * @param {Parameters<typeof ItemDescription>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ItemDescription>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ItemGroup, ItemDescription } from '@open-dy/vibecoding-sdk-taro/ui/item'
+ * <ItemGroup><ItemDescription /></ItemGroup>
+ * ```
+ */
+function ItemDescription({ className, ...props }: ViewProps) {
+  const { size } = React.useContext(ItemContext)
+  return (
+    <View
+      data-slot="item-description"
+      className={cn(
+        "line-clamp-2 text-left text-sm leading-normal font-normal text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        size === "xs" && "text-xs",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 信息列表项操作区域。
+ * @param {Parameters<typeof ItemActions>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ItemActions>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ItemGroup, ItemActions } from '@open-dy/vibecoding-sdk-taro/ui/item'
+ * <ItemGroup><ItemActions /></ItemGroup>
+ * ```
+ */
+function ItemActions({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 信息列表项头部布局。
+ * @param {Parameters<typeof ItemHeader>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ItemHeader>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ItemGroup, ItemHeader } from '@open-dy/vibecoding-sdk-taro/ui/item'
+ * <ItemGroup><ItemHeader /></ItemGroup>
+ * ```
+ */
+function ItemHeader({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * @desc 信息列表项底部布局。
+ * @param {Parameters<typeof ItemFooter>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof ItemFooter>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { ItemGroup, ItemFooter } from '@open-dy/vibecoding-sdk-taro/ui/item'
+ * <ItemGroup><ItemFooter /></ItemGroup>
+ * ```
+ */
+function ItemFooter({ className, ...props }: ViewProps) {
+  return (
+    <View
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}

package/src/ui/label.tsx

@@ -0,0 +1,31 @@
+import { Label as TaroLabel } from "@tarojs/components"
+
+import { cn } from "../lib/utils"
+
+/**
+ * @desc 标签组件。
+ * @param {Parameters<typeof Label>[0]} props 组件属性；自有字段的用途及默认行为见下表，继承属性另列。
+ * @return {ReturnType<typeof Label>} 组件渲染结果；类型见返回值契约。
+ * @example
+ * ```tsx
+ * import { Label } from '@open-dy/vibecoding-sdk-taro/ui/label'
+ * <Label />
+ * ```
+ */
+function Label({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<typeof TaroLabel>) {
+  return (
+    <TaroLabel
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }