smarthr-ui 96.0.0 → 96.0.1
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generateIcon.cjs","sources":["../../../src/components/Icon/generateIcon.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"generateIcon.cjs","sources":["../../../src/components/Icon/generateIcon.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { color as defaultColorPalette, fontSize, textColor } from '../../tailwind'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport type { FontSizes } from '../../themes'\nimport type { IconType } from 'react-icons'\n\n/**\n * literal union type に補完を効かせるためのハック\n * https://github.com/microsoft/TypeScript/issues/29729\n */\ntype LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>)\n\nexport const colorSet = {\n TEXT_BLACK: 'black',\n TEXT_WHITE: 'white',\n TEXT_GREY: 'grey',\n TEXT_DISABLED: 'disabled',\n TEXT_LINK: 'link',\n MAIN: 'main',\n DANGER: 'danger',\n WARNING: 'warning-yellow',\n BRAND: 'brand',\n} as const\n\nconst existsColor = (color: string): color is keyof typeof colorSet => color in colorSet\n\ntype IconProps = {\n /**\n * アイコンの色\n * @type string | 'TEXT_BLACK' | 'TEXT_GREY' | 'TEXT_DISABLED' | 'TEXT_LINK' | 'MAIN' | 'DANGER' | 'WARNING' | 'BRAND'\n */\n color?: LiteralUnion<keyof typeof colorSet>\n /**\n * アイコンの大きさ（フォントサイズの抽象値）\n * @deprecated 親要素やデフォルトフォントサイズが継承されるため固定値の指定は非推奨\n */\n size?: FontSizes\n}\n\ntype AbstractProps = {\n /**アイコンの説明テキスト*/\n alt?: ReactNode\n}\nexport type Props = AbstractProps &\n Omit<IconProps & Omit<ComponentProps<'svg'>, keyof IconProps>, keyof AbstractProps>\n\n// HINT: smarthr-ui-Icon-extendedはアイコン+α(例えば複数のアイコンをまとめて一つにしているなど)を表すclass\n// altなどもVisuallyHiddenTextで表現している関係上、squareの計算などの際に複数要素として判断されると認知と違う結果になるため使用しています\n\nconst classNameGenerator = tv({\n slots: {\n icon: 'smarthr-ui-Icon group-[]/iconWrapper:shr-shrink-0 group-[]/iconWrapper:shr-translate-y-[0.125em] forced-colors:shr-fill-[CanvasText]',\n wrapperWithAlt: 'smarthr-ui-Icon-extended smarthr-ui-Icon-withAlt shr-relative shr-leading-[0]',\n },\n})\n\nexport const generateIcon = (SvgIcon: IconType) => {\n const Icon = memo<Props>(\n ({\n color,\n className,\n role = 'img',\n alt,\n 'aria-hidden': ariaHidden,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n focusable = false,\n size,\n ...rest\n }) => {\n const actualAriaHidden = useMemo(() => {\n if (ariaHidden !== undefined) {\n return ariaHidden\n }\n\n if (alt !== undefined || (ariaLabel === undefined && ariaLabelledby === undefined)) {\n return true\n }\n\n return undefined\n }, [ariaHidden, alt, ariaLabel, ariaLabelledby])\n\n const classNames = useMemo(() => {\n const { icon, wrapperWithAlt } = classNameGenerator()\n\n return {\n icon: icon({ className }),\n wrapperWithAlt: wrapperWithAlt(),\n }\n }, [className])\n\n const replacedColor = useMemo(() => {\n if (color && existsColor(color)) {\n const colorName = colorSet[color]\n\n if (colorName in textColor) {\n return textColor[colorName as keyof typeof textColor]\n }\n\n return defaultColorPalette[colorName as keyof typeof defaultColorPalette] as string\n }\n\n return color\n }, [color])\n\n const iconSize = size ? fontSize[size] : '1em' // 指定がない場合は親要素のフォントサイズを継承する\n const svgIcon = (\n <SvgIcon\n {...rest}\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth=\"0\"\n // size は react-icons のアイコンの大きさ、width / height は自前で SVG からアイコンを作る場合の大きさ指定\n size={iconSize}\n width={iconSize}\n height={iconSize}\n color={replacedColor}\n className={classNames.icon}\n role={role}\n aria-hidden={actualAriaHidden}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n focusable={focusable}\n />\n )\n\n if (alt) {\n return (\n // HINT: VisuallyHiddenTextが存在すると、アイコンなのに2つの要素がある状態になってしまい\n // styleなどを記述する際、意図しない状態になる場合がある\n // 回避するため、spanでラップし、開発者のメンタルモデルに合わせる\n <span className={classNames.wrapperWithAlt}>\n <VisuallyHiddenText>{alt}</VisuallyHiddenText>\n {svgIcon}\n </span>\n )\n }\n\n return svgIcon\n },\n )\n\n Icon.displayName = SvgIcon.name\n\n return Icon\n}\n"],"names":["tv","memo","useMemo","textColor","defaultColorPalette","fontSize","_jsx","_jsxs","VisuallyHiddenText"],"mappings":"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"}
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
"use client";
|
|
2
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
3
2
|
import { memo, useMemo } from 'react';
|
|
4
3
|
import { tv as ce } from './../../vendor/.pnpm/tailwind-variants@0.3.1_tailwindcss@3.4.19_ts-node@10.9.2_@swc_core@1.15.17_@types_node@20.19.35_typescript@5.9.3__/vendor/tailwind-variants/dist/index.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generateIcon.js","sources":["../../../src/components/Icon/generateIcon.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"generateIcon.js","sources":["../../../src/components/Icon/generateIcon.tsx"],"sourcesContent":["import { type ComponentProps, type ReactNode, memo, useMemo } from 'react'\nimport { tv } from 'tailwind-variants'\n\nimport { color as defaultColorPalette, fontSize, textColor } from '../../tailwind'\nimport { VisuallyHiddenText } from '../VisuallyHiddenText'\n\nimport type { FontSizes } from '../../themes'\nimport type { IconType } from 'react-icons'\n\n/**\n * literal union type に補完を効かせるためのハック\n * https://github.com/microsoft/TypeScript/issues/29729\n */\ntype LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>)\n\nexport const colorSet = {\n TEXT_BLACK: 'black',\n TEXT_WHITE: 'white',\n TEXT_GREY: 'grey',\n TEXT_DISABLED: 'disabled',\n TEXT_LINK: 'link',\n MAIN: 'main',\n DANGER: 'danger',\n WARNING: 'warning-yellow',\n BRAND: 'brand',\n} as const\n\nconst existsColor = (color: string): color is keyof typeof colorSet => color in colorSet\n\ntype IconProps = {\n /**\n * アイコンの色\n * @type string | 'TEXT_BLACK' | 'TEXT_GREY' | 'TEXT_DISABLED' | 'TEXT_LINK' | 'MAIN' | 'DANGER' | 'WARNING' | 'BRAND'\n */\n color?: LiteralUnion<keyof typeof colorSet>\n /**\n * アイコンの大きさ（フォントサイズの抽象値）\n * @deprecated 親要素やデフォルトフォントサイズが継承されるため固定値の指定は非推奨\n */\n size?: FontSizes\n}\n\ntype AbstractProps = {\n /**アイコンの説明テキスト*/\n alt?: ReactNode\n}\nexport type Props = AbstractProps &\n Omit<IconProps & Omit<ComponentProps<'svg'>, keyof IconProps>, keyof AbstractProps>\n\n// HINT: smarthr-ui-Icon-extendedはアイコン+α(例えば複数のアイコンをまとめて一つにしているなど)を表すclass\n// altなどもVisuallyHiddenTextで表現している関係上、squareの計算などの際に複数要素として判断されると認知と違う結果になるため使用しています\n\nconst classNameGenerator = tv({\n slots: {\n icon: 'smarthr-ui-Icon group-[]/iconWrapper:shr-shrink-0 group-[]/iconWrapper:shr-translate-y-[0.125em] forced-colors:shr-fill-[CanvasText]',\n wrapperWithAlt: 'smarthr-ui-Icon-extended smarthr-ui-Icon-withAlt shr-relative shr-leading-[0]',\n },\n})\n\nexport const generateIcon = (SvgIcon: IconType) => {\n const Icon = memo<Props>(\n ({\n color,\n className,\n role = 'img',\n alt,\n 'aria-hidden': ariaHidden,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n focusable = false,\n size,\n ...rest\n }) => {\n const actualAriaHidden = useMemo(() => {\n if (ariaHidden !== undefined) {\n return ariaHidden\n }\n\n if (alt !== undefined || (ariaLabel === undefined && ariaLabelledby === undefined)) {\n return true\n }\n\n return undefined\n }, [ariaHidden, alt, ariaLabel, ariaLabelledby])\n\n const classNames = useMemo(() => {\n const { icon, wrapperWithAlt } = classNameGenerator()\n\n return {\n icon: icon({ className }),\n wrapperWithAlt: wrapperWithAlt(),\n }\n }, [className])\n\n const replacedColor = useMemo(() => {\n if (color && existsColor(color)) {\n const colorName = colorSet[color]\n\n if (colorName in textColor) {\n return textColor[colorName as keyof typeof textColor]\n }\n\n return defaultColorPalette[colorName as keyof typeof defaultColorPalette] as string\n }\n\n return color\n }, [color])\n\n const iconSize = size ? fontSize[size] : '1em' // 指定がない場合は親要素のフォントサイズを継承する\n const svgIcon = (\n <SvgIcon\n {...rest}\n stroke=\"currentColor\"\n fill=\"currentColor\"\n strokeWidth=\"0\"\n // size は react-icons のアイコンの大きさ、width / height は自前で SVG からアイコンを作る場合の大きさ指定\n size={iconSize}\n width={iconSize}\n height={iconSize}\n color={replacedColor}\n className={classNames.icon}\n role={role}\n aria-hidden={actualAriaHidden}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n focusable={focusable}\n />\n )\n\n if (alt) {\n return (\n // HINT: VisuallyHiddenTextが存在すると、アイコンなのに2つの要素がある状態になってしまい\n // styleなどを記述する際、意図しない状態になる場合がある\n // 回避するため、spanでラップし、開発者のメンタルモデルに合わせる\n <span className={classNames.wrapperWithAlt}>\n <VisuallyHiddenText>{alt}</VisuallyHiddenText>\n {svgIcon}\n </span>\n )\n }\n\n return svgIcon\n },\n )\n\n Icon.displayName = SvgIcon.name\n\n return Icon\n}\n"],"names":["tv","textColor","defaultColorPalette","fontSize","_jsx","_jsxs"],"mappings":"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"}
|