@yamada-ui/react 2.3.0-dev-20260723030936 → 2.3.0-dev-20260724085908
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/color-swatch/color-swatch.cjs +4 -4
- package/dist/cjs/components/color-swatch/color-swatch.cjs.map +1 -1
- package/dist/cjs/components/progress/progress.style.cjs +1 -1
- package/dist/cjs/components/progress/progress.style.cjs.map +1 -1
- package/dist/cjs/components/skeleton/skeleton.style.cjs +1 -1
- package/dist/cjs/components/skeleton/skeleton.style.cjs.map +1 -1
- package/dist/cjs/core/css/gradient.cjs +21 -19
- package/dist/cjs/core/css/gradient.cjs.map +1 -1
- package/dist/esm/components/color-swatch/color-swatch.js +4 -4
- package/dist/esm/components/color-swatch/color-swatch.js.map +1 -1
- package/dist/esm/components/progress/progress.style.js +1 -1
- package/dist/esm/components/progress/progress.style.js.map +1 -1
- package/dist/esm/components/skeleton/skeleton.style.js +1 -1
- package/dist/esm/components/skeleton/skeleton.style.js.map +1 -1
- package/dist/esm/core/css/gradient.js +21 -19
- package/dist/esm/core/css/gradient.js.map +1 -1
- package/dist/types/components/avatar/avatar.d.ts +3 -3
- package/dist/types/components/avatar/avatar.style.d.ts +1 -1
- package/dist/types/components/progress/progress.d.ts +1 -1
- package/dist/types/components/progress/progress.style.d.ts +1 -1
- package/dist/types/components/skeleton/skeleton.style.d.ts +1 -1
- package/package.json +1 -1
|
@@ -7,10 +7,10 @@ let react_jsx_runtime = require("react/jsx-runtime");
|
|
|
7
7
|
//#region src/components/color-swatch/color-swatch.tsx
|
|
8
8
|
const checkersProps = {
|
|
9
9
|
bgImage: [
|
|
10
|
-
"linear
|
|
11
|
-
"linear
|
|
12
|
-
"linear
|
|
13
|
-
"linear
|
|
10
|
+
"linear(45deg, {checkers-fg} 25%, transparent 25%)",
|
|
11
|
+
"linear(-45deg, {checkers-fg} 25%, transparent 25%)",
|
|
12
|
+
"linear(45deg, transparent 75%, {checkers-fg} 75%)",
|
|
13
|
+
"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)"
|
|
14
14
|
].join(", "),
|
|
15
15
|
bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,
|
|
16
16
|
bgSize: `8px 8px`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-swatch.cjs","names":["createSlotComponent","colorSwatchStyle","styled"],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n bgImage: [\n \"linear
|
|
1
|
+
{"version":3,"file":"color-swatch.cjs","names":["createSlotComponent","colorSwatchStyle","styled"],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n bgImage: [\n \"linear(45deg, {checkers-fg} 25%, transparent 25%)\",\n \"linear(-45deg, {checkers-fg} 25%, transparent 25%)\",\n \"linear(45deg, transparent 75%, {checkers-fg} 75%)\",\n \"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n ].join(\", \"),\n bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n background: CSSProps[\"color\"],\n withShadow: boolean,\n): HTMLStyledProps[] => {\n const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n return layers\n}\n\nexport interface ColorSwatchProps\n extends Omit<HTMLStyledProps, \"color\">, ThemeProps<ColorSwatchStyle> {\n /**\n * The color used for the swatch element.\n *\n * @default '#ffffff00'\n */\n color?: CSSProps[\"color\"]\n /**\n * The overlay used for the swatch element.\n */\n layers?: HTMLStyledProps[]\n /**\n * If `true`, the swatch element has an inner `box-shadow`.\n *\n * @default true\n */\n withShadow?: boolean\n}\n\nconst {\n PropsContext: ColorSwatchPropsContext,\n usePropsContext: useColorSwatchPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n \"color-swatch\",\n colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n ({\n children,\n color = \"#ffffff00\",\n withShadow = true,\n layers = defaultLayers(color, withShadow),\n ...rest\n }) => {\n return (\n <styled.div\n aria-label={isString(color) ? color : undefined}\n aria-roledescription=\"color swatch\"\n role=\"img\"\n {...rest}\n >\n {children}\n {layers.map((props, index) => (\n <ColorSwatchOverlay key={index} {...props} />\n ))}\n </styled.div>\n )\n },\n \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n \"div\",\n \"overlay\",\n)()\n"],"mappings":";;;;;;;AAQA,MAAa,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,IAAI;CACX,YAAY;CACZ,QAAQ;AACV;AAEA,MAAM,iBACJ,YACA,eACsB;CACtB,MAAM,SAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;CAEhE,IAAI,YAAY,OAAO,KAAK,EAAE,WAAW,QAAQ,CAAC;CAElD,OAAO;AACT;AAsBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACEA,yBAAAA,oBACF,gBACAC,2BAAAA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,UAAU,GACxC,GAAG,WACC;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,OAAO,KAAR;EACE,eAAA,GAAA,oBAAA,cAAA,SAAA,CAAqB,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;YAJN,CAMG,UACA,OAAO,KAAK,OAAO,UAClB,iBAAA,GAAA,kBAAA,IAAA,CAAC,oBAAD,EAAgC,GAAI,MAAQ,GAAnB,KAAmB,CAC7C,CACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,YAChC,OACA,SACF,CAAC,CAAC"}
|
|
@@ -58,7 +58,7 @@ const progressStyle = require("../../core/system/config.cjs").defineComponentSlo
|
|
|
58
58
|
"--stripe-angle": "45deg",
|
|
59
59
|
"--stripe-color": ["rgba(255, 255, 255, 0.3)", "rgba(0, 0, 0, 0.3)"],
|
|
60
60
|
"--stripe-size": "1rem",
|
|
61
|
-
bgImage: `linear
|
|
61
|
+
bgImage: `linear(
|
|
62
62
|
{stripe-angle},
|
|
63
63
|
{stripe-color} 25%,
|
|
64
64
|
transparent 25%,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/progress/progress.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const progressStyle = defineComponentSlotStyle({\n base: {\n range: {\n bgColor: \"{filledTrackColor}\",\n h: \"full\",\n rounded: \"inherit\",\n transitionDuration: \"slow\",\n transitionProperty: \"size\",\n w: \"{width}\",\n _indeterminate: {\n \"--animation-from-x\": \"-40%\",\n \"--animation-to-x\": \"100%\",\n animationDuration: \"{duration, 1s}\",\n animationIterationCount: \"infinite\",\n animationName: \"position\",\n animationTimingFunction: \"ease\",\n minW: \"50%\",\n position: \"absolute\",\n willChange: \"left\",\n },\n },\n root: {\n overflow: \"hidden\",\n position: \"relative\",\n w: \"full\",\n },\n },\n\n props: {\n /**\n * If `true`, the progress bar will animate.\n *\n * @default false\n */\n animated: {\n true: {\n range: {\n \"--animation-from\": \"{stripe-size}\",\n animationDuration: \"{duration, 1s}\",\n animationIterationCount: \"infinite\",\n animationName: \"bg-position\",\n animationTimingFunction: \"linear\",\n },\n },\n },\n /**\n * The shape of the progress bar.\n *\n * @default 'rounded'\n */\n shape: {\n circle: {\n root: { rounded: \"full\" },\n },\n rounded: {\n root: { rounded: \"l1\" },\n },\n square: {\n root: { rounded: \"0\" },\n },\n },\n /**\n * If `true`, the progress bar will show stripe.\n *\n * @default false\n */\n striped: {\n true: {\n range: {\n \"--stripe-angle\": \"45deg\",\n \"--stripe-color\": [\"rgba(255, 255, 255, 0.3)\", \"rgba(0, 0, 0, 0.3)\"],\n \"--stripe-size\": \"1rem\",\n bgImage: `linear
|
|
1
|
+
{"version":3,"file":"progress.style.cjs","names":["defineComponentSlotStyle"],"sources":["../../../../src/components/progress/progress.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const progressStyle = defineComponentSlotStyle({\n base: {\n range: {\n bgColor: \"{filledTrackColor}\",\n h: \"full\",\n rounded: \"inherit\",\n transitionDuration: \"slow\",\n transitionProperty: \"size\",\n w: \"{width}\",\n _indeterminate: {\n \"--animation-from-x\": \"-40%\",\n \"--animation-to-x\": \"100%\",\n animationDuration: \"{duration, 1s}\",\n animationIterationCount: \"infinite\",\n animationName: \"position\",\n animationTimingFunction: \"ease\",\n minW: \"50%\",\n position: \"absolute\",\n willChange: \"left\",\n },\n },\n root: {\n overflow: \"hidden\",\n position: \"relative\",\n w: \"full\",\n },\n },\n\n props: {\n /**\n * If `true`, the progress bar will animate.\n *\n * @default false\n */\n animated: {\n true: {\n range: {\n \"--animation-from\": \"{stripe-size}\",\n animationDuration: \"{duration, 1s}\",\n animationIterationCount: \"infinite\",\n animationName: \"bg-position\",\n animationTimingFunction: \"linear\",\n },\n },\n },\n /**\n * The shape of the progress bar.\n *\n * @default 'rounded'\n */\n shape: {\n circle: {\n root: { rounded: \"full\" },\n },\n rounded: {\n root: { rounded: \"l1\" },\n },\n square: {\n root: { rounded: \"0\" },\n },\n },\n /**\n * If `true`, the progress bar will show stripe.\n *\n * @default false\n */\n striped: {\n true: {\n range: {\n \"--stripe-angle\": \"45deg\",\n \"--stripe-color\": [\"rgba(255, 255, 255, 0.3)\", \"rgba(0, 0, 0, 0.3)\"],\n \"--stripe-size\": \"1rem\",\n bgImage: `linear(\n {stripe-angle},\n {stripe-color} 25%,\n transparent 25%,\n transparent 50%,\n {stripe-color} 50%,\n {stripe-color} 75%,\n transparent 75%,\n transparent\n )`,\n bgSize: \"{stripe-size} {stripe-size}\",\n },\n },\n },\n },\n\n variants: {\n outline: {\n range: {\n bg: \"colorScheme.solid\",\n },\n root: {\n bg: \"bg.subtle\",\n },\n },\n subtle: {\n range: {\n bg: \"colorScheme.solid/80\",\n },\n root: {\n bg: [\"colorScheme.muted\", \"colorScheme.subtle\"],\n },\n },\n },\n\n sizes: {\n xs: {\n root: { h: \"1\" },\n },\n sm: {\n root: { h: \"2\" },\n },\n md: {\n root: { h: \"3\" },\n },\n lg: {\n root: { h: \"4\" },\n },\n xl: {\n root: { h: \"5\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"outline\",\n shape: \"rounded\",\n striped: false,\n },\n})\n\nexport type ProgressStyle = typeof progressStyle\n"],"mappings":";AAEA,MAAa,sDAAgBA,CAAAA,CAAAA,yBAAyB;CACpD,MAAM;EACJ,OAAO;GACL,SAAS;GACT,GAAG;GACH,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,GAAG;GACH,gBAAgB;IACd,sBAAsB;IACtB,oBAAoB;IACpB,mBAAmB;IACnB,yBAAyB;IACzB,eAAe;IACf,yBAAyB;IACzB,MAAM;IACN,UAAU;IACV,YAAY;GACd;EACF;EACA,MAAM;GACJ,UAAU;GACV,UAAU;GACV,GAAG;EACL;CACF;CAEA,OAAO;;;;;;EAML,UAAU,EACR,MAAM,EACJ,OAAO;GACL,oBAAoB;GACpB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;EAC3B,EACF,EACF;;;;;;EAMA,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,SAAS,OAAO,EAC1B;GACA,SAAS,EACP,MAAM,EAAE,SAAS,KAAK,EACxB;GACA,QAAQ,EACN,MAAM,EAAE,SAAS,IAAI,EACvB;EACF;;;;;;EAMA,SAAS,EACP,MAAM,EACJ,OAAO;GACL,kBAAkB;GAClB,kBAAkB,CAAC,4BAA4B,oBAAoB;GACnE,iBAAiB;GACjB,SAAS;;;;;;;;;;GAUT,QAAQ;EACV,EACF,EACF;CACF;CAEA,UAAU;EACR,SAAS;GACP,OAAO,EACL,IAAI,oBACN;GACA,MAAM,EACJ,IAAI,YACN;EACF;EACA,QAAQ;GACN,OAAO,EACL,IAAI,uBACN;GACA,MAAM,EACJ,IAAI,CAAC,qBAAqB,oBAAoB,EAChD;EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACP,SAAS;CACX;AACF,CAAC"}
|
|
@@ -49,7 +49,7 @@ loading: {
|
|
|
49
49
|
animationIterationCount: "infinite",
|
|
50
50
|
animationName: "bg-position",
|
|
51
51
|
animationTimingFunction: "ease-in-out",
|
|
52
|
-
bgImage: "linear
|
|
52
|
+
bgImage: "linear(270deg, {start-color}, {end-color}, {end-color}, {start-color})",
|
|
53
53
|
bgSize: "400% 100%"
|
|
54
54
|
}
|
|
55
55
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/skeleton/skeleton.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const skeletonStyle = defineComponentStyle({\n base: {},\n\n props: {\n /**\n * If `false`, it'll render its children with a nice fade transition.\n *\n * @default true\n */\n loading: {\n false: {\n animationDuration: \"{fade-duration, 0.1s}\",\n animationIterationCount: \"1\",\n animationName: \"fade-in\",\n animationTimingFunction: \"ease-out\",\n bg: \"unset\",\n },\n true: {\n \"&::before, &::after, *\": {\n visibility: \"hidden\",\n },\n \"--height\": \"sizes.6\",\n \"--width\": \"sizes.full\",\n bgClip: \"padding-box\",\n boxShadow: \"none\",\n color: \"transparent\",\n cursor: \"default\",\n flexShrink: \"0\",\n h: \"{height}\",\n maxW: \"full\",\n pointerEvents: \"none\",\n rounded: \"l1\",\n userSelect: \"none\",\n w: \"{width}\",\n },\n },\n },\n\n variants: {\n none: {\n animation: \"none\",\n },\n pulse: {\n animationDuration: \"{duration, 1.2s}\",\n animationIterationCount: \"infinite\",\n animationName: \"pulse\",\n bg: \"bg.muted\",\n },\n shine: {\n \"--animation-from\": \"200%\",\n \"--animation-to\": \"-200%\",\n \"--end-color\": \"colors.bg.muted\",\n \"--start-color\": \"colors.bg.subtle\",\n animationDuration: \"{duration, 5s}\",\n animationIterationCount: \"infinite\",\n animationName: \"bg-position\",\n animationTimingFunction: \"ease-in-out\",\n bgImage:\n \"linear
|
|
1
|
+
{"version":3,"file":"skeleton.style.cjs","names":["defineComponentStyle"],"sources":["../../../../src/components/skeleton/skeleton.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const skeletonStyle = defineComponentStyle({\n base: {},\n\n props: {\n /**\n * If `false`, it'll render its children with a nice fade transition.\n *\n * @default true\n */\n loading: {\n false: {\n animationDuration: \"{fade-duration, 0.1s}\",\n animationIterationCount: \"1\",\n animationName: \"fade-in\",\n animationTimingFunction: \"ease-out\",\n bg: \"unset\",\n },\n true: {\n \"&::before, &::after, *\": {\n visibility: \"hidden\",\n },\n \"--height\": \"sizes.6\",\n \"--width\": \"sizes.full\",\n bgClip: \"padding-box\",\n boxShadow: \"none\",\n color: \"transparent\",\n cursor: \"default\",\n flexShrink: \"0\",\n h: \"{height}\",\n maxW: \"full\",\n pointerEvents: \"none\",\n rounded: \"l1\",\n userSelect: \"none\",\n w: \"{width}\",\n },\n },\n },\n\n variants: {\n none: {\n animation: \"none\",\n },\n pulse: {\n animationDuration: \"{duration, 1.2s}\",\n animationIterationCount: \"infinite\",\n animationName: \"pulse\",\n bg: \"bg.muted\",\n },\n shine: {\n \"--animation-from\": \"200%\",\n \"--animation-to\": \"-200%\",\n \"--end-color\": \"colors.bg.muted\",\n \"--start-color\": \"colors.bg.subtle\",\n animationDuration: \"{duration, 5s}\",\n animationIterationCount: \"infinite\",\n animationName: \"bg-position\",\n animationTimingFunction: \"ease-in-out\",\n bgImage:\n \"linear(270deg, {start-color}, {end-color}, {end-color}, {start-color})\",\n bgSize: \"400% 100%\",\n },\n },\n\n defaultProps: {\n variant: \"pulse\",\n loading: true,\n },\n})\n\nexport type SkeletonStyle = typeof skeletonStyle\n"],"mappings":";AAEA,MAAa,sDAAgBA,CAAAA,CAAAA,qBAAqB;CAChD,MAAM,CAAC;CAEP,OAAO;;;;;;AAML,SAAS;EACP,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,IAAI;EACN;EACA,MAAM;GACJ,0BAA0B,EACxB,YAAY,SACd;GACA,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,WAAW;GACX,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,GAAG;GACH,MAAM;GACN,eAAe;GACf,SAAS;GACT,YAAY;GACZ,GAAG;EACL;CACF,EACF;CAEA,UAAU;EACR,MAAM,EACJ,WAAW,OACb;EACA,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,IAAI;EACN;EACA,OAAO;GACL,oBAAoB;GACpB,kBAAkB;GAClB,eAAe;GACf,iBAAiB;GACjB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,SACE;GACF,QAAQ;EACV;CACF;CAEA,cAAc;EACZ,SAAS;EACT,SAAS;CACX;AACF,CAAC"}
|
|
@@ -15,25 +15,27 @@ const directionValues = new Set(Object.values(directions));
|
|
|
15
15
|
function gradient(value, { system }) {
|
|
16
16
|
if (value == null || require_utils.globalValues.has(value)) return value;
|
|
17
17
|
if (!require_utils.isCSSFunction(value)) return `url('${value}')`;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
18
|
+
return require_utils.splitValues(value).map((value) => {
|
|
19
|
+
let { type, values } = require_utils.getCSSFunction(value);
|
|
20
|
+
if (!type || !values) return value;
|
|
21
|
+
type = type.includes("-gradient") ? type : `${type}-gradient`;
|
|
22
|
+
const [maybeDirection, ...colors] = require_utils.splitValues(values);
|
|
23
|
+
if (!colors.length) return value;
|
|
24
|
+
const direction = maybeDirection && maybeDirection in directions ? directions[maybeDirection] : maybeDirection;
|
|
25
|
+
if (!(0, require_utils_index.utils_exports.isUndefined)(direction)) colors.unshift(direction);
|
|
26
|
+
const computedValues = colors.map((_color) => {
|
|
27
|
+
if ((0, require_utils_index.utils_exports.isUndefined)(_color)) return _color;
|
|
28
|
+
if (directionValues.has(_color)) return _color;
|
|
29
|
+
const i = _color.indexOf(" ");
|
|
30
|
+
let [color, _ratio] = i !== -1 ? [_color.slice(0, i), _color.slice(i + 1)] : [_color];
|
|
31
|
+
const ratio = require_utils.isCSSFunction(_ratio) ? _ratio : _ratio?.split(" ");
|
|
32
|
+
const token = `colors.${color}`;
|
|
33
|
+
color = require_utils.isCSSToken(system)(token) ? system.cssMap[token].ref : color;
|
|
34
|
+
if (ratio) return [color, ...(0, require_utils_index.utils_exports.isArray)(ratio) ? ratio : [ratio]].join(" ");
|
|
35
|
+
else return color;
|
|
36
|
+
});
|
|
37
|
+
return `${type}(${computedValues.join(", ")})`;
|
|
38
|
+
}).join(", ");
|
|
37
39
|
}
|
|
38
40
|
//#endregion
|
|
39
41
|
exports.gradient = gradient;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gradient.cjs","names":["globalValues","isCSSFunction","
|
|
1
|
+
{"version":3,"file":"gradient.cjs","names":["globalValues","isCSSFunction","splitValues","getCSSFunction","isCSSToken"],"sources":["../../../../src/core/css/gradient.ts"],"sourcesContent":["import type { TransformOptions } from \"./utils\"\nimport { isArray, isUndefined } from \"../../utils\"\nimport {\n getCSSFunction,\n globalValues,\n isCSSFunction,\n isCSSToken,\n splitValues,\n} from \"./utils\"\n\nconst directions: { [key: string]: string } = {\n \"to-b\": \"to bottom\",\n \"to-bl\": \"to bottom left\",\n \"to-br\": \"to bottom right\",\n \"to-l\": \"to left\",\n \"to-r\": \"to right\",\n \"to-t\": \"to top\",\n \"to-tl\": \"to top left\",\n \"to-tr\": \"to top right\",\n}\n\nconst directionValues = new Set(Object.values(directions))\n\nexport function gradient(value: any, { system }: TransformOptions) {\n if (value == null || globalValues.has(value)) return value\n\n const prevent = isCSSFunction(value)\n\n if (!prevent) return `url('${value}')`\n\n return splitValues(value)\n .map((value) => {\n let { type, values } = getCSSFunction(value)\n\n if (!type || !values) return value\n\n type = type.includes(\"-gradient\") ? type : `${type}-gradient`\n\n const [maybeDirection, ...colors] = splitValues(values)\n\n if (!colors.length) return value\n\n const direction =\n maybeDirection && maybeDirection in directions\n ? directions[maybeDirection]\n : maybeDirection\n\n if (!isUndefined(direction)) colors.unshift(direction)\n\n const computedValues = colors.map((_color) => {\n if (isUndefined(_color)) return _color\n\n if (directionValues.has(_color)) return _color\n\n const i = _color.indexOf(\" \")\n\n let [color, _ratio] =\n i !== -1 ? [_color.slice(0, i), _color.slice(i + 1)] : [_color]\n\n const ratio = isCSSFunction(_ratio) ? _ratio : _ratio?.split(\" \")\n\n const token = `colors.${color}`\n\n color = isCSSToken(system)(token) ? system.cssMap[token]!.ref : color\n\n if (ratio)\n return [color, ...(isArray(ratio) ? ratio : [ratio])].join(\" \")\n else return color\n })\n\n return `${type}(${computedValues.join(\", \")})`\n })\n .join(\", \")\n}\n"],"mappings":";;;AAUA,MAAM,aAAwC;CAC5C,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,SAAS;AACX;AAEA,MAAM,kBAAkB,IAAI,IAAI,OAAO,OAAO,UAAU,CAAC;AAEzD,SAAgB,SAAS,OAAY,EAAE,UAA4B;CACjE,IAAI,SAAS,QAAQA,cAAAA,aAAa,IAAI,KAAK,GAAG,OAAO;CAIrD,IAAI,CAFYC,cAAAA,cAAc,KAEnB,GAAG,OAAO,QAAQ,MAAM;CAEnC,OAAOC,cAAAA,YAAY,KAAK,CAAC,CACtB,KAAK,UAAU;EACd,IAAI,EAAE,MAAM,WAAWC,cAAAA,eAAe,KAAK;EAE3C,IAAI,CAAC,QAAQ,CAAC,QAAQ,OAAO;EAE7B,OAAO,KAAK,SAAS,WAAW,IAAI,OAAO,GAAG,KAAK;EAEnD,MAAM,CAAC,gBAAgB,GAAG,UAAUD,cAAAA,YAAY,MAAM;EAEtD,IAAI,CAAC,OAAO,QAAQ,OAAO;EAE3B,MAAM,YACJ,kBAAkB,kBAAkB,aAChC,WAAW,kBACX;EAEN,IAAI,EAAA,GAAA,oBAAA,cAAA,YAAA,CAAa,SAAS,GAAG,OAAO,QAAQ,SAAS;EAErD,MAAM,iBAAiB,OAAO,KAAK,WAAW;GAC5C,KAAA,GAAA,oBAAA,cAAA,YAAA,CAAgB,MAAM,GAAG,OAAO;GAEhC,IAAI,gBAAgB,IAAI,MAAM,GAAG,OAAO;GAExC,MAAM,IAAI,OAAO,QAAQ,GAAG;GAE5B,IAAI,CAAC,OAAO,UACV,MAAM,KAAK,CAAC,OAAO,MAAM,GAAG,CAAC,GAAG,OAAO,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM;GAEhE,MAAM,QAAQD,cAAAA,cAAc,MAAM,IAAI,SAAS,QAAQ,MAAM,GAAG;GAEhE,MAAM,QAAQ,UAAU;GAExB,QAAQG,cAAAA,WAAW,MAAM,CAAC,CAAC,KAAK,IAAI,OAAO,OAAO,MAAM,CAAE,MAAM;GAEhE,IAAI,OACF,OAAO,CAAC,OAAO,IAAA,GAAA,oBAAA,cAAA,QAAA,CAAY,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAE,CAAC,CAAC,KAAK,GAAG;QAC3D,OAAO;EACd,CAAC;EAED,OAAO,GAAG,KAAK,GAAG,eAAe,KAAK,IAAI,EAAE;CAC9C,CAAC,CAAC,CACD,KAAK,IAAI;AACd"}
|
|
@@ -7,10 +7,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
7
7
|
//#region src/components/color-swatch/color-swatch.tsx
|
|
8
8
|
const checkersProps = {
|
|
9
9
|
bgImage: [
|
|
10
|
-
"linear
|
|
11
|
-
"linear
|
|
12
|
-
"linear
|
|
13
|
-
"linear
|
|
10
|
+
"linear(45deg, {checkers-fg} 25%, transparent 25%)",
|
|
11
|
+
"linear(-45deg, {checkers-fg} 25%, transparent 25%)",
|
|
12
|
+
"linear(45deg, transparent 75%, {checkers-fg} 75%)",
|
|
13
|
+
"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)"
|
|
14
14
|
].join(", "),
|
|
15
15
|
bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,
|
|
16
16
|
bgSize: `8px 8px`
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"color-swatch.js","names":[],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n bgImage: [\n \"linear
|
|
1
|
+
{"version":3,"file":"color-swatch.js","names":[],"sources":["../../../../src/components/color-swatch/color-swatch.tsx"],"sourcesContent":["\"use client\"\n\nimport type { CSSProps, HTMLStyledProps, ThemeProps } from \"../../core\"\nimport type { ColorSwatchStyle } from \"./color-swatch.style\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { isString } from \"../../utils\"\nimport { colorSwatchStyle } from \"./color-swatch.style\"\n\nexport const checkersProps: HTMLStyledProps = {\n bgImage: [\n \"linear(45deg, {checkers-fg} 25%, transparent 25%)\",\n \"linear(-45deg, {checkers-fg} 25%, transparent 25%)\",\n \"linear(45deg, transparent 75%, {checkers-fg} 75%)\",\n \"linear(-45deg, {checkers-bg} 75%, {checkers-fg} 75%)\",\n ].join(\", \"),\n bgPosition: `0 0, 0 4px, 4px -4px, -4px 0`,\n bgSize: `8px 8px`,\n}\n\nconst defaultLayers = (\n background: CSSProps[\"color\"],\n withShadow: boolean,\n): HTMLStyledProps[] => {\n const layers: HTMLStyledProps[] = [checkersProps, { background }]\n\n if (withShadow) layers.push({ boxShadow: \"inner\" })\n\n return layers\n}\n\nexport interface ColorSwatchProps\n extends Omit<HTMLStyledProps, \"color\">, ThemeProps<ColorSwatchStyle> {\n /**\n * The color used for the swatch element.\n *\n * @default '#ffffff00'\n */\n color?: CSSProps[\"color\"]\n /**\n * The overlay used for the swatch element.\n */\n layers?: HTMLStyledProps[]\n /**\n * If `true`, the swatch element has an inner `box-shadow`.\n *\n * @default true\n */\n withShadow?: boolean\n}\n\nconst {\n PropsContext: ColorSwatchPropsContext,\n usePropsContext: useColorSwatchPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<ColorSwatchProps, ColorSwatchStyle>(\n \"color-swatch\",\n colorSwatchStyle,\n)\n\nexport { ColorSwatchPropsContext, useColorSwatchPropsContext }\n\n/**\n * `ColorSwatch` is a component that displays color samples.\n *\n * @see https://yamada-ui.com/docs/components/color-swatch\n */\nexport const ColorSwatch = withProvider<\"div\", ColorSwatchProps>(\n ({\n children,\n color = \"#ffffff00\",\n withShadow = true,\n layers = defaultLayers(color, withShadow),\n ...rest\n }) => {\n return (\n <styled.div\n aria-label={isString(color) ? color : undefined}\n aria-roledescription=\"color swatch\"\n role=\"img\"\n {...rest}\n >\n {children}\n {layers.map((props, index) => (\n <ColorSwatchOverlay key={index} {...props} />\n ))}\n </styled.div>\n )\n },\n \"root\",\n)()\n\nexport interface ColorSwatchOverlayProps extends HTMLStyledProps {}\n\nexport const ColorSwatchOverlay = withContext<\"div\", ColorSwatchOverlayProps>(\n \"div\",\n \"overlay\",\n)()\n"],"mappings":";;;;;;;AAQA,MAAa,gBAAiC;CAC5C,SAAS;EACP;EACA;EACA;EACA;CACF,CAAC,CAAC,KAAK,IAAI;CACX,YAAY;CACZ,QAAQ;AACV;AAEA,MAAM,iBACJ,YACA,eACsB;CACtB,MAAM,SAA4B,CAAC,eAAe,EAAE,WAAW,CAAC;CAEhE,IAAI,YAAY,OAAO,KAAK,EAAE,WAAW,QAAQ,CAAC;CAElD,OAAO;AACT;AAsBA,MAAM,EACJ,cAAc,yBACd,iBAAiB,4BACjB,aACA,iBACE,oBACF,gBACA,gBACF;;;;;;AASA,MAAa,cAAc,cACxB,EACC,UACA,QAAQ,aACR,aAAa,MACb,SAAS,cAAc,OAAO,UAAU,GACxC,GAAG,WACC;CACJ,OACE,qBAAC,OAAO,KAAR;EACE,eAAA,GAAA,cAAA,SAAA,CAAqB,KAAK,IAAI,QAAQ,KAAA;EACtC,wBAAqB;EACrB,MAAK;EACL,GAAI;YAJN,CAMG,UACA,OAAO,KAAK,OAAO,UAClB,oBAAC,oBAAD,EAAgC,GAAI,MAAQ,GAAnB,KAAmB,CAC7C,CACS;;AAEhB,GACA,MACF,CAAC,CAAC;AAIF,MAAa,qBAAqB,YAChC,OACA,SACF,CAAC,CAAC"}
|
|
@@ -59,7 +59,7 @@ const progressStyle = defineComponentSlotStyle({
|
|
|
59
59
|
"--stripe-angle": "45deg",
|
|
60
60
|
"--stripe-color": ["rgba(255, 255, 255, 0.3)", "rgba(0, 0, 0, 0.3)"],
|
|
61
61
|
"--stripe-size": "1rem",
|
|
62
|
-
bgImage: `linear
|
|
62
|
+
bgImage: `linear(
|
|
63
63
|
{stripe-angle},
|
|
64
64
|
{stripe-color} 25%,
|
|
65
65
|
transparent 25%,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"progress.style.js","names":[],"sources":["../../../../src/components/progress/progress.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const progressStyle = defineComponentSlotStyle({\n base: {\n range: {\n bgColor: \"{filledTrackColor}\",\n h: \"full\",\n rounded: \"inherit\",\n transitionDuration: \"slow\",\n transitionProperty: \"size\",\n w: \"{width}\",\n _indeterminate: {\n \"--animation-from-x\": \"-40%\",\n \"--animation-to-x\": \"100%\",\n animationDuration: \"{duration, 1s}\",\n animationIterationCount: \"infinite\",\n animationName: \"position\",\n animationTimingFunction: \"ease\",\n minW: \"50%\",\n position: \"absolute\",\n willChange: \"left\",\n },\n },\n root: {\n overflow: \"hidden\",\n position: \"relative\",\n w: \"full\",\n },\n },\n\n props: {\n /**\n * If `true`, the progress bar will animate.\n *\n * @default false\n */\n animated: {\n true: {\n range: {\n \"--animation-from\": \"{stripe-size}\",\n animationDuration: \"{duration, 1s}\",\n animationIterationCount: \"infinite\",\n animationName: \"bg-position\",\n animationTimingFunction: \"linear\",\n },\n },\n },\n /**\n * The shape of the progress bar.\n *\n * @default 'rounded'\n */\n shape: {\n circle: {\n root: { rounded: \"full\" },\n },\n rounded: {\n root: { rounded: \"l1\" },\n },\n square: {\n root: { rounded: \"0\" },\n },\n },\n /**\n * If `true`, the progress bar will show stripe.\n *\n * @default false\n */\n striped: {\n true: {\n range: {\n \"--stripe-angle\": \"45deg\",\n \"--stripe-color\": [\"rgba(255, 255, 255, 0.3)\", \"rgba(0, 0, 0, 0.3)\"],\n \"--stripe-size\": \"1rem\",\n bgImage: `linear
|
|
1
|
+
{"version":3,"file":"progress.style.js","names":[],"sources":["../../../../src/components/progress/progress.style.ts"],"sourcesContent":["import { defineComponentSlotStyle } from \"../../core\"\n\nexport const progressStyle = defineComponentSlotStyle({\n base: {\n range: {\n bgColor: \"{filledTrackColor}\",\n h: \"full\",\n rounded: \"inherit\",\n transitionDuration: \"slow\",\n transitionProperty: \"size\",\n w: \"{width}\",\n _indeterminate: {\n \"--animation-from-x\": \"-40%\",\n \"--animation-to-x\": \"100%\",\n animationDuration: \"{duration, 1s}\",\n animationIterationCount: \"infinite\",\n animationName: \"position\",\n animationTimingFunction: \"ease\",\n minW: \"50%\",\n position: \"absolute\",\n willChange: \"left\",\n },\n },\n root: {\n overflow: \"hidden\",\n position: \"relative\",\n w: \"full\",\n },\n },\n\n props: {\n /**\n * If `true`, the progress bar will animate.\n *\n * @default false\n */\n animated: {\n true: {\n range: {\n \"--animation-from\": \"{stripe-size}\",\n animationDuration: \"{duration, 1s}\",\n animationIterationCount: \"infinite\",\n animationName: \"bg-position\",\n animationTimingFunction: \"linear\",\n },\n },\n },\n /**\n * The shape of the progress bar.\n *\n * @default 'rounded'\n */\n shape: {\n circle: {\n root: { rounded: \"full\" },\n },\n rounded: {\n root: { rounded: \"l1\" },\n },\n square: {\n root: { rounded: \"0\" },\n },\n },\n /**\n * If `true`, the progress bar will show stripe.\n *\n * @default false\n */\n striped: {\n true: {\n range: {\n \"--stripe-angle\": \"45deg\",\n \"--stripe-color\": [\"rgba(255, 255, 255, 0.3)\", \"rgba(0, 0, 0, 0.3)\"],\n \"--stripe-size\": \"1rem\",\n bgImage: `linear(\n {stripe-angle},\n {stripe-color} 25%,\n transparent 25%,\n transparent 50%,\n {stripe-color} 50%,\n {stripe-color} 75%,\n transparent 75%,\n transparent\n )`,\n bgSize: \"{stripe-size} {stripe-size}\",\n },\n },\n },\n },\n\n variants: {\n outline: {\n range: {\n bg: \"colorScheme.solid\",\n },\n root: {\n bg: \"bg.subtle\",\n },\n },\n subtle: {\n range: {\n bg: \"colorScheme.solid/80\",\n },\n root: {\n bg: [\"colorScheme.muted\", \"colorScheme.subtle\"],\n },\n },\n },\n\n sizes: {\n xs: {\n root: { h: \"1\" },\n },\n sm: {\n root: { h: \"2\" },\n },\n md: {\n root: { h: \"3\" },\n },\n lg: {\n root: { h: \"4\" },\n },\n xl: {\n root: { h: \"5\" },\n },\n },\n\n defaultProps: {\n size: \"md\",\n variant: \"outline\",\n shape: \"rounded\",\n striped: false,\n },\n})\n\nexport type ProgressStyle = typeof progressStyle\n"],"mappings":";;AAEA,MAAa,gBAAgB,yBAAyB;CACpD,MAAM;EACJ,OAAO;GACL,SAAS;GACT,GAAG;GACH,SAAS;GACT,oBAAoB;GACpB,oBAAoB;GACpB,GAAG;GACH,gBAAgB;IACd,sBAAsB;IACtB,oBAAoB;IACpB,mBAAmB;IACnB,yBAAyB;IACzB,eAAe;IACf,yBAAyB;IACzB,MAAM;IACN,UAAU;IACV,YAAY;GACd;EACF;EACA,MAAM;GACJ,UAAU;GACV,UAAU;GACV,GAAG;EACL;CACF;CAEA,OAAO;;;;;;EAML,UAAU,EACR,MAAM,EACJ,OAAO;GACL,oBAAoB;GACpB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;EAC3B,EACF,EACF;;;;;;EAMA,OAAO;GACL,QAAQ,EACN,MAAM,EAAE,SAAS,OAAO,EAC1B;GACA,SAAS,EACP,MAAM,EAAE,SAAS,KAAK,EACxB;GACA,QAAQ,EACN,MAAM,EAAE,SAAS,IAAI,EACvB;EACF;;;;;;EAMA,SAAS,EACP,MAAM,EACJ,OAAO;GACL,kBAAkB;GAClB,kBAAkB,CAAC,4BAA4B,oBAAoB;GACnE,iBAAiB;GACjB,SAAS;;;;;;;;;;GAUT,QAAQ;EACV,EACF,EACF;CACF;CAEA,UAAU;EACR,SAAS;GACP,OAAO,EACL,IAAI,oBACN;GACA,MAAM,EACJ,IAAI,YACN;EACF;EACA,QAAQ;GACN,OAAO,EACL,IAAI,uBACN;GACA,MAAM,EACJ,IAAI,CAAC,qBAAqB,oBAAoB,EAChD;EACF;CACF;CAEA,OAAO;EACL,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;EACA,IAAI,EACF,MAAM,EAAE,GAAG,IAAI,EACjB;CACF;CAEA,cAAc;EACZ,MAAM;EACN,SAAS;EACT,OAAO;EACP,SAAS;CACX;AACF,CAAC"}
|
|
@@ -50,7 +50,7 @@ loading: {
|
|
|
50
50
|
animationIterationCount: "infinite",
|
|
51
51
|
animationName: "bg-position",
|
|
52
52
|
animationTimingFunction: "ease-in-out",
|
|
53
|
-
bgImage: "linear
|
|
53
|
+
bgImage: "linear(270deg, {start-color}, {end-color}, {end-color}, {start-color})",
|
|
54
54
|
bgSize: "400% 100%"
|
|
55
55
|
}
|
|
56
56
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"skeleton.style.js","names":[],"sources":["../../../../src/components/skeleton/skeleton.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const skeletonStyle = defineComponentStyle({\n base: {},\n\n props: {\n /**\n * If `false`, it'll render its children with a nice fade transition.\n *\n * @default true\n */\n loading: {\n false: {\n animationDuration: \"{fade-duration, 0.1s}\",\n animationIterationCount: \"1\",\n animationName: \"fade-in\",\n animationTimingFunction: \"ease-out\",\n bg: \"unset\",\n },\n true: {\n \"&::before, &::after, *\": {\n visibility: \"hidden\",\n },\n \"--height\": \"sizes.6\",\n \"--width\": \"sizes.full\",\n bgClip: \"padding-box\",\n boxShadow: \"none\",\n color: \"transparent\",\n cursor: \"default\",\n flexShrink: \"0\",\n h: \"{height}\",\n maxW: \"full\",\n pointerEvents: \"none\",\n rounded: \"l1\",\n userSelect: \"none\",\n w: \"{width}\",\n },\n },\n },\n\n variants: {\n none: {\n animation: \"none\",\n },\n pulse: {\n animationDuration: \"{duration, 1.2s}\",\n animationIterationCount: \"infinite\",\n animationName: \"pulse\",\n bg: \"bg.muted\",\n },\n shine: {\n \"--animation-from\": \"200%\",\n \"--animation-to\": \"-200%\",\n \"--end-color\": \"colors.bg.muted\",\n \"--start-color\": \"colors.bg.subtle\",\n animationDuration: \"{duration, 5s}\",\n animationIterationCount: \"infinite\",\n animationName: \"bg-position\",\n animationTimingFunction: \"ease-in-out\",\n bgImage:\n \"linear
|
|
1
|
+
{"version":3,"file":"skeleton.style.js","names":[],"sources":["../../../../src/components/skeleton/skeleton.style.ts"],"sourcesContent":["import { defineComponentStyle } from \"../../core\"\n\nexport const skeletonStyle = defineComponentStyle({\n base: {},\n\n props: {\n /**\n * If `false`, it'll render its children with a nice fade transition.\n *\n * @default true\n */\n loading: {\n false: {\n animationDuration: \"{fade-duration, 0.1s}\",\n animationIterationCount: \"1\",\n animationName: \"fade-in\",\n animationTimingFunction: \"ease-out\",\n bg: \"unset\",\n },\n true: {\n \"&::before, &::after, *\": {\n visibility: \"hidden\",\n },\n \"--height\": \"sizes.6\",\n \"--width\": \"sizes.full\",\n bgClip: \"padding-box\",\n boxShadow: \"none\",\n color: \"transparent\",\n cursor: \"default\",\n flexShrink: \"0\",\n h: \"{height}\",\n maxW: \"full\",\n pointerEvents: \"none\",\n rounded: \"l1\",\n userSelect: \"none\",\n w: \"{width}\",\n },\n },\n },\n\n variants: {\n none: {\n animation: \"none\",\n },\n pulse: {\n animationDuration: \"{duration, 1.2s}\",\n animationIterationCount: \"infinite\",\n animationName: \"pulse\",\n bg: \"bg.muted\",\n },\n shine: {\n \"--animation-from\": \"200%\",\n \"--animation-to\": \"-200%\",\n \"--end-color\": \"colors.bg.muted\",\n \"--start-color\": \"colors.bg.subtle\",\n animationDuration: \"{duration, 5s}\",\n animationIterationCount: \"infinite\",\n animationName: \"bg-position\",\n animationTimingFunction: \"ease-in-out\",\n bgImage:\n \"linear(270deg, {start-color}, {end-color}, {end-color}, {start-color})\",\n bgSize: \"400% 100%\",\n },\n },\n\n defaultProps: {\n variant: \"pulse\",\n loading: true,\n },\n})\n\nexport type SkeletonStyle = typeof skeletonStyle\n"],"mappings":";;AAEA,MAAa,gBAAgB,qBAAqB;CAChD,MAAM,CAAC;CAEP,OAAO;;;;;;AAML,SAAS;EACP,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,IAAI;EACN;EACA,MAAM;GACJ,0BAA0B,EACxB,YAAY,SACd;GACA,YAAY;GACZ,WAAW;GACX,QAAQ;GACR,WAAW;GACX,OAAO;GACP,QAAQ;GACR,YAAY;GACZ,GAAG;GACH,MAAM;GACN,eAAe;GACf,SAAS;GACT,YAAY;GACZ,GAAG;EACL;CACF,EACF;CAEA,UAAU;EACR,MAAM,EACJ,WAAW,OACb;EACA,OAAO;GACL,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,IAAI;EACN;EACA,OAAO;GACL,oBAAoB;GACpB,kBAAkB;GAClB,eAAe;GACf,iBAAiB;GACjB,mBAAmB;GACnB,yBAAyB;GACzB,eAAe;GACf,yBAAyB;GACzB,SACE;GACF,QAAQ;EACV;CACF;CAEA,cAAc;EACZ,SAAS;EACT,SAAS;CACX;AACF,CAAC"}
|
|
@@ -15,25 +15,27 @@ const directionValues = new Set(Object.values(directions));
|
|
|
15
15
|
function gradient(value, { system }) {
|
|
16
16
|
if (value == null || globalValues.has(value)) return value;
|
|
17
17
|
if (!isCSSFunction(value)) return `url('${value}')`;
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
18
|
+
return splitValues(value).map((value) => {
|
|
19
|
+
let { type, values } = getCSSFunction(value);
|
|
20
|
+
if (!type || !values) return value;
|
|
21
|
+
type = type.includes("-gradient") ? type : `${type}-gradient`;
|
|
22
|
+
const [maybeDirection, ...colors] = splitValues(values);
|
|
23
|
+
if (!colors.length) return value;
|
|
24
|
+
const direction = maybeDirection && maybeDirection in directions ? directions[maybeDirection] : maybeDirection;
|
|
25
|
+
if (!(0, utils_exports.isUndefined)(direction)) colors.unshift(direction);
|
|
26
|
+
const computedValues = colors.map((_color) => {
|
|
27
|
+
if ((0, utils_exports.isUndefined)(_color)) return _color;
|
|
28
|
+
if (directionValues.has(_color)) return _color;
|
|
29
|
+
const i = _color.indexOf(" ");
|
|
30
|
+
let [color, _ratio] = i !== -1 ? [_color.slice(0, i), _color.slice(i + 1)] : [_color];
|
|
31
|
+
const ratio = isCSSFunction(_ratio) ? _ratio : _ratio?.split(" ");
|
|
32
|
+
const token = `colors.${color}`;
|
|
33
|
+
color = isCSSToken(system)(token) ? system.cssMap[token].ref : color;
|
|
34
|
+
if (ratio) return [color, ...(0, utils_exports.isArray)(ratio) ? ratio : [ratio]].join(" ");
|
|
35
|
+
else return color;
|
|
36
|
+
});
|
|
37
|
+
return `${type}(${computedValues.join(", ")})`;
|
|
38
|
+
}).join(", ");
|
|
37
39
|
}
|
|
38
40
|
//#endregion
|
|
39
41
|
export { gradient };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gradient.js","names":[],"sources":["../../../../src/core/css/gradient.ts"],"sourcesContent":["import type { TransformOptions } from \"./utils\"\nimport { isArray, isUndefined } from \"../../utils\"\nimport {\n getCSSFunction,\n globalValues,\n isCSSFunction,\n isCSSToken,\n splitValues,\n} from \"./utils\"\n\nconst directions: { [key: string]: string } = {\n \"to-b\": \"to bottom\",\n \"to-bl\": \"to bottom left\",\n \"to-br\": \"to bottom right\",\n \"to-l\": \"to left\",\n \"to-r\": \"to right\",\n \"to-t\": \"to top\",\n \"to-tl\": \"to top left\",\n \"to-tr\": \"to top right\",\n}\n\nconst directionValues = new Set(Object.values(directions))\n\nexport function gradient(value: any, { system }: TransformOptions) {\n if (value == null || globalValues.has(value)) return value\n\n const prevent = isCSSFunction(value)\n\n if (!prevent) return `url('${value}')`\n\n let { type, values } = getCSSFunction(value)\n\n
|
|
1
|
+
{"version":3,"file":"gradient.js","names":[],"sources":["../../../../src/core/css/gradient.ts"],"sourcesContent":["import type { TransformOptions } from \"./utils\"\nimport { isArray, isUndefined } from \"../../utils\"\nimport {\n getCSSFunction,\n globalValues,\n isCSSFunction,\n isCSSToken,\n splitValues,\n} from \"./utils\"\n\nconst directions: { [key: string]: string } = {\n \"to-b\": \"to bottom\",\n \"to-bl\": \"to bottom left\",\n \"to-br\": \"to bottom right\",\n \"to-l\": \"to left\",\n \"to-r\": \"to right\",\n \"to-t\": \"to top\",\n \"to-tl\": \"to top left\",\n \"to-tr\": \"to top right\",\n}\n\nconst directionValues = new Set(Object.values(directions))\n\nexport function gradient(value: any, { system }: TransformOptions) {\n if (value == null || globalValues.has(value)) return value\n\n const prevent = isCSSFunction(value)\n\n if (!prevent) return `url('${value}')`\n\n return splitValues(value)\n .map((value) => {\n let { type, values } = getCSSFunction(value)\n\n if (!type || !values) return value\n\n type = type.includes(\"-gradient\") ? type : `${type}-gradient`\n\n const [maybeDirection, ...colors] = splitValues(values)\n\n if (!colors.length) return value\n\n const direction =\n maybeDirection && maybeDirection in directions\n ? directions[maybeDirection]\n : maybeDirection\n\n if (!isUndefined(direction)) colors.unshift(direction)\n\n const computedValues = colors.map((_color) => {\n if (isUndefined(_color)) return _color\n\n if (directionValues.has(_color)) return _color\n\n const i = _color.indexOf(\" \")\n\n let [color, _ratio] =\n i !== -1 ? [_color.slice(0, i), _color.slice(i + 1)] : [_color]\n\n const ratio = isCSSFunction(_ratio) ? _ratio : _ratio?.split(\" \")\n\n const token = `colors.${color}`\n\n color = isCSSToken(system)(token) ? system.cssMap[token]!.ref : color\n\n if (ratio)\n return [color, ...(isArray(ratio) ? ratio : [ratio])].join(\" \")\n else return color\n })\n\n return `${type}(${computedValues.join(\", \")})`\n })\n .join(\", \")\n}\n"],"mappings":";;;AAUA,MAAM,aAAwC;CAC5C,QAAQ;CACR,SAAS;CACT,SAAS;CACT,QAAQ;CACR,QAAQ;CACR,QAAQ;CACR,SAAS;CACT,SAAS;AACX;AAEA,MAAM,kBAAkB,IAAI,IAAI,OAAO,OAAO,UAAU,CAAC;AAEzD,SAAgB,SAAS,OAAY,EAAE,UAA4B;CACjE,IAAI,SAAS,QAAQ,aAAa,IAAI,KAAK,GAAG,OAAO;CAIrD,IAAI,CAFY,cAAc,KAEnB,GAAG,OAAO,QAAQ,MAAM;CAEnC,OAAO,YAAY,KAAK,CAAC,CACtB,KAAK,UAAU;EACd,IAAI,EAAE,MAAM,WAAW,eAAe,KAAK;EAE3C,IAAI,CAAC,QAAQ,CAAC,QAAQ,OAAO;EAE7B,OAAO,KAAK,SAAS,WAAW,IAAI,OAAO,GAAG,KAAK;EAEnD,MAAM,CAAC,gBAAgB,GAAG,UAAU,YAAY,MAAM;EAEtD,IAAI,CAAC,OAAO,QAAQ,OAAO;EAE3B,MAAM,YACJ,kBAAkB,kBAAkB,aAChC,WAAW,kBACX;EAEN,IAAI,EAAA,GAAA,cAAA,YAAA,CAAa,SAAS,GAAG,OAAO,QAAQ,SAAS;EAErD,MAAM,iBAAiB,OAAO,KAAK,WAAW;GAC5C,KAAA,GAAA,cAAA,YAAA,CAAgB,MAAM,GAAG,OAAO;GAEhC,IAAI,gBAAgB,IAAI,MAAM,GAAG,OAAO;GAExC,MAAM,IAAI,OAAO,QAAQ,GAAG;GAE5B,IAAI,CAAC,OAAO,UACV,MAAM,KAAK,CAAC,OAAO,MAAM,GAAG,CAAC,GAAG,OAAO,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC,MAAM;GAEhE,MAAM,QAAQ,cAAc,MAAM,IAAI,SAAS,QAAQ,MAAM,GAAG;GAEhE,MAAM,QAAQ,UAAU;GAExB,QAAQ,WAAW,MAAM,CAAC,CAAC,KAAK,IAAI,OAAO,OAAO,MAAM,CAAE,MAAM;GAEhE,IAAI,OACF,OAAO,CAAC,OAAO,IAAA,GAAA,cAAA,QAAA,CAAY,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAE,CAAC,CAAC,KAAK,GAAG;QAC3D,OAAO;EACd,CAAC;EAED,OAAO,GAAG,KAAK,GAAG,eAAe,KAAK,IAAI,EAAE;CAC9C,CAAC,CAAC,CACD,KAAK,IAAI;AACd"}
|
|
@@ -22,7 +22,7 @@ interface AvatarProps extends HTMLStyledProps, ThemeProps<AvatarStyle>, UseAvata
|
|
|
22
22
|
*/
|
|
23
23
|
imageProps?: AvatarImageProps;
|
|
24
24
|
}
|
|
25
|
-
declare const component: <H extends As | "fragment" = "div", R extends import("@yamada-ui/utils").Dict = import("@yamada-ui/utils").Dict<any>>(el: H | import("react").FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "
|
|
25
|
+
declare const component: <H extends As | "fragment" = "div", R extends import("@yamada-ui/utils").Dict = import("@yamada-ui/utils").Dict<any>>(el: H | import("react").FC<R>, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
|
|
26
26
|
shape: {
|
|
27
27
|
circle: {
|
|
28
28
|
root: {
|
|
@@ -141,7 +141,7 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
|
|
|
141
141
|
};
|
|
142
142
|
};
|
|
143
143
|
};
|
|
144
|
-
}>>> | undefined, { name, className, ...options }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? import("react").FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: import("react").Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends import("@yamada-ui/utils").Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "
|
|
144
|
+
}>>> | undefined, { name, className, ...options }?: ComponentOptions) => (initialProps?: InitialProps<R>, ...superProps: SuperProps<R>[]) => H extends "fragment" ? import("react").FunctionComponent<R> : Component<Exclude<H, "fragment">, R>, AvatarPropsContext: import("react").Context<Partial<AvatarProps> | undefined>, useAvatarPropsContext: () => Partial<AvatarProps> | undefined, useRootComponentProps: <Y extends import("@yamada-ui/utils").Dict = {}, R extends keyof Y = keyof Y>(props: Y, slot?: ComponentSlot<ComponentSlotName<ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
|
|
145
145
|
shape: {
|
|
146
146
|
circle: {
|
|
147
147
|
root: {
|
|
@@ -260,7 +260,7 @@ declare const component: <H extends As | "fragment" = "div", R extends import("@
|
|
|
260
260
|
};
|
|
261
261
|
};
|
|
262
262
|
};
|
|
263
|
-
}>>> | undefined, { className, withContext, transferProps }?: UseComponentPropsOptions<R>) => [CSSSlotObject, import("@yamada-ui/utils").Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "
|
|
263
|
+
}>>> | undefined, { className, withContext, transferProps }?: UseComponentPropsOptions<R>) => [CSSSlotObject, import("@yamada-ui/utils").Merge<WithoutThemeProps<Y, ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
|
|
264
264
|
shape: {
|
|
265
265
|
circle: {
|
|
266
266
|
root: {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ComponentSlotStyle } from "../../core/system/index.types.js";
|
|
2
2
|
import "../../index.js";
|
|
3
3
|
//#region src/components/avatar/avatar.style.d.ts
|
|
4
|
-
declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "
|
|
4
|
+
declare const avatarStyle: ComponentSlotStyle<"image" | "group" | "fallback" | "root", {
|
|
5
5
|
/**
|
|
6
6
|
* The shape of the component
|
|
7
7
|
*
|
|
@@ -65,7 +65,7 @@ declare const Progress: Component<({ css, max, min, rangeColor, trackColor, valu
|
|
|
65
65
|
"--stripe-angle": "45deg";
|
|
66
66
|
"--stripe-color": ["rgba(255, 255, 255, 0.3)", "rgba(0, 0, 0, 0.3)"];
|
|
67
67
|
"--stripe-size": "1rem";
|
|
68
|
-
bgImage: "linear
|
|
68
|
+
bgImage: "linear(\n {stripe-angle},\n {stripe-color} 25%,\n transparent 25%,\n transparent 50%,\n {stripe-color} 50%,\n {stripe-color} 75%,\n transparent 75%,\n transparent\n )";
|
|
69
69
|
bgSize: "{stripe-size} {stripe-size}";
|
|
70
70
|
};
|
|
71
71
|
};
|
|
@@ -51,7 +51,7 @@ declare const progressStyle: ComponentSlotStyle<"range" | "root", {
|
|
|
51
51
|
"--stripe-angle": "45deg";
|
|
52
52
|
"--stripe-color": ["rgba(255, 255, 255, 0.3)", "rgba(0, 0, 0, 0.3)"];
|
|
53
53
|
"--stripe-size": "1rem";
|
|
54
|
-
bgImage: "linear
|
|
54
|
+
bgImage: "linear(\n {stripe-angle},\n {stripe-color} 25%,\n transparent 25%,\n transparent 50%,\n {stripe-color} 50%,\n {stripe-color} 75%,\n transparent 75%,\n transparent\n )";
|
|
55
55
|
bgSize: "{stripe-size} {stripe-size}";
|
|
56
56
|
};
|
|
57
57
|
};
|
|
@@ -54,7 +54,7 @@ declare const skeletonStyle: ComponentStyle<{
|
|
|
54
54
|
animationIterationCount: "infinite";
|
|
55
55
|
animationName: "bg-position";
|
|
56
56
|
animationTimingFunction: "ease-in-out";
|
|
57
|
-
bgImage: "linear
|
|
57
|
+
bgImage: "linear(270deg, {start-color}, {end-color}, {end-color}, {start-color})";
|
|
58
58
|
bgSize: "400% 100%";
|
|
59
59
|
};
|
|
60
60
|
}>;
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "2.3.0-dev-
|
|
4
|
+
"version": "2.3.0-dev-20260724085908",
|
|
5
5
|
"description": "React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion",
|
|
6
6
|
"keywords": [
|
|
7
7
|
"yamada",
|