@anker-in/headless-ui 1.1.17-alpha.1765880007709 → 1.1.17-alpha.1765938765782
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/brand-strip.d.ts +26 -0
- package/dist/cjs/components/brand-strip.js +2 -0
- package/dist/cjs/components/brand-strip.js.map +7 -0
- package/dist/cjs/components/index.d.ts +1 -0
- package/dist/cjs/components/index.js +1 -1
- package/dist/cjs/components/index.js.map +3 -3
- package/dist/cjs/stories/brandStrip.stories.js +2 -0
- package/dist/cjs/stories/brandStrip.stories.js.map +7 -0
- package/dist/esm/components/brand-strip.d.ts +26 -0
- package/dist/esm/components/brand-strip.js +2 -0
- package/dist/esm/components/brand-strip.js.map +7 -0
- package/dist/esm/components/index.d.ts +1 -0
- package/dist/esm/components/index.js +1 -1
- package/dist/esm/components/index.js.map +2 -2
- package/dist/esm/stories/brandStrip.stories.js +2 -0
- package/dist/esm/stories/brandStrip.stories.js.map +7 -0
- package/package.json +1 -1
- package/style.css +26 -0
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
type BrandStripItem = {
|
|
3
|
+
/** 品牌名称,用于默认展示和辅助文本 */
|
|
4
|
+
name: string;
|
|
5
|
+
/** 品牌 Logo 的图片地址,默认是内置的文字 Logo */
|
|
6
|
+
logo?: string;
|
|
7
|
+
/** 自定义 alt 文案 */
|
|
8
|
+
alt?: string;
|
|
9
|
+
/** 跳转链接,可选 */
|
|
10
|
+
link?: string;
|
|
11
|
+
};
|
|
12
|
+
type BrandStripProps = {
|
|
13
|
+
data: any;
|
|
14
|
+
/** 外层容器 class */
|
|
15
|
+
className?: string;
|
|
16
|
+
/** 每个卡片的 class */
|
|
17
|
+
itemClassName?: string;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* BrandStrip - 品牌徽标展示条
|
|
21
|
+
*
|
|
22
|
+
* @description 展示品牌 Logo 列表的组件,支持自定义标题、Logo 和跳转链接
|
|
23
|
+
*/
|
|
24
|
+
declare const BrandStrip: React.FC<BrandStripProps>;
|
|
25
|
+
export type { BrandStripProps, BrandStripItem };
|
|
26
|
+
export default BrandStrip;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var d=Object.create;var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var g=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty;var y=(t,e)=>{for(var r in e)a(t,r,{get:e[r],enumerable:!0})},o=(t,e,r,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of c(e))!u.call(t,n)&&n!==r&&a(t,n,{get:()=>e[n],enumerable:!(s=f(e,n))||s.enumerable});return t};var b=(t,e,r)=>(r=t!=null?d(g(t)):{},o(e||!t||!t.__esModule?a(r,"default",{value:t,enumerable:!0}):r,t)),h=t=>o(a({},"__esModule",{value:!0}),t);var S={};y(S,{default:()=>k});module.exports=h(S);var l=require("react/jsx-runtime"),x=require("react"),p=b(require("./link.js")),i=require("../helpers/utils.js"),m=require("./container.js");const N=({data:t,className:e,itemClassName:r})=>(0,l.jsx)("div",{className:(0,i.cn)("w-full bg-[#f5f7fb]",e),children:(0,l.jsxs)(m.Container,{className:"py-6",childClassName:"space-y-4",children:[t?.title?(0,l.jsx)("p",{className:"mb-2 text-sm font-bold text-[#767880]",dangerouslySetInnerHTML:{__html:t?.title||""}}):null,(0,l.jsx)("ul",{className:"flex gap-2",role:"list",children:t?.leftIcon?.map?.((s,n)=>(0,l.jsx)("li",{children:(0,l.jsx)(p.default,{href:s.link,asChild:!s.link,className:"desktop:block hidden h-full",children:(0,l.jsx)("div",{dangerouslySetInnerHTML:{__html:s.logo||""},className:(0,i.cn)("brand-strip-item box-border flex h-fit items-center justify-center bg-[#F5F6F7] px-4 py-2 [&_svg]:h-full [&_svg]:w-auto [&_svg_path]:[fill:#080A0F]",r)})})},n))})]})});var k=N;
|
|
2
|
+
//# sourceMappingURL=brand-strip.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/brand-strip.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport Link from './link.js'\nimport { cn } from '../helpers/utils.js'\nimport { Container } from './container.js'\n\ntype BrandStripItem = {\n /** \u54C1\u724C\u540D\u79F0\uFF0C\u7528\u4E8E\u9ED8\u8BA4\u5C55\u793A\u548C\u8F85\u52A9\u6587\u672C */\n name: string\n /** \u54C1\u724C Logo \u7684\u56FE\u7247\u5730\u5740\uFF0C\u9ED8\u8BA4\u662F\u5185\u7F6E\u7684\u6587\u5B57 Logo */\n logo?: string\n /** \u81EA\u5B9A\u4E49 alt \u6587\u6848 */\n alt?: string\n /** \u8DF3\u8F6C\u94FE\u63A5\uFF0C\u53EF\u9009 */\n link?: string\n}\n\ntype BrandStripProps = {\n data: any\n /** \u5916\u5C42\u5BB9\u5668 class */\n className?: string\n /** \u6BCF\u4E2A\u5361\u7247\u7684 class */\n itemClassName?: string\n}\n\n/**\n * BrandStrip - \u54C1\u724C\u5FBD\u6807\u5C55\u793A\u6761\n *\n * @description \u5C55\u793A\u54C1\u724C Logo \u5217\u8868\u7684\u7EC4\u4EF6\uFF0C\u652F\u6301\u81EA\u5B9A\u4E49\u6807\u9898\u3001Logo \u548C\u8DF3\u8F6C\u94FE\u63A5\n */\nconst BrandStrip: React.FC<BrandStripProps> = ({ data, className, itemClassName }) => {\n return (\n <div className={cn('w-full bg-[#f5f7fb]', className)}>\n <Container className=\"py-6\" childClassName=\"space-y-4\">\n {data?.title ? (\n <p\n className=\"mb-2 text-sm font-bold text-[#767880]\"\n dangerouslySetInnerHTML={{ __html: data?.title || '' }}\n />\n ) : null}\n <ul className=\"flex gap-2\" role=\"list\">\n {data?.leftIcon?.map?.((item: any, index: number) => {\n return (\n <li key={index}>\n <Link href={item.link} asChild={!item.link} className=\"desktop:block hidden h-full\">\n <div\n dangerouslySetInnerHTML={{ __html: item.logo || '' }}\n className={cn(\n 'brand-strip-item box-border flex h-fit items-center justify-center bg-[#F5F6F7] px-4 py-2 [&_svg]:h-full [&_svg]:w-auto [&_svg_path]:[fill:#080A0F]',\n itemClassName\n )}\n />\n </Link>\n </li>\n )\n })}\n </ul>\n </Container>\n </div>\n )\n}\n\nexport type { BrandStripProps, BrandStripItem }\nexport default BrandStrip\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAgCM,IAAAI,EAAA,6BAhCNC,EAAkB,iBAClBC,EAAiB,wBACjBC,EAAmB,+BACnBC,EAA0B,0BA0B1B,MAAMC,EAAwC,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,cAAAC,CAAc,OAE5E,OAAC,OAAI,aAAW,MAAG,sBAAuBD,CAAS,EACjD,oBAAC,aAAU,UAAU,OAAO,eAAe,YACxC,UAAAD,GAAM,SACL,OAAC,KACC,UAAU,wCACV,wBAAyB,CAAE,OAAQA,GAAM,OAAS,EAAG,EACvD,EACE,QACJ,OAAC,MAAG,UAAU,aAAa,KAAK,OAC7B,SAAAA,GAAM,UAAU,MAAM,CAACG,EAAWC,OAE/B,OAAC,MACC,mBAAC,EAAAC,QAAA,CAAK,KAAMF,EAAK,KAAM,QAAS,CAACA,EAAK,KAAM,UAAU,8BACpD,mBAAC,OACC,wBAAyB,CAAE,OAAQA,EAAK,MAAQ,EAAG,EACnD,aAAW,MACT,sJACAD,CACF,EACF,EACF,GATOE,CAUT,CAEH,EACH,GACF,EACF,EAKJ,IAAOZ,EAAQO",
|
|
6
|
+
"names": ["brand_strip_exports", "__export", "brand_strip_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_link", "import_utils", "import_container", "BrandStrip", "data", "className", "itemClassName", "item", "index", "Link"]
|
|
7
|
+
}
|
|
@@ -26,3 +26,4 @@ export { default as Board } from './board.js';
|
|
|
26
26
|
export { default as LoadingDots } from './loadingDots.js';
|
|
27
27
|
export { ExposureDetector, type ExposureDetectorProps } from './ExposureDetector.js';
|
|
28
28
|
export { default as Breadcrumb } from './breadcrumb.js';
|
|
29
|
+
export { default as BrandStrip } from './brand-strip.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var N=Object.create;var f=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var z=(t,n)=>{for(var d in n)f(t,d,{get:n[d],enumerable:!0})},P=(t,n,d,w)=>{if(n&&typeof n=="object"||typeof n=="function")for(let D of O(n))!q.call(t,D)&&D!==d&&f(t,D,{get:()=>n[D],enumerable:!(w=E(n,D))||w.enumerable});return t};var a=(t,n,d)=>(d=t!=null?N(j(t)):{},P(n||!t||!t.__esModule?f(d,"default",{value:t,enumerable:!0}):d,t)),J=t=>P(f({},"__esModule",{value:!0}),t);var K={};z(K,{Alert:()=>m.Alert,AlertDescription:()=>m.AlertDescription,AlertTitle:()=>m.AlertTitle,Avatar:()=>s.Avatar,AvatarFallback:()=>s.AvatarFallback,AvatarImage:()=>s.AvatarImage,Badge:()=>M.default,Board:()=>B.default,BrandStrip:()=>F.default,Breadcrumb:()=>h.default,Button:()=>T.default,Card:()=>p.Card,CardContent:()=>p.CardContent,CardDescription:()=>p.CardDescription,CardFooter:()=>p.CardFooter,CardHeader:()=>p.CardHeader,CardTitle:()=>p.CardTitle,Carousel:()=>u.Carousel,CarouselContent:()=>u.CarouselContent,CarouselItem:()=>u.CarouselItem,CarouselNext:()=>u.CarouselNext,CarouselPrevious:()=>u.CarouselPrevious,Checkbox:()=>b.default,Color:()=>v.Color,Container:()=>G.Container,Dialog:()=>o.Dialog,DialogClose:()=>o.DialogClose,DialogContent:()=>o.DialogContent,DialogDescription:()=>o.DialogDescription,DialogFooter:()=>o.DialogFooter,DialogHeader:()=>o.DialogHeader,DialogOverlay:()=>o.DialogOverlay,DialogPortal:()=>o.DialogPortal,DialogTitle:()=>o.DialogTitle,DialogTrigger:()=>o.DialogTrigger,Drawer:()=>e.Drawer,DrawerClose:()=>e.DrawerClose,DrawerContent:()=>e.DrawerContent,DrawerDescription:()=>e.DrawerDescription,DrawerFooter:()=>e.DrawerFooter,DrawerHeader:()=>e.DrawerHeader,DrawerOverlay:()=>e.DrawerOverlay,DrawerPortal:()=>e.DrawerPortal,DrawerTitle:()=>e.DrawerTitle,DrawerTrigger:()=>e.DrawerTrigger,DropdownMenu:()=>r.DropdownMenu,DropdownMenuCheckboxItem:()=>r.DropdownMenuCheckboxItem,DropdownMenuContent:()=>r.DropdownMenuContent,DropdownMenuGroup:()=>r.DropdownMenuGroup,DropdownMenuItem:()=>r.DropdownMenuItem,DropdownMenuLabel:()=>r.DropdownMenuLabel,DropdownMenuPortal:()=>r.DropdownMenuPortal,DropdownMenuRadioGroup:()=>r.DropdownMenuRadioGroup,DropdownMenuRadioItem:()=>r.DropdownMenuRadioItem,DropdownMenuSeparator:()=>r.DropdownMenuSeparator,DropdownMenuShortcut:()=>r.DropdownMenuShortcut,DropdownMenuSub:()=>r.DropdownMenuSub,DropdownMenuSubContent:()=>r.DropdownMenuSubContent,DropdownMenuSubTrigger:()=>r.DropdownMenuSubTrigger,DropdownMenuTrigger:()=>r.DropdownMenuTrigger,ExposureDetector:()=>L.ExposureDetector,Grid:()=>g.Grid,GridItem:()=>g.GridItem,Heading:()=>c.Heading,Input:()=>x.Input,InputNumber:()=>A.default,InputSlot:()=>x.InputSlot,Link:()=>S.default,LoadingDots:()=>H.default,Picture:()=>k.default,Popover:()=>l.Popover,PopoverContent:()=>l.PopoverContent,PopoverTrigger:()=>l.PopoverTrigger,RadioGroup:()=>C.RadioGroup,RadioGroupItem:()=>C.RadioGroupItem,Skeleton:()=>y.default,Tabs:()=>i.Tabs,TabsContent:()=>i.TabsContent,TabsList:()=>i.TabsList,TabsTrigger:()=>i.TabsTrigger,Text:()=>I.Text,Theme:()=>R.default});module.exports=J(K);var T=a(require("./button.js")),M=a(require("./badge.js")),x=require("./input.js"),b=a(require("./checkbox.js")),y=a(require("./skeleton.js")),o=require("./dialog.js"),l=require("./popover.js"),C=require("./radio.js"),I=require("./text.js"),g=require("./grid.js"),c=require("./heading.js"),G=require("./container.js"),v=require("./color.js"),e=require("./drawer.js"),S=a(require("./link.js")),s=require("./avatar.js"),A=a(require("./input-number.js")),r=require("./drop-down.js"),p=require("./card.js"),u=require("./carousel.js"),i=require("./tabs.js"),m=require("./alert.js"),k=a(require("./picture.js")),R=a(require("./theme.js")),B=a(require("./board.js")),H=a(require("./loadingDots.js")),L=require("./ExposureDetector.js"),h=a(require("./breadcrumb.js")),F=a(require("./brand-strip.js"));
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/index.ts"],
|
|
4
|
-
"sourcesContent": ["export { default as Button } from './button.js'\nexport { default as Badge } from './badge.js'\nexport { Input, InputSlot } from './input.js'\n\nexport { default as Checkbox } from './checkbox.js'\n\nexport { default as Skeleton } from './skeleton.js'\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogClose,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n} from './dialog.js'\nexport { Popover, PopoverTrigger, PopoverContent } from './popover.js'\nexport { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps } from './radio.js'\nexport { Text, type TextProps } from './text.js'\nexport { Grid, GridItem, type GridProps, type GridItemProps } from './grid.js'\nexport { Heading, type HeadingProps } from './heading.js'\nexport { Container, type ContainerProps } from './container.js'\nexport { Color, type ColorProps } from './color.js'\nexport {\n Drawer,\n DrawerPortal,\n DrawerOverlay,\n DrawerTrigger,\n DrawerClose,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerTitle,\n DrawerDescription,\n} from './drawer.js'\nexport { default as Link, type LinkProps } from './link.js'\nexport { Avatar, AvatarImage, AvatarFallback } from './avatar.js'\nexport { default as InputNumber, type InputNumberProps } from './input-number.js'\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuRadioGroup,\n} from './drop-down.js'\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card.js'\nexport {\n type CarouselApi,\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselPrevious,\n CarouselNext,\n} from './carousel.js'\nexport { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs.js'\nexport { Alert, AlertTitle, AlertDescription } from './alert.js'\nexport { default as Picture } from './picture.js'\nexport { default as Theme } from './theme.js'\nexport { default as Board } from './board.js'\nexport { default as LoadingDots } from './loadingDots.js'\nexport { ExposureDetector, type ExposureDetectorProps } from './ExposureDetector.js'\nexport { default as Breadcrumb } from './breadcrumb.js'\n"],
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,
|
|
6
|
-
"names": ["components_exports", "__export", "__toCommonJS", "import_button", "import_badge", "import_input", "import_checkbox", "import_skeleton", "import_dialog", "import_popover", "import_radio", "import_text", "import_grid", "import_heading", "import_container", "import_color", "import_drawer", "import_link", "import_avatar", "import_input_number", "import_drop_down", "import_card", "import_carousel", "import_tabs", "import_alert", "import_picture", "import_theme", "import_board", "import_loadingDots", "import_ExposureDetector", "import_breadcrumb"]
|
|
4
|
+
"sourcesContent": ["export { default as Button } from './button.js'\nexport { default as Badge } from './badge.js'\nexport { Input, InputSlot } from './input.js'\n\nexport { default as Checkbox } from './checkbox.js'\n\nexport { default as Skeleton } from './skeleton.js'\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogClose,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n} from './dialog.js'\nexport { Popover, PopoverTrigger, PopoverContent } from './popover.js'\nexport { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps } from './radio.js'\nexport { Text, type TextProps } from './text.js'\nexport { Grid, GridItem, type GridProps, type GridItemProps } from './grid.js'\nexport { Heading, type HeadingProps } from './heading.js'\nexport { Container, type ContainerProps } from './container.js'\nexport { Color, type ColorProps } from './color.js'\nexport {\n Drawer,\n DrawerPortal,\n DrawerOverlay,\n DrawerTrigger,\n DrawerClose,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerTitle,\n DrawerDescription,\n} from './drawer.js'\nexport { default as Link, type LinkProps } from './link.js'\nexport { Avatar, AvatarImage, AvatarFallback } from './avatar.js'\nexport { default as InputNumber, type InputNumberProps } from './input-number.js'\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuRadioGroup,\n} from './drop-down.js'\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card.js'\nexport {\n type CarouselApi,\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselPrevious,\n CarouselNext,\n} from './carousel.js'\nexport { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs.js'\nexport { Alert, AlertTitle, AlertDescription } from './alert.js'\nexport { default as Picture } from './picture.js'\nexport { default as Theme } from './theme.js'\nexport { default as Board } from './board.js'\nexport { default as LoadingDots } from './loadingDots.js'\nexport { ExposureDetector, type ExposureDetectorProps } from './ExposureDetector.js'\nexport { default as Breadcrumb } from './breadcrumb.js'\nexport { default as BrandStrip } from './brand-strip.js'\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,0hFAAAE,EAAAF,GAAA,IAAAG,EAAkC,0BAClCC,EAAiC,yBACjCC,EAAiC,sBAEjCC,EAAoC,4BAEpCC,EAAoC,4BACpCC,EAWO,uBACPC,EAAwD,wBACxDC,EAA2F,sBAC3FC,EAAqC,qBACrCC,EAAmE,qBACnEC,EAA2C,wBAC3CC,EAA+C,0BAC/CC,EAAuC,sBACvCC,EAWO,uBACPC,EAAgD,wBAChDC,EAAoD,uBACpDC,EAA8D,gCAC9DC,EAgBO,0BACPC,EAAsF,qBACtFC,EAOO,yBACPC,EAAyD,qBACzDC,EAAoD,sBACpDC,EAAmC,2BACnCC,EAAiC,yBACjCC,EAAiC,yBACjCC,EAAuC,+BACvCC,EAA6D,iCAC7DC,EAAsC,8BACtCC,EAAsC",
|
|
6
|
+
"names": ["components_exports", "__export", "__toCommonJS", "import_button", "import_badge", "import_input", "import_checkbox", "import_skeleton", "import_dialog", "import_popover", "import_radio", "import_text", "import_grid", "import_heading", "import_container", "import_color", "import_drawer", "import_link", "import_avatar", "import_input_number", "import_drop_down", "import_card", "import_carousel", "import_tabs", "import_alert", "import_picture", "import_theme", "import_board", "import_loadingDots", "import_ExposureDetector", "import_breadcrumb", "import_brand_strip"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";var p=Object.create;var s=Object.defineProperty;var l=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,c=Object.prototype.hasOwnProperty;var g=(t,o)=>{for(var e in o)s(t,e,{get:o[e],enumerable:!0})},i=(t,o,e,a)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of f(o))!c.call(t,n)&&n!==e&&s(t,n,{get:()=>o[n],enumerable:!(a=l(o,n))||a.enumerable});return t};var u=(t,o,e)=>(e=t!=null?p(y(t)):{},i(o||!t||!t.__esModule?s(e,"default",{value:t,enumerable:!0}):e,t)),d=t=>i(s({},"__esModule",{value:!0}),t);var B={};g(B,{Default:()=>k,WithLinks:()=>h,default:()=>x});module.exports=d(B);var m=u(require("../components/brand-strip.js"));const w={title:"Components/BrandStrip",component:m.default,parameters:{layout:"fullscreen"},tags:["autodocs"]};var x=w;const r=(t,o="#0B6CFF")=>`data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${Math.max(120,t.length*11)} 32'><text x='0' y='22' font-family="Inter, Arial, sans-serif" font-size='20' font-weight='700' fill='${o}'>${t}</text></svg>`)}`,S=[{name:"ANKER",logo:r("ANKER","#0B6CFF"),link:"https://www.anker.com"},{name:"ANKER SOLIX",logo:r("ANKER SOLIX","#111827"),link:"https://www.anker.com/solix"},{name:"eufy",logo:r("eufy","#00A5A5"),link:"https://us.eufy.com"},{name:"eufy Make",logo:r("eufy Make","#0B6CFF"),link:"https://us.eufy.com"},{name:"soundcore",logo:r("soundcore","#101828"),link:"https://us.soundcore.com"}],k={args:{}},h={args:{brands:S}};
|
|
2
|
+
//# sourceMappingURL=brandStrip.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/stories/brandStrip.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport BrandStrip, { type BrandStripItem } from '../components/brand-strip.js'\n\nconst meta = {\n title: 'Components/BrandStrip',\n component: BrandStrip,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof BrandStrip>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst createTextLogo = (label: string, color: string = '#0B6CFF') =>\n `data:image/svg+xml,${encodeURIComponent(\n `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${Math.max(\n 120,\n label.length * 11\n )} 32'><text x='0' y='22' font-family=\"Inter, Arial, sans-serif\" font-size='20' font-weight='700' fill='${color}'>${label}</text></svg>`\n )}`\n\nconst demoBrands: BrandStripItem[] = [\n { name: 'ANKER', logo: createTextLogo('ANKER', '#0B6CFF'), link: 'https://www.anker.com' },\n { name: 'ANKER SOLIX', logo: createTextLogo('ANKER SOLIX', '#111827'), link: 'https://www.anker.com/solix' },\n { name: 'eufy', logo: createTextLogo('eufy', '#00A5A5'), link: 'https://us.eufy.com' },\n { name: 'eufy Make', logo: createTextLogo('eufy Make', '#0B6CFF'), link: 'https://us.eufy.com' },\n { name: 'soundcore', logo: createTextLogo('soundcore', '#101828'), link: 'https://us.soundcore.com' },\n]\n\nexport const Default: Story = {\n args: {},\n}\n\nexport const WithLinks: Story = {\n args: {\n brands: demoBrands,\n },\n}\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,EAAA,cAAAC,EAAA,YAAAC,IAAA,eAAAC,EAAAL,GACA,IAAAM,EAAgD,2CAEhD,MAAMC,EAAO,CACX,MAAO,wBACP,UAAW,EAAAC,QACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOJ,EAAQG,EAGf,MAAME,EAAiB,CAACC,EAAeC,EAAgB,YACrD,sBAAsB,mBACpB,wDAAwD,KAAK,IAC3D,IACAD,EAAM,OAAS,EACjB,CAAC,yGAAyGC,CAAK,KAAKD,CAAK,eAC3H,CAAC,GAEGE,EAA+B,CACnC,CAAE,KAAM,QAAS,KAAMH,EAAe,QAAS,SAAS,EAAG,KAAM,uBAAwB,EACzF,CAAE,KAAM,cAAe,KAAMA,EAAe,cAAe,SAAS,EAAG,KAAM,6BAA8B,EAC3G,CAAE,KAAM,OAAQ,KAAMA,EAAe,OAAQ,SAAS,EAAG,KAAM,qBAAsB,EACrF,CAAE,KAAM,YAAa,KAAMA,EAAe,YAAa,SAAS,EAAG,KAAM,qBAAsB,EAC/F,CAAE,KAAM,YAAa,KAAMA,EAAe,YAAa,SAAS,EAAG,KAAM,0BAA2B,CACtG,EAEaP,EAAiB,CAC5B,KAAM,CAAC,CACT,EAEaC,EAAmB,CAC9B,KAAM,CACJ,OAAQS,CACV,CACF",
|
|
6
|
+
"names": ["brandStrip_stories_exports", "__export", "Default", "WithLinks", "brandStrip_stories_default", "__toCommonJS", "import_brand_strip", "meta", "BrandStrip", "createTextLogo", "label", "color", "demoBrands"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
type BrandStripItem = {
|
|
3
|
+
/** 品牌名称,用于默认展示和辅助文本 */
|
|
4
|
+
name: string;
|
|
5
|
+
/** 品牌 Logo 的图片地址,默认是内置的文字 Logo */
|
|
6
|
+
logo?: string;
|
|
7
|
+
/** 自定义 alt 文案 */
|
|
8
|
+
alt?: string;
|
|
9
|
+
/** 跳转链接,可选 */
|
|
10
|
+
link?: string;
|
|
11
|
+
};
|
|
12
|
+
type BrandStripProps = {
|
|
13
|
+
data: any;
|
|
14
|
+
/** 外层容器 class */
|
|
15
|
+
className?: string;
|
|
16
|
+
/** 每个卡片的 class */
|
|
17
|
+
itemClassName?: string;
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* BrandStrip - 品牌徽标展示条
|
|
21
|
+
*
|
|
22
|
+
* @description 展示品牌 Logo 列表的组件,支持自定义标题、Logo 和跳转链接
|
|
23
|
+
*/
|
|
24
|
+
declare const BrandStrip: React.FC<BrandStripProps>;
|
|
25
|
+
export type { BrandStripProps, BrandStripItem };
|
|
26
|
+
export default BrandStrip;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{jsx as t,jsxs as m}from"react/jsx-runtime";import"react";import i from"./link.js";import{cn as l}from"../helpers/utils.js";import{Container as o}from"./container.js";const p=({data:e,className:n,itemClassName:s})=>t("div",{className:l("w-full bg-[#f5f7fb]",n),children:m(o,{className:"py-6",childClassName:"space-y-4",children:[e?.title?t("p",{className:"mb-2 text-sm font-bold text-[#767880]",dangerouslySetInnerHTML:{__html:e?.title||""}}):null,t("ul",{className:"flex gap-2",role:"list",children:e?.leftIcon?.map?.((r,a)=>t("li",{children:t(i,{href:r.link,asChild:!r.link,className:"desktop:block hidden h-full",children:t("div",{dangerouslySetInnerHTML:{__html:r.logo||""},className:l("brand-strip-item box-border flex h-fit items-center justify-center bg-[#F5F6F7] px-4 py-2 [&_svg]:h-full [&_svg]:w-auto [&_svg_path]:[fill:#080A0F]",s)})})},a))})]})});var y=p;export{y as default};
|
|
2
|
+
//# sourceMappingURL=brand-strip.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/brand-strip.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport Link from './link.js'\nimport { cn } from '../helpers/utils.js'\nimport { Container } from './container.js'\n\ntype BrandStripItem = {\n /** \u54C1\u724C\u540D\u79F0\uFF0C\u7528\u4E8E\u9ED8\u8BA4\u5C55\u793A\u548C\u8F85\u52A9\u6587\u672C */\n name: string\n /** \u54C1\u724C Logo \u7684\u56FE\u7247\u5730\u5740\uFF0C\u9ED8\u8BA4\u662F\u5185\u7F6E\u7684\u6587\u5B57 Logo */\n logo?: string\n /** \u81EA\u5B9A\u4E49 alt \u6587\u6848 */\n alt?: string\n /** \u8DF3\u8F6C\u94FE\u63A5\uFF0C\u53EF\u9009 */\n link?: string\n}\n\ntype BrandStripProps = {\n data: any\n /** \u5916\u5C42\u5BB9\u5668 class */\n className?: string\n /** \u6BCF\u4E2A\u5361\u7247\u7684 class */\n itemClassName?: string\n}\n\n/**\n * BrandStrip - \u54C1\u724C\u5FBD\u6807\u5C55\u793A\u6761\n *\n * @description \u5C55\u793A\u54C1\u724C Logo \u5217\u8868\u7684\u7EC4\u4EF6\uFF0C\u652F\u6301\u81EA\u5B9A\u4E49\u6807\u9898\u3001Logo \u548C\u8DF3\u8F6C\u94FE\u63A5\n */\nconst BrandStrip: React.FC<BrandStripProps> = ({ data, className, itemClassName }) => {\n return (\n <div className={cn('w-full bg-[#f5f7fb]', className)}>\n <Container className=\"py-6\" childClassName=\"space-y-4\">\n {data?.title ? (\n <p\n className=\"mb-2 text-sm font-bold text-[#767880]\"\n dangerouslySetInnerHTML={{ __html: data?.title || '' }}\n />\n ) : null}\n <ul className=\"flex gap-2\" role=\"list\">\n {data?.leftIcon?.map?.((item: any, index: number) => {\n return (\n <li key={index}>\n <Link href={item.link} asChild={!item.link} className=\"desktop:block hidden h-full\">\n <div\n dangerouslySetInnerHTML={{ __html: item.logo || '' }}\n className={cn(\n 'brand-strip-item box-border flex h-fit items-center justify-center bg-[#F5F6F7] px-4 py-2 [&_svg]:h-full [&_svg]:w-auto [&_svg_path]:[fill:#080A0F]',\n itemClassName\n )}\n />\n </Link>\n </li>\n )\n })}\n </ul>\n </Container>\n </div>\n )\n}\n\nexport type { BrandStripProps, BrandStripItem }\nexport default BrandStrip\n"],
|
|
5
|
+
"mappings": "AAgCM,OAEI,OAAAA,EAFJ,QAAAC,MAAA,oBAhCN,MAAkB,QAClB,OAAOC,MAAU,YACjB,OAAS,MAAAC,MAAU,sBACnB,OAAS,aAAAC,MAAiB,iBA0B1B,MAAMC,EAAwC,CAAC,CAAE,KAAAC,EAAM,UAAAC,EAAW,cAAAC,CAAc,IAE5ER,EAAC,OAAI,UAAWG,EAAG,sBAAuBI,CAAS,EACjD,SAAAN,EAACG,EAAA,CAAU,UAAU,OAAO,eAAe,YACxC,UAAAE,GAAM,MACLN,EAAC,KACC,UAAU,wCACV,wBAAyB,CAAE,OAAQM,GAAM,OAAS,EAAG,EACvD,EACE,KACJN,EAAC,MAAG,UAAU,aAAa,KAAK,OAC7B,SAAAM,GAAM,UAAU,MAAM,CAACG,EAAWC,IAE/BV,EAAC,MACC,SAAAA,EAACE,EAAA,CAAK,KAAMO,EAAK,KAAM,QAAS,CAACA,EAAK,KAAM,UAAU,8BACpD,SAAAT,EAAC,OACC,wBAAyB,CAAE,OAAQS,EAAK,MAAQ,EAAG,EACnD,UAAWN,EACT,sJACAK,CACF,EACF,EACF,GATOE,CAUT,CAEH,EACH,GACF,EACF,EAKJ,IAAOC,EAAQN",
|
|
6
|
+
"names": ["jsx", "jsxs", "Link", "cn", "Container", "BrandStrip", "data", "className", "itemClassName", "item", "index", "brand_strip_default"]
|
|
7
|
+
}
|
|
@@ -26,3 +26,4 @@ export { default as Board } from './board.js';
|
|
|
26
26
|
export { default as LoadingDots } from './loadingDots.js';
|
|
27
27
|
export { ExposureDetector, type ExposureDetectorProps } from './ExposureDetector.js';
|
|
28
28
|
export { default as Breadcrumb } from './breadcrumb.js';
|
|
29
|
+
export { default as BrandStrip } from './brand-strip.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{default as e}from"./button.js";import{default as a}from"./badge.js";import{Input as n,InputSlot as u}from"./input.js";import{default as i}from"./checkbox.js";import{default as s}from"./skeleton.js";import{Dialog as
|
|
1
|
+
import{default as e}from"./button.js";import{default as a}from"./badge.js";import{Input as n,InputSlot as u}from"./input.js";import{default as i}from"./checkbox.js";import{default as s}from"./skeleton.js";import{Dialog as D,DialogPortal as f,DialogOverlay as x,DialogClose as C,DialogTrigger as g,DialogContent as w,DialogHeader as P,DialogFooter as T,DialogTitle as M,DialogDescription as b}from"./dialog.js";import{Popover as I,PopoverTrigger as c,PopoverContent as G}from"./popover.js";import{RadioGroup as S,RadioGroupItem as A}from"./radio.js";import{Text as R}from"./text.js";import{Grid as H,GridItem as L}from"./grid.js";import{Heading as F}from"./heading.js";import{Container as E}from"./container.js";import{Color as j}from"./color.js";import{Drawer as z,DrawerPortal as J,DrawerOverlay as K,DrawerTrigger as Q,DrawerClose as U,DrawerContent as V,DrawerHeader as W,DrawerFooter as X,DrawerTitle as Y,DrawerDescription as Z}from"./drawer.js";import{default as $}from"./link.js";import{Avatar as or,AvatarImage as er,AvatarFallback as tr}from"./avatar.js";import{default as pr}from"./input-number.js";import{DropdownMenu as ur,DropdownMenuTrigger as dr,DropdownMenuContent as ir,DropdownMenuItem as lr,DropdownMenuCheckboxItem as sr,DropdownMenuRadioItem as mr,DropdownMenuLabel as Dr,DropdownMenuSeparator as fr,DropdownMenuShortcut as xr,DropdownMenuGroup as Cr,DropdownMenuPortal as gr,DropdownMenuSub as wr,DropdownMenuSubContent as Pr,DropdownMenuSubTrigger as Tr,DropdownMenuRadioGroup as Mr}from"./drop-down.js";import{Card as yr,CardHeader as Ir,CardFooter as cr,CardTitle as Gr,CardDescription as vr,CardContent as Sr}from"./card.js";import{Carousel as kr,CarouselContent as Rr,CarouselItem as Br,CarouselPrevious as Hr,CarouselNext as Lr}from"./carousel.js";import{Tabs as Fr,TabsList as Nr,TabsTrigger as Er,TabsContent as Or}from"./tabs.js";import{Alert as qr,AlertTitle as zr,AlertDescription as Jr}from"./alert.js";import{default as Qr}from"./picture.js";import{default as Vr}from"./theme.js";import{default as Xr}from"./board.js";import{default as Zr}from"./loadingDots.js";import{ExposureDetector as $r}from"./ExposureDetector.js";import{default as oo}from"./breadcrumb.js";import{default as to}from"./brand-strip.js";export{qr as Alert,Jr as AlertDescription,zr as AlertTitle,or as Avatar,tr as AvatarFallback,er as AvatarImage,a as Badge,Xr as Board,to as BrandStrip,oo as Breadcrumb,e as Button,yr as Card,Sr as CardContent,vr as CardDescription,cr as CardFooter,Ir as CardHeader,Gr as CardTitle,kr as Carousel,Rr as CarouselContent,Br as CarouselItem,Lr as CarouselNext,Hr as CarouselPrevious,i as Checkbox,j as Color,E as Container,D as Dialog,C as DialogClose,w as DialogContent,b as DialogDescription,T as DialogFooter,P as DialogHeader,x as DialogOverlay,f as DialogPortal,M as DialogTitle,g as DialogTrigger,z as Drawer,U as DrawerClose,V as DrawerContent,Z as DrawerDescription,X as DrawerFooter,W as DrawerHeader,K as DrawerOverlay,J as DrawerPortal,Y as DrawerTitle,Q as DrawerTrigger,ur as DropdownMenu,sr as DropdownMenuCheckboxItem,ir as DropdownMenuContent,Cr as DropdownMenuGroup,lr as DropdownMenuItem,Dr as DropdownMenuLabel,gr as DropdownMenuPortal,Mr as DropdownMenuRadioGroup,mr as DropdownMenuRadioItem,fr as DropdownMenuSeparator,xr as DropdownMenuShortcut,wr as DropdownMenuSub,Pr as DropdownMenuSubContent,Tr as DropdownMenuSubTrigger,dr as DropdownMenuTrigger,$r as ExposureDetector,H as Grid,L as GridItem,F as Heading,n as Input,pr as InputNumber,u as InputSlot,$ as Link,Zr as LoadingDots,Qr as Picture,I as Popover,G as PopoverContent,c as PopoverTrigger,S as RadioGroup,A as RadioGroupItem,s as Skeleton,Fr as Tabs,Or as TabsContent,Nr as TabsList,Er as TabsTrigger,R as Text,Vr as Theme};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/index.ts"],
|
|
4
|
-
"sourcesContent": ["export { default as Button } from './button.js'\nexport { default as Badge } from './badge.js'\nexport { Input, InputSlot } from './input.js'\n\nexport { default as Checkbox } from './checkbox.js'\n\nexport { default as Skeleton } from './skeleton.js'\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogClose,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n} from './dialog.js'\nexport { Popover, PopoverTrigger, PopoverContent } from './popover.js'\nexport { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps } from './radio.js'\nexport { Text, type TextProps } from './text.js'\nexport { Grid, GridItem, type GridProps, type GridItemProps } from './grid.js'\nexport { Heading, type HeadingProps } from './heading.js'\nexport { Container, type ContainerProps } from './container.js'\nexport { Color, type ColorProps } from './color.js'\nexport {\n Drawer,\n DrawerPortal,\n DrawerOverlay,\n DrawerTrigger,\n DrawerClose,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerTitle,\n DrawerDescription,\n} from './drawer.js'\nexport { default as Link, type LinkProps } from './link.js'\nexport { Avatar, AvatarImage, AvatarFallback } from './avatar.js'\nexport { default as InputNumber, type InputNumberProps } from './input-number.js'\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuRadioGroup,\n} from './drop-down.js'\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card.js'\nexport {\n type CarouselApi,\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselPrevious,\n CarouselNext,\n} from './carousel.js'\nexport { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs.js'\nexport { Alert, AlertTitle, AlertDescription } from './alert.js'\nexport { default as Picture } from './picture.js'\nexport { default as Theme } from './theme.js'\nexport { default as Board } from './board.js'\nexport { default as LoadingDots } from './loadingDots.js'\nexport { ExposureDetector, type ExposureDetectorProps } from './ExposureDetector.js'\nexport { default as Breadcrumb } from './breadcrumb.js'\n"],
|
|
5
|
-
"mappings": "AAAA,OAAoB,WAAXA,MAAyB,cAClC,OAAoB,WAAXA,MAAwB,aACjC,OAAS,SAAAC,EAAO,aAAAC,MAAiB,aAEjC,OAAoB,WAAXF,MAA2B,gBAEpC,OAAoB,WAAXA,MAA2B,gBACpC,OACE,UAAAG,EACA,gBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,qBAAAC,MACK,cACP,OAAS,WAAAC,EAAS,kBAAAC,EAAgB,kBAAAC,MAAsB,eACxD,OAAS,cAAAC,EAAY,kBAAAC,MAAsE,aAC3F,OAAS,QAAAC,MAA4B,YACrC,OAAS,QAAAC,EAAM,YAAAC,MAAoD,YACnE,OAAS,WAAAC,MAAkC,eAC3C,OAAS,aAAAC,MAAsC,iBAC/C,OAAS,SAAAC,MAA8B,aACvC,OACE,UAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,qBAAAC,MACK,cACP,OAAoB,WAAXjC,MAAuC,YAChD,OAAS,UAAAkC,GAAQ,eAAAC,GAAa,kBAAAC,OAAsB,cACpD,OAAoB,WAAXpC,OAAqD,oBAC9D,OACE,gBAAAqC,GACA,uBAAAC,GACA,uBAAAC,GACA,oBAAAC,GACA,4BAAAC,GACA,yBAAAC,GACA,qBAAAC,GACA,yBAAAC,GACA,wBAAAC,GACA,qBAAAC,GACA,sBAAAC,GACA,mBAAAC,GACA,0BAAAC,GACA,0BAAAC,GACA,0BAAAC,OACK,iBACP,OAAS,QAAAC,GAAM,cAAAC,GAAY,cAAAC,GAAY,aAAAC,GAAW,mBAAAC,GAAiB,eAAAC,OAAmB,YACtF,OAEE,YAAAC,GACA,mBAAAC,GACA,gBAAAC,GACA,oBAAAC,GACA,gBAAAC,OACK,gBACP,OAAS,QAAAC,GAAM,YAAAC,GAAU,eAAAC,GAAa,eAAAC,OAAmB,YACzD,OAAS,SAAAC,GAAO,cAAAC,GAAY,oBAAAC,OAAwB,aACpD,OAAoB,WAAXrE,OAA0B,eACnC,OAAoB,WAAXA,OAAwB,aACjC,OAAoB,WAAXA,OAAwB,aACjC,OAAoB,WAAXA,OAA8B,mBACvC,OAAS,oBAAAsE,OAAoD,wBAC7D,OAAoB,WAAXtE,OAA6B",
|
|
4
|
+
"sourcesContent": ["export { default as Button } from './button.js'\nexport { default as Badge } from './badge.js'\nexport { Input, InputSlot } from './input.js'\n\nexport { default as Checkbox } from './checkbox.js'\n\nexport { default as Skeleton } from './skeleton.js'\nexport {\n Dialog,\n DialogPortal,\n DialogOverlay,\n DialogClose,\n DialogTrigger,\n DialogContent,\n DialogHeader,\n DialogFooter,\n DialogTitle,\n DialogDescription,\n} from './dialog.js'\nexport { Popover, PopoverTrigger, PopoverContent } from './popover.js'\nexport { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps } from './radio.js'\nexport { Text, type TextProps } from './text.js'\nexport { Grid, GridItem, type GridProps, type GridItemProps } from './grid.js'\nexport { Heading, type HeadingProps } from './heading.js'\nexport { Container, type ContainerProps } from './container.js'\nexport { Color, type ColorProps } from './color.js'\nexport {\n Drawer,\n DrawerPortal,\n DrawerOverlay,\n DrawerTrigger,\n DrawerClose,\n DrawerContent,\n DrawerHeader,\n DrawerFooter,\n DrawerTitle,\n DrawerDescription,\n} from './drawer.js'\nexport { default as Link, type LinkProps } from './link.js'\nexport { Avatar, AvatarImage, AvatarFallback } from './avatar.js'\nexport { default as InputNumber, type InputNumberProps } from './input-number.js'\nexport {\n DropdownMenu,\n DropdownMenuTrigger,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuCheckboxItem,\n DropdownMenuRadioItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuGroup,\n DropdownMenuPortal,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuRadioGroup,\n} from './drop-down.js'\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } from './card.js'\nexport {\n type CarouselApi,\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselPrevious,\n CarouselNext,\n} from './carousel.js'\nexport { Tabs, TabsList, TabsTrigger, TabsContent } from './tabs.js'\nexport { Alert, AlertTitle, AlertDescription } from './alert.js'\nexport { default as Picture } from './picture.js'\nexport { default as Theme } from './theme.js'\nexport { default as Board } from './board.js'\nexport { default as LoadingDots } from './loadingDots.js'\nexport { ExposureDetector, type ExposureDetectorProps } from './ExposureDetector.js'\nexport { default as Breadcrumb } from './breadcrumb.js'\nexport { default as BrandStrip } from './brand-strip.js'\n"],
|
|
5
|
+
"mappings": "AAAA,OAAoB,WAAXA,MAAyB,cAClC,OAAoB,WAAXA,MAAwB,aACjC,OAAS,SAAAC,EAAO,aAAAC,MAAiB,aAEjC,OAAoB,WAAXF,MAA2B,gBAEpC,OAAoB,WAAXA,MAA2B,gBACpC,OACE,UAAAG,EACA,gBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,qBAAAC,MACK,cACP,OAAS,WAAAC,EAAS,kBAAAC,EAAgB,kBAAAC,MAAsB,eACxD,OAAS,cAAAC,EAAY,kBAAAC,MAAsE,aAC3F,OAAS,QAAAC,MAA4B,YACrC,OAAS,QAAAC,EAAM,YAAAC,MAAoD,YACnE,OAAS,WAAAC,MAAkC,eAC3C,OAAS,aAAAC,MAAsC,iBAC/C,OAAS,SAAAC,MAA8B,aACvC,OACE,UAAAC,EACA,gBAAAC,EACA,iBAAAC,EACA,iBAAAC,EACA,eAAAC,EACA,iBAAAC,EACA,gBAAAC,EACA,gBAAAC,EACA,eAAAC,EACA,qBAAAC,MACK,cACP,OAAoB,WAAXjC,MAAuC,YAChD,OAAS,UAAAkC,GAAQ,eAAAC,GAAa,kBAAAC,OAAsB,cACpD,OAAoB,WAAXpC,OAAqD,oBAC9D,OACE,gBAAAqC,GACA,uBAAAC,GACA,uBAAAC,GACA,oBAAAC,GACA,4BAAAC,GACA,yBAAAC,GACA,qBAAAC,GACA,yBAAAC,GACA,wBAAAC,GACA,qBAAAC,GACA,sBAAAC,GACA,mBAAAC,GACA,0BAAAC,GACA,0BAAAC,GACA,0BAAAC,OACK,iBACP,OAAS,QAAAC,GAAM,cAAAC,GAAY,cAAAC,GAAY,aAAAC,GAAW,mBAAAC,GAAiB,eAAAC,OAAmB,YACtF,OAEE,YAAAC,GACA,mBAAAC,GACA,gBAAAC,GACA,oBAAAC,GACA,gBAAAC,OACK,gBACP,OAAS,QAAAC,GAAM,YAAAC,GAAU,eAAAC,GAAa,eAAAC,OAAmB,YACzD,OAAS,SAAAC,GAAO,cAAAC,GAAY,oBAAAC,OAAwB,aACpD,OAAoB,WAAXrE,OAA0B,eACnC,OAAoB,WAAXA,OAAwB,aACjC,OAAoB,WAAXA,OAAwB,aACjC,OAAoB,WAAXA,OAA8B,mBACvC,OAAS,oBAAAsE,OAAoD,wBAC7D,OAAoB,WAAXtE,OAA6B,kBACtC,OAAoB,WAAXA,OAA6B",
|
|
6
6
|
"names": ["default", "Input", "InputSlot", "Dialog", "DialogPortal", "DialogOverlay", "DialogClose", "DialogTrigger", "DialogContent", "DialogHeader", "DialogFooter", "DialogTitle", "DialogDescription", "Popover", "PopoverTrigger", "PopoverContent", "RadioGroup", "RadioGroupItem", "Text", "Grid", "GridItem", "Heading", "Container", "Color", "Drawer", "DrawerPortal", "DrawerOverlay", "DrawerTrigger", "DrawerClose", "DrawerContent", "DrawerHeader", "DrawerFooter", "DrawerTitle", "DrawerDescription", "Avatar", "AvatarImage", "AvatarFallback", "DropdownMenu", "DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "DropdownMenuCheckboxItem", "DropdownMenuRadioItem", "DropdownMenuLabel", "DropdownMenuSeparator", "DropdownMenuShortcut", "DropdownMenuGroup", "DropdownMenuPortal", "DropdownMenuSub", "DropdownMenuSubContent", "DropdownMenuSubTrigger", "DropdownMenuRadioGroup", "Card", "CardHeader", "CardFooter", "CardTitle", "CardDescription", "CardContent", "Carousel", "CarouselContent", "CarouselItem", "CarouselPrevious", "CarouselNext", "Tabs", "TabsList", "TabsTrigger", "TabsContent", "Alert", "AlertTitle", "AlertDescription", "ExposureDetector"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import n from"../components/brand-strip.js";const r={title:"Components/BrandStrip",component:n,parameters:{layout:"fullscreen"},tags:["autodocs"]};var i=r;const t=(o,e="#0B6CFF")=>`data:image/svg+xml,${encodeURIComponent(`<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${Math.max(120,o.length*11)} 32'><text x='0' y='22' font-family="Inter, Arial, sans-serif" font-size='20' font-weight='700' fill='${e}'>${o}</text></svg>`)}`,s=[{name:"ANKER",logo:t("ANKER","#0B6CFF"),link:"https://www.anker.com"},{name:"ANKER SOLIX",logo:t("ANKER SOLIX","#111827"),link:"https://www.anker.com/solix"},{name:"eufy",logo:t("eufy","#00A5A5"),link:"https://us.eufy.com"},{name:"eufy Make",logo:t("eufy Make","#0B6CFF"),link:"https://us.eufy.com"},{name:"soundcore",logo:t("soundcore","#101828"),link:"https://us.soundcore.com"}],m={args:{}},p={args:{brands:s}};export{m as Default,p as WithLinks,i as default};
|
|
2
|
+
//# sourceMappingURL=brandStrip.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/stories/brandStrip.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from '@storybook/react'\nimport BrandStrip, { type BrandStripItem } from '../components/brand-strip.js'\n\nconst meta = {\n title: 'Components/BrandStrip',\n component: BrandStrip,\n parameters: {\n layout: 'fullscreen',\n },\n tags: ['autodocs'],\n} satisfies Meta<typeof BrandStrip>\n\nexport default meta\ntype Story = StoryObj<typeof meta>\n\nconst createTextLogo = (label: string, color: string = '#0B6CFF') =>\n `data:image/svg+xml,${encodeURIComponent(\n `<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 ${Math.max(\n 120,\n label.length * 11\n )} 32'><text x='0' y='22' font-family=\"Inter, Arial, sans-serif\" font-size='20' font-weight='700' fill='${color}'>${label}</text></svg>`\n )}`\n\nconst demoBrands: BrandStripItem[] = [\n { name: 'ANKER', logo: createTextLogo('ANKER', '#0B6CFF'), link: 'https://www.anker.com' },\n { name: 'ANKER SOLIX', logo: createTextLogo('ANKER SOLIX', '#111827'), link: 'https://www.anker.com/solix' },\n { name: 'eufy', logo: createTextLogo('eufy', '#00A5A5'), link: 'https://us.eufy.com' },\n { name: 'eufy Make', logo: createTextLogo('eufy Make', '#0B6CFF'), link: 'https://us.eufy.com' },\n { name: 'soundcore', logo: createTextLogo('soundcore', '#101828'), link: 'https://us.soundcore.com' },\n]\n\nexport const Default: Story = {\n args: {},\n}\n\nexport const WithLinks: Story = {\n args: {\n brands: demoBrands,\n },\n}\n"],
|
|
5
|
+
"mappings": "AACA,OAAOA,MAAyC,+BAEhD,MAAMC,EAAO,CACX,MAAO,wBACP,UAAWD,EACX,WAAY,CACV,OAAQ,YACV,EACA,KAAM,CAAC,UAAU,CACnB,EAEA,IAAOE,EAAQD,EAGf,MAAME,EAAiB,CAACC,EAAeC,EAAgB,YACrD,sBAAsB,mBACpB,wDAAwD,KAAK,IAC3D,IACAD,EAAM,OAAS,EACjB,CAAC,yGAAyGC,CAAK,KAAKD,CAAK,eAC3H,CAAC,GAEGE,EAA+B,CACnC,CAAE,KAAM,QAAS,KAAMH,EAAe,QAAS,SAAS,EAAG,KAAM,uBAAwB,EACzF,CAAE,KAAM,cAAe,KAAMA,EAAe,cAAe,SAAS,EAAG,KAAM,6BAA8B,EAC3G,CAAE,KAAM,OAAQ,KAAMA,EAAe,OAAQ,SAAS,EAAG,KAAM,qBAAsB,EACrF,CAAE,KAAM,YAAa,KAAMA,EAAe,YAAa,SAAS,EAAG,KAAM,qBAAsB,EAC/F,CAAE,KAAM,YAAa,KAAMA,EAAe,YAAa,SAAS,EAAG,KAAM,0BAA2B,CACtG,EAEaI,EAAiB,CAC5B,KAAM,CAAC,CACT,EAEaC,EAAmB,CAC9B,KAAM,CACJ,OAAQF,CACV,CACF",
|
|
6
|
+
"names": ["BrandStrip", "meta", "brandStrip_stories_default", "createTextLogo", "label", "color", "demoBrands", "Default", "WithLinks"]
|
|
7
|
+
}
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -676,6 +676,9 @@ video {
|
|
|
676
676
|
.mb-1 {
|
|
677
677
|
margin-bottom: 0.25rem;
|
|
678
678
|
}
|
|
679
|
+
.mb-2 {
|
|
680
|
+
margin-bottom: 0.5rem;
|
|
681
|
+
}
|
|
679
682
|
.ml-auto {
|
|
680
683
|
margin-left: auto;
|
|
681
684
|
}
|
|
@@ -685,6 +688,9 @@ video {
|
|
|
685
688
|
.mt-auto {
|
|
686
689
|
margin-top: auto;
|
|
687
690
|
}
|
|
691
|
+
.box-border {
|
|
692
|
+
box-sizing: border-box;
|
|
693
|
+
}
|
|
688
694
|
.block {
|
|
689
695
|
display: block;
|
|
690
696
|
}
|
|
@@ -932,6 +938,11 @@ video {
|
|
|
932
938
|
margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
|
|
933
939
|
margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
|
|
934
940
|
}
|
|
941
|
+
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
|
|
942
|
+
--tw-space-y-reverse: 0;
|
|
943
|
+
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
|
|
944
|
+
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
|
|
945
|
+
}
|
|
935
946
|
.overflow-hidden {
|
|
936
947
|
overflow: hidden;
|
|
937
948
|
}
|
|
@@ -1021,6 +1032,14 @@ video {
|
|
|
1021
1032
|
--tw-bg-opacity: 1;
|
|
1022
1033
|
background-color: rgb(134 134 140 / var(--tw-bg-opacity, 1));
|
|
1023
1034
|
}
|
|
1035
|
+
.bg-\[\#F5F6F7\] {
|
|
1036
|
+
--tw-bg-opacity: 1;
|
|
1037
|
+
background-color: rgb(245 246 247 / var(--tw-bg-opacity, 1));
|
|
1038
|
+
}
|
|
1039
|
+
.bg-\[\#f5f7fb\] {
|
|
1040
|
+
--tw-bg-opacity: 1;
|
|
1041
|
+
background-color: rgb(245 247 251 / var(--tw-bg-opacity, 1));
|
|
1042
|
+
}
|
|
1024
1043
|
.bg-background {
|
|
1025
1044
|
background-color: var(--container-primary-color);
|
|
1026
1045
|
}
|
|
@@ -1343,6 +1362,10 @@ video {
|
|
|
1343
1362
|
--tw-text-opacity: 1;
|
|
1344
1363
|
color: rgb(109 109 111 / var(--tw-text-opacity, 1));
|
|
1345
1364
|
}
|
|
1365
|
+
.text-\[\#767880\] {
|
|
1366
|
+
--tw-text-opacity: 1;
|
|
1367
|
+
color: rgb(118 120 128 / var(--tw-text-opacity, 1));
|
|
1368
|
+
}
|
|
1346
1369
|
.text-\[\#86868C\] {
|
|
1347
1370
|
--tw-text-opacity: 1;
|
|
1348
1371
|
color: rgb(134 134 140 / var(--tw-text-opacity, 1));
|
|
@@ -1998,6 +2021,9 @@ video {
|
|
|
1998
2021
|
.\[\&_svg_path\]\:duration-200 svg path {
|
|
1999
2022
|
transition-duration: 200ms;
|
|
2000
2023
|
}
|
|
2024
|
+
.\[\&_svg_path\]\:\[fill\:\#080A0F\] svg path {
|
|
2025
|
+
fill: #080A0F;
|
|
2026
|
+
}
|
|
2001
2027
|
.\[\&_svg_path\]\:\[fill\:\#75787F\] svg path {
|
|
2002
2028
|
fill: #75787F;
|
|
2003
2029
|
}
|