@yamada-ui/react 2.2.7-dev-20260819081352 → 2.2.7-dev-20260819083400
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/core/system/styled.cjs +21 -1
- package/dist/cjs/core/system/styled.cjs.map +1 -1
- package/dist/esm/core/system/styled.js +22 -2
- package/dist/esm/core/system/styled.js.map +1 -1
- package/dist/types/components/chart/cartesian-chart.style.d.ts +1 -1
- package/dist/types/components/chart/polar-chart.style.d.ts +1 -1
- package/dist/types/components/number-input/number-input.style.d.ts +1 -1
- package/package.json +1 -1
|
@@ -18,9 +18,29 @@ let _emotion_utils = require("@emotion/utils");
|
|
|
18
18
|
let react_fast_compare = require("react-fast-compare");
|
|
19
19
|
react_fast_compare = require_runtime.__toESM(react_fast_compare, 1);
|
|
20
20
|
//#region src/core/system/styled.tsx
|
|
21
|
+
function normalizeHostSelector(rule, className) {
|
|
22
|
+
const selector = `.${className}`;
|
|
23
|
+
return rule.replaceAll(`${selector}:host([data-mode=dark]) ${selector}`, `:host([data-mode=dark]) ${selector}`).replaceAll(`${selector}:host([data-mode=light]) ${selector}`, `:host([data-mode=light]) ${selector}`);
|
|
24
|
+
}
|
|
25
|
+
function insertStyles(cache, serialized) {
|
|
26
|
+
const className = `${cache.key}-${serialized.name}`;
|
|
27
|
+
if (!(0, require_utils_index.utils_exports.isUndefined)(cache.inserted[serialized.name])) return;
|
|
28
|
+
const sheet = Object.create(cache.sheet);
|
|
29
|
+
sheet.insert = (rule) => {
|
|
30
|
+
cache.sheet.insert(normalizeHostSelector(rule, className));
|
|
31
|
+
};
|
|
32
|
+
let styleForSsr = "";
|
|
33
|
+
let current = serialized;
|
|
34
|
+
do {
|
|
35
|
+
const style = cache.insert(serialized === current ? `.${className}` : "", current, sheet, true) || void 0;
|
|
36
|
+
if (!(0, require_utils_index.utils_exports.createdDom)() && !(0, require_utils_index.utils_exports.isUndefined)(style)) styleForSsr += normalizeHostSelector(style, className);
|
|
37
|
+
current = current.next;
|
|
38
|
+
} while (current !== void 0);
|
|
39
|
+
return styleForSsr || void 0;
|
|
40
|
+
}
|
|
21
41
|
const Insertion = ({ cache, htmlTag, serialized }) => {
|
|
22
42
|
(0, _emotion_utils.registerStyles)(cache, serialized, htmlTag);
|
|
23
|
-
const style = (0, _emotion_use_insertion_effect_with_fallbacks.useInsertionEffectAlwaysWithSyncFallback)(() =>
|
|
43
|
+
const style = (0, _emotion_use_insertion_effect_with_fallbacks.useInsertionEffectAlwaysWithSyncFallback)(() => insertStyles(cache, serialized));
|
|
24
44
|
if (!(0, require_utils_index.utils_exports.createdDom)() && !(0, require_utils_index.utils_exports.isUndefined)(style)) {
|
|
25
45
|
let className = serialized.name;
|
|
26
46
|
let next = serialized.next;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.cjs","names":["useInsertionEffectAlwaysWithSyncFallback","insertStyles","useRef","isEqual","useMemo","createContext","getDisplayName","createShouldForwardProp","withEmotionCache","useSystem","useTheme","useComponentStyle","getRegisteredStyles","css","serializeStyles","Slot"],"sources":["../../../../src/core/system/styled.tsx"],"sourcesContent":["\"use client\"\n\nimport type { EmotionCache, SerializedStyles } from \"@emotion/utils\"\nimport type { FC } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type { As, ShouldForwardProp, StyledComponent } from \"../components\"\nimport type { CSSModifierObject, CSSPropObject } from \"../css\"\nimport type {\n ColorScheme,\n ComponentStyle,\n System,\n UsageTheme,\n} from \"./index.types\"\nimport { withEmotionCache } from \"@emotion/react\"\nimport { serializeStyles } from \"@emotion/serialize\"\nimport { useInsertionEffectAlwaysWithSyncFallback } from \"@emotion/use-insertion-effect-with-fallbacks\"\nimport {\n getRegisteredStyles,\n insertStyles,\n registerStyles,\n} from \"@emotion/utils\"\nimport { useMemo, useRef } from \"react\"\nimport isEqual from \"react-fast-compare\"\nimport { Slot } from \"../../components/slot\"\nimport {\n createContext,\n createdDom,\n cx,\n filterEmpty,\n filterUndefined,\n isString,\n isUndefined,\n runIfFn,\n splitObject,\n toArray,\n toKebabCase,\n} from \"../../utils\"\nimport {\n createShouldForwardProp,\n getDisplayName,\n useComponentStyle,\n} from \"../components\"\nimport { css } from \"../css\"\nimport { useSystem } from \"./system-provider\"\nimport { useTheme } from \"./theme-provider\"\n\ninterface InsertionProps {\n cache: EmotionCache\n htmlTag: boolean\n serialized: SerializedStyles\n}\n\nconst Insertion: FC<InsertionProps> = ({ cache, htmlTag, serialized }) => {\n registerStyles(cache, serialized, htmlTag)\n\n const style = useInsertionEffectAlwaysWithSyncFallback(() =>\n insertStyles(cache, serialized, htmlTag),\n )\n\n if (!createdDom() && !isUndefined(style)) {\n let className = serialized.name\n let next = serialized.next\n\n while (next !== undefined) {\n className = cx(className, next.name) ?? \"\"\n next = next.next\n }\n\n return (\n <style\n data-emotion={cx(cache.key, className)}\n dangerouslySetInnerHTML={{ __html: style }}\n nonce={cache.sheet.nonce}\n />\n )\n } else {\n return null\n }\n}\n\nconst useSplitProps = <Y extends Dict, M extends Dict>(\n props: Dict,\n shouldForwardProp?: ShouldForwardProp,\n) => {\n const propsRef = useRef(props)\n\n if (!isEqual(propsRef.current, props)) propsRef.current = props\n\n const computedProps = propsRef.current\n\n return useMemo(\n () => splitObject<Y, M>(computedProps, shouldForwardProp),\n [computedProps, shouldForwardProp],\n )\n}\n\nexport const [ColorSchemeContext, useColorSchemeContext] =\n createContext<ColorScheme>({\n name: \"ColorSchemeContext\",\n strict: false,\n })\n\nexport interface StyledOptions<\n Y extends CSSPropObject = CSSPropObject,\n M extends CSSModifierObject = CSSModifierObject,\n D extends CSSModifierObject = CSSModifierObject,\n H extends number | string | symbol = string,\n> extends Omit<ComponentStyle<Y, M, D>, \"className\"> {\n className?: ((system: System) => string) | string\n displayName?: string\n forwardAsChild?: boolean\n name?: string\n shouldForwardProp?: boolean | ShouldForwardProp\n target?: string\n forwardProps?: string[]\n transferProps?: H[]\n}\n\nexport function createStyled<\n Y extends As,\n M extends object = {},\n D extends CSSPropObject = CSSPropObject,\n H extends CSSModifierObject = CSSModifierObject,\n R extends CSSModifierObject = CSSModifierObject,\n>(\n el: Y,\n {\n name,\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n transferProps,\n ...options\n }: StyledOptions<D, H, R, keyof M> = {},\n) {\n const displayName = options.displayName ?? getDisplayName(name, \"\")\n const shouldForwardProp = !options.shouldForwardProp\n ? createShouldForwardProp(options.forwardProps)\n : undefined\n const style = filterUndefined({\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n })\n\n const StyledComponent = withEmotionCache<Dict>(function (\n { as: Component = el, asChild, children, ...props },\n cache,\n ref,\n ) {\n let className: string | undefined = \"\"\n\n const system = useSystem()\n const { theme } = useTheme<UsageTheme>()\n const componentStyleOptions = {\n name,\n className: system.utils.getClassName(\n runIfFn(options.className, system) ?? toKebabCase(name ?? \"\"),\n ),\n style,\n transferProps,\n }\n const registered = useRef<string[]>([])\n const htmlTag = isString(Component)\n const forwardAsChild =\n options.forwardAsChild || options.forwardProps?.includes(\"asChild\")\n const [omittedProps, styleProps] = useSplitProps(props, shouldForwardProp)\n const [, rest] = useComponentStyle<any, {}>(\n omittedProps,\n componentStyleOptions,\n )\n const [cssArray, colorScheme, forwardProps] = useMemo(() => {\n const { css, colorScheme, ...forwardProps } = rest\n\n return [toArray(css), colorScheme, forwardProps]\n }, [rest])\n\n styleProps.colorScheme ??= colorScheme\n\n if (forwardProps.className)\n className = getRegisteredStyles(\n cache.registered,\n registered.current,\n forwardProps.className,\n ).trim()\n\n const interpolations = useMemo(\n () => [\n ...registered.current,\n ...filterEmpty([...cssArray, styleProps].map(css(system, theme))),\n ],\n [cssArray, system, styleProps, theme],\n )\n\n const serialized = useMemo(\n () => serializeStyles(interpolations, cache.registered),\n [interpolations, cache.registered],\n )\n\n className = cx(\n className,\n serialized.styles ? `${cache.key}-${serialized.name}` : undefined,\n )\n className = cx(className, options.target)\n\n if (!className) className = undefined\n\n const mergedProps = { ...forwardProps, className, children }\n\n return (\n <ColorSchemeContext value={styleProps.colorScheme}>\n <Insertion cache={cache} htmlTag={htmlTag} serialized={serialized} />\n\n {asChild && !forwardAsChild ? (\n <Slot ref={ref} {...mergedProps} />\n ) : (\n <Component ref={ref} {...mergedProps} />\n )}\n </ColorSchemeContext>\n )\n }) as StyledComponent<Y, M>\n\n StyledComponent.displayName = displayName || \"StyledComponent\"\n\n return StyledComponent\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"styled.cjs","names":["useInsertionEffectAlwaysWithSyncFallback","useRef","isEqual","useMemo","createContext","getDisplayName","createShouldForwardProp","withEmotionCache","useSystem","useTheme","useComponentStyle","getRegisteredStyles","css","serializeStyles","Slot"],"sources":["../../../../src/core/system/styled.tsx"],"sourcesContent":["\"use client\"\n\nimport type { EmotionCache, SerializedStyles } from \"@emotion/utils\"\nimport type { FC } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type { As, ShouldForwardProp, StyledComponent } from \"../components\"\nimport type { CSSModifierObject, CSSPropObject } from \"../css\"\nimport type {\n ColorScheme,\n ComponentStyle,\n System,\n UsageTheme,\n} from \"./index.types\"\nimport { withEmotionCache } from \"@emotion/react\"\nimport { serializeStyles } from \"@emotion/serialize\"\nimport { useInsertionEffectAlwaysWithSyncFallback } from \"@emotion/use-insertion-effect-with-fallbacks\"\nimport { getRegisteredStyles, registerStyles } from \"@emotion/utils\"\nimport { useMemo, useRef } from \"react\"\nimport isEqual from \"react-fast-compare\"\nimport { Slot } from \"../../components/slot\"\nimport {\n createContext,\n createdDom,\n cx,\n filterEmpty,\n filterUndefined,\n isString,\n isUndefined,\n runIfFn,\n splitObject,\n toArray,\n toKebabCase,\n} from \"../../utils\"\nimport {\n createShouldForwardProp,\n getDisplayName,\n useComponentStyle,\n} from \"../components\"\nimport { css } from \"../css\"\nimport { useSystem } from \"./system-provider\"\nimport { useTheme } from \"./theme-provider\"\n\ninterface InsertionProps {\n cache: EmotionCache\n htmlTag: boolean\n serialized: SerializedStyles\n}\n\nfunction normalizeHostSelector(rule: string, className: string) {\n const selector = `.${className}`\n\n return rule\n .replaceAll(\n `${selector}:host([data-mode=dark]) ${selector}`,\n `:host([data-mode=dark]) ${selector}`,\n )\n .replaceAll(\n `${selector}:host([data-mode=light]) ${selector}`,\n `:host([data-mode=light]) ${selector}`,\n )\n}\n\nfunction insertStyles(cache: EmotionCache, serialized: SerializedStyles) {\n const className = `${cache.key}-${serialized.name}`\n\n if (!isUndefined(cache.inserted[serialized.name])) return\n\n const sheet = Object.create(cache.sheet) as typeof cache.sheet\n\n sheet.insert = (rule) => {\n cache.sheet.insert(normalizeHostSelector(rule, className))\n }\n\n let styleForSsr = \"\"\n let current: SerializedStyles | undefined = serialized\n\n do {\n const style =\n cache.insert(\n serialized === current ? `.${className}` : \"\",\n current,\n sheet,\n true,\n ) || undefined\n\n if (!createdDom() && !isUndefined(style))\n styleForSsr += normalizeHostSelector(style, className)\n\n current = current.next\n } while (current !== undefined)\n\n return styleForSsr || undefined\n}\n\nconst Insertion: FC<InsertionProps> = ({ cache, htmlTag, serialized }) => {\n registerStyles(cache, serialized, htmlTag)\n\n const style = useInsertionEffectAlwaysWithSyncFallback(() =>\n insertStyles(cache, serialized),\n )\n\n if (!createdDom() && !isUndefined(style)) {\n let className = serialized.name\n let next = serialized.next\n\n while (next !== undefined) {\n className = cx(className, next.name) ?? \"\"\n next = next.next\n }\n\n return (\n <style\n data-emotion={cx(cache.key, className)}\n dangerouslySetInnerHTML={{ __html: style }}\n nonce={cache.sheet.nonce}\n />\n )\n } else {\n return null\n }\n}\n\nconst useSplitProps = <Y extends Dict, M extends Dict>(\n props: Dict,\n shouldForwardProp?: ShouldForwardProp,\n) => {\n const propsRef = useRef(props)\n\n if (!isEqual(propsRef.current, props)) propsRef.current = props\n\n const computedProps = propsRef.current\n\n return useMemo(\n () => splitObject<Y, M>(computedProps, shouldForwardProp),\n [computedProps, shouldForwardProp],\n )\n}\n\nexport const [ColorSchemeContext, useColorSchemeContext] =\n createContext<ColorScheme>({\n name: \"ColorSchemeContext\",\n strict: false,\n })\n\nexport interface StyledOptions<\n Y extends CSSPropObject = CSSPropObject,\n M extends CSSModifierObject = CSSModifierObject,\n D extends CSSModifierObject = CSSModifierObject,\n H extends number | string | symbol = string,\n> extends Omit<ComponentStyle<Y, M, D>, \"className\"> {\n className?: ((system: System) => string) | string\n displayName?: string\n forwardAsChild?: boolean\n name?: string\n shouldForwardProp?: boolean | ShouldForwardProp\n target?: string\n forwardProps?: string[]\n transferProps?: H[]\n}\n\nexport function createStyled<\n Y extends As,\n M extends object = {},\n D extends CSSPropObject = CSSPropObject,\n H extends CSSModifierObject = CSSModifierObject,\n R extends CSSModifierObject = CSSModifierObject,\n>(\n el: Y,\n {\n name,\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n transferProps,\n ...options\n }: StyledOptions<D, H, R, keyof M> = {},\n) {\n const displayName = options.displayName ?? getDisplayName(name, \"\")\n const shouldForwardProp = !options.shouldForwardProp\n ? createShouldForwardProp(options.forwardProps)\n : undefined\n const style = filterUndefined({\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n })\n\n const StyledComponent = withEmotionCache<Dict>(function (\n { as: Component = el, asChild, children, ...props },\n cache,\n ref,\n ) {\n let className: string | undefined = \"\"\n\n const system = useSystem()\n const { theme } = useTheme<UsageTheme>()\n const componentStyleOptions = {\n name,\n className: system.utils.getClassName(\n runIfFn(options.className, system) ?? toKebabCase(name ?? \"\"),\n ),\n style,\n transferProps,\n }\n const registered = useRef<string[]>([])\n const htmlTag = isString(Component)\n const forwardAsChild =\n options.forwardAsChild || options.forwardProps?.includes(\"asChild\")\n const [omittedProps, styleProps] = useSplitProps(props, shouldForwardProp)\n const [, rest] = useComponentStyle<any, {}>(\n omittedProps,\n componentStyleOptions,\n )\n const [cssArray, colorScheme, forwardProps] = useMemo(() => {\n const { css, colorScheme, ...forwardProps } = rest\n\n return [toArray(css), colorScheme, forwardProps]\n }, [rest])\n\n styleProps.colorScheme ??= colorScheme\n\n if (forwardProps.className)\n className = getRegisteredStyles(\n cache.registered,\n registered.current,\n forwardProps.className,\n ).trim()\n\n const interpolations = useMemo(\n () => [\n ...registered.current,\n ...filterEmpty([...cssArray, styleProps].map(css(system, theme))),\n ],\n [cssArray, system, styleProps, theme],\n )\n\n const serialized = useMemo(\n () => serializeStyles(interpolations, cache.registered),\n [interpolations, cache.registered],\n )\n\n className = cx(\n className,\n serialized.styles ? `${cache.key}-${serialized.name}` : undefined,\n )\n className = cx(className, options.target)\n\n if (!className) className = undefined\n\n const mergedProps = { ...forwardProps, className, children }\n\n return (\n <ColorSchemeContext value={styleProps.colorScheme}>\n <Insertion cache={cache} htmlTag={htmlTag} serialized={serialized} />\n\n {asChild && !forwardAsChild ? (\n <Slot ref={ref} {...mergedProps} />\n ) : (\n <Component ref={ref} {...mergedProps} />\n )}\n </ColorSchemeContext>\n )\n }) as StyledComponent<Y, M>\n\n StyledComponent.displayName = displayName || \"StyledComponent\"\n\n return StyledComponent\n}\n"],"mappings":"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"}
|
|
@@ -13,12 +13,32 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
13
13
|
import { withEmotionCache } from "@emotion/react";
|
|
14
14
|
import { serializeStyles } from "@emotion/serialize";
|
|
15
15
|
import { useInsertionEffectAlwaysWithSyncFallback } from "@emotion/use-insertion-effect-with-fallbacks";
|
|
16
|
-
import { getRegisteredStyles,
|
|
16
|
+
import { getRegisteredStyles, registerStyles } from "@emotion/utils";
|
|
17
17
|
import isEqual from "react-fast-compare";
|
|
18
18
|
//#region src/core/system/styled.tsx
|
|
19
|
+
function normalizeHostSelector(rule, className) {
|
|
20
|
+
const selector = `.${className}`;
|
|
21
|
+
return rule.replaceAll(`${selector}:host([data-mode=dark]) ${selector}`, `:host([data-mode=dark]) ${selector}`).replaceAll(`${selector}:host([data-mode=light]) ${selector}`, `:host([data-mode=light]) ${selector}`);
|
|
22
|
+
}
|
|
23
|
+
function insertStyles(cache, serialized) {
|
|
24
|
+
const className = `${cache.key}-${serialized.name}`;
|
|
25
|
+
if (!(0, utils_exports.isUndefined)(cache.inserted[serialized.name])) return;
|
|
26
|
+
const sheet = Object.create(cache.sheet);
|
|
27
|
+
sheet.insert = (rule) => {
|
|
28
|
+
cache.sheet.insert(normalizeHostSelector(rule, className));
|
|
29
|
+
};
|
|
30
|
+
let styleForSsr = "";
|
|
31
|
+
let current = serialized;
|
|
32
|
+
do {
|
|
33
|
+
const style = cache.insert(serialized === current ? `.${className}` : "", current, sheet, true) || void 0;
|
|
34
|
+
if (!(0, utils_exports.createdDom)() && !(0, utils_exports.isUndefined)(style)) styleForSsr += normalizeHostSelector(style, className);
|
|
35
|
+
current = current.next;
|
|
36
|
+
} while (current !== void 0);
|
|
37
|
+
return styleForSsr || void 0;
|
|
38
|
+
}
|
|
19
39
|
const Insertion = ({ cache, htmlTag, serialized }) => {
|
|
20
40
|
registerStyles(cache, serialized, htmlTag);
|
|
21
|
-
const style = useInsertionEffectAlwaysWithSyncFallback(() => insertStyles(cache, serialized
|
|
41
|
+
const style = useInsertionEffectAlwaysWithSyncFallback(() => insertStyles(cache, serialized));
|
|
22
42
|
if (!(0, utils_exports.createdDom)() && !(0, utils_exports.isUndefined)(style)) {
|
|
23
43
|
let className = serialized.name;
|
|
24
44
|
let next = serialized.next;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styled.js","names":["createdDom","isUndefined","cx","splitObject","createContext","filterUndefined","runIfFn","toKebabCase","isString","toArray","filterEmpty"],"sources":["../../../../src/core/system/styled.tsx"],"sourcesContent":["\"use client\"\n\nimport type { EmotionCache, SerializedStyles } from \"@emotion/utils\"\nimport type { FC } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type { As, ShouldForwardProp, StyledComponent } from \"../components\"\nimport type { CSSModifierObject, CSSPropObject } from \"../css\"\nimport type {\n ColorScheme,\n ComponentStyle,\n System,\n UsageTheme,\n} from \"./index.types\"\nimport { withEmotionCache } from \"@emotion/react\"\nimport { serializeStyles } from \"@emotion/serialize\"\nimport { useInsertionEffectAlwaysWithSyncFallback } from \"@emotion/use-insertion-effect-with-fallbacks\"\nimport {\n getRegisteredStyles,\n insertStyles,\n registerStyles,\n} from \"@emotion/utils\"\nimport { useMemo, useRef } from \"react\"\nimport isEqual from \"react-fast-compare\"\nimport { Slot } from \"../../components/slot\"\nimport {\n createContext,\n createdDom,\n cx,\n filterEmpty,\n filterUndefined,\n isString,\n isUndefined,\n runIfFn,\n splitObject,\n toArray,\n toKebabCase,\n} from \"../../utils\"\nimport {\n createShouldForwardProp,\n getDisplayName,\n useComponentStyle,\n} from \"../components\"\nimport { css } from \"../css\"\nimport { useSystem } from \"./system-provider\"\nimport { useTheme } from \"./theme-provider\"\n\ninterface InsertionProps {\n cache: EmotionCache\n htmlTag: boolean\n serialized: SerializedStyles\n}\n\nconst Insertion: FC<InsertionProps> = ({ cache, htmlTag, serialized }) => {\n registerStyles(cache, serialized, htmlTag)\n\n const style = useInsertionEffectAlwaysWithSyncFallback(() =>\n insertStyles(cache, serialized, htmlTag),\n )\n\n if (!createdDom() && !isUndefined(style)) {\n let className = serialized.name\n let next = serialized.next\n\n while (next !== undefined) {\n className = cx(className, next.name) ?? \"\"\n next = next.next\n }\n\n return (\n <style\n data-emotion={cx(cache.key, className)}\n dangerouslySetInnerHTML={{ __html: style }}\n nonce={cache.sheet.nonce}\n />\n )\n } else {\n return null\n }\n}\n\nconst useSplitProps = <Y extends Dict, M extends Dict>(\n props: Dict,\n shouldForwardProp?: ShouldForwardProp,\n) => {\n const propsRef = useRef(props)\n\n if (!isEqual(propsRef.current, props)) propsRef.current = props\n\n const computedProps = propsRef.current\n\n return useMemo(\n () => splitObject<Y, M>(computedProps, shouldForwardProp),\n [computedProps, shouldForwardProp],\n )\n}\n\nexport const [ColorSchemeContext, useColorSchemeContext] =\n createContext<ColorScheme>({\n name: \"ColorSchemeContext\",\n strict: false,\n })\n\nexport interface StyledOptions<\n Y extends CSSPropObject = CSSPropObject,\n M extends CSSModifierObject = CSSModifierObject,\n D extends CSSModifierObject = CSSModifierObject,\n H extends number | string | symbol = string,\n> extends Omit<ComponentStyle<Y, M, D>, \"className\"> {\n className?: ((system: System) => string) | string\n displayName?: string\n forwardAsChild?: boolean\n name?: string\n shouldForwardProp?: boolean | ShouldForwardProp\n target?: string\n forwardProps?: string[]\n transferProps?: H[]\n}\n\nexport function createStyled<\n Y extends As,\n M extends object = {},\n D extends CSSPropObject = CSSPropObject,\n H extends CSSModifierObject = CSSModifierObject,\n R extends CSSModifierObject = CSSModifierObject,\n>(\n el: Y,\n {\n name,\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n transferProps,\n ...options\n }: StyledOptions<D, H, R, keyof M> = {},\n) {\n const displayName = options.displayName ?? getDisplayName(name, \"\")\n const shouldForwardProp = !options.shouldForwardProp\n ? createShouldForwardProp(options.forwardProps)\n : undefined\n const style = filterUndefined({\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n })\n\n const StyledComponent = withEmotionCache<Dict>(function (\n { as: Component = el, asChild, children, ...props },\n cache,\n ref,\n ) {\n let className: string | undefined = \"\"\n\n const system = useSystem()\n const { theme } = useTheme<UsageTheme>()\n const componentStyleOptions = {\n name,\n className: system.utils.getClassName(\n runIfFn(options.className, system) ?? toKebabCase(name ?? \"\"),\n ),\n style,\n transferProps,\n }\n const registered = useRef<string[]>([])\n const htmlTag = isString(Component)\n const forwardAsChild =\n options.forwardAsChild || options.forwardProps?.includes(\"asChild\")\n const [omittedProps, styleProps] = useSplitProps(props, shouldForwardProp)\n const [, rest] = useComponentStyle<any, {}>(\n omittedProps,\n componentStyleOptions,\n )\n const [cssArray, colorScheme, forwardProps] = useMemo(() => {\n const { css, colorScheme, ...forwardProps } = rest\n\n return [toArray(css), colorScheme, forwardProps]\n }, [rest])\n\n styleProps.colorScheme ??= colorScheme\n\n if (forwardProps.className)\n className = getRegisteredStyles(\n cache.registered,\n registered.current,\n forwardProps.className,\n ).trim()\n\n const interpolations = useMemo(\n () => [\n ...registered.current,\n ...filterEmpty([...cssArray, styleProps].map(css(system, theme))),\n ],\n [cssArray, system, styleProps, theme],\n )\n\n const serialized = useMemo(\n () => serializeStyles(interpolations, cache.registered),\n [interpolations, cache.registered],\n )\n\n className = cx(\n className,\n serialized.styles ? `${cache.key}-${serialized.name}` : undefined,\n )\n className = cx(className, options.target)\n\n if (!className) className = undefined\n\n const mergedProps = { ...forwardProps, className, children }\n\n return (\n <ColorSchemeContext value={styleProps.colorScheme}>\n <Insertion cache={cache} htmlTag={htmlTag} serialized={serialized} />\n\n {asChild && !forwardAsChild ? (\n <Slot ref={ref} {...mergedProps} />\n ) : (\n <Component ref={ref} {...mergedProps} />\n )}\n </ColorSchemeContext>\n )\n }) as StyledComponent<Y, M>\n\n StyledComponent.displayName = displayName || \"StyledComponent\"\n\n return StyledComponent\n}\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"styled.js","names":["isUndefined","createdDom","cx","splitObject","createContext","filterUndefined","runIfFn","toKebabCase","isString","toArray","filterEmpty"],"sources":["../../../../src/core/system/styled.tsx"],"sourcesContent":["\"use client\"\n\nimport type { EmotionCache, SerializedStyles } from \"@emotion/utils\"\nimport type { FC } from \"react\"\nimport type { Dict } from \"../../utils\"\nimport type { As, ShouldForwardProp, StyledComponent } from \"../components\"\nimport type { CSSModifierObject, CSSPropObject } from \"../css\"\nimport type {\n ColorScheme,\n ComponentStyle,\n System,\n UsageTheme,\n} from \"./index.types\"\nimport { withEmotionCache } from \"@emotion/react\"\nimport { serializeStyles } from \"@emotion/serialize\"\nimport { useInsertionEffectAlwaysWithSyncFallback } from \"@emotion/use-insertion-effect-with-fallbacks\"\nimport { getRegisteredStyles, registerStyles } from \"@emotion/utils\"\nimport { useMemo, useRef } from \"react\"\nimport isEqual from \"react-fast-compare\"\nimport { Slot } from \"../../components/slot\"\nimport {\n createContext,\n createdDom,\n cx,\n filterEmpty,\n filterUndefined,\n isString,\n isUndefined,\n runIfFn,\n splitObject,\n toArray,\n toKebabCase,\n} from \"../../utils\"\nimport {\n createShouldForwardProp,\n getDisplayName,\n useComponentStyle,\n} from \"../components\"\nimport { css } from \"../css\"\nimport { useSystem } from \"./system-provider\"\nimport { useTheme } from \"./theme-provider\"\n\ninterface InsertionProps {\n cache: EmotionCache\n htmlTag: boolean\n serialized: SerializedStyles\n}\n\nfunction normalizeHostSelector(rule: string, className: string) {\n const selector = `.${className}`\n\n return rule\n .replaceAll(\n `${selector}:host([data-mode=dark]) ${selector}`,\n `:host([data-mode=dark]) ${selector}`,\n )\n .replaceAll(\n `${selector}:host([data-mode=light]) ${selector}`,\n `:host([data-mode=light]) ${selector}`,\n )\n}\n\nfunction insertStyles(cache: EmotionCache, serialized: SerializedStyles) {\n const className = `${cache.key}-${serialized.name}`\n\n if (!isUndefined(cache.inserted[serialized.name])) return\n\n const sheet = Object.create(cache.sheet) as typeof cache.sheet\n\n sheet.insert = (rule) => {\n cache.sheet.insert(normalizeHostSelector(rule, className))\n }\n\n let styleForSsr = \"\"\n let current: SerializedStyles | undefined = serialized\n\n do {\n const style =\n cache.insert(\n serialized === current ? `.${className}` : \"\",\n current,\n sheet,\n true,\n ) || undefined\n\n if (!createdDom() && !isUndefined(style))\n styleForSsr += normalizeHostSelector(style, className)\n\n current = current.next\n } while (current !== undefined)\n\n return styleForSsr || undefined\n}\n\nconst Insertion: FC<InsertionProps> = ({ cache, htmlTag, serialized }) => {\n registerStyles(cache, serialized, htmlTag)\n\n const style = useInsertionEffectAlwaysWithSyncFallback(() =>\n insertStyles(cache, serialized),\n )\n\n if (!createdDom() && !isUndefined(style)) {\n let className = serialized.name\n let next = serialized.next\n\n while (next !== undefined) {\n className = cx(className, next.name) ?? \"\"\n next = next.next\n }\n\n return (\n <style\n data-emotion={cx(cache.key, className)}\n dangerouslySetInnerHTML={{ __html: style }}\n nonce={cache.sheet.nonce}\n />\n )\n } else {\n return null\n }\n}\n\nconst useSplitProps = <Y extends Dict, M extends Dict>(\n props: Dict,\n shouldForwardProp?: ShouldForwardProp,\n) => {\n const propsRef = useRef(props)\n\n if (!isEqual(propsRef.current, props)) propsRef.current = props\n\n const computedProps = propsRef.current\n\n return useMemo(\n () => splitObject<Y, M>(computedProps, shouldForwardProp),\n [computedProps, shouldForwardProp],\n )\n}\n\nexport const [ColorSchemeContext, useColorSchemeContext] =\n createContext<ColorScheme>({\n name: \"ColorSchemeContext\",\n strict: false,\n })\n\nexport interface StyledOptions<\n Y extends CSSPropObject = CSSPropObject,\n M extends CSSModifierObject = CSSModifierObject,\n D extends CSSModifierObject = CSSModifierObject,\n H extends number | string | symbol = string,\n> extends Omit<ComponentStyle<Y, M, D>, \"className\"> {\n className?: ((system: System) => string) | string\n displayName?: string\n forwardAsChild?: boolean\n name?: string\n shouldForwardProp?: boolean | ShouldForwardProp\n target?: string\n forwardProps?: string[]\n transferProps?: H[]\n}\n\nexport function createStyled<\n Y extends As,\n M extends object = {},\n D extends CSSPropObject = CSSPropObject,\n H extends CSSModifierObject = CSSModifierObject,\n R extends CSSModifierObject = CSSModifierObject,\n>(\n el: Y,\n {\n name,\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n transferProps,\n ...options\n }: StyledOptions<D, H, R, keyof M> = {},\n) {\n const displayName = options.displayName ?? getDisplayName(name, \"\")\n const shouldForwardProp = !options.shouldForwardProp\n ? createShouldForwardProp(options.forwardProps)\n : undefined\n const style = filterUndefined({\n base,\n compounds,\n props,\n sizes,\n variants,\n defaultProps,\n })\n\n const StyledComponent = withEmotionCache<Dict>(function (\n { as: Component = el, asChild, children, ...props },\n cache,\n ref,\n ) {\n let className: string | undefined = \"\"\n\n const system = useSystem()\n const { theme } = useTheme<UsageTheme>()\n const componentStyleOptions = {\n name,\n className: system.utils.getClassName(\n runIfFn(options.className, system) ?? toKebabCase(name ?? \"\"),\n ),\n style,\n transferProps,\n }\n const registered = useRef<string[]>([])\n const htmlTag = isString(Component)\n const forwardAsChild =\n options.forwardAsChild || options.forwardProps?.includes(\"asChild\")\n const [omittedProps, styleProps] = useSplitProps(props, shouldForwardProp)\n const [, rest] = useComponentStyle<any, {}>(\n omittedProps,\n componentStyleOptions,\n )\n const [cssArray, colorScheme, forwardProps] = useMemo(() => {\n const { css, colorScheme, ...forwardProps } = rest\n\n return [toArray(css), colorScheme, forwardProps]\n }, [rest])\n\n styleProps.colorScheme ??= colorScheme\n\n if (forwardProps.className)\n className = getRegisteredStyles(\n cache.registered,\n registered.current,\n forwardProps.className,\n ).trim()\n\n const interpolations = useMemo(\n () => [\n ...registered.current,\n ...filterEmpty([...cssArray, styleProps].map(css(system, theme))),\n ],\n [cssArray, system, styleProps, theme],\n )\n\n const serialized = useMemo(\n () => serializeStyles(interpolations, cache.registered),\n [interpolations, cache.registered],\n )\n\n className = cx(\n className,\n serialized.styles ? `${cache.key}-${serialized.name}` : undefined,\n )\n className = cx(className, options.target)\n\n if (!className) className = undefined\n\n const mergedProps = { ...forwardProps, className, children }\n\n return (\n <ColorSchemeContext value={styleProps.colorScheme}>\n <Insertion cache={cache} htmlTag={htmlTag} serialized={serialized} />\n\n {asChild && !forwardAsChild ? (\n <Slot ref={ref} {...mergedProps} />\n ) : (\n <Component ref={ref} {...mergedProps} />\n )}\n </ColorSchemeContext>\n )\n }) as StyledComponent<Y, M>\n\n StyledComponent.displayName = displayName || \"StyledComponent\"\n\n return StyledComponent\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAgDA,SAAS,sBAAsB,MAAc,WAAmB;CAC9D,MAAM,WAAW,IAAI;CAErB,OAAO,KACJ,WACC,GAAG,SAAS,0BAA0B,YACtC,2BAA2B,UAC7B,CAAC,CACA,WACC,GAAG,SAAS,2BAA2B,YACvC,4BAA4B,UAC9B;AACJ;AAEA,SAAS,aAAa,OAAqB,YAA8B;CACvE,MAAM,YAAY,GAAG,MAAM,IAAI,GAAG,WAAW;CAE7C,IAAI,EAAA,GAACA,cAAAA,YAAAA,CAAY,MAAM,SAAS,WAAW,KAAK,GAAG;CAEnD,MAAM,QAAQ,OAAO,OAAO,MAAM,KAAK;CAEvC,MAAM,UAAU,SAAS;EACvB,MAAM,MAAM,OAAO,sBAAsB,MAAM,SAAS,CAAC;CAC3D;CAEA,IAAI,cAAc;CAClB,IAAI,UAAwC;CAE5C,GAAG;EACD,MAAM,QACJ,MAAM,OACJ,eAAe,UAAU,IAAI,cAAc,IAC3C,SACA,OACA,IACF,KAAK,KAAA;EAEP,IAAI,EAAA,GAACC,cAAAA,WAAAA,CAAW,KAAK,EAAA,GAACD,cAAAA,YAAAA,CAAY,KAAK,GACrC,eAAe,sBAAsB,OAAO,SAAS;EAEvD,UAAU,QAAQ;CACpB,SAAS,YAAY,KAAA;CAErB,OAAO,eAAe,KAAA;AACxB;AAEA,MAAM,aAAiC,EAAE,OAAO,SAAS,iBAAiB;CACxE,eAAe,OAAO,YAAY,OAAO;CAEzC,MAAM,QAAQ,+CACZ,aAAa,OAAO,UAAU,CAChC;CAEA,IAAI,EAAA,GAACC,cAAAA,WAAAA,CAAW,KAAK,EAAA,GAACD,cAAAA,YAAAA,CAAY,KAAK,GAAG;EACxC,IAAI,YAAY,WAAW;EAC3B,IAAI,OAAO,WAAW;EAEtB,OAAO,SAAS,KAAA,GAAW;GACzB,aAAA,GAAYE,cAAAA,GAAAA,CAAG,WAAW,KAAK,IAAI,KAAK;GACxC,OAAO,KAAK;EACd;EAEA,OACE,oBAAC,SAAD;GACE,iBAAA,GAAcA,cAAAA,GAAAA,CAAG,MAAM,KAAK,SAAS;GACrC,yBAAyB,EAAE,QAAQ,MAAM;GACzC,OAAO,MAAM,MAAM;EACpB,CAAA;CAEL,OACE,OAAO;AAEX;AAEA,MAAM,iBACJ,OACA,sBACG;CACH,MAAM,WAAW,OAAO,KAAK;CAE7B,IAAI,CAAC,QAAQ,SAAS,SAAS,KAAK,GAAG,SAAS,UAAU;CAE1D,MAAM,gBAAgB,SAAS;CAE/B,OAAO,eAAA,GACCC,cAAAA,YAAAA,CAAkB,eAAe,iBAAiB,GACxD,CAAC,eAAe,iBAAiB,CACnC;AACF;AAEA,MAAa,CAAC,oBAAoB,yBAChCC,gBAA2B;CACzB,MAAM;CACN,QAAQ;AACV,CAAC;AAkBH,SAAgB,aAOd,IACA,EACE,MACA,MACA,WACA,OACA,OACA,UACA,cACA,eACA,GAAG,YACgC,CAAC,GACtC;CACA,MAAM,cAAc,QAAQ,eAAe,eAAe,MAAM,EAAE;CAClE,MAAM,oBAAoB,CAAC,QAAQ,oBAC/B,wBAAwB,QAAQ,YAAY,IAC5C,KAAA;CACJ,MAAM,SAAA,GAAQC,cAAAA,gBAAAA,CAAgB;EAC5B;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,kBAAkB,iBAAuB,SAC7C,EAAE,IAAI,YAAY,IAAI,SAAS,UAAU,GAAG,SAC5C,OACA,KACA;EACA,IAAI,YAAgC;EAEpC,MAAM,SAAS,UAAU;EACzB,MAAM,EAAE,UAAU,SAAqB;EACvC,MAAM,wBAAwB;GAC5B;GACA,WAAW,OAAO,MAAM,cAAA,GACtBC,cAAAA,QAAAA,CAAQ,QAAQ,WAAW,MAAM,MAAA,GAAKC,cAAAA,YAAAA,CAAY,QAAQ,EAAE,CAC9D;GACA;GACA;EACF;EACA,MAAM,aAAa,OAAiB,CAAC,CAAC;EACtC,MAAM,WAAA,GAAUC,cAAAA,SAAAA,CAAS,SAAS;EAClC,MAAM,iBACJ,QAAQ,kBAAkB,QAAQ,cAAc,SAAS,SAAS;EACpE,MAAM,CAAC,cAAc,cAAc,cAAc,OAAO,iBAAiB;EACzE,MAAM,GAAG,QAAQ,kBACf,cACA,qBACF;EACA,MAAM,CAAC,UAAU,aAAa,gBAAgB,cAAc;GAC1D,MAAM,EAAE,KAAK,aAAa,GAAG,iBAAiB;GAE9C,OAAO;KAACC,GAAAA,cAAAA,QAAAA,CAAQ,GAAG;IAAG;IAAa;GAAY;EACjD,GAAG,CAAC,IAAI,CAAC;EAET,WAAW,gBAAgB;EAE3B,IAAI,aAAa,WACf,YAAY,oBACV,MAAM,YACN,WAAW,SACX,aAAa,SACf,CAAC,CAAC,KAAK;EAET,MAAM,iBAAiB,cACf,CACJ,GAAG,WAAW,SACd,IAAA,GAAGC,cAAAA,YAAAA,CAAY,CAAC,GAAG,UAAU,UAAU,CAAC,CAAC,IAAI,IAAI,QAAQ,KAAK,CAAC,CAAC,CAClE,GACA;GAAC;GAAU;GAAQ;GAAY;EAAK,CACtC;EAEA,MAAM,aAAa,cACX,gBAAgB,gBAAgB,MAAM,UAAU,GACtD,CAAC,gBAAgB,MAAM,UAAU,CACnC;EAEA,aAAA,GAAYR,cAAAA,GAAAA,CACV,WACA,WAAW,SAAS,GAAG,MAAM,IAAI,GAAG,WAAW,SAAS,KAAA,CAC1D;EACA,aAAA,GAAYA,cAAAA,GAAAA,CAAG,WAAW,QAAQ,MAAM;EAExC,IAAI,CAAC,WAAW,YAAY,KAAA;EAE5B,MAAM,cAAc;GAAE,GAAG;GAAc;GAAW;EAAS;EAE3D,OACE,qBAAC,oBAAD;GAAoB,OAAO,WAAW;GAAtC,UAAA,CACE,oBAAC,WAAD;IAAkB;IAAgB;IAAqB;GAAa,CAAA,GAEnE,WAAW,CAAC,iBACX,oBAAC,MAAD;IAAW;IAAK,GAAI;GAAc,CAAA,IAElC,oBAAC,WAAD;IAAgB;IAAK,GAAI;GAAc,CAAA,CAEvB;;CAExB,CAAC;CAED,gBAAgB,cAAc,eAAe;CAE7C,OAAO;AACT"}
|
|
@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
|
|
|
2
2
|
import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
//#region src/components/chart/cartesian-chart.style.d.ts
|
|
5
|
-
declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "
|
|
5
|
+
declare const cartesianChartStyle: ComponentSlotStyle<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine", CSSPropObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>, CSSModifierObject<CSSSlotObject<"area" | "line" | "grid" | "bar" | "dot" | "root" | "labelList" | "activeDot" | "referenceLine" | "referenceLineLabel" | "xAxis" | "xAxisLabel" | "xAxisTick" | "xAxisTickLine" | "yAxis" | "yAxisLabel" | "yAxisTick" | "yAxisTickLine">>>;
|
|
6
6
|
type CartesianChartStyle = typeof cartesianChartStyle;
|
|
7
7
|
//#endregion
|
|
8
8
|
export { CartesianChartStyle, cartesianChartStyle };
|
|
@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
|
|
|
2
2
|
import { CSSModifierObject, CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
//#region src/components/chart/polar-chart.style.d.ts
|
|
5
|
-
declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "
|
|
5
|
+
declare const polarChartStyle: ComponentSlotStyle<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector", CSSPropObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>, CSSModifierObject<CSSSlotObject<"label" | "grid" | "dot" | "root" | "labelList" | "activeDot" | "angleAxis" | "angleAxisLabel" | "angleAxisLine" | "angleAxisTick" | "angleAxisTickLine" | "labelLine" | "pie" | "radar" | "radial" | "radialBackground" | "radiusAxis" | "radiusAxisLabel" | "radiusAxisLine" | "radiusAxisTick" | "radiusAxisTickLine" | "sector">>>;
|
|
6
6
|
type PolarChartStyle = typeof polarChartStyle;
|
|
7
7
|
//#endregion
|
|
8
8
|
export { PolarChartStyle, polarChartStyle };
|
|
@@ -2,7 +2,7 @@ import { ComponentSlotStyle } from "../../core/system/index.types.js";
|
|
|
2
2
|
import { CSSPropObject, CSSSlotObject } from "../../core/css/index.types.js";
|
|
3
3
|
import "../../index.js";
|
|
4
4
|
//#region src/components/number-input/number-input.style.d.ts
|
|
5
|
-
declare const numberInputStyle: ComponentSlotStyle<"button" | "root" | "
|
|
5
|
+
declare const numberInputStyle: ComponentSlotStyle<"button" | "root" | "decrement" | "increment" | "field" | "control", CSSPropObject<CSSSlotObject<"button" | "root" | "decrement" | "increment" | "field" | "control">>, {
|
|
6
6
|
xs: {
|
|
7
7
|
control: {
|
|
8
8
|
boxSize: "calc({--height} - {spaces.2})";
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yamada-ui/react",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "2.2.7-dev-
|
|
4
|
+
"version": "2.2.7-dev-20260819083400",
|
|
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",
|