@anker-in/headless-ui 0.0.27-alpha.14 → 0.0.27-alpha.15
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/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/cjs/biz-components/HeroBanner/HeroBanner.js.map +2 -2
- package/dist/cjs/components/button.js +1 -1
- package/dist/cjs/components/button.js.map +2 -2
- package/dist/cjs/components/tabs.d.ts +2 -0
- package/dist/cjs/components/tabs.js +1 -1
- package/dist/cjs/components/tabs.js.map +3 -3
- package/dist/cjs/stories/tabs.stories.d.ts +4 -0
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js +1 -1
- package/dist/esm/biz-components/HeroBanner/HeroBanner.js.map +3 -3
- package/dist/esm/components/button.js +1 -1
- package/dist/esm/components/button.js.map +2 -2
- package/dist/esm/components/tabs.d.ts +2 -0
- package/dist/esm/components/tabs.js +1 -1
- package/dist/esm/components/tabs.js.map +3 -3
- package/dist/esm/stories/tabs.stories.d.ts +4 -0
- package/package.json +1 -1
- package/style.css +33 -14
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var w=Object.create;var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"use strict";var w=Object.create;var m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var y=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var H=(e,a)=>{for(var r in a)m(e,r,{get:a[r],enumerable:!0})},g=(e,a,r,n)=>{if(a&&typeof a=="object"||typeof a=="function")for(let l of D(a))!F.call(e,l)&&l!==r&&m(e,l,{get:()=>a[l],enumerable:!(n=u(a,l))||n.enumerable});return e};var z=(e,a,r)=>(r=e!=null?w(y(e)):{},g(a||!e||!e.__esModule?m(r,"default",{value:e,enumerable:!0}):r,e)),C=e=>g(m({},"__esModule",{value:!0}),e);var P={};H(P,{default:()=>B});module.exports=C(P);var t=require("react/jsx-runtime"),p=z(require("react")),s=require("../../components/index.js"),i=require("../../helpers/index.js"),v=require("../../shared/Styles.js");const b=p.default.forwardRef(({title:e,subtitle:a,background:r,primaryButton:n,secondaryButton:l,theme:o="light",className:f,products:c=[]},h)=>{const d=o==="dark"?"text-white":"text-[#1D1D1F]",N=o==="dark"?"bg-white":"bg-[#1D1D1F]";return(0,t.jsxs)("div",{ref:h,className:(0,i.cn)("lg-desktop:aspect-[1920/930] tablet:aspect-[768/660] relative aspect-[390/660] w-full",f),children:[(0,t.jsx)(s.Picture,{className:"absolute top-0",source:r}),(0,t.jsxs)("div",{className:"relative z-10 flex flex-col gap-8 px-32",children:[(0,t.jsxs)("div",{className:"max-w-[686px] space-y-4",children:[(0,t.jsx)("h1",{className:(0,i.cn)("hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]",d),children:e}),(0,t.jsx)("p",{className:(0,i.cn)("hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]",d),children:a})]}),(0,t.jsxs)("div",{className:"flex items-center gap-4",children:[l&&(0,t.jsx)(s.Button,{size:"lg",variant:"primary",theme:o,className:"hero-banner-primary-button",...l,children:l.text}),n&&(0,t.jsx)(s.Button,{size:"lg",variant:"secondary",theme:o,...n,className:"hero-banner-secondary-button border-black bg-transparent text-black hover:bg-black hover:text-white",children:n.text})]})]}),c.length>0&&(0,t.jsx)("div",{className:"relative z-10 flex items-center gap-3 px-32 pb-6",children:c.map((k,x)=>(0,t.jsxs)(p.default.Fragment,{children:[(0,t.jsx)(s.Text,{className:(0,i.cn)("hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]",o==="dark"?"text-white":"text-[#1D1D1F]"),children:k.title}),x<c.length-1&&(0,t.jsx)("div",{className:(0,i.cn)("h-4 w-px",N)})]},x))})]})});b.displayName="HeroBanner";var B=(0,v.withStyles)(b);
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n ({ title, subtitle, background, primaryButton, secondaryButton, theme = 'light', className, products = [] }, ref) => {\n const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\n\n return (\n <div\n ref={ref}\n className={cn(\n '
|
|
5
|
-
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n ({ title, subtitle, background, primaryButton, secondaryButton, theme = 'light', className, products = [] }, ref) => {\n const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\n\n return (\n <div\n ref={ref}\n className={cn(\n 'lg-desktop:aspect-[1920/930] tablet:aspect-[768/660] relative aspect-[390/660] w-full',\n className\n )}\n >\n <Picture className=\"absolute top-0\" source={background} />\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"relative z-10 flex flex-col gap-8 px-32\">\n <div className=\"max-w-[686px] space-y-4\">\n <h1\n className={cn(\n 'hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]',\n textColorClass\n )}\n >\n {title}\n </h1>\n <p\n className={cn(\n 'hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]',\n textColorClass\n )}\n >\n {subtitle}\n </p>\n </div>\n\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"flex items-center gap-4\">\n {secondaryButton && (\n <Button\n size=\"lg\"\n variant=\"primary\"\n theme={theme}\n className=\"hero-banner-primary-button\"\n {...secondaryButton}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton && (\n <Button\n size=\"lg\"\n variant=\"secondary\"\n theme={theme}\n {...primaryButton}\n className=\"hero-banner-secondary-button border-black bg-transparent text-black hover:bg-black hover:text-white\"\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {products.length > 0 && (\n <div className=\"relative z-10 flex items-center gap-3 px-32 pb-6\">\n {products.map((product, index) => (\n <React.Fragment key={index}>\n <Text\n className={cn(\n 'hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]',\n theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n )}\n >\n {product.title}\n </Text>\n {index < products.length - 1 && <div className={cn('h-4 w-px', dividerColorClass)} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "0jBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAmBQ,IAAAI,EAAA,6BAnBRC,EAAkB,oBAElBC,EAAsC,qCACtCC,EAAmB,kCACnBC,EAA2B,kCAE3B,MAAMC,EAAa,EAAAC,QAAM,WACvB,CAAC,CAAE,MAAAC,EAAO,SAAAC,EAAU,WAAAC,EAAY,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,UAAAC,EAAW,SAAAC,EAAW,CAAC,CAAE,EAAGC,IAAQ,CACnH,MAAMC,EAAiBJ,IAAU,OAAS,aAAe,iBACnDK,EAAoBL,IAAU,OAAS,WAAa,eAE1D,SACE,QAAC,OACC,IAAKG,EACL,aAAW,MACT,wFACAF,CACF,EAEA,oBAAC,WAAQ,UAAU,iBAAiB,OAAQJ,EAAY,KAExD,QAAC,OAAI,UAAU,0CACb,qBAAC,OAAI,UAAU,0BACb,oBAAC,MACC,aAAW,MACT,oFACAO,CACF,EAEC,SAAAT,EACH,KACA,OAAC,KACC,aAAW,MACT,4EACAS,CACF,EAEC,SAAAR,EACH,GACF,KAGA,QAAC,OAAI,UAAU,0BACZ,UAAAG,MACC,OAAC,UACC,KAAK,KACL,QAAQ,UACR,MAAOC,EACP,UAAU,6BACT,GAAGD,EAEH,SAAAA,EAAgB,KACnB,EAEDD,MACC,OAAC,UACC,KAAK,KACL,QAAQ,YACR,MAAOE,EACN,GAAGF,EACJ,UAAU,sGAET,SAAAA,EAAc,KACjB,GAEJ,GACF,EAGCI,EAAS,OAAS,MACjB,OAAC,OAAI,UAAU,mDACZ,SAAAA,EAAS,IAAI,CAACI,EAASC,OACtB,QAAC,EAAAb,QAAM,SAAN,CACC,oBAAC,QACC,aAAW,MACT,gFACAM,IAAU,OAAS,aAAe,gBACpC,EAEC,SAAAM,EAAQ,MACX,EACCC,EAAQL,EAAS,OAAS,MAAK,OAAC,OAAI,aAAW,MAAG,WAAYG,CAAiB,EAAG,IAThEE,CAUrB,CACD,EACH,GAEJ,CAEJ,CACF,EAEAd,EAAW,YAAc,aAEzB,IAAOP,KAAQ,cAAWO,CAAU",
|
|
6
6
|
"names": ["HeroBanner_exports", "__export", "HeroBanner_default", "__toCommonJS", "import_jsx_runtime", "import_react", "import_components", "import_helpers", "import_Styles", "HeroBanner", "React", "title", "subtitle", "background", "primaryButton", "secondaryButton", "theme", "className", "products", "ref", "textColorClass", "dividerColorClass", "product", "index"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var w=Object.create;var i=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var r in t)i(e,r,{get:t[r],enumerable:!0})},f=(e,t,r,
|
|
1
|
+
"use strict";"use client";var w=Object.create;var i=Object.defineProperty;var V=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var z=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var r in t)i(e,r,{get:t[r],enumerable:!0})},f=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of B(t))!E.call(e,o)&&o!==r&&i(e,o,{get:()=>t[o],enumerable:!(n=V(t,o))||n.enumerable});return e};var c=(e,t,r)=>(r=e!=null?w(z(e)):{},f(t||!e||!e.__esModule?i(r,"default",{value:e,enumerable:!0}):r,e)),N=e=>f(i({},"__esModule",{value:!0}),e);var M={};H(M,{default:()=>L});module.exports=N(M);var a=require("react/jsx-runtime"),P=c(require("react")),m=require("@radix-ui/react-slot"),y=require("@radix-ui/react-visually-hidden"),d=require("class-variance-authority"),v=c(require("../icons/spinner.js")),g=require("../helpers/index.js");const R=(0,d.cva)("ring-offset-background focus-visible:ring-ring rounded-btn inline-flex items-center justify-center border-[1.6px] border-solid text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none",{variants:{variant:{primary:"bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active border-info-primary hover:border-btn-primary-active",secondary:"bg-btn-secondary border-info-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary border border-solid",link:"text-info-primary hover:text-btn-primary-active border-none underline-offset-4 hover:underline",ghost:"hover:bg-btn-primary hover:text-btn-primary-foreground"},size:{sm:"px-3 py-2 text-[12px] leading-tight",base:"px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",lg:"px-7 pb-[14px] pt-[15px] text-[16px] leading-tight",icon:"size-10 rounded-full leading-tight"},hoverEffect:{none:"",slide:""},state:{default:"",disabled:"",loading:""},theme:{dark:"",light:""}},compoundVariants:[{variant:"primary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"secondary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"primary",state:"loading",class:"bg-btn-primary-active"},{variant:"secondary",state:"loading",class:"bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground"},{variant:"primary",state:"disabled",class:"disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground"},{variant:"secondary",state:"disabled",class:"disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border"},{variant:"secondary",theme:"dark",class:"text-info-white bg-info-primary hover:border-info-white hover:text-info-primary hover:bg-info-white"},{variant:"secondary",theme:"dark",state:"loading",class:"bg-btn-info-white text-info-primary border-info-white"},{variant:"secondary",theme:"dark",state:"disabled",class:"disabled:bg-text-info-quaternary disabled:text-info-white"},{variant:"link",state:"disabled",class:"disabled:text-info-quaternary"},{variant:"primary",theme:"dark",class:"text-info-primary hover:text-info-white bg-info-white hover:border-brand-0"},{variant:"primary",theme:"dark",state:"loading",class:"bg-btn-primary-active text-info-white border-brand-0"},{variant:"secondary",theme:"dark",class:"border-info-white"},{variant:"secondary",theme:"light",class:""},{variant:"link",theme:"dark",class:"text-info-white"}],defaultVariants:{variant:"primary",size:"base",hoverEffect:"none",state:"default",theme:"light"}}),C=(0,d.cva)("",{variants:{variant:{primary:"stroke-btn-primary-foreground",secondary:"stroke-btn-secondary-foreground",link:"stroke-primary",ghost:"stroke-primary"},theme:{dark:"",light:""}},defaultVariants:{variant:"primary",theme:"light"}}),p=P.forwardRef(({asChild:e=!1,size:t="base",children:r,variant:n,theme:o="light",hoverEffect:h="none",className:u,disabled:b=!1,loading:s=!1,spinner:l,...x},k)=>(0,a.jsx)(e?m.Slot:"button",{disabled:b||s,className:(0,g.cn)(R({variant:n,size:t,hoverEffect:h,state:s?"loading":b?"disabled":"default",theme:o}),u),ref:k,...x,children:s?(0,a.jsxs)(a.Fragment,{children:[(0,a.jsx)("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:r}),(0,a.jsx)("span",{className:"absolute",children:l||(0,a.jsx)(v.default,{className:C({variant:n,theme:o})})}),(0,a.jsx)(y.VisuallyHidden,{children:r})]}):r}));p.displayName="Button";var L=p;
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/button.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\n/**\n * Button Variants\n */\nconst buttonVariants = cva(\n 'ring-offset-background
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\n/**\n * Button Variants\n */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n 'ring-offset-background focus-visible:ring-ring rounded-btn inline-flex items-center justify-center border-[1.6px] border-solid text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n {\n variants: {\n variant: {\n primary:\n 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active border-info-primary hover:border-btn-primary-active',\n secondary:\n 'bg-btn-secondary border-info-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary border border-solid',\n link: 'text-info-primary hover:text-btn-primary-active border-none underline-offset-4 hover:underline',\n ghost: 'hover:bg-btn-primary hover:text-btn-primary-foreground',\n },\n size: {\n sm: 'px-3 py-2 text-[12px] leading-tight',\n base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n lg: 'px-7 pb-[14px] pt-[15px] text-[16px] leading-tight',\n icon: 'size-10 rounded-full leading-tight',\n },\n /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n hoverEffect: {\n none: '',\n slide: '',\n },\n state: {\n default: '',\n disabled: '',\n loading: '',\n },\n theme: {\n dark: '',\n light: '',\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'secondary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'primary',\n state: 'loading',\n class: 'bg-btn-primary-active',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class: 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class: 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border',\n },\n {\n variant: 'secondary',\n theme: 'dark',\n class: 'text-info-white bg-info-primary hover:border-info-white hover:text-info-primary hover:bg-info-white',\n },\n {\n variant: 'secondary',\n theme: 'dark',\n state: 'loading',\n class: 'bg-btn-info-white text-info-primary border-info-white',\n },\n {\n variant: 'secondary',\n theme: 'dark',\n state: 'disabled',\n class: 'disabled:bg-text-info-quaternary disabled:text-info-white',\n },\n {\n variant: 'link',\n state: 'disabled',\n class: 'disabled:text-info-quaternary',\n },\n {\n variant: 'primary',\n theme: 'dark',\n class: 'text-info-primary hover:text-info-white bg-info-white hover:border-brand-0',\n },\n {\n variant: 'primary',\n theme: 'dark',\n state: 'loading',\n class: 'bg-btn-primary-active text-info-white border-brand-0',\n },\n {\n variant: 'secondary',\n theme: 'dark',\n class: 'border-info-white',\n },\n {\n variant: 'secondary',\n theme: 'light',\n class: '',\n },\n {\n variant: 'link',\n theme: 'dark',\n class: 'text-info-white',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'base',\n hoverEffect: 'none',\n state: 'default',\n theme: 'light',\n },\n }\n)\n\nconst loadingSvgVariants = cva('', {\n variants: {\n variant: {\n primary: 'stroke-btn-primary-foreground',\n secondary: 'stroke-btn-secondary-foreground',\n link: 'stroke-primary',\n ghost: 'stroke-primary',\n },\n theme: {\n dark: '',\n light: '',\n },\n },\n defaultVariants: {\n variant: 'primary',\n theme: 'light',\n },\n})\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n asChild?: boolean\n /** \u81EA\u5B9A\u4E49loading */\n spinner?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n asChild = false,\n size = 'base',\n children,\n variant,\n theme = 'light',\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n spinner,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = asChild ? Slot : 'button'\n const isInactive = disabled || loading\n const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(buttonVariants({ variant, size, hoverEffect, state, theme }), className)}\n ref={ref}\n {...props}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"absolute\">\n {spinner ? (\n spinner\n ) : (\n <Spinner\n className={loadingSvgVariants({\n variant,\n theme,\n })}\n />\n )}\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n children\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,aAAAE,IAAA,eAAAC,EAAAH,GAwMU,IAAAI,EAAA,6BAtMVC,EAAuB,oBACvBC,EAAqB,gCACrBC,EAA+B,2CAC/BC,EAAuC,oCACvCC,EAAoB,kCACpBC,EAAmB,+BAMnB,MAAMC,KAAiB,OACrB,gRACA,CACE,SAAU,CACR,QAAS,CACP,QACE,6HACF,UACE,gJACF,KAAM,iGACN,MAAO,wDACT,EACA,KAAM,CACJ,GAAI,uCACJ,KAAM,qDACN,GAAI,sDACJ,KAAM,qCACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,EACA,MAAO,CACL,QAAS,GACT,SAAU,GACV,QAAS,EACX,EACA,MAAO,CACL,KAAM,GACN,MAAO,EACT,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,8SACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mTACJ,EACA,CACE,QAAS,UACT,MAAO,UACP,MAAO,uBACT,EACA,CACE,QAAS,YACT,MAAO,UACP,MAAO,qGACT,EACA,CACE,QAAS,UACT,MAAO,WACP,MAAO,gFACT,EACA,CACE,QAAS,YACT,MAAO,WACP,MACE,kIACJ,EACA,CACE,QAAS,YACT,MAAO,OACP,MAAO,qGACT,EACA,CACE,QAAS,YACT,MAAO,OACP,MAAO,UACP,MAAO,uDACT,EACA,CACE,QAAS,YACT,MAAO,OACP,MAAO,WACP,MAAO,2DACT,EACA,CACE,QAAS,OACT,MAAO,WACP,MAAO,+BACT,EACA,CACE,QAAS,UACT,MAAO,OACP,MAAO,4EACT,EACA,CACE,QAAS,UACT,MAAO,OACP,MAAO,UACP,MAAO,sDACT,EACA,CACE,QAAS,YACT,MAAO,OACP,MAAO,mBACT,EACA,CACE,QAAS,YACT,MAAO,QACP,MAAO,EACT,EACA,CACE,QAAS,OACT,MAAO,OACP,MAAO,iBACT,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,OACN,YAAa,OACb,MAAO,UACP,MAAO,OACT,CACF,CACF,EAEMC,KAAqB,OAAI,GAAI,CACjC,SAAU,CACR,QAAS,CACP,QAAS,gCACT,UAAW,kCACX,KAAM,iBACN,MAAO,gBACT,EACA,MAAO,CACL,KAAM,GACN,MAAO,EACT,CACF,EACA,gBAAiB,CACf,QAAS,UACT,MAAO,OACT,CACF,CAAC,EAeKC,EAASR,EAAM,WACnB,CACE,CACE,QAAAS,EAAU,GACV,KAAAC,EAAO,OACP,SAAAC,EACA,QAAAC,EACA,MAAAC,EAAQ,QACR,YAAAC,EAAc,OACd,UAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,QAAAC,EACA,GAAGC,CACL,EACAC,OAOE,OALWX,EAAU,OAAO,SAK3B,CACC,SALeO,GAAYC,EAM3B,aAAW,MAAGX,EAAe,CAAE,QAAAM,EAAS,KAAAF,EAAM,YAAAI,EAAa,MALjDG,EAAU,UAAYD,EAAW,WAAa,UAKU,MAAAH,CAAM,CAAC,EAAGE,CAAS,EACrF,IAAKK,EACJ,GAAGD,EAEH,SAAAF,KACC,oBACE,oBAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,GACpE,SAAAN,EACH,KACA,OAAC,QAAK,UAAU,WACb,SAAAO,MAGC,OAAC,EAAAG,QAAA,CACC,UAAWd,EAAmB,CAC5B,QAAAK,EACA,MAAAC,CACF,CAAC,EACH,EAEJ,KACA,OAAC,kBAAgB,SAAAF,EAAS,GAC5B,EAEAA,EAEJ,CAGN,EAEAH,EAAO,YAAc,SACrB,IAAOX,EAAQW",
|
|
6
6
|
"names": ["button_exports", "__export", "button_default", "__toCommonJS", "import_jsx_runtime", "React", "import_react_slot", "import_react_visually_hidden", "import_class_variance_authority", "import_spinner", "import_helpers", "buttonVariants", "loadingSvgVariants", "Button", "asChild", "size", "children", "variant", "theme", "hoverEffect", "className", "disabled", "loading", "spinner", "props", "ref", "Spinner"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,8 @@ import * as React from 'react';
|
|
|
2
2
|
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
3
3
|
declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
4
4
|
algin?: "left" | "center" | "right";
|
|
5
|
+
shape?: "rounded" | "square";
|
|
6
|
+
theme: "light" | "dark";
|
|
5
7
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
6
8
|
declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
9
|
declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";"use client";var
|
|
1
|
+
"use strict";"use client";var x=Object.create;var p=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var T=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var C=(e,t)=>{for(var a in t)p(e,a,{get:t[a],enumerable:!0})},u=(e,t,a,i)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of T(t))!v.call(e,r)&&r!==a&&p(e,r,{get:()=>t[r],enumerable:!(i=y(t,r))||i.enumerable});return e};var b=(e,t,a)=>(a=e!=null?x(P(e)):{},u(t||!e||!e.__esModule?p(a,"default",{value:e,enumerable:!0}):a,e)),N=e=>u(p({},"__esModule",{value:!0}),e);var L={};C(L,{Tabs:()=>m,TabsContent:()=>h,TabsList:()=>g,TabsTrigger:()=>c});module.exports=N(L);var n=require("react/jsx-runtime"),s=b(require("react")),d=require("../helpers/index.js"),o=b(require("@radix-ui/react-tabs")),l=require("class-variance-authority");const f=s.createContext({algin:"left",theme:"light",shape:"square"}),m=s.forwardRef(({children:e,algin:t="left",shape:a="square",theme:i="light",...r},R)=>(0,n.jsx)(o.Root,{ref:R,...r,children:(0,n.jsx)(f.Provider,{value:{algin:t,theme:i,shape:a},children:e})}));m.displayName="Tabs";const k=(0,l.cva)("",{variants:{algin:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"},theme:{light:"bg-container-secondary-2",dark:"bg-container-secondary-1"}},defaultVariants:{algin:"left",shape:"square",theme:"light"}}),q=(0,l.cva)("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),g=s.forwardRef(({className:e,...t},a)=>{const{algin:i,shape:r}=s.useContext(f);return(0,n.jsx)(o.List,{ref:a,className:(0,d.cn)("bg-container-secondary-1 flex w-fit overflow-x-auto p-1",k({algin:i,shape:r}),e),...t})});g.displayName=o.List.displayName;const c=s.forwardRef(({className:e,...t},a)=>{const{shape:i}=s.useContext(f);return(0,n.jsx)(o.Trigger,{ref:a,className:(0,d.cn)("text-info-primary lg-desktop:text-[16px] disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-[20px] pb-[10px] pt-[11px] text-[14px] font-bold data-[state=active]:bg-white",e,q({shape:i})),...t})});c.displayName=o.Trigger.displayName;const h=s.forwardRef(({className:e,...t},a)=>(0,n.jsx)(o.Content,{ref:a,className:(0,d.cn)(e),...t}));h.displayName=o.Content.displayName;
|
|
2
2
|
//# sourceMappingURL=tabs.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/tabs.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva
|
|
5
|
-
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,EAAA,gBAAAC,EAAA,aAAAC,EAAA,gBAAAC,IAAA,eAAAC,EAAAN,
|
|
6
|
-
"names": ["tabs_exports", "__export", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "TabsPrimitive", "import_class_variance_authority", "TabListContext", "children", "algin", "props", "ref", "tabsListVariants", "className", "alginFromParent"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\n\nconst TabListContext = React.createContext<{\n algin?: 'left' | 'center' | 'right'\n theme: 'light' | 'dark'\n shape: 'rounded' | 'square'\n}>({\n algin: 'left',\n theme: 'light',\n shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n algin?: 'left' | 'center' | 'right'\n shape?: 'rounded' | 'square'\n theme: 'light' | 'dark'\n }\n>(({ children, algin = 'left', shape = 'square', theme = 'light', ...props }, ref) => (\n <TabsPrimitive.Root ref={ref} {...props}>\n <TabListContext.Provider value={{ algin, theme, shape }}>{children}</TabListContext.Provider>\n </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('', {\n variants: {\n algin: {\n left: 'justify-left',\n center: 'justify-center',\n right: 'justify-end',\n },\n shape: {\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n theme: {\n light: 'bg-container-secondary-2',\n dark: 'bg-container-secondary-1',\n },\n },\n defaultVariants: {\n algin: 'left',\n shape: 'square',\n theme: 'light',\n },\n})\n\nconst tabsTriggerVariants = cva('', {\n variants: {\n shape: {\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'square',\n },\n})\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { algin: alginFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n return (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n 'bg-container-secondary-1 flex w-fit overflow-x-auto p-1',\n tabsListVariants({\n algin: alginFromParent,\n shape: shapeFromParent,\n }),\n className\n )}\n {...props}\n />\n )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => {\n const { shape: shapeFromParent } = React.useContext(TabListContext)\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n 'text-info-primary lg-desktop:text-[16px] disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-[20px] pb-[10px] pt-[11px] text-[14px] font-bold data-[state=active]:bg-white',\n className,\n tabsTriggerVariants({\n shape: shapeFromParent,\n })\n )}\n {...props}\n />\n )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
|
|
5
|
+
"mappings": "ukBAAA,IAAAA,EAAA,GAAAC,EAAAD,EAAA,UAAAE,EAAA,gBAAAC,EAAA,aAAAC,EAAA,gBAAAC,IAAA,eAAAC,EAAAN,GA2BI,IAAAO,EAAA,6BAzBJC,EAAuB,oBACvBC,EAAmB,+BAEnBC,EAA+B,mCAC/BC,EAAoB,oCAEpB,MAAMC,EAAiBJ,EAAM,cAI1B,CACD,MAAO,OACP,MAAO,QACP,MAAO,QACT,CAAC,EAEKN,EAAOM,EAAM,WAOjB,CAAC,CAAE,SAAAK,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,SAAU,MAAAC,EAAQ,QAAS,GAAGC,CAAM,EAAGC,OAC5E,OAACR,EAAc,KAAd,CAAmB,IAAKQ,EAAM,GAAGD,EAChC,mBAACL,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAE,EAAO,MAAAE,EAAO,MAAAD,CAAM,EAAI,SAAAF,EAAS,EACrE,CACD,EACDX,EAAK,YAAc,OAEnB,MAAMiB,KAAmB,OAAI,GAAI,CAC/B,SAAU,CACR,MAAO,CACL,KAAM,eACN,OAAQ,iBACR,MAAO,aACT,EACA,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,EACA,MAAO,CACL,MAAO,2BACP,KAAM,0BACR,CACF,EACA,gBAAiB,CACf,MAAO,OACP,MAAO,SACP,MAAO,OACT,CACF,CAAC,EAEKC,KAAsB,OAAI,GAAI,CAClC,SAAU,CACR,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,QACT,CACF,CAAC,EACKhB,EAAWI,EAAM,WAGrB,CAAC,CAAE,UAAAa,EAAW,GAAGJ,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOI,EAAiB,MAAOC,CAAgB,EAAIf,EAAM,WAAWI,CAAc,EAC1F,SACE,OAACF,EAAc,KAAd,CACC,IAAKQ,EACL,aAAW,MACT,0DACAC,EAAiB,CACf,MAAOG,EACP,MAAOC,CACT,CAAC,EACDF,CACF,EACC,GAAGJ,EACN,CAEJ,CAAC,EACDb,EAAS,YAAcM,EAAc,KAAK,YAE1C,MAAML,EAAcG,EAAM,WAGxB,CAAC,CAAE,UAAAa,EAAW,GAAGJ,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOK,CAAgB,EAAIf,EAAM,WAAWI,CAAc,EAClE,SACE,OAACF,EAAc,QAAd,CACC,IAAKQ,EACL,aAAW,MACT,yOACAG,EACAD,EAAoB,CAClB,MAAOG,CACT,CAAC,CACH,EACC,GAAGN,EACN,CAEJ,CAAC,EACDZ,EAAY,YAAcK,EAAc,QAAQ,YAEhD,MAAMP,EAAcK,EAAM,WAGxB,CAAC,CAAE,UAAAa,EAAW,GAAGJ,CAAM,EAAGC,OAAQ,OAACR,EAAc,QAAd,CAAsB,IAAKQ,EAAK,aAAW,MAAGG,CAAS,EAAI,GAAGJ,EAAO,CAAE,EAC5Gd,EAAY,YAAcO,EAAc,QAAQ",
|
|
6
|
+
"names": ["tabs_exports", "__export", "Tabs", "TabsContent", "TabsList", "TabsTrigger", "__toCommonJS", "import_jsx_runtime", "React", "import_helpers", "TabsPrimitive", "import_class_variance_authority", "TabListContext", "children", "algin", "shape", "theme", "props", "ref", "tabsListVariants", "tabsTriggerVariants", "className", "alginFromParent", "shapeFromParent"]
|
|
7
7
|
}
|
|
@@ -5,6 +5,8 @@ declare const meta: {
|
|
|
5
5
|
title: string;
|
|
6
6
|
component: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
7
7
|
algin?: "left" | "center" | "right";
|
|
8
|
+
shape?: "rounded" | "square";
|
|
9
|
+
theme: "light" | "dark";
|
|
8
10
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
9
11
|
subcomponents: {
|
|
10
12
|
TabsList: ComponentType<unknown>;
|
|
@@ -287,6 +289,8 @@ declare const meta: {
|
|
|
287
289
|
onValueChange?: ((value: string) => void) | undefined;
|
|
288
290
|
activationMode?: "automatic" | "manual" | undefined;
|
|
289
291
|
algin?: "left" | "center" | "right" | undefined;
|
|
292
|
+
shape?: "rounded" | "square" | undefined;
|
|
293
|
+
theme: "light" | "dark";
|
|
290
294
|
ref?: React.LegacyRef<HTMLDivElement> | undefined;
|
|
291
295
|
}>) => import("react/jsx-runtime").JSX.Element)[];
|
|
292
296
|
parameters: {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import m from"react";import{Button as c,Text as
|
|
1
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import m from"react";import{Button as c,Picture as N,Text as k}from"../../components/index.js";import{cn as a}from"../../helpers/index.js";import{withStyles as w}from"../../shared/Styles.js";const p=m.forwardRef(({title:d,subtitle:x,background:g,primaryButton:l,secondaryButton:s,theme:t="light",className:b,products:n=[]},v)=>{const i=t==="dark"?"text-white":"text-[#1D1D1F]",f=t==="dark"?"bg-white":"bg-[#1D1D1F]";return r("div",{ref:v,className:a("lg-desktop:aspect-[1920/930] tablet:aspect-[768/660] relative aspect-[390/660] w-full",b),children:[e(N,{className:"absolute top-0",source:g}),r("div",{className:"relative z-10 flex flex-col gap-8 px-32",children:[r("div",{className:"max-w-[686px] space-y-4",children:[e("h1",{className:a("hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]",i),children:d}),e("p",{className:a("hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]",i),children:x})]}),r("div",{className:"flex items-center gap-4",children:[s&&e(c,{size:"lg",variant:"primary",theme:t,className:"hero-banner-primary-button",...s,children:s.text}),l&&e(c,{size:"lg",variant:"secondary",theme:t,...l,className:"hero-banner-secondary-button border-black bg-transparent text-black hover:bg-black hover:text-white",children:l.text})]})]}),n.length>0&&e("div",{className:"relative z-10 flex items-center gap-3 px-32 pb-6",children:n.map((h,o)=>r(m.Fragment,{children:[e(k,{className:a("hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]",t==="dark"?"text-white":"text-[#1D1D1F]"),children:h.title}),o<n.length-1&&e("div",{className:a("h-4 w-px",f)})]},o))})]})});p.displayName="HeroBanner";var H=w(p);export{H as default};
|
|
2
2
|
//# sourceMappingURL=HeroBanner.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/biz-components/HeroBanner/HeroBanner.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n ({ title, subtitle, background, primaryButton, secondaryButton, theme = 'light', className, products = [] }, ref) => {\n const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\n\n return (\n <div\n ref={ref}\n className={cn(\n '
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "jsxs", "React", "Button", "Text", "cn", "withStyles", "HeroBanner", "title", "subtitle", "background", "primaryButton", "secondaryButton", "theme", "className", "products", "ref", "textColorClass", "dividerColorClass", "product", "index", "HeroBanner_default"]
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport type { HeroBannerProps } from './types.js'\nimport { Button, Picture, Text } from '../../components/index.js'\nimport { cn } from '../../helpers/index.js'\nimport { withStyles } from '../../shared/Styles.js'\n\nconst HeroBanner = React.forwardRef<HTMLDivElement, HeroBannerProps>(\n ({ title, subtitle, background, primaryButton, secondaryButton, theme = 'light', className, products = [] }, ref) => {\n const textColorClass = theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n const dividerColorClass = theme === 'dark' ? 'bg-white' : 'bg-[#1D1D1F]'\n\n return (\n <div\n ref={ref}\n className={cn(\n 'lg-desktop:aspect-[1920/930] tablet:aspect-[768/660] relative aspect-[390/660] w-full',\n className\n )}\n >\n <Picture className=\"absolute top-0\" source={background} />\n {/* \u5185\u5BB9\u533A\u57DF */}\n <div className=\"relative z-10 flex flex-col gap-8 px-32\">\n <div className=\"max-w-[686px] space-y-4\">\n <h1\n className={cn(\n 'hero-banner-title font-mont text-[64px] font-bold leading-none tracking-[-0.04em]',\n textColorClass\n )}\n >\n {title}\n </h1>\n <p\n className={cn(\n 'hero-banner-subtitle text-lg font-medium leading-[1.2] tracking-[-0.02em]',\n textColorClass\n )}\n >\n {subtitle}\n </p>\n </div>\n\n {/* \u6309\u94AE\u7EC4 */}\n <div className=\"flex items-center gap-4\">\n {secondaryButton && (\n <Button\n size=\"lg\"\n variant=\"primary\"\n theme={theme}\n className=\"hero-banner-primary-button\"\n {...secondaryButton}\n >\n {secondaryButton.text}\n </Button>\n )}\n {primaryButton && (\n <Button\n size=\"lg\"\n variant=\"secondary\"\n theme={theme}\n {...primaryButton}\n className=\"hero-banner-secondary-button border-black bg-transparent text-black hover:bg-black hover:text-white\"\n >\n {primaryButton.text}\n </Button>\n )}\n </div>\n </div>\n\n {/* \u5E95\u90E8\u4EA7\u54C1\u5217\u8868 */}\n {products.length > 0 && (\n <div className=\"relative z-10 flex items-center gap-3 px-32 pb-6\">\n {products.map((product, index) => (\n <React.Fragment key={index}>\n <Text\n className={cn(\n 'hero-banner-product-text text-sm font-medium leading-[1.2] tracking-[-0.02em]',\n theme === 'dark' ? 'text-white' : 'text-[#1D1D1F]'\n )}\n >\n {product.title}\n </Text>\n {index < products.length - 1 && <div className={cn('h-4 w-px', dividerColorClass)} />}\n </React.Fragment>\n ))}\n </div>\n )}\n </div>\n )\n }\n)\n\nHeroBanner.displayName = 'HeroBanner'\n\nexport default withStyles(HeroBanner)\n"],
|
|
5
|
+
"mappings": "AAmBQ,cAAAA,EAGE,QAAAC,MAHF,oBAnBR,OAAOC,MAAW,QAElB,OAAS,UAAAC,EAAQ,WAAAC,EAAS,QAAAC,MAAY,4BACtC,OAAS,MAAAC,MAAU,yBACnB,OAAS,cAAAC,MAAkB,yBAE3B,MAAMC,EAAaN,EAAM,WACvB,CAAC,CAAE,MAAAO,EAAO,SAAAC,EAAU,WAAAC,EAAY,cAAAC,EAAe,gBAAAC,EAAiB,MAAAC,EAAQ,QAAS,UAAAC,EAAW,SAAAC,EAAW,CAAC,CAAE,EAAGC,IAAQ,CACnH,MAAMC,EAAiBJ,IAAU,OAAS,aAAe,iBACnDK,EAAoBL,IAAU,OAAS,WAAa,eAE1D,OACEb,EAAC,OACC,IAAKgB,EACL,UAAWX,EACT,wFACAS,CACF,EAEA,UAAAf,EAACI,EAAA,CAAQ,UAAU,iBAAiB,OAAQO,EAAY,EAExDV,EAAC,OAAI,UAAU,0CACb,UAAAA,EAAC,OAAI,UAAU,0BACb,UAAAD,EAAC,MACC,UAAWM,EACT,oFACAY,CACF,EAEC,SAAAT,EACH,EACAT,EAAC,KACC,UAAWM,EACT,4EACAY,CACF,EAEC,SAAAR,EACH,GACF,EAGAT,EAAC,OAAI,UAAU,0BACZ,UAAAY,GACCb,EAACG,EAAA,CACC,KAAK,KACL,QAAQ,UACR,MAAOW,EACP,UAAU,6BACT,GAAGD,EAEH,SAAAA,EAAgB,KACnB,EAEDD,GACCZ,EAACG,EAAA,CACC,KAAK,KACL,QAAQ,YACR,MAAOW,EACN,GAAGF,EACJ,UAAU,sGAET,SAAAA,EAAc,KACjB,GAEJ,GACF,EAGCI,EAAS,OAAS,GACjBhB,EAAC,OAAI,UAAU,mDACZ,SAAAgB,EAAS,IAAI,CAACI,EAASC,IACtBpB,EAACC,EAAM,SAAN,CACC,UAAAF,EAACK,EAAA,CACC,UAAWC,EACT,gFACAQ,IAAU,OAAS,aAAe,gBACpC,EAEC,SAAAM,EAAQ,MACX,EACCC,EAAQL,EAAS,OAAS,GAAKhB,EAAC,OAAI,UAAWM,EAAG,WAAYa,CAAiB,EAAG,IAThEE,CAUrB,CACD,EACH,GAEJ,CAEJ,CACF,EAEAb,EAAW,YAAc,aAEzB,IAAOc,EAAQf,EAAWC,CAAU",
|
|
6
|
+
"names": ["jsx", "jsxs", "React", "Button", "Picture", "Text", "cn", "withStyles", "HeroBanner", "title", "subtitle", "background", "primaryButton", "secondaryButton", "theme", "className", "products", "ref", "textColorClass", "dividerColorClass", "product", "index", "HeroBanner_default"]
|
|
7
7
|
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{Fragment as w,jsx as e,jsxs as V}from"react/jsx-runtime";import*as y from"react";import{Slot as v}from"@radix-ui/react-slot";import{VisuallyHidden as g}from"@radix-ui/react-visually-hidden";import{cva as s}from"class-variance-authority";import
|
|
1
|
+
"use client";import{Fragment as w,jsx as e,jsxs as V}from"react/jsx-runtime";import*as y from"react";import{Slot as v}from"@radix-ui/react-slot";import{VisuallyHidden as g}from"@radix-ui/react-visually-hidden";import{cva as s}from"class-variance-authority";import h from"../icons/spinner.js";import{cn as u}from"../helpers/index.js";const x=s("ring-offset-background focus-visible:ring-ring rounded-btn inline-flex items-center justify-center border-[1.6px] border-solid text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none",{variants:{variant:{primary:"bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active border-info-primary hover:border-btn-primary-active",secondary:"bg-btn-secondary border-info-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary border border-solid",link:"text-info-primary hover:text-btn-primary-active border-none underline-offset-4 hover:underline",ghost:"hover:bg-btn-primary hover:text-btn-primary-foreground"},size:{sm:"px-3 py-2 text-[12px] leading-tight",base:"px-5 pb-[10px] pt-[11px] text-[14px] leading-tight",lg:"px-7 pb-[14px] pt-[15px] text-[16px] leading-tight",icon:"size-10 rounded-full leading-tight"},hoverEffect:{none:"",slide:""},state:{default:"",disabled:"",loading:""},theme:{dark:"",light:""}},compoundVariants:[{variant:"primary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"secondary",hoverEffect:"slide",class:'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[""] hover:before:translate-x-0'},{variant:"primary",state:"loading",class:"bg-btn-primary-active"},{variant:"secondary",state:"loading",class:"bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground"},{variant:"primary",state:"disabled",class:"disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground"},{variant:"secondary",state:"disabled",class:"disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border"},{variant:"secondary",theme:"dark",class:"text-info-white bg-info-primary hover:border-info-white hover:text-info-primary hover:bg-info-white"},{variant:"secondary",theme:"dark",state:"loading",class:"bg-btn-info-white text-info-primary border-info-white"},{variant:"secondary",theme:"dark",state:"disabled",class:"disabled:bg-text-info-quaternary disabled:text-info-white"},{variant:"link",state:"disabled",class:"disabled:text-info-quaternary"},{variant:"primary",theme:"dark",class:"text-info-primary hover:text-info-white bg-info-white hover:border-brand-0"},{variant:"primary",theme:"dark",state:"loading",class:"bg-btn-primary-active text-info-white border-brand-0"},{variant:"secondary",theme:"dark",class:"border-info-white"},{variant:"secondary",theme:"light",class:""},{variant:"link",theme:"dark",class:"text-info-white"}],defaultVariants:{variant:"primary",size:"base",hoverEffect:"none",state:"default",theme:"light"}}),k=s("",{variants:{variant:{primary:"stroke-btn-primary-foreground",secondary:"stroke-btn-secondary-foreground",link:"stroke-primary",ghost:"stroke-primary"},theme:{dark:"",light:""}},defaultVariants:{variant:"primary",theme:"light"}}),d=y.forwardRef(({asChild:b=!1,size:l="base",children:t,variant:a,theme:o="light",hoverEffect:f="none",className:c,disabled:n=!1,loading:r=!1,spinner:i,...p},m)=>e(b?v:"button",{disabled:n||r,className:u(x({variant:a,size:l,hoverEffect:f,state:r?"loading":n?"disabled":"default",theme:o}),c),ref:m,...p,children:r?V(w,{children:[e("span",{style:{display:"contents",visibility:"hidden"},"aria-hidden":!0,children:t}),e("span",{className:"absolute",children:i||e(h,{className:k({variant:a,theme:o})})}),e(g,{children:t})]}):t}));d.displayName="Button";var L=d;export{L as default};
|
|
2
2
|
//# sourceMappingURL=button.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/button.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\n/**\n * Button Variants\n */\nconst buttonVariants = cva(\n 'ring-offset-background
|
|
5
|
-
"mappings": "
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { VisuallyHidden } from '@radix-ui/react-visually-hidden'\nimport { type VariantProps, cva } from 'class-variance-authority'\nimport Spinner from '../icons/spinner.js'\nimport { cn } from '../helpers/index.js'\n\n/**\n * Button Variants\n */\n// eslint-disable-next-line tailwindcss/enforces-negative-arbitrary-values\nconst buttonVariants = cva(\n 'ring-offset-background focus-visible:ring-ring rounded-btn inline-flex items-center justify-center border-[1.6px] border-solid text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none',\n {\n variants: {\n variant: {\n primary:\n 'bg-btn-primary text-btn-primary-foreground hover:bg-btn-primary-active border-info-primary hover:border-btn-primary-active',\n secondary:\n 'bg-btn-secondary border-info-primary text-btn-secondary-foreground hover:bg-btn-secondary-active hover:text-btn-secondary border border-solid',\n link: 'text-info-primary hover:text-btn-primary-active border-none underline-offset-4 hover:underline',\n ghost: 'hover:bg-btn-primary hover:text-btn-primary-foreground',\n },\n size: {\n sm: 'px-3 py-2 text-[12px] leading-tight',\n base: 'px-5 pb-[10px] pt-[11px] text-[14px] leading-tight',\n lg: 'px-7 pb-[14px] pt-[15px] text-[16px] leading-tight',\n icon: 'size-10 rounded-full leading-tight',\n },\n /** hover \u72B6\u6001\u4E0B\u7684\u52A8\u753B\u6548\u679C,\u9700\u8981\u6CE8\u610F\u4E0D\u540Cvariant \u4E0B\u7684\u6548\u679C */\n hoverEffect: {\n none: '',\n slide: '',\n },\n state: {\n default: '',\n disabled: '',\n loading: '',\n },\n theme: {\n dark: '',\n light: '',\n },\n },\n compoundVariants: [\n {\n variant: 'primary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-primary before:bg-btn-primary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'secondary',\n hoverEffect: 'slide',\n class:\n 'before:rounded-btn hover:!bg-btn-secondary before:bg-btn-secondary-active relative z-[1] overflow-hidden before:absolute before:inset-y-0 before:-z-[1] before:w-full before:-translate-x-full before:transition-transform before:duration-300 before:ease-in-out before:content-[\"\"] hover:before:translate-x-0',\n },\n {\n variant: 'primary',\n state: 'loading',\n class: 'bg-btn-primary-active',\n },\n {\n variant: 'secondary',\n state: 'loading',\n class: 'bg-btn-secondary disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground',\n },\n {\n variant: 'primary',\n state: 'disabled',\n class: 'disabled:bg-btn-primary-disabled disabled:text-btn-primary-disabled-foreground',\n },\n {\n variant: 'secondary',\n state: 'disabled',\n class:\n 'disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-disabled-foreground disabled:border-btn-secondary-disabled-border',\n },\n {\n variant: 'secondary',\n theme: 'dark',\n class: 'text-info-white bg-info-primary hover:border-info-white hover:text-info-primary hover:bg-info-white',\n },\n {\n variant: 'secondary',\n theme: 'dark',\n state: 'loading',\n class: 'bg-btn-info-white text-info-primary border-info-white',\n },\n {\n variant: 'secondary',\n theme: 'dark',\n state: 'disabled',\n class: 'disabled:bg-text-info-quaternary disabled:text-info-white',\n },\n {\n variant: 'link',\n state: 'disabled',\n class: 'disabled:text-info-quaternary',\n },\n {\n variant: 'primary',\n theme: 'dark',\n class: 'text-info-primary hover:text-info-white bg-info-white hover:border-brand-0',\n },\n {\n variant: 'primary',\n theme: 'dark',\n state: 'loading',\n class: 'bg-btn-primary-active text-info-white border-brand-0',\n },\n {\n variant: 'secondary',\n theme: 'dark',\n class: 'border-info-white',\n },\n {\n variant: 'secondary',\n theme: 'light',\n class: '',\n },\n {\n variant: 'link',\n theme: 'dark',\n class: 'text-info-white',\n },\n ],\n defaultVariants: {\n variant: 'primary',\n size: 'base',\n hoverEffect: 'none',\n state: 'default',\n theme: 'light',\n },\n }\n)\n\nconst loadingSvgVariants = cva('', {\n variants: {\n variant: {\n primary: 'stroke-btn-primary-foreground',\n secondary: 'stroke-btn-secondary-foreground',\n link: 'stroke-primary',\n ghost: 'stroke-primary',\n },\n theme: {\n dark: '',\n light: '',\n },\n },\n defaultVariants: {\n variant: 'primary',\n theme: 'light',\n },\n})\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n VariantProps<typeof buttonVariants> {\n /** \u8BBE\u7F6E\u6309\u94AE\u8F7D\u5165\u72B6\u6001 */\n loading?: boolean\n /** \u8BBE\u7F6E\u6309\u94AE\u5931\u6548\u72B6\u6001 */\n disabled?: boolean\n /** \u5B9A\u4E49\u81EA\u7EC4\u4EF6\u4F5C\u4E3A\u7236\u7EC4\u4EF6\u7684\u7C7B\u578B\uFF0C \u8BE6\u7EC6\u4F7F\u7528\u65B9\u5F0F\u8BF7\u53C2\u8003radix-ui */\n asChild?: boolean\n /** \u81EA\u5B9A\u4E49loading */\n spinner?: React.ReactNode\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (\n {\n asChild = false,\n size = 'base',\n children,\n variant,\n theme = 'light',\n hoverEffect = 'none',\n className,\n disabled = false,\n loading = false,\n spinner,\n ...props\n }: ButtonProps,\n ref\n ) => {\n const Comp = asChild ? Slot : 'button'\n const isInactive = disabled || loading\n const state = loading ? 'loading' : disabled ? 'disabled' : 'default'\n\n return (\n <Comp\n disabled={isInactive}\n className={cn(buttonVariants({ variant, size, hoverEffect, state, theme }), className)}\n ref={ref}\n {...props}\n >\n {loading ? (\n <>\n <span style={{ display: 'contents', visibility: 'hidden' }} aria-hidden>\n {children}\n </span>\n <span className=\"absolute\">\n {spinner ? (\n spinner\n ) : (\n <Spinner\n className={loadingSvgVariants({\n variant,\n theme,\n })}\n />\n )}\n </span>\n <VisuallyHidden>{children}</VisuallyHidden>\n </>\n ) : (\n children\n )}\n </Comp>\n )\n }\n)\n\nButton.displayName = 'Button'\nexport default Button\n"],
|
|
5
|
+
"mappings": "aAwMU,mBAAAA,EACE,OAAAC,EADF,QAAAC,MAAA,oBAtMV,UAAYC,MAAW,QACvB,OAAS,QAAAC,MAAY,uBACrB,OAAS,kBAAAC,MAAsB,kCAC/B,OAA4B,OAAAC,MAAW,2BACvC,OAAOC,MAAa,sBACpB,OAAS,MAAAC,MAAU,sBAMnB,MAAMC,EAAiBH,EACrB,gRACA,CACE,SAAU,CACR,QAAS,CACP,QACE,6HACF,UACE,gJACF,KAAM,iGACN,MAAO,wDACT,EACA,KAAM,CACJ,GAAI,uCACJ,KAAM,qDACN,GAAI,sDACJ,KAAM,qCACR,EAEA,YAAa,CACX,KAAM,GACN,MAAO,EACT,EACA,MAAO,CACL,QAAS,GACT,SAAU,GACV,QAAS,EACX,EACA,MAAO,CACL,KAAM,GACN,MAAO,EACT,CACF,EACA,iBAAkB,CAChB,CACE,QAAS,UACT,YAAa,QACb,MACE,8SACJ,EACA,CACE,QAAS,YACT,YAAa,QACb,MACE,mTACJ,EACA,CACE,QAAS,UACT,MAAO,UACP,MAAO,uBACT,EACA,CACE,QAAS,YACT,MAAO,UACP,MAAO,qGACT,EACA,CACE,QAAS,UACT,MAAO,WACP,MAAO,gFACT,EACA,CACE,QAAS,YACT,MAAO,WACP,MACE,kIACJ,EACA,CACE,QAAS,YACT,MAAO,OACP,MAAO,qGACT,EACA,CACE,QAAS,YACT,MAAO,OACP,MAAO,UACP,MAAO,uDACT,EACA,CACE,QAAS,YACT,MAAO,OACP,MAAO,WACP,MAAO,2DACT,EACA,CACE,QAAS,OACT,MAAO,WACP,MAAO,+BACT,EACA,CACE,QAAS,UACT,MAAO,OACP,MAAO,4EACT,EACA,CACE,QAAS,UACT,MAAO,OACP,MAAO,UACP,MAAO,sDACT,EACA,CACE,QAAS,YACT,MAAO,OACP,MAAO,mBACT,EACA,CACE,QAAS,YACT,MAAO,QACP,MAAO,EACT,EACA,CACE,QAAS,OACT,MAAO,OACP,MAAO,iBACT,CACF,EACA,gBAAiB,CACf,QAAS,UACT,KAAM,OACN,YAAa,OACb,MAAO,UACP,MAAO,OACT,CACF,CACF,EAEMI,EAAqBJ,EAAI,GAAI,CACjC,SAAU,CACR,QAAS,CACP,QAAS,gCACT,UAAW,kCACX,KAAM,iBACN,MAAO,gBACT,EACA,MAAO,CACL,KAAM,GACN,MAAO,EACT,CACF,EACA,gBAAiB,CACf,QAAS,UACT,MAAO,OACT,CACF,CAAC,EAeKK,EAASR,EAAM,WACnB,CACE,CACE,QAAAS,EAAU,GACV,KAAAC,EAAO,OACP,SAAAC,EACA,QAAAC,EACA,MAAAC,EAAQ,QACR,YAAAC,EAAc,OACd,UAAAC,EACA,SAAAC,EAAW,GACX,QAAAC,EAAU,GACV,QAAAC,EACA,GAAGC,CACL,EACAC,IAOEtB,EALWW,EAAUR,EAAO,SAK3B,CACC,SALee,GAAYC,EAM3B,UAAWZ,EAAGC,EAAe,CAAE,QAAAM,EAAS,KAAAF,EAAM,YAAAI,EAAa,MALjDG,EAAU,UAAYD,EAAW,WAAa,UAKU,MAAAH,CAAM,CAAC,EAAGE,CAAS,EACrF,IAAKK,EACJ,GAAGD,EAEH,SAAAF,EACClB,EAAAF,EAAA,CACE,UAAAC,EAAC,QAAK,MAAO,CAAE,QAAS,WAAY,WAAY,QAAS,EAAG,cAAW,GACpE,SAAAa,EACH,EACAb,EAAC,QAAK,UAAU,WACb,SAAAoB,GAGCpB,EAACM,EAAA,CACC,UAAWG,EAAmB,CAC5B,QAAAK,EACA,MAAAC,CACF,CAAC,EACH,EAEJ,EACAf,EAACI,EAAA,CAAgB,SAAAS,EAAS,GAC5B,EAEAA,EAEJ,CAGN,EAEAH,EAAO,YAAc,SACrB,IAAOa,EAAQb",
|
|
6
6
|
"names": ["Fragment", "jsx", "jsxs", "React", "Slot", "VisuallyHidden", "cva", "Spinner", "cn", "buttonVariants", "loadingSvgVariants", "Button", "asChild", "size", "children", "variant", "theme", "hoverEffect", "className", "disabled", "loading", "spinner", "props", "ref", "button_default"]
|
|
7
7
|
}
|
|
@@ -2,6 +2,8 @@ import * as React from 'react';
|
|
|
2
2
|
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
3
3
|
declare const Tabs: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
4
4
|
algin?: "left" | "center" | "right";
|
|
5
|
+
shape?: "rounded" | "square";
|
|
6
|
+
theme: "light" | "dark";
|
|
5
7
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
6
8
|
declare const TabsList: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
|
|
7
9
|
declare const TabsTrigger: React.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use client";import{jsx as o}from"react/jsx-runtime";import*as r from"react";import{cn as
|
|
1
|
+
"use client";import{jsx as o}from"react/jsx-runtime";import*as r from"react";import{cn as p}from"../helpers/index.js";import*as i from"@radix-ui/react-tabs";import{cva as f}from"class-variance-authority";const d=r.createContext({algin:"left",theme:"light",shape:"square"}),l=r.forwardRef(({children:e,algin:t="left",shape:a="square",theme:s="light",...n},h)=>o(i.Root,{ref:h,...n,children:o(d.Provider,{value:{algin:t,theme:s,shape:a},children:e})}));l.displayName="Tabs";const u=f("",{variants:{algin:{left:"justify-left",center:"justify-center",right:"justify-end"},shape:{rounded:"rounded-[28px]",square:"rounded-none"},theme:{light:"bg-container-secondary-2",dark:"bg-container-secondary-1"}},defaultVariants:{algin:"left",shape:"square",theme:"light"}}),b=f("",{variants:{shape:{rounded:"rounded-[28px]",square:"rounded-none"}},defaultVariants:{shape:"square"}}),m=r.forwardRef(({className:e,...t},a)=>{const{algin:s,shape:n}=r.useContext(d);return o(i.List,{ref:a,className:p("bg-container-secondary-1 flex w-fit overflow-x-auto p-1",u({algin:s,shape:n}),e),...t})});m.displayName=i.List.displayName;const g=r.forwardRef(({className:e,...t},a)=>{const{shape:s}=r.useContext(d);return o(i.Trigger,{ref:a,className:p("text-info-primary lg-desktop:text-[16px] disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-[20px] pb-[10px] pt-[11px] text-[14px] font-bold data-[state=active]:bg-white",e,b({shape:s})),...t})});g.displayName=i.Trigger.displayName;const c=r.forwardRef(({className:e,...t},a)=>o(i.Content,{ref:a,className:p(e),...t}));c.displayName=i.Content.displayName;export{l as Tabs,c as TabsContent,m as TabsList,g as TabsTrigger};
|
|
2
2
|
//# sourceMappingURL=tabs.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/tabs.tsx"],
|
|
4
|
-
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["jsx", "React", "cn", "TabsPrimitive", "cva", "TabListContext", "Tabs", "children", "algin", "props", "ref", "tabsListVariants", "TabsList", "className", "alginFromParent", "TabsTrigger", "TabsContent"]
|
|
4
|
+
"sourcesContent": ["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../helpers/index.js'\n\nimport * as TabsPrimitive from '@radix-ui/react-tabs'\nimport { cva } from 'class-variance-authority'\n\nconst TabListContext = React.createContext<{\n algin?: 'left' | 'center' | 'right'\n theme: 'light' | 'dark'\n shape: 'rounded' | 'square'\n}>({\n algin: 'left',\n theme: 'light',\n shape: 'square',\n})\n\nconst Tabs = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {\n algin?: 'left' | 'center' | 'right'\n shape?: 'rounded' | 'square'\n theme: 'light' | 'dark'\n }\n>(({ children, algin = 'left', shape = 'square', theme = 'light', ...props }, ref) => (\n <TabsPrimitive.Root ref={ref} {...props}>\n <TabListContext.Provider value={{ algin, theme, shape }}>{children}</TabListContext.Provider>\n </TabsPrimitive.Root>\n))\nTabs.displayName = 'Tabs'\n\nconst tabsListVariants = cva('', {\n variants: {\n algin: {\n left: 'justify-left',\n center: 'justify-center',\n right: 'justify-end',\n },\n shape: {\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n theme: {\n light: 'bg-container-secondary-2',\n dark: 'bg-container-secondary-1',\n },\n },\n defaultVariants: {\n algin: 'left',\n shape: 'square',\n theme: 'light',\n },\n})\n\nconst tabsTriggerVariants = cva('', {\n variants: {\n shape: {\n rounded: 'rounded-[28px]',\n square: 'rounded-none',\n },\n },\n defaultVariants: {\n shape: 'square',\n },\n})\nconst TabsList = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>\n>(({ className, ...props }, ref) => {\n const { algin: alginFromParent, shape: shapeFromParent } = React.useContext(TabListContext)\n return (\n <TabsPrimitive.List\n ref={ref}\n className={cn(\n 'bg-container-secondary-1 flex w-fit overflow-x-auto p-1',\n tabsListVariants({\n algin: alginFromParent,\n shape: shapeFromParent,\n }),\n className\n )}\n {...props}\n />\n )\n})\nTabsList.displayName = TabsPrimitive.List.displayName\n\nconst TabsTrigger = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>\n>(({ className, ...props }, ref) => {\n const { shape: shapeFromParent } = React.useContext(TabListContext)\n return (\n <TabsPrimitive.Trigger\n ref={ref}\n className={cn(\n 'text-info-primary lg-desktop:text-[16px] disabled:text-btn-secondary-disabled lg-desktop:px-[28px] lg-desktop:pt-[15px] lg-desktop:pb-[14px] shrink-0 px-[20px] pb-[10px] pt-[11px] text-[14px] font-bold data-[state=active]:bg-white',\n className,\n tabsTriggerVariants({\n shape: shapeFromParent,\n })\n )}\n {...props}\n />\n )\n})\nTabsTrigger.displayName = TabsPrimitive.Trigger.displayName\n\nconst TabsContent = React.forwardRef<\n React.ElementRef<typeof TabsPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>\n>(({ className, ...props }, ref) => <TabsPrimitive.Content ref={ref} className={cn(className)} {...props} />)\nTabsContent.displayName = TabsPrimitive.Content.displayName\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent }\n"],
|
|
5
|
+
"mappings": "aA2BI,cAAAA,MAAA,oBAzBJ,UAAYC,MAAW,QACvB,OAAS,MAAAC,MAAU,sBAEnB,UAAYC,MAAmB,uBAC/B,OAAS,OAAAC,MAAW,2BAEpB,MAAMC,EAAiBJ,EAAM,cAI1B,CACD,MAAO,OACP,MAAO,QACP,MAAO,QACT,CAAC,EAEKK,EAAOL,EAAM,WAOjB,CAAC,CAAE,SAAAM,EAAU,MAAAC,EAAQ,OAAQ,MAAAC,EAAQ,SAAU,MAAAC,EAAQ,QAAS,GAAGC,CAAM,EAAGC,IAC5EZ,EAACG,EAAc,KAAd,CAAmB,IAAKS,EAAM,GAAGD,EAChC,SAAAX,EAACK,EAAe,SAAf,CAAwB,MAAO,CAAE,MAAAG,EAAO,MAAAE,EAAO,MAAAD,CAAM,EAAI,SAAAF,EAAS,EACrE,CACD,EACDD,EAAK,YAAc,OAEnB,MAAMO,EAAmBT,EAAI,GAAI,CAC/B,SAAU,CACR,MAAO,CACL,KAAM,eACN,OAAQ,iBACR,MAAO,aACT,EACA,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,EACA,MAAO,CACL,MAAO,2BACP,KAAM,0BACR,CACF,EACA,gBAAiB,CACf,MAAO,OACP,MAAO,SACP,MAAO,OACT,CACF,CAAC,EAEKU,EAAsBV,EAAI,GAAI,CAClC,SAAU,CACR,MAAO,CACL,QAAS,iBACT,OAAQ,cACV,CACF,EACA,gBAAiB,CACf,MAAO,QACT,CACF,CAAC,EACKW,EAAWd,EAAM,WAGrB,CAAC,CAAE,UAAAe,EAAW,GAAGL,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOK,EAAiB,MAAOC,CAAgB,EAAIjB,EAAM,WAAWI,CAAc,EAC1F,OACEL,EAACG,EAAc,KAAd,CACC,IAAKS,EACL,UAAWV,EACT,0DACAW,EAAiB,CACf,MAAOI,EACP,MAAOC,CACT,CAAC,EACDF,CACF,EACC,GAAGL,EACN,CAEJ,CAAC,EACDI,EAAS,YAAcZ,EAAc,KAAK,YAE1C,MAAMgB,EAAclB,EAAM,WAGxB,CAAC,CAAE,UAAAe,EAAW,GAAGL,CAAM,EAAGC,IAAQ,CAClC,KAAM,CAAE,MAAOM,CAAgB,EAAIjB,EAAM,WAAWI,CAAc,EAClE,OACEL,EAACG,EAAc,QAAd,CACC,IAAKS,EACL,UAAWV,EACT,yOACAc,EACAF,EAAoB,CAClB,MAAOI,CACT,CAAC,CACH,EACC,GAAGP,EACN,CAEJ,CAAC,EACDQ,EAAY,YAAchB,EAAc,QAAQ,YAEhD,MAAMiB,EAAcnB,EAAM,WAGxB,CAAC,CAAE,UAAAe,EAAW,GAAGL,CAAM,EAAGC,IAAQZ,EAACG,EAAc,QAAd,CAAsB,IAAKS,EAAK,UAAWV,EAAGc,CAAS,EAAI,GAAGL,EAAO,CAAE,EAC5GS,EAAY,YAAcjB,EAAc,QAAQ",
|
|
6
|
+
"names": ["jsx", "React", "cn", "TabsPrimitive", "cva", "TabListContext", "Tabs", "children", "algin", "shape", "theme", "props", "ref", "tabsListVariants", "tabsTriggerVariants", "TabsList", "className", "alginFromParent", "shapeFromParent", "TabsTrigger", "TabsContent"]
|
|
7
7
|
}
|
|
@@ -5,6 +5,8 @@ declare const meta: {
|
|
|
5
5
|
title: string;
|
|
6
6
|
component: React.ForwardRefExoticComponent<Omit<import("@radix-ui/react-tabs").TabsProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
7
7
|
algin?: "left" | "center" | "right";
|
|
8
|
+
shape?: "rounded" | "square";
|
|
9
|
+
theme: "light" | "dark";
|
|
8
10
|
} & React.RefAttributes<HTMLDivElement>>;
|
|
9
11
|
subcomponents: {
|
|
10
12
|
TabsList: ComponentType<unknown>;
|
|
@@ -287,6 +289,8 @@ declare const meta: {
|
|
|
287
289
|
onValueChange?: ((value: string) => void) | undefined;
|
|
288
290
|
activationMode?: "automatic" | "manual" | undefined;
|
|
289
291
|
algin?: "left" | "center" | "right" | undefined;
|
|
292
|
+
shape?: "rounded" | "square" | undefined;
|
|
293
|
+
theme: "light" | "dark";
|
|
290
294
|
ref?: React.LegacyRef<HTMLDivElement> | undefined;
|
|
291
295
|
}>) => import("react/jsx-runtime").JSX.Element)[];
|
|
292
296
|
parameters: {
|
package/package.json
CHANGED
package/style.css
CHANGED
|
@@ -777,6 +777,10 @@ video {
|
|
|
777
777
|
.w-\[16px\] {
|
|
778
778
|
width: 16px;
|
|
779
779
|
}
|
|
780
|
+
.w-fit {
|
|
781
|
+
width: -moz-fit-content;
|
|
782
|
+
width: fit-content;
|
|
783
|
+
}
|
|
780
784
|
.w-full {
|
|
781
785
|
width: 100%;
|
|
782
786
|
}
|
|
@@ -890,9 +894,6 @@ video {
|
|
|
890
894
|
.gap-4 {
|
|
891
895
|
gap: 1rem;
|
|
892
896
|
}
|
|
893
|
-
.gap-\[24px\] {
|
|
894
|
-
gap: 24px;
|
|
895
|
-
}
|
|
896
897
|
.gap-\[8px\] {
|
|
897
898
|
gap: 8px;
|
|
898
899
|
}
|
|
@@ -918,9 +919,15 @@ video {
|
|
|
918
919
|
text-overflow: ellipsis;
|
|
919
920
|
white-space: nowrap;
|
|
920
921
|
}
|
|
922
|
+
.rounded {
|
|
923
|
+
border-radius: 0.25rem;
|
|
924
|
+
}
|
|
921
925
|
.rounded-\[16px\] {
|
|
922
926
|
border-radius: 16px;
|
|
923
927
|
}
|
|
928
|
+
.rounded-\[28px\] {
|
|
929
|
+
border-radius: 28px;
|
|
930
|
+
}
|
|
924
931
|
.rounded-btn {
|
|
925
932
|
border-radius: var(--btn-radius);
|
|
926
933
|
}
|
|
@@ -933,6 +940,9 @@ video {
|
|
|
933
940
|
.rounded-md {
|
|
934
941
|
border-radius: 0.375rem;
|
|
935
942
|
}
|
|
943
|
+
.rounded-none {
|
|
944
|
+
border-radius: 0px;
|
|
945
|
+
}
|
|
936
946
|
.rounded-sm {
|
|
937
947
|
border-radius: 0.125rem;
|
|
938
948
|
}
|
|
@@ -942,9 +952,6 @@ video {
|
|
|
942
952
|
.border-\[1\.6px\] {
|
|
943
953
|
border-width: 1.6px;
|
|
944
954
|
}
|
|
945
|
-
.border-b {
|
|
946
|
-
border-bottom-width: 1px;
|
|
947
|
-
}
|
|
948
955
|
.border-solid {
|
|
949
956
|
border-style: solid;
|
|
950
957
|
}
|
|
@@ -981,12 +988,6 @@ video {
|
|
|
981
988
|
.border-primary {
|
|
982
989
|
border-color: var(--brand-color-0);
|
|
983
990
|
}
|
|
984
|
-
.border-b-brand-0 {
|
|
985
|
-
border-bottom-color: var(--brand-color-0);
|
|
986
|
-
}
|
|
987
|
-
.border-b-lines {
|
|
988
|
-
border-bottom-color: var(--lines-color);
|
|
989
|
-
}
|
|
990
991
|
.bg-\[\#1D1D1F\] {
|
|
991
992
|
--tw-bg-opacity: 1;
|
|
992
993
|
background-color: rgb(29 29 31 / var(--tw-bg-opacity, 1));
|
|
@@ -1190,6 +1191,10 @@ video {
|
|
|
1190
1191
|
padding-left: 1.75rem;
|
|
1191
1192
|
padding-right: 1.75rem;
|
|
1192
1193
|
}
|
|
1194
|
+
.px-\[20px\] {
|
|
1195
|
+
padding-left: 20px;
|
|
1196
|
+
padding-right: 20px;
|
|
1197
|
+
}
|
|
1193
1198
|
.px-\[6px\] {
|
|
1194
1199
|
padding-left: 6px;
|
|
1195
1200
|
padding-right: 6px;
|
|
@@ -1552,6 +1557,9 @@ video {
|
|
|
1552
1557
|
.hover\:border-brand-0:hover {
|
|
1553
1558
|
border-color: var(--brand-color-0);
|
|
1554
1559
|
}
|
|
1560
|
+
.hover\:border-btn-primary-active:hover {
|
|
1561
|
+
border-color: var(--brand-color-0);
|
|
1562
|
+
}
|
|
1555
1563
|
.hover\:border-info-white:hover {
|
|
1556
1564
|
border-color: var(--info-white-color);
|
|
1557
1565
|
}
|
|
@@ -1677,8 +1685,9 @@ video {
|
|
|
1677
1685
|
.data-\[disabled\]\:pointer-events-none[data-disabled] {
|
|
1678
1686
|
pointer-events: none;
|
|
1679
1687
|
}
|
|
1680
|
-
.data-\[state\=active\]\:
|
|
1681
|
-
|
|
1688
|
+
.data-\[state\=active\]\:bg-white[data-state="active"] {
|
|
1689
|
+
--tw-bg-opacity: 1;
|
|
1690
|
+
background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
|
|
1682
1691
|
}
|
|
1683
1692
|
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
|
|
1684
1693
|
background-color: var(--brand-color-0);
|
|
@@ -1757,9 +1766,19 @@ video {
|
|
|
1757
1766
|
padding-left: 1.5rem;
|
|
1758
1767
|
padding-right: 1.5rem;
|
|
1759
1768
|
}
|
|
1769
|
+
.lg-desktop\:px-\[28px\] {
|
|
1770
|
+
padding-left: 28px;
|
|
1771
|
+
padding-right: 28px;
|
|
1772
|
+
}
|
|
1773
|
+
.lg-desktop\:pb-\[14px\] {
|
|
1774
|
+
padding-bottom: 14px;
|
|
1775
|
+
}
|
|
1760
1776
|
.lg-desktop\:pb-\[32px\] {
|
|
1761
1777
|
padding-bottom: 32px;
|
|
1762
1778
|
}
|
|
1779
|
+
.lg-desktop\:pt-\[15px\] {
|
|
1780
|
+
padding-top: 15px;
|
|
1781
|
+
}
|
|
1763
1782
|
.lg-desktop\:pt-\[32px\] {
|
|
1764
1783
|
padding-top: 32px;
|
|
1765
1784
|
}
|