@marigold/system 0.9.0 → 1.0.0-beta.0

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 (4) hide show
  1. package/dist/index.d.ts +3 -3
  2. package/dist/index.js +44 -13
  3. package/dist/index.mjs +44 -13
  4. package/package.json +8 -7
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Simplify, PolymorphicPropsWithRef, PolymorphicComponentWithRef, ComponentProps } from '@marigold/types';
1
+ import { Simplify, PolymorphicPropsWithRef, PolymorphicComponentWithRef, ComponentProps, KebabCase } from '@marigold/types';
2
2
  import * as _theme_ui_css from '@theme-ui/css';
3
3
  import { ResponsiveStyleValue as ResponsiveStyleValue$1, ThemeUIStyleObject, ThemeUICSSObject, ThemeUICSSProperties, NestedScaleDict } from '@theme-ui/css';
4
4
  import * as react from 'react';
@@ -242,8 +242,8 @@ declare function useComponentStyles<Part extends string, Parts extends ReadonlyA
242
242
  */
243
243
  declare const useResponsiveValue: <T>(values: T[], defaultIndex?: number) => T;
244
244
 
245
- declare type ComponentState = 'hover' | 'focus' | 'active' | 'visited' | 'disabled' | 'readOnly' | 'checked' | 'indeterminate' | 'error';
246
- declare type StateAttrKeyProps = `data-${Lowercase<ComponentState>}`;
245
+ declare type ComponentState = 'hover' | 'focus' | 'focusVisible' | 'active' | 'visited' | 'disabled' | 'readOnly' | 'checked' | 'selected' | 'indeterminate' | 'expanded' | 'error';
246
+ declare type StateAttrKeyProps = `data-${KebabCase<ComponentState>}`;
247
247
  declare type StateAttrProps = {
248
248
  [key in StateAttrKeyProps]?: '';
249
249
  };
package/dist/index.js CHANGED
@@ -150,8 +150,8 @@ var isNil = (value) => value === null || value === void 0;
150
150
  var ensureArray = (val) => isNil(val) ? [] : Array.isArray(val) ? val : [val];
151
151
  var ensureVariantDefault = (val) => val.replace(/\.$/, "");
152
152
  var ensureArrayVariant = (variant) => ensureArray(variant).map(ensureVariantDefault);
153
- var appendVariantState = (variant, state) => {
154
- return `${ensureVariantDefault(variant)}.:${state}`;
153
+ var appendVariantState = (variant, state2) => {
154
+ return `${ensureVariantDefault(variant)}.:${state2}`;
155
155
  };
156
156
  var conditional = (variant, _a) => {
157
157
  var _b = _a, { disabled = false } = _b, states = __objRest(_b, ["disabled"]);
@@ -161,15 +161,44 @@ var conditional = (variant, _a) => {
161
161
  };
162
162
 
163
163
  // src/components/Box/utils.ts
164
+ var createteSelector = (selectors, states, suffix = "") => {
165
+ return selectors.map((selector2) => states.map((state2) => `${selector2}${state2}${suffix ? ` ${suffix}` : ""}`)).flat().join(", ");
166
+ };
167
+ var selector = {
168
+ self: "&",
169
+ grouped: ["[role=group]", "[data-group]"]
170
+ };
171
+ var state = {
172
+ none: [""],
173
+ hover: [":hover", "[data-hover]"],
174
+ focus: [":focus", "[data-focus]"],
175
+ focusVisible: [":focus-visible", "[data-focus-visible]"],
176
+ active: [":active", "[data-active]"],
177
+ disabled: ["[disabled]", "[aria-disabled=true]", "[data-disabled]"],
178
+ readOnly: ["[readonly]", "[aria-readonly=true]", "[data-read-only]"],
179
+ checked: ["[aria-checked=true]", "[data-checked]"],
180
+ indeterminate: ["[aria-checked=mixed]", "[data-indeterminate]"],
181
+ selected: ["[aria-selected=true]", "[data-selected]"],
182
+ error: [":invalid", "[aria-invalid=true]", "[data-error]"],
183
+ expanded: ["[aria-expanded=true]", "[data-expanded]"]
184
+ };
164
185
  var pseudos = {
165
- "&:hover": "&:hover, &[data-hover]",
166
- "&:focus": "&:focus, &[data-focus]",
167
- "&:active": "&:active, &[data-active]",
168
- "&:disabled": "&[disabled], &[aria-disabled=true], &[data-disabled]",
169
- "&:read-only": "&[readonly], &[aria-readonly=true], &[data-readonly]",
170
- "&:checked": "&[aria-checked=true], &[data-checked]",
171
- "&:indeterminate": "&:indeterminate, &[aria-checked=mixed], &[data-indeterminate]",
172
- "&:error": "&:invalid, &[aria-invalid=true], &[data-error]"
186
+ "&:hover": createteSelector([selector.self], state.hover),
187
+ "&:focus": createteSelector([selector.self], state.focus),
188
+ "&:focus-visible": createteSelector([selector.self], state.focusVisible),
189
+ "&:active": createteSelector([selector.self], state.active),
190
+ "&:disabled": createteSelector([selector.self], state.disabled),
191
+ "&:read-only": createteSelector([selector.self], state.readOnly),
192
+ "&:checked": createteSelector([selector.self], state.checked),
193
+ "&:selected": createteSelector([selector.self], state.selected),
194
+ "&:indeterminate": createteSelector([selector.self], state.indeterminate),
195
+ "&:error": createteSelector([selector.self], state.error),
196
+ "&:expanded": createteSelector([selector.self], state.expanded),
197
+ "&:in-group": createteSelector(selector.grouped, state.none, selector.self),
198
+ "&:hover-group": createteSelector(selector.grouped, state.hover, selector.self),
199
+ "&:focus-group": createteSelector(selector.grouped, state.focus, selector.self),
200
+ "&:active-group": createteSelector(selector.grouped, state.active, selector.self),
201
+ "&:error-group": createteSelector(selector.grouped, state.error, selector.self)
173
202
  };
174
203
  var transformPseudos = (styles) => {
175
204
  let result = {};
@@ -433,12 +462,14 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
433
462
  // src/hooks/useStateProps.ts
434
463
  var import_react7 = require("react");
435
464
  var import_react_fast_compare2 = __toESM(require("react-fast-compare"));
465
+ var KEBAB_REGEX = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g;
466
+ var toKebap = (val) => val.replace(KEBAB_REGEX, (match) => `-${match.toLocaleLowerCase()}`);
436
467
  var useStateProps = (states) => {
437
468
  const statePropsRef = (0, import_react7.useRef)({});
438
469
  let stateProps = {};
439
- for (let state in states) {
440
- if (states[state]) {
441
- const key = `data-${state.toLocaleLowerCase()}`;
470
+ for (let state2 in states) {
471
+ if (states[state2]) {
472
+ const key = `data-${toKebap(state2)}`;
442
473
  stateProps[key] = "";
443
474
  }
444
475
  }
package/dist/index.mjs CHANGED
@@ -110,8 +110,8 @@ var isNil = (value) => value === null || value === void 0;
110
110
  var ensureArray = (val) => isNil(val) ? [] : Array.isArray(val) ? val : [val];
111
111
  var ensureVariantDefault = (val) => val.replace(/\.$/, "");
112
112
  var ensureArrayVariant = (variant) => ensureArray(variant).map(ensureVariantDefault);
113
- var appendVariantState = (variant, state) => {
114
- return `${ensureVariantDefault(variant)}.:${state}`;
113
+ var appendVariantState = (variant, state2) => {
114
+ return `${ensureVariantDefault(variant)}.:${state2}`;
115
115
  };
116
116
  var conditional = (variant, _a) => {
117
117
  var _b = _a, { disabled = false } = _b, states = __objRest(_b, ["disabled"]);
@@ -121,15 +121,44 @@ var conditional = (variant, _a) => {
121
121
  };
122
122
 
123
123
  // src/components/Box/utils.ts
124
+ var createteSelector = (selectors, states, suffix = "") => {
125
+ return selectors.map((selector2) => states.map((state2) => `${selector2}${state2}${suffix ? ` ${suffix}` : ""}`)).flat().join(", ");
126
+ };
127
+ var selector = {
128
+ self: "&",
129
+ grouped: ["[role=group]", "[data-group]"]
130
+ };
131
+ var state = {
132
+ none: [""],
133
+ hover: [":hover", "[data-hover]"],
134
+ focus: [":focus", "[data-focus]"],
135
+ focusVisible: [":focus-visible", "[data-focus-visible]"],
136
+ active: [":active", "[data-active]"],
137
+ disabled: ["[disabled]", "[aria-disabled=true]", "[data-disabled]"],
138
+ readOnly: ["[readonly]", "[aria-readonly=true]", "[data-read-only]"],
139
+ checked: ["[aria-checked=true]", "[data-checked]"],
140
+ indeterminate: ["[aria-checked=mixed]", "[data-indeterminate]"],
141
+ selected: ["[aria-selected=true]", "[data-selected]"],
142
+ error: [":invalid", "[aria-invalid=true]", "[data-error]"],
143
+ expanded: ["[aria-expanded=true]", "[data-expanded]"]
144
+ };
124
145
  var pseudos = {
125
- "&:hover": "&:hover, &[data-hover]",
126
- "&:focus": "&:focus, &[data-focus]",
127
- "&:active": "&:active, &[data-active]",
128
- "&:disabled": "&[disabled], &[aria-disabled=true], &[data-disabled]",
129
- "&:read-only": "&[readonly], &[aria-readonly=true], &[data-readonly]",
130
- "&:checked": "&[aria-checked=true], &[data-checked]",
131
- "&:indeterminate": "&:indeterminate, &[aria-checked=mixed], &[data-indeterminate]",
132
- "&:error": "&:invalid, &[aria-invalid=true], &[data-error]"
146
+ "&:hover": createteSelector([selector.self], state.hover),
147
+ "&:focus": createteSelector([selector.self], state.focus),
148
+ "&:focus-visible": createteSelector([selector.self], state.focusVisible),
149
+ "&:active": createteSelector([selector.self], state.active),
150
+ "&:disabled": createteSelector([selector.self], state.disabled),
151
+ "&:read-only": createteSelector([selector.self], state.readOnly),
152
+ "&:checked": createteSelector([selector.self], state.checked),
153
+ "&:selected": createteSelector([selector.self], state.selected),
154
+ "&:indeterminate": createteSelector([selector.self], state.indeterminate),
155
+ "&:error": createteSelector([selector.self], state.error),
156
+ "&:expanded": createteSelector([selector.self], state.expanded),
157
+ "&:in-group": createteSelector(selector.grouped, state.none, selector.self),
158
+ "&:hover-group": createteSelector(selector.grouped, state.hover, selector.self),
159
+ "&:focus-group": createteSelector(selector.grouped, state.focus, selector.self),
160
+ "&:active-group": createteSelector(selector.grouped, state.active, selector.self),
161
+ "&:error-group": createteSelector(selector.grouped, state.error, selector.self)
133
162
  };
134
163
  var transformPseudos = (styles) => {
135
164
  let result = {};
@@ -400,12 +429,14 @@ var useResponsiveValue = (values, defaultIndex = 0) => {
400
429
  // src/hooks/useStateProps.ts
401
430
  import { useRef as useRef2 } from "react";
402
431
  import isEqual2 from "react-fast-compare";
432
+ var KEBAB_REGEX = /[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g;
433
+ var toKebap = (val) => val.replace(KEBAB_REGEX, (match) => `-${match.toLocaleLowerCase()}`);
403
434
  var useStateProps = (states) => {
404
435
  const statePropsRef = useRef2({});
405
436
  let stateProps = {};
406
- for (let state in states) {
407
- if (states[state]) {
408
- const key = `data-${state.toLocaleLowerCase()}`;
437
+ for (let state2 in states) {
438
+ if (states[state2]) {
439
+ const key = `data-${toKebap(state2)}`;
409
440
  stateProps[key] = "";
410
441
  }
411
442
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@marigold/system",
3
- "version": "0.9.0",
3
+ "version": "1.0.0-beta.0",
4
4
  "description": "Marigold System Library",
5
5
  "license": "MIT",
6
6
  "keywords": [
@@ -26,9 +26,9 @@
26
26
  "directory": "packages/system"
27
27
  },
28
28
  "dependencies": {
29
- "@emotion/react": "11.8.2",
30
- "@marigold/types": "0.4.1",
31
- "@theme-ui/css": "0.14.2",
29
+ "@emotion/react": "11.9.0",
30
+ "@marigold/types": "0.5.0-beta.0",
31
+ "@theme-ui/css": "0.14.5",
32
32
  "csstype": "3.0.11",
33
33
  "deepmerge": "^4.2.2",
34
34
  "react-fast-compare": "^3.2.0"
@@ -38,13 +38,14 @@
38
38
  "react-dom": "^16.x || ^17.0.0"
39
39
  },
40
40
  "devDependencies": {
41
+ "@babel/core": "7.17.10",
41
42
  "@marigold/tsconfig": "0.3.0",
42
- "tsup": "5.12.5"
43
+ "react": "17.x",
44
+ "tsup": "5.12.7"
43
45
  },
44
46
  "scripts": {
45
47
  "build": "tsup src/index.ts",
46
48
  "watch": "tsup src/index.ts --watch",
47
49
  "clean": "rm -rf node_modules && rm -rf dist"
48
- },
49
- "readme": "# `@marigold/system`\n\n> Marigold system\n"
50
+ }
50
51
  }