lism-css 0.8.2 → 0.8.4

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.
Files changed (152) hide show
  1. package/bin/script-build-css.js +1 -1
  2. package/config/default-config.ts +9 -0
  3. package/config/defaults/{props.js → props.ts} +4 -4
  4. package/config/defaults/{states.js → states.ts} +2 -2
  5. package/config/defaults/{tokens.js → tokens.ts} +1 -1
  6. package/config/helper/{getSvgUrl.js → getSvgUrl.ts} +1 -3
  7. package/config/helper/{minifyHtml.js → minifyHtml.ts} +1 -1
  8. package/config/helper.test.ts +238 -0
  9. package/config/helper.ts +79 -0
  10. package/config/{index.js → index.ts} +17 -4
  11. package/config/tsconfig.json +18 -0
  12. package/config.d.ts +2 -0
  13. package/config.js +1 -1
  14. package/dist/components/Box/Box.d.ts +4 -1
  15. package/dist/components/Box/index.d.ts +1 -1
  16. package/dist/components/Center/Center.d.ts +4 -1
  17. package/dist/components/Center/index.d.ts +1 -1
  18. package/dist/components/Cluster/Cluster.d.ts +4 -1
  19. package/dist/components/Cluster/index.js +2 -2
  20. package/dist/components/Columns/Columns.d.ts +4 -1
  21. package/dist/components/Container/Container.d.ts +6 -4
  22. package/dist/components/Dummy/Dummy.d.ts +10 -8
  23. package/dist/components/Dummy/getContent.d.ts +13 -7
  24. package/dist/components/Dummy/getContent.js +7 -6
  25. package/dist/components/Dummy/index.js +8 -7
  26. package/dist/components/Flex/Flex.d.ts +4 -1
  27. package/dist/components/Flow/Flow.d.ts +4 -1
  28. package/dist/components/Flow/index.d.ts +1 -1
  29. package/dist/components/FluidCols/FluidCols.d.ts +4 -1
  30. package/dist/components/Frame/Frame.d.ts +4 -1
  31. package/dist/components/Grid/Grid.d.ts +4 -1
  32. package/dist/components/HTML/HTML.d.ts +16 -13
  33. package/dist/components/HTML/index.d.ts +13 -13
  34. package/dist/components/HTML/index.js +3 -3
  35. package/dist/components/HTML/index2.js +30 -29
  36. package/dist/components/Layer/Layer.d.ts +6 -1
  37. package/dist/components/Layer/Layer.test.d.ts +1 -0
  38. package/dist/components/Layer/getProps.d.ts +5 -1
  39. package/dist/components/LinkBox/LinkBox.d.ts +4 -4
  40. package/dist/components/Lism/Lism.d.ts +28 -7
  41. package/dist/components/Lism/Lism.stories.d.ts +667 -0
  42. package/dist/components/Lism/Lism.test.d.ts +1 -0
  43. package/dist/components/Lism/index.d.ts +1 -3
  44. package/dist/components/Lism/index.js +3 -3
  45. package/dist/components/SideMain/SideMain.d.ts +4 -1
  46. package/dist/components/Stack/Stack.d.ts +4 -1
  47. package/dist/components/SwitchCols/SwitchCols.d.ts +4 -1
  48. package/dist/components/Wrapper/Wrapper.d.ts +6 -4
  49. package/dist/components/atomic/Decorator/Decorator.d.ts +2 -1
  50. package/dist/components/atomic/Decorator/getProps.d.ts +10 -12
  51. package/dist/components/atomic/Decorator/getProps.js +10 -9
  52. package/dist/components/atomic/Divider/Divider.d.ts +2 -1
  53. package/dist/components/atomic/Divider/getProps.d.ts +2 -7
  54. package/dist/components/atomic/Divider/getProps.js +8 -7
  55. package/dist/components/atomic/Icon/Icon.d.ts +4 -3
  56. package/dist/components/atomic/Icon/SVG.d.ts +8 -9
  57. package/dist/components/atomic/Icon/getProps.d.ts +21 -12
  58. package/dist/components/atomic/Icon/getProps.js +31 -25
  59. package/dist/components/atomic/Icon/index.js +9 -8
  60. package/dist/components/atomic/Icon/presets.d.ts +2 -26
  61. package/dist/components/atomic/Icon/presets.js +10 -14
  62. package/dist/components/atomic/Media/Media.d.ts +2 -1
  63. package/dist/components/atomic/Media/getProps.d.ts +9 -1
  64. package/dist/components/atomic/Media/getProps.js +5 -6
  65. package/dist/components/atomic/Media/index.js +3 -3
  66. package/dist/components/atomic/Spacer/Spacer.d.ts +2 -1
  67. package/dist/components/atomic/Spacer/getProps.d.ts +2 -7
  68. package/dist/components/atomic/Spacer/getProps.js +8 -2
  69. package/dist/components/getFilterProps.d.ts +10 -1
  70. package/dist/components/getFilterProps.js +15 -5
  71. package/dist/components/getFilterProps.test.d.ts +1 -0
  72. package/dist/components/index.js +44 -48
  73. package/dist/components/setMaybeTransformStyles.d.ts +12 -1
  74. package/dist/components/setMaybeTransformStyles.js +4 -4
  75. package/dist/components/setMaybeTransformStyles.test.d.ts +1 -0
  76. package/dist/config/default-config.d.ts +838 -0
  77. package/dist/config/defaults/props.d.ts +797 -0
  78. package/dist/config/defaults/states.d.ts +29 -0
  79. package/dist/config/defaults/tokens.d.ts +28 -0
  80. package/dist/config/helper/getSvgUrl.d.ts +5 -0
  81. package/dist/config/helper/minifyHtml.d.ts +5 -0
  82. package/dist/config/helper.d.ts +21 -0
  83. package/dist/config/helper.js +14 -18
  84. package/dist/config/index.d.ts +1675 -0
  85. package/dist/config/index.js +15 -11
  86. package/dist/css/base/set.css +1 -1
  87. package/dist/css/base.css +1 -1
  88. package/dist/css/main.css +1 -1
  89. package/dist/css/main_no_layer.css +1 -1
  90. package/dist/css/modules/state.css +1 -1
  91. package/dist/css/reset.css +1 -1
  92. package/dist/lib/LismPropsData.test.d.ts +1 -0
  93. package/dist/lib/getBpData.d.ts +9 -1
  94. package/dist/lib/getBpData.js +16 -10
  95. package/dist/lib/getBpData.test.d.ts +1 -0
  96. package/dist/lib/getLayoutProps.d.ts +22 -1
  97. package/dist/lib/getLayoutProps.js +19 -19
  98. package/dist/lib/getLayoutProps.test.d.ts +1 -0
  99. package/dist/lib/getLismProps.d.ts +77 -2
  100. package/dist/lib/getLismProps.js +122 -107
  101. package/dist/lib/getLismProps.test.d.ts +1 -0
  102. package/dist/lib/getMaybeCssVar.d.ts +5 -3
  103. package/dist/lib/getMaybeCssVar.js +15 -15
  104. package/dist/lib/getMaybeCssVar.test.d.ts +1 -0
  105. package/dist/lib/getMaybeTokenValue.d.ts +10 -1
  106. package/dist/lib/getMaybeTokenValue.js +21 -21
  107. package/dist/lib/getMaybeTokenValue.test.d.ts +1 -0
  108. package/dist/lib/getUtilKey.d.ts +7 -1
  109. package/dist/lib/getUtilKey.js +6 -6
  110. package/dist/lib/getUtilKey.test.d.ts +1 -0
  111. package/dist/lib/helper/atts.d.ts +6 -3
  112. package/dist/lib/helper/atts.test.d.ts +1 -0
  113. package/dist/lib/helper/filterEmptyObj.d.ts +20 -1
  114. package/dist/lib/helper/filterEmptyObj.js +6 -5
  115. package/dist/lib/helper/filterEmptyObj.test.d.ts +1 -0
  116. package/dist/lib/helper/hasSomeKeys.d.ts +1 -1
  117. package/dist/lib/helper/isNumStr.d.ts +4 -1
  118. package/dist/lib/helper/isNumStr.test.d.ts +1 -0
  119. package/dist/lib/helper/objMap.d.ts +8 -1
  120. package/dist/lib/helper/objMap.test.d.ts +1 -0
  121. package/dist/lib/helper/splitWithComma.d.ts +1 -1
  122. package/dist/lib/helper/splitWithComma.test.d.ts +1 -0
  123. package/dist/lib/isPresetValue.d.ts +3 -1
  124. package/dist/lib/isPresetValue.js +10 -3
  125. package/dist/lib/isPresetValue.test.d.ts +1 -0
  126. package/dist/lib/isTokenValue.d.ts +1 -1
  127. package/dist/lib/isTokenValue.js +24 -7
  128. package/dist/lib/isTokenValue.test.d.ts +1 -0
  129. package/dist/lib/types/LayoutProps.d.ts +50 -0
  130. package/dist/lib/types/PropValueTypes.d.ts +83 -0
  131. package/dist/lib/types/PropValueTypes.spec-d.d.ts +1 -0
  132. package/dist/lib/types/ResponsiveProps.d.ts +50 -0
  133. package/dist/lib/types/ResponsiveProps.spec-d.d.ts +1 -0
  134. package/dist/lib/types/StateProps.d.ts +27 -0
  135. package/dist/lib/types/StateProps.spec-d.d.ts +1 -0
  136. package/dist/lib/types/utils.d.ts +79 -0
  137. package/dist/lib/types/utils.spec-d.d.ts +1 -0
  138. package/dist/lib/types.d.ts +2 -0
  139. package/package.json +30 -11
  140. package/src/scss/_auto_output.scss +2 -1
  141. package/src/scss/_with_layer.scss +1 -0
  142. package/src/scss/base/_base.scss +2 -13
  143. package/src/scss/base/_tokens.scss +3 -3
  144. package/src/scss/base/set/_plain.scss +1 -0
  145. package/src/scss/modules/state/_linkbox.scss +1 -0
  146. package/src/scss/reset.scss +1 -1
  147. package/config/default-config.js +0 -9
  148. package/config/helper.js +0 -67
  149. package/dist/components/Lism/Link.d.ts +0 -1
  150. package/dist/components/Lism/Link.js +0 -8
  151. package/dist/components/Lism/Text.d.ts +0 -1
  152. package/dist/components/Lism/Text.js +0 -8
@@ -1,10 +1,27 @@
1
- import { TOKENS as s } from "../config/index.js";
2
- function i(t, e) {
3
- if (typeof t != "string") return !1;
4
- typeof e == "number" && (e = `${e}`);
5
- const r = s[t];
6
- return r instanceof Set ? r.has(e) : Array.isArray(r) ? r.includes(e) : typeof r == "object" ? (r.values || /* @__PURE__ */ new Set()).has(e) : !1;
1
+ import { TOKENS as i } from "../config/index.js";
2
+ function a(t, s) {
3
+ let e;
4
+ if (typeof s == "number")
5
+ e = `${s}`;
6
+ else if (typeof s == "string")
7
+ e = s;
8
+ else
9
+ return !1;
10
+ if (!(t in i)) return !1;
11
+ const r = i[t];
12
+ if (r instanceof Set)
13
+ return r.has(e);
14
+ if (Array.isArray(r))
15
+ return r.includes(e);
16
+ if ("values" in r) {
17
+ const n = r.values;
18
+ if (n instanceof Set)
19
+ return n.has(e);
20
+ if (Array.isArray(n))
21
+ return n.includes(e);
22
+ }
23
+ return !1;
7
24
  }
8
25
  export {
9
- i as default
26
+ a as default
10
27
  };
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,50 @@
1
+ export type CssValue = string | number;
2
+ export type NoLayoutProps = {
3
+ layout?: undefined;
4
+ };
5
+ export type BoxProps = {
6
+ layout: 'box';
7
+ };
8
+ export type CenterProps = {
9
+ layout: 'center';
10
+ };
11
+ export type ClusterProps = {
12
+ layout: 'cluster';
13
+ };
14
+ export type FlexProps = {
15
+ layout: 'flex';
16
+ };
17
+ export type FrameProps = {
18
+ layout: 'frame';
19
+ };
20
+ export type GridLayoutProps = {
21
+ layout: 'grid';
22
+ };
23
+ export type StackProps = {
24
+ layout: 'stack';
25
+ };
26
+ export type ColumnsProps = {
27
+ layout: 'columns';
28
+ };
29
+ export type FlowLayoutProps = {
30
+ layout: 'flow';
31
+ flow?: CssValue;
32
+ };
33
+ export type FluidColsProps = {
34
+ layout: 'fluidCols';
35
+ autoFill?: boolean;
36
+ };
37
+ export type SideMainProps = {
38
+ layout: 'sideMain';
39
+ sideW?: CssValue;
40
+ mainW?: CssValue;
41
+ };
42
+ export type SwitchColsProps = {
43
+ layout: 'switchCols';
44
+ breakSize?: CssValue;
45
+ };
46
+ export type LayoutSpecificProps = NoLayoutProps | BoxProps | CenterProps | ClusterProps | ColumnsProps | FlexProps | FlowLayoutProps | FluidColsProps | FrameProps | GridLayoutProps | StackProps | SideMainProps | SwitchColsProps;
47
+ export type LayoutType = Exclude<LayoutSpecificProps, NoLayoutProps>['layout'];
48
+ export interface LayoutProps {
49
+ layout?: LayoutType;
50
+ }
@@ -0,0 +1,83 @@
1
+ import { TOKENS, PROPS } from '../../../config/index';
2
+ import { WithArbitraryString, ArrayElement, ExtractArrayValues, ExtractObjectKeys, ExtractPropertyValue } from './utils';
3
+ import { MakeResponsive } from './ResponsiveProps';
4
+ type PropsConfig = typeof PROPS;
5
+ type TokensConfig = typeof TOKENS;
6
+ /**
7
+ * TOKENS のキーから対応する値の型を取得
8
+ * - 配列形式: TOKENS[K] が配列の場合、その要素の型
9
+ * - オブジェクト形式: TOKENS[K].values が配列の場合、その要素の型
10
+ *
11
+ * @example
12
+ * ```ts
13
+ * type FzValues = TokenConfigValues<'fz'>;
14
+ * // 結果: 'root' | 'base' | '5xl' | ...
15
+ *
16
+ * type SpaceValues = TokenConfigValues<'space'>;
17
+ * // 結果: '5' | '10' | '15' | ...
18
+ * ```
19
+ */
20
+ type TokenConfigValues<K extends keyof TokensConfig> = TokensConfig[K] extends readonly unknown[] ? ArrayElement<TokensConfig[K]> : ExtractArrayValues<TokensConfig[K], 'values'>;
21
+ /**
22
+ * token プロパティから対応する TOKENS の値を抽出
23
+ */
24
+ type ExtractTokenValues<T> = ExtractPropertyValue<T, 'token'> extends never ? never : ExtractPropertyValue<T, 'token'> extends keyof TokensConfig ? TokenConfigValues<ExtractPropertyValue<T, 'token'>> : never;
25
+ /**
26
+ * プロパティの設定から利用可能な値の型を抽出
27
+ * presets の値 + utils のキー + token の値
28
+ */
29
+ type ExtractPropValues<T> = ExtractArrayValues<T, 'presets'> | ExtractObjectKeys<T, 'utils'> | ExtractTokenValues<T>;
30
+ /**
31
+ * プロパティの設定から値の型を決定
32
+ * - presets/utils/token がある場合: 具体的な値 + 任意文字列 + number | boolean | null
33
+ * - ない場合: string | number(フォールバック)
34
+ */
35
+ type PropValueType<T> = ExtractPropValues<T> extends never ? string | number : WithArbitraryString<ExtractPropValues<T>> | number | boolean | null;
36
+ /**
37
+ * bp プロパティが 1 に設定されているかを判定
38
+ * never チェックを先に行うことで、bp プロパティが存在しない場合を正しく判定
39
+ */
40
+ type HasBreakpointSupport<T> = [ExtractPropertyValue<T, 'bp'>] extends [never] ? false : ExtractPropertyValue<T, 'bp'> extends 1 ? true : false;
41
+ type AllPropKeys = keyof PropsConfig;
42
+ /**
43
+ * bp: 1 が設定されているプロパティのキーを抽出
44
+ */
45
+ type PropsWithBreakpoint = {
46
+ [K in AllPropKeys]: HasBreakpointSupport<PropsConfig[K]> extends true ? K : never;
47
+ }[AllPropKeys];
48
+ /**
49
+ * bp: 1 が設定されていないプロパティのキーを抽出
50
+ */
51
+ type PropsWithoutBreakpoint = Exclude<AllPropKeys, PropsWithBreakpoint>;
52
+ /**
53
+ * bp: 1 が設定されているプロパティの型(レスポンシブ対応あり)
54
+ */
55
+ export type ResponsivePropValueTypes = {
56
+ [K in PropsWithBreakpoint]?: PropValueType<PropsConfig[K]>;
57
+ };
58
+ /**
59
+ * bp: 1 が設定されていないプロパティの型(レスポンシブ対応なし)
60
+ */
61
+ export type NonResponsivePropValueTypes = {
62
+ [K in PropsWithoutBreakpoint]?: PropValueType<PropsConfig[K]>;
63
+ };
64
+ /**
65
+ * PROPS 設定から生成される Props 型(レスポンシブ対応含む)
66
+ * - bp: 1 のプロパティ: レスポンシブ対応(配列・オブジェクト形式可)
67
+ * - bp なしのプロパティ: 単一値のみ
68
+ * - presets/utils/token なしのプロパティ: string | number(フォールバック)
69
+ *
70
+ * @example
71
+ * ```ts
72
+ * // bp: 1 のプロパティ(fz など)
73
+ * fz?: 'root' | 'base' | ... | ['root', 'base'] | { base: 'root', md: 'base' }
74
+ *
75
+ * // bp なしのプロパティ(fw など)
76
+ * fw?: 'thin' | 'light' | 'normal' | ...
77
+ *
78
+ * // presets/utils/token なしのプロパティ(bg など)
79
+ * bg?: Responsive<string | number>
80
+ * ```
81
+ */
82
+ export type PropValueTypes = MakeResponsive<ResponsivePropValueTypes> & NonResponsivePropValueTypes;
83
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,50 @@
1
+ import { BREAK_POINTS_ALL } from '../../../config/index';
2
+ import { LimitedArray } from './utils';
3
+ /** 全ブレイクポイントキー('base' を含む) */
4
+ type BreakpointKey = (typeof BREAK_POINTS_ALL)[number];
5
+ /** ブレイクポイント数(5: base, sm, md, lg, xl) */
6
+ type BreakpointCount = (typeof BREAK_POINTS_ALL)['length'];
7
+ /** ブレイクポイント数を上限とする配列型(1〜5要素) */
8
+ type ResponsiveArray<T> = LimitedArray<T, BreakpointCount>;
9
+ /**
10
+ * プロパティ値をレスポンシブ対応の型に変換するユーティリティ型
11
+ *
12
+ * 単一の値、配列形式(最大5要素)、ブレイクポイントオブジェクト形式のいずれかを受け付ける
13
+ *
14
+ * @example
15
+ * ```ts
16
+ * type FzProp = Responsive<'s' | 'm' | 'l'>;
17
+ * // 結果:
18
+ * // | 's' | 'm' | 'l'
19
+ * // | ['s' | 'm' | 'l'] | ['s' | 'm' | 'l', 's' | 'm' | 'l'] | ... (最大5要素)
20
+ * // | { base?: 's' | 'm' | 'l'; sm?: 's' | 'm' | 'l'; md?: ...; lg?: ...; xl?: ... }
21
+ *
22
+ * // 使用例
23
+ * const a: FzProp = 'm'; // 単一値
24
+ * const b: FzProp = ['s', 'm', 'l']; // 配列形式(最大5要素)
25
+ * const c: FzProp = { base: 's', md: 'l' }; // オブジェクト形式
26
+ * ```
27
+ */
28
+ export type Responsive<T> = T | ResponsiveArray<T> | Partial<Record<BreakpointKey, T>>;
29
+ /**
30
+ * オブジェクト型の各プロパティをレスポンシブ対応に変換するユーティリティ型
31
+ *
32
+ * @example
33
+ * ```ts
34
+ * type OriginalProps = {
35
+ * fz: 's' | 'm' | 'l';
36
+ * color: string;
37
+ * };
38
+ *
39
+ * type ResponsiveProps = MakeResponsive<OriginalProps>;
40
+ * // 結果:
41
+ * // {
42
+ * // fz?: Responsive<'s' | 'm' | 'l'>;
43
+ * // color?: Responsive<string>;
44
+ * // }
45
+ * ```
46
+ */
47
+ export type MakeResponsive<T> = {
48
+ [K in keyof T]?: Responsive<T[K]>;
49
+ };
50
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,27 @@
1
+ import { STATES } from '../../../config/index';
2
+ import { WithArbitraryString, ArrayElement } from './utils';
3
+ /**
4
+ * config/index.ts から STATES の型を取得
5
+ * objDeepMerge の DeepMergeResult 型により literal types が保持される
6
+ */
7
+ type StatesConfig = typeof STATES;
8
+ /** preset を持つ State の値の型を抽出 */
9
+ type PresetElement<T> = T extends {
10
+ preset: readonly unknown[];
11
+ } ? ArrayElement<T['preset']> : never;
12
+ /**
13
+ * State 設定から Props の値の型を抽出するユーティリティ型
14
+ */
15
+ type ExtractStateValue<T> = T extends string ? boolean : T extends {
16
+ preset: readonly unknown[];
17
+ } ? WithArbitraryString<PresetElement<T>> | boolean : T extends {
18
+ setStyles: unknown;
19
+ } ? string : never;
20
+ /**
21
+ * config/index.ts の STATES から自動生成される State Props の型
22
+ * config/index.ts の STATES に新しいステートを追加すると自動的に反映される
23
+ */
24
+ export type StateProps = {
25
+ [K in keyof StatesConfig]?: ExtractStateValue<StatesConfig[K]>;
26
+ };
27
+ export {};
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,79 @@
1
+ /**
2
+ * 最大 N 要素の配列型を生成するユーティリティ型
3
+ *
4
+ * @example
5
+ * ```ts
6
+ * type Max3 = LimitedArray<string, 3>;
7
+ * // 結果: [string] | [string, string] | [string, string, string]
8
+ * ```
9
+ */
10
+ export type LimitedArray<T, N extends number, R extends T[] = [T]> = R['length'] extends N ? R : R | LimitedArray<T, N, [...R, T]>;
11
+ /**
12
+ * プリセット値 | 任意文字列
13
+ *
14
+ * `string & {}` はリテラル型が string に吸収されるのを防ぎ、
15
+ * エディタでプリセット値のサジェストを維持しつつ任意の文字列も受け付ける
16
+ *
17
+ * @example
18
+ * ```ts
19
+ * type Size = WithArbitraryString<'s' | 'm' | 'l'>;
20
+ * // 結果: 's' | 'm' | 'l' | (string & {})
21
+ * // → 's', 'm', 'l' がサジェストされつつ、'custom' などの任意の文字列も受け付ける
22
+ * ```
23
+ */
24
+ export type WithArbitraryString<T> = T | (string & {});
25
+ /**
26
+ * 配列から要素の型を抽出
27
+ *
28
+ * @example
29
+ * ```ts
30
+ * type Element = ArrayElement<readonly ['a', 'b', 'c']>;
31
+ * // 結果: 'a' | 'b' | 'c'
32
+ * ```
33
+ */
34
+ export type ArrayElement<T> = T extends readonly (infer E)[] ? E : never;
35
+ /**
36
+ * オブジェクトから指定したキーの配列要素の型を抽出
37
+ * 指定したキーが存在しない場合は never を返す
38
+ *
39
+ * @example
40
+ * ```ts
41
+ * type Presets = ExtractArrayValues<{ presets: readonly ['a', 'b'] }, 'presets'>;
42
+ * // 結果: 'a' | 'b'
43
+ *
44
+ * type Values = ExtractArrayValues<{ values: readonly [1, 2, 3] }, 'values'>;
45
+ * // 結果: 1 | 2 | 3
46
+ * ```
47
+ */
48
+ export type ExtractArrayValues<T, K extends string> = T extends {
49
+ [P in K]: readonly (infer E)[];
50
+ } ? E : never;
51
+ /**
52
+ * オブジェクトから指定したキーのオブジェクトのキーを抽出
53
+ * 指定したキーが存在しない場合は never を返す
54
+ *
55
+ * @example
56
+ * ```ts
57
+ * type Keys = ExtractObjectKeys<{ utils: { a: 'x', b: 'y' } }, 'utils'>;
58
+ * // 結果: 'a' | 'b'
59
+ * ```
60
+ */
61
+ export type ExtractObjectKeys<T, K extends string> = T extends {
62
+ [P in K]: infer U;
63
+ } ? (U extends object ? keyof U : never) : never;
64
+ /**
65
+ * オブジェクトから指定したキーのプロパティ値を抽出
66
+ * 指定したキーが存在しない場合は never を返す
67
+ *
68
+ * @example
69
+ * ```ts
70
+ * type TokenKey = ExtractPropertyValue<{ token: 'fz' }, 'token'>;
71
+ * // 結果: 'fz'
72
+ *
73
+ * type PropName = ExtractPropertyValue<{ prop: 'fontSize' }, 'prop'>;
74
+ * // 結果: 'fontSize'
75
+ * ```
76
+ */
77
+ export type ExtractPropertyValue<T, K extends string> = T extends {
78
+ [P in K]: infer V;
79
+ } ? V : never;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,2 @@
1
+ import { CSSProperties } from 'react';
2
+ export type StyleWithCustomProps = CSSProperties & Record<`--${string}`, string | number | undefined>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "lism-css",
3
- "version": "0.8.2",
3
+ "version": "0.8.4",
4
4
  "description": "A layout-first CSS framework for websites.",
5
5
  "author": {
6
6
  "name": "ddryo",
@@ -19,6 +19,7 @@
19
19
  "dist",
20
20
  "config",
21
21
  "config.js",
22
+ "config.d.ts",
22
23
  "vite-plugin.js",
23
24
  "bin",
24
25
  "packages",
@@ -29,10 +30,19 @@
29
30
  "exports": {
30
31
  ".": "./dist/index.js",
31
32
  "./config.js": "./config.js",
32
- "./config": "./config/index.js",
33
- "./default-config": "./config/default-config.js",
33
+ "./config": {
34
+ "import": "./config/index.js",
35
+ "types": "./dist/config/index.d.ts"
36
+ },
37
+ "./default-config": {
38
+ "import": "./config/default-config.js",
39
+ "types": "./dist/config/default-config.d.ts"
40
+ },
34
41
  "./vite-plugin": "./vite-plugin.mjs",
35
- "./lib/*": "./dist/lib/*",
42
+ "./lib/*": {
43
+ "import": "./dist/lib/*",
44
+ "types": "./dist/lib/*.d.ts"
45
+ },
36
46
  "./bin/*": "./bin/*",
37
47
  "./react": {
38
48
  "import": "./dist/components/index.js",
@@ -51,7 +61,7 @@
51
61
  "./scss/*": "./src/scss/*",
52
62
  "./*.css": "./dist/css/*.css"
53
63
  },
54
- "homepage": "https://www.lism.style",
64
+ "homepage": "https://lism-css.com/",
55
65
  "repository": {
56
66
  "type": "git",
57
67
  "url": "https://github.com/lism-css/lism-css/tree/main/packages/lism-css"
@@ -65,13 +75,19 @@
65
75
  "@babel/preset-env": "^7.27.2",
66
76
  "@babel/preset-react": "^7.27.1",
67
77
  "@rollup/plugin-babel": "^6.0.4",
78
+ "@storybook/react-vite": "^10.2.10",
79
+ "@testing-library/jest-dom": "^6.9.1",
80
+ "@testing-library/react": "^16.3.1",
81
+ "@types/node": "^25.0.3",
68
82
  "@vitejs/plugin-react-swc": "^3.10.0",
69
83
  "glob": "^11.0.2",
84
+ "jsdom": "^27.4.0",
70
85
  "rollup": "^4.41.1",
86
+ "tsx": "^4.21.0",
71
87
  "typescript": "~5.8.3",
72
88
  "unplugin-dts": "1.0.0-beta.6",
73
89
  "vite": "^6.3.5",
74
- "vitest": "^4.0.16"
90
+ "vitest": "^4.0.18"
75
91
  },
76
92
  "peerDependencies": {
77
93
  "@types/react": "*",
@@ -82,11 +98,14 @@
82
98
  "sideEffects": false,
83
99
  "scripts": {
84
100
  "dev": "vite",
85
- "test": "vitest run",
86
- "build": "vite build && pnpm build:css",
87
- "build:vite": "vite build",
88
- "build:css": "node bin/script-build-css.js",
89
- "lint": "pnpm lint:style",
101
+ "test": "pnpm typecheck && pnpm vitest",
102
+ "vitest": "vitest run",
103
+ "typecheck": "tsc --noEmit",
104
+ "build": "pnpm build:js && pnpm build:css",
105
+ "build:js": "vite build && pnpm exec tsc -p config/tsconfig.json",
106
+ "build:css": "tsx bin/script-build-css.js",
107
+ "lint": "pnpm lint:eslint && pnpm lint:style",
108
+ "lint:eslint": "eslint '**/*.{js,mjs,ts,tsx}'",
90
109
  "lint:style": "stylelint '**/*.{css,scss}'",
91
110
  "preview": "vite preview"
92
111
  }
@@ -20,7 +20,7 @@ base_type:
20
20
  // マップから値を取得し、nullの場合はデフォルト値を返す
21
21
  @function map_get_with_default($map, $key, $default) {
22
22
  $value: map.get($map, $key);
23
- @if $value != null {
23
+ @if $value {
24
24
  @return $value;
25
25
  } @else {
26
26
  @return $default;
@@ -59,6 +59,7 @@ base_type:
59
59
 
60
60
  // valueが(prop:val)で詳細に明示されている場合
61
61
  @if (meta.type-of($value) == map) {
62
+ // マップ形式の場合は何もしない(将来の拡張用)
62
63
  } @else if $base_type == 2 {
63
64
  // important は [class*=] についてるので不要
64
65
  #{$selector} {
@@ -32,4 +32,5 @@
32
32
  }
33
33
 
34
34
  @layer lism.custom {
35
+ /* ユーザーカスタム用レイヤー */
35
36
  }
@@ -1,7 +1,6 @@
1
1
  /* ----------------------------------------
2
2
  body
3
3
  ---------------------------------------- */
4
-
5
4
  body {
6
5
  --hl: var(--hl--base);
7
6
  font-size: var(--fz--base);
@@ -9,14 +8,14 @@ body {
9
8
  letter-spacing: var(--lts--base);
10
9
  background-color: var(--base);
11
10
  color: var(--text);
12
-
13
11
  text-underline-offset: var(--under-offset, 0.125em);
14
12
  }
15
13
 
16
14
  /* ----------------------------------------
17
15
  line-height
18
16
  ---------------------------------------- */
19
- * {
17
+ *,
18
+ .set-plain {
20
19
  line-height: calc(1em + var(--hl) * 2);
21
20
  }
22
21
 
@@ -26,8 +25,6 @@ body {
26
25
  :is(h1, h2, h3, h4, h5, h6) {
27
26
  font-family: var(--heading-ff, inherit);
28
27
  font-weight: var(--heading-fw, bolder);
29
- // font-size: var(--fz, revert);
30
- // line-height: var(--lh, inherit);
31
28
  }
32
29
  h1 {
33
30
  font-size: var(--fz--3xl);
@@ -143,7 +140,6 @@ button,
143
140
  textarea,
144
141
  select,
145
142
  ::file-selector-button {
146
- --hl: var(--hl--s);
147
143
  padding: var(--s5) var(--s10);
148
144
 
149
145
  // 最低限揃えておく
@@ -160,13 +156,6 @@ button {
160
156
  opacity: var(--o--n20);
161
157
  }
162
158
 
163
- /* ----------------------------------------
164
- dialog
165
- ---------------------------------------- */
166
- // dialog {
167
- // border: solid 1px;
168
- // }
169
-
170
159
  /* ----------------------------------------
171
160
  フォーカス要素
172
161
  ---------------------------------------- */
@@ -50,15 +50,15 @@
50
50
  // --accent-3: #000;
51
51
 
52
52
  // base
53
- --base: hsl(224 6% 99%);
54
- --base-2: hsl(224 10% 94%);
53
+ --base: hsl(224 4% 99%);
54
+ --base-2: hsl(224 8% 95%);
55
55
 
56
56
  // text
57
57
  --text: hsl(224 4% 8%);
58
58
  --text-2: hsl(224 6% 32%);
59
59
  --link: oklch(50% 0.3 240); //hsl(224, 90%, 48%);
60
60
 
61
- --divider: hsl(224 4% 80%);
61
+ --divider: hsl(224 8% 88%);
62
62
 
63
63
  /* ------------------------------------------------------------
64
64
  opacity
@@ -9,6 +9,7 @@
9
9
  max-width: none;
10
10
  max-height: none;
11
11
  color: inherit;
12
+ font: inherit;
12
13
  background: none;
13
14
  padding: 0;
14
15
  margin: 0;
@@ -12,6 +12,7 @@
12
12
 
13
13
  // リンクをクリック可能にするためにz-indexあげる
14
14
  .is--linkBox a {
15
+ position: relative;
15
16
  z-index: 2; // .u-linkExpand::before + 1
16
17
  }
17
18
 
@@ -54,7 +54,7 @@
54
54
 
55
55
  /* モーダルが開いている時はコンテンツをスクロールさせない */
56
56
  &:has(:modal[open]) {
57
- overflow: hidden;
57
+ overflow: clip; /* sticky 要素がくずれないように clip */
58
58
  }
59
59
  }
60
60
 
@@ -1,9 +0,0 @@
1
- import TOKENS from './defaults/tokens.js';
2
- import PROPS from './defaults/props.js';
3
- import STATES from './defaults/states.js';
4
-
5
- export default {
6
- tokens: TOKENS,
7
- props: PROPS,
8
- states: STATES,
9
- };
package/config/helper.js DELETED
@@ -1,67 +0,0 @@
1
- function isObj(value) {
2
- return value && typeof value === 'object' && !Array.isArray(value);
3
- }
4
-
5
- /**
6
- * 深いマージを行う関数
7
- * @param {Object} origin - マージ先となる元オブジェクト
8
- * @param {Object} source - マージするソース(このデータに更新される)
9
- * @returns {Object} マージされたオブジェクト
10
- */
11
- export function objDeepMerge(origin, source) {
12
- // originとsourceがオブジェクトかどうかをチェック
13
- if (!origin || typeof origin !== 'object' || Array.isArray(origin)) {
14
- return source;
15
- }
16
- if (!source || typeof source !== 'object' || Array.isArray(source)) {
17
- return origin;
18
- }
19
-
20
- const result = { ...origin };
21
-
22
- for (const key in source) {
23
- if (Object.hasOwn(source, key)) {
24
- const originValue = result[key];
25
- const sourceValue = source[key];
26
-
27
- if (!originValue) {
28
- // origin側に存在しない新たなキーの場合はそのまま追加する
29
- result[key] = sourceValue;
30
- } else if (isObj(sourceValue) && isObj(originValue)) {
31
- // どちらもオブジェクトの場合は再帰的にマージ
32
- result[key] = objDeepMerge(originValue, sourceValue);
33
- } else {
34
- // どちらかのデータがobjectではない場合、そのまま上書き
35
- result[key] = sourceValue;
36
- }
37
- }
38
- }
39
-
40
- return result;
41
- }
42
-
43
- /**
44
- * オブジェクト内の配列を再帰的にSetに変換する関数
45
- * @param {any} obj - 変換対象のオブジェクト
46
- * @returns {any} 変換されたオブジェクト
47
- */
48
- export function arrayConvertToSet(obj) {
49
- // 配列の場合はSetに変換
50
- if (Array.isArray(obj)) {
51
- return new Set(obj);
52
- }
53
-
54
- // オブジェクトの場合は再帰的に処理
55
- if (isObj(obj)) {
56
- const result = {};
57
- for (const key in obj) {
58
- if (Object.hasOwn(obj, key)) {
59
- result[key] = arrayConvertToSet(obj[key]);
60
- }
61
- }
62
- return result;
63
- }
64
-
65
- // その他の値はそのまま返す
66
- return obj;
67
- }
@@ -1 +0,0 @@
1
- export default function Link(props: any): import("react").JSX.Element;
@@ -1,8 +0,0 @@
1
- import { jsx as t } from "react/jsx-runtime";
2
- import o from "./index.js";
3
- function a(r) {
4
- return /* @__PURE__ */ t(o, { tag: "a", ...r });
5
- }
6
- export {
7
- a as default
8
- };
@@ -1 +0,0 @@
1
- export default function Text(props: any): import("react").JSX.Element;
@@ -1,8 +0,0 @@
1
- import { jsx as r } from "react/jsx-runtime";
2
- import o from "./index.js";
3
- function f(t) {
4
- return /* @__PURE__ */ r(o, { tag: "p", ...t });
5
- }
6
- export {
7
- f as default
8
- };