@a-type/ui 1.1.2 → 1.1.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 (39) hide show
  1. package/dist/cjs/components/card/Card.stories.js +7 -3
  2. package/dist/cjs/components/card/Card.stories.js.map +1 -1
  3. package/dist/cjs/components/icon/generated/IconSpritesheet.js +1 -1
  4. package/dist/cjs/components/icon/generated/IconSpritesheet.js.map +1 -1
  5. package/dist/cjs/components/icon/generated/iconNames.d.ts +1 -1
  6. package/dist/cjs/components/icon/generated/iconNames.js +1 -0
  7. package/dist/cjs/components/icon/generated/iconNames.js.map +1 -1
  8. package/dist/cjs/components/masonry/masonry.d.ts +3 -0
  9. package/dist/cjs/components/masonry/masonry.js +55 -9
  10. package/dist/cjs/components/masonry/masonry.js.map +1 -1
  11. package/dist/cjs/components/masonry/masonry.stories.d.ts +1 -0
  12. package/dist/cjs/components/masonry/masonry.stories.js +18 -4
  13. package/dist/cjs/components/masonry/masonry.stories.js.map +1 -1
  14. package/dist/cjs/components/numberStepper/NumberStepper.d.ts +3 -1
  15. package/dist/cjs/components/numberStepper/NumberStepper.js +7 -3
  16. package/dist/cjs/components/numberStepper/NumberStepper.js.map +1 -1
  17. package/dist/esm/components/card/Card.stories.js +7 -3
  18. package/dist/esm/components/card/Card.stories.js.map +1 -1
  19. package/dist/esm/components/icon/generated/IconSpritesheet.js +1 -1
  20. package/dist/esm/components/icon/generated/IconSpritesheet.js.map +1 -1
  21. package/dist/esm/components/icon/generated/iconNames.d.ts +1 -1
  22. package/dist/esm/components/icon/generated/iconNames.js +1 -0
  23. package/dist/esm/components/icon/generated/iconNames.js.map +1 -1
  24. package/dist/esm/components/masonry/masonry.d.ts +3 -0
  25. package/dist/esm/components/masonry/masonry.js +53 -8
  26. package/dist/esm/components/masonry/masonry.js.map +1 -1
  27. package/dist/esm/components/masonry/masonry.stories.d.ts +1 -0
  28. package/dist/esm/components/masonry/masonry.stories.js +17 -3
  29. package/dist/esm/components/masonry/masonry.stories.js.map +1 -1
  30. package/dist/esm/components/numberStepper/NumberStepper.d.ts +3 -1
  31. package/dist/esm/components/numberStepper/NumberStepper.js +7 -3
  32. package/dist/esm/components/numberStepper/NumberStepper.js.map +1 -1
  33. package/package.json +1 -1
  34. package/src/components/card/Card.stories.tsx +32 -7
  35. package/src/components/icon/generated/IconSpritesheet.tsx +6 -0
  36. package/src/components/icon/generated/iconNames.ts +1 -0
  37. package/src/components/masonry/masonry.stories.tsx +30 -9
  38. package/src/components/masonry/masonry.tsx +62 -10
  39. package/src/components/numberStepper/NumberStepper.tsx +12 -2
package/dist/esm/components/masonry/masonry.js CHANGED
@@ -1,5 +1,6 @@
1
1
  // @unocss-include
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { debounce } from '@a-type/utils';
3
4
  import { useEffect, useRef, useState } from 'react';
4
5
  class MasonryLayout {
5
6
  constructor(config) {
@@ -25,6 +26,7 @@ class MasonryLayout {
25
26
  node.style.setProperty('position', 'absolute');
26
27
  // hide until laid out
27
28
  node.style.setProperty('visibility', 'hidden');
29
+ this.childSizeObserver.observe(node);
28
30
  }
29
31
  });
30
32
  this.updateFromContainerSize(container.offsetWidth);
@@ -66,21 +68,39 @@ class MasonryLayout {
66
68
  this.handleContainerMutation = (entries) => {
67
69
  for (const entry of entries) {
68
70
  entry.addedNodes.forEach((node) => {
71
+ var _a;
69
72
  if (node instanceof HTMLElement) {
70
73
  node.style.setProperty('position', 'absolute');
71
74
  // hide until laid out
72
75
  node.style.setProperty('visibility', 'hidden');
76
+ (_a = this.childSizeObserver) === null || _a === void 0 ? void 0 : _a.observe(node);
77
+ }
78
+ });
79
+ entry.removedNodes.forEach((node) => {
80
+ var _a;
81
+ if (node instanceof HTMLElement) {
82
+ (_a = this.childSizeObserver) === null || _a === void 0 ? void 0 : _a.unobserve(node);
73
83
  }
74
84
  });
75
85
  }
76
86
  // TODO: why is this timeout necessary?
77
87
  setTimeout(this.relayout, 100);
78
88
  };
79
- this.relayout = () => {
89
+ this.handleChildResize = (entries) => {
90
+ // only worry about height changes
91
+ for (const entry of entries) {
92
+ const lastSeenHeight = entry.target.getAttribute('data-last-height');
93
+ const currentHeight = entry.contentRect.height;
94
+ entry.target.setAttribute('data-last-height', currentHeight.toString());
95
+ if (lastSeenHeight && lastSeenHeight !== currentHeight.toString()) {
96
+ this.relayout();
97
+ }
98
+ }
99
+ };
100
+ this.relayout = debounce(() => {
80
101
  if (!this.container) {
81
102
  return;
82
103
  }
83
- console.log('relayout');
84
104
  const tracks = new Array(this.columns).fill(0);
85
105
  const gap = this.config.gap;
86
106
  // percentage-based width and x position so that items automatically
@@ -90,27 +110,49 @@ class MasonryLayout {
90
110
  const columnPercentageWidth = (pixelColumnWidthMinusGap / this.container.offsetWidth) * 100;
91
111
  const gapPercentageWidth = (gap / this.container.offsetWidth) * 100;
92
112
  const children = Array.from(this.container.children);
93
- children.forEach((child) => {
94
- const trackIndex = tracks.indexOf(Math.min(...tracks));
113
+ children.forEach((child, index) => {
114
+ let itemTrackSpan = parseInt(child.getAttribute('data-span') || '1');
115
+ if (isNaN(itemTrackSpan) || itemTrackSpan < 1) {
116
+ itemTrackSpan = 1;
117
+ }
118
+ if (itemTrackSpan > this.columns) {
119
+ itemTrackSpan = this.columns;
120
+ }
121
+ const trackIndex = pickTrack(tracks, itemTrackSpan);
122
+ const affectedTracks = tracks.slice(trackIndex, trackIndex + itemTrackSpan);
95
123
  const x = (columnPercentageWidth + gapPercentageWidth) * trackIndex;
96
- const y = tracks[trackIndex];
97
- const width = columnPercentageWidth;
124
+ const y = Math.max(...affectedTracks);
125
+ const width = columnPercentageWidth * itemTrackSpan +
126
+ gapPercentageWidth * (itemTrackSpan - 1);
98
127
  child.style.setProperty('position', 'absolute');
99
128
  child.style.setProperty('visibility', 'visible');
100
129
  child.style.setProperty('width', `${width}%`);
101
130
  child.style.setProperty('left', `${x}%`);
102
131
  child.style.setProperty('top', `${y}px`);
132
+ child.style.setProperty('z-index', index.toString());
103
133
  requestAnimationFrame(() => {
104
134
  child.classList.add('transition-all');
105
135
  });
106
- tracks[trackIndex] += child.offsetHeight + gap;
136
+ for (let i = 0; i < itemTrackSpan; i++) {
137
+ tracks[trackIndex + i] = y + child.offsetHeight + gap;
138
+ }
107
139
  });
108
140
  this.container.style.setProperty('height', `${Math.max(...tracks)}px`);
109
- };
141
+ }, 100);
110
142
  this.columns =
111
143
  typeof config.columns === 'function' ? config.columns(0) : config.columns;
144
+ this.childSizeObserver = new ResizeObserver(this.handleChildResize);
112
145
  }
113
146
  }
147
+ function pickTrack(tracks, trackSpan) {
148
+ const subTracks = tracks.slice(0, tracks.length - trackSpan + 1);
149
+ const min = Math.min(...subTracks);
150
+ const index = subTracks.indexOf(min);
151
+ if (index === -1) {
152
+ return 0;
153
+ }
154
+ return index;
155
+ }
114
156
  const initialStyle = {
115
157
  height: 0,
116
158
  position: 'relative',
@@ -130,4 +172,7 @@ export function Masonry({ className, children, columns = 3, gap = 16, }) {
130
172
  }, [layout, ref]);
131
173
  return (_jsx("div", Object.assign({ ref: ref, style: initialStyle, className: className }, { children: children })));
132
174
  }
175
+ export function masonrySpan(span) {
176
+ return { 'data-span': span };
177
+ }
133
178
  //# sourceMappingURL=masonry.js.map
package/dist/esm/components/masonry/masonry.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"masonry.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"masonry.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.tsx"],"names":[],"mappings":"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"}
package/dist/esm/components/masonry/masonry.stories.d.ts CHANGED
@@ -13,3 +13,4 @@ declare const meta: {
13
13
  export default meta;
14
14
  type Story = StoryObj<typeof Masonry>;
15
15
  export declare const Default: Story;
16
+ export declare const WithSpan: Story;
package/dist/esm/components/masonry/masonry.stories.js CHANGED
@@ -10,13 +10,27 @@ const meta = {
10
10
  },
11
11
  };
12
12
  export default meta;
13
- const sizes = Array.from({ length: 100 }, (_, i) => {
13
+ const content = (spans) => Array.from({ length: 100 }, (_, i) => {
14
14
  const size = 100 + Math.floor(Math.random() * 100);
15
- return (_jsx("div", Object.assign({ className: "bg-gray-5 rounded-lg", style: { height: size } }, { children: size }), i));
15
+ let span = undefined;
16
+ if (spans) {
17
+ if (Math.random() < 0.1) {
18
+ span = 2;
19
+ }
20
+ else if (Math.random() < 0.03) {
21
+ span = 3;
22
+ }
23
+ }
24
+ return (_jsx("div", Object.assign({ className: "bg-gray-5 rounded-lg", style: { height: size }, "data-span": span }, { children: size }), i));
16
25
  });
17
26
  export const Default = {
18
27
  render(props) {
19
- return _jsx(Masonry, Object.assign({}, props, { children: sizes }));
28
+ return _jsx(Masonry, Object.assign({}, props, { children: content() }));
29
+ },
30
+ };
31
+ export const WithSpan = {
32
+ render(props) {
33
+ return _jsx(Masonry, Object.assign({}, props, { children: content(true) }));
20
34
  },
21
35
  };
22
36
  //# sourceMappingURL=masonry.stories.js.map
package/dist/esm/components/masonry/masonry.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"masonry.stories.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC8B,CAAC;AAEjC,eAAe,IAAI,CAAC;AAIpB,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IAClD,MAAM,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IACnD,OAAO,CACN,4BAAa,SAAS,EAAC,sBAAsB,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,gBACnE,IAAI,KADI,CAAC,CAEL,CACN,CAAC;AACH,CAAC,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,KAAK;QACX,OAAO,KAAC,OAAO,oBAAK,KAAK,cAAG,KAAK,IAAW,CAAC;IAC9C,CAAC;CACD,CAAC"}
1
+ {"version":3,"file":"masonry.stories.js","sourceRoot":"","sources":["../../../../src/components/masonry/masonry.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,MAAM,IAAI,GAAG;IACZ,KAAK,EAAE,SAAS;IAChB,SAAS,EAAE,OAAO;IAClB,QAAQ,EAAE,EAAE;IACZ,UAAU,EAAE;QACX,QAAQ,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC5B;CAC8B,CAAC;AAEjC,eAAe,IAAI,CAAC;AAIpB,MAAM,OAAO,GAAG,CAAC,KAAe,EAAE,EAAE,CACnC,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE;IACpC,MAAM,IAAI,GAAG,GAAG,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,CAAC,CAAC;IACnD,IAAI,IAAI,GAAG,SAAS,CAAC;IACrB,IAAI,KAAK,EAAE;QACV,IAAI,IAAI,CAAC,MAAM,EAAE,GAAG,GAAG,EAAE;YACxB,IAAI,GAAG,CAAC,CAAC;SACT;aAAM,IAAI,IAAI,CAAC,MAAM,EAAE,GAAG,IAAI,EAAE;YAChC,IAAI,GAAG,CAAC,CAAC;SACT;KACD;IAED,OAAO,CACN,4BAEC,SAAS,EAAC,sBAAsB,EAChC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,eACZ,IAAI,gBAEd,IAAI,KALA,CAAC,CAMD,CACN,CAAC;AACH,CAAC,CAAC,CAAC;AAEJ,MAAM,CAAC,MAAM,OAAO,GAAU;IAC7B,MAAM,CAAC,KAAK;QACX,OAAO,KAAC,OAAO,oBAAK,KAAK,cAAG,OAAO,EAAE,IAAW,CAAC;IAClD,CAAC;CACD,CAAC;AAEF,MAAM,CAAC,MAAM,QAAQ,GAAU;IAC9B,MAAM,CAAC,KAAK;QACX,OAAO,KAAC,OAAO,oBAAK,KAAK,cAAG,OAAO,CAAC,IAAI,CAAC,IAAW,CAAC;IACtD,CAAC;CACD,CAAC"}
package/dist/esm/components/numberStepper/NumberStepper.d.ts CHANGED
@@ -8,5 +8,7 @@ export interface NumberStepperProps {
8
8
  renderValue?: (value: number) => ReactNode;
9
9
  className?: string;
10
10
  disabled?: boolean;
11
+ min?: number;
12
+ max?: number;
11
13
  }
12
- export declare function NumberStepper({ value, onChange, highlightChange, steps, increment: incrementAmount, renderValue, className, disabled, ...rest }: NumberStepperProps): import("react/jsx-runtime").JSX.Element;
14
+ export declare function NumberStepper({ value, onChange, highlightChange, steps, increment: incrementAmount, renderValue, className, disabled, min, max, ...rest }: NumberStepperProps): import("react/jsx-runtime").JSX.Element;
package/dist/esm/components/numberStepper/NumberStepper.js CHANGED
@@ -17,7 +17,7 @@ import classNames from 'clsx';
17
17
  import { Button } from '../button.js';
18
18
  export function NumberStepper(_a) {
19
19
  var _b;
20
- var { value, onChange, highlightChange, steps, increment: incrementAmount = 1, renderValue = fractionToText, className, disabled } = _a, rest = __rest(_a, ["value", "onChange", "highlightChange", "steps", "increment", "renderValue", "className", "disabled"]);
20
+ var { value, onChange, highlightChange, steps, increment: incrementAmount = 1, renderValue = fractionToText, className, disabled, min, max } = _a, rest = __rest(_a, ["value", "onChange", "highlightChange", "steps", "increment", "renderValue", "className", "disabled", "min", "max"]);
21
21
  const index = (_b = steps === null || steps === void 0 ? void 0 : steps.indexOf(value)) !== null && _b !== void 0 ? _b : 0;
22
22
  const increment = () => {
23
23
  if (steps) {
@@ -41,8 +41,12 @@ export function NumberStepper(_a) {
41
41
  onChange(value - incrementAmount);
42
42
  }
43
43
  };
44
- const canIncrement = !disabled && (steps ? index < steps.length - 1 : true);
45
- const canDecrement = !disabled && (steps ? index > 0 : true);
44
+ const canIncrement = !disabled &&
45
+ (steps ? index < steps.length - 1 : true) &&
46
+ (max === undefined || value < max);
47
+ const canDecrement = !disabled &&
48
+ (steps ? index > 0 : true) &&
49
+ (min === undefined || value > min);
46
50
  return (_jsxs("div", Object.assign({ className: classNames('layer-components:flex layer-components:items-center layer-components:border-default layer-components:rounded-full layer-components:overflow-hidden layer-components:w-min-content layer-components:flex-shrink-0 layer-components:bg-white layer-components:shadow-sm', disabled &&
47
51
  'layer-variants:border-gray-dark-blend layer-variants:bg-transparent layer-variants:shadow-none', {
48
52
  'layer-variants:bg-accent-wash layer-variants:color-black': !!highlightChange && value !== 1,
package/dist/esm/components/numberStepper/NumberStepper.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"NumberStepper.js","sourceRoot":"","sources":["../../../../src/components/numberStepper/NumberStepper.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAatC,MAAM,UAAU,aAAa,CAAC,EAUT;;QAVS,EAC7B,KAAK,EACL,QAAQ,EACR,eAAe,EACf,KAAK,EACL,SAAS,EAAE,eAAe,GAAG,CAAC,EAC9B,WAAW,GAAG,cAAc,EAC5B,SAAS,EACT,QAAQ,OAEY,EADjB,IAAI,cATsB,sGAU7B,CADO;IAEP,MAAM,KAAK,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,KAAK,CAAC,mCAAI,CAAC,CAAC;IAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;QACtB,IAAI,KAAK,EAAE;YACV,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC/B,OAAO;aACP;YACD,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;SAC3B;aAAM;YACN,QAAQ,CAAC,KAAK,GAAG,eAAe,CAAC,CAAC;SAClC;IACF,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACtB,IAAI,KAAK,EAAE;YACV,IAAI,KAAK,KAAK,CAAC,EAAE;gBAChB,OAAO;aACP;YACD,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;SAC3B;aAAM;YACN,QAAQ,CAAC,KAAK,GAAG,eAAe,CAAC,CAAC;SAClC;IACF,CAAC,CAAC;IAEF,MAAM,YAAY,GAAG,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAC5E,MAAM,YAAY,GAAG,CAAC,QAAQ,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;IAE7D,OAAO,CACN,6BACC,SAAS,EAAE,UAAU,CACpB,iIAAiI,EACjI,QAAQ;YACP,oEAAoE,EACrE;YACC,6CAA6C,EAC5C,CAAC,CAAC,eAAe,IAAI,KAAK,KAAK,CAAC;SACjC,EACD,SAAS,CACT,IACG,IAAI,eAER,KAAC,MAAM,kBAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,YAAY,gBAChE,KAAC,SAAS,KAAG,IACL,EACT,4BAAK,SAAS,EAAC,oBAAoB,gBAAE,WAAW,CAAC,KAAK,CAAC,IAAO,EAC9D,KAAC,MAAM,kBAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,YAAY,gBAChE,KAAC,QAAQ,KAAG,IACJ,KACJ,CACN,CAAC;AACH,CAAC"}
1
+ {"version":3,"file":"NumberStepper.js","sourceRoot":"","sources":["../../../../src/components/numberStepper/NumberStepper.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAC/C,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,UAAU,MAAM,MAAM,CAAC;AAE9B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAetC,MAAM,UAAU,aAAa,CAAC,EAYT;;QAZS,EAC7B,KAAK,EACL,QAAQ,EACR,eAAe,EACf,KAAK,EACL,SAAS,EAAE,eAAe,GAAG,CAAC,EAC9B,WAAW,GAAG,cAAc,EAC5B,SAAS,EACT,QAAQ,EACR,GAAG,EACH,GAAG,OAEiB,EADjB,IAAI,cAXsB,oHAY7B,CADO;IAEP,MAAM,KAAK,GAAG,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,OAAO,CAAC,KAAK,CAAC,mCAAI,CAAC,CAAC;IAEzC,MAAM,SAAS,GAAG,GAAG,EAAE;QACtB,IAAI,KAAK,EAAE;YACV,IAAI,KAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC/B,OAAO;aACP;YACD,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;SAC3B;aAAM;YACN,QAAQ,CAAC,KAAK,GAAG,eAAe,CAAC,CAAC;SAClC;IACF,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACtB,IAAI,KAAK,EAAE;YACV,IAAI,KAAK,KAAK,CAAC,EAAE;gBAChB,OAAO;aACP;YACD,QAAQ,CAAC,KAAK,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC;SAC3B;aAAM;YACN,QAAQ,CAAC,KAAK,GAAG,eAAe,CAAC,CAAC;SAClC;IACF,CAAC,CAAC;IAEF,MAAM,YAAY,GACjB,CAAC,QAAQ;QACT,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QACzC,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,GAAG,GAAG,CAAC,CAAC;IACpC,MAAM,YAAY,GACjB,CAAC,QAAQ;QACT,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;QAC1B,CAAC,GAAG,KAAK,SAAS,IAAI,KAAK,GAAG,GAAG,CAAC,CAAC;IAEpC,OAAO,CACN,6BACC,SAAS,EAAE,UAAU,CACpB,iIAAiI,EACjI,QAAQ;YACP,oEAAoE,EACrE;YACC,6CAA6C,EAC5C,CAAC,CAAC,eAAe,IAAI,KAAK,KAAK,CAAC;SACjC,EACD,SAAS,CACT,IACG,IAAI,eAER,KAAC,MAAM,kBAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,YAAY,gBAChE,KAAC,SAAS,KAAG,IACL,EACT,4BAAK,SAAS,EAAC,oBAAoB,gBAAE,WAAW,CAAC,KAAK,CAAC,IAAO,EAC9D,KAAC,MAAM,kBAAC,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,CAAC,YAAY,gBAChE,KAAC,QAAQ,KAAG,IACJ,KACJ,CACN,CAAC;AACH,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "1.1.2",
3
+ "version": "1.1.4",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "/dist",
package/src/components/card/Card.stories.tsx CHANGED
@@ -167,10 +167,20 @@ export const Grid: Story = {
167
167
  );
168
168
  const remove = (index: number) =>
169
169
  setSizes((v) => v.filter((_, i) => i !== index));
170
+ const resize = (index: number) =>
171
+ setSizes((v) => {
172
+ const size = 50 + Math.floor(Math.random() * 300);
173
+ return v.map((s, i) => (i === index ? size : s));
174
+ });
170
175
  return (
171
176
  <Card.Grid>
172
177
  {sizes.map((size, i) => (
173
- <GridCard key={i} size={size} remove={() => remove(i)} />
178
+ <GridCard
179
+ key={i}
180
+ size={size}
181
+ remove={() => remove(i)}
182
+ resize={() => resize(i)}
183
+ />
174
184
  ))}
175
185
  </Card.Grid>
176
186
  );
@@ -197,17 +207,32 @@ export const GridCompact: Story = {
197
207
  },
198
208
  };
199
209
 
200
- function GridCard({ size, remove }: { size: number; remove: () => void }) {
210
+ function GridCard({
211
+ size,
212
+ remove,
213
+ resize,
214
+ }: {
215
+ size: number;
216
+ remove: () => void;
217
+ resize?: () => void;
218
+ }) {
201
219
  return (
202
220
  <CardRoot style={{ height: size }}>
203
221
  <CardMain>
204
222
  <CardTitle>{size}</CardTitle>
205
223
  </CardMain>
206
- <CardActions>
207
- <Button size="small" onClick={remove}>
208
- Delete
209
- </Button>
210
- </CardActions>
224
+ <CardFooter>
225
+ <CardActions>
226
+ <Button size="small" onClick={remove}>
227
+ Delete
228
+ </Button>
229
+ {resize && (
230
+ <Button size="small" onClick={resize}>
231
+ Resize
232
+ </Button>
233
+ )}
234
+ </CardActions>
235
+ </CardFooter>
211
236
  </CardRoot>
212
237
  );
213
238
  }
package/src/components/icon/generated/IconSpritesheet.tsx CHANGED
@@ -859,6 +859,12 @@ export const IconSpritesheet = (props: any) => (
859
859
  fill="currentColor"
860
860
  />
861
861
  </symbol>
862
+ <symbol id="icon-lightbulb" viewBox="0 0 15 15">
863
+ <path
864
+ d="M9.00001 9C10 8 9.88256 8.11747 10.5 7.5C13.0001 5 10.5564 1 7.50001 1C4.44367 1 2 4.5 4.50002 7.5C5.05906 8.17084 5 8 6.00001 9M9.00001 9H6.00001M9.00001 9C9.00001 9.24467 9.00001 9.5492 9.00001 9.86966M6.00001 9C6.00001 9.49274 6 10.3806 6 11M9.00001 9.86966L6 11M9.00001 9.86966C9.00001 10.2903 9.00001 10.7383 9.00001 11.1144M6 11C6 11.6377 6.00001 12 6.00001 12C6.00001 12 6.02576 12.1115 6.10733 12.2601M9.00001 11.1144C9.00001 11.623 9.00001 12 9.00001 12C9.00001 12 8.76924 13 7.50001 13C6.65469 13 6.27 12.5564 6.10733 12.2601M9.00001 11.1144C7.87035 11.5618 7.23699 11.8127 6.10733 12.2601M7.5 8.5V6.5M7.5 6.5C7.5 6.5 6.1754 6.21854 6 5.5C5.80355 4.6952 6.67158 3.99999 7.50001 4C8.32844 4.00001 9.17805 4.69094 9 5.5C8.84443 6.20693 7.5 6.5 7.5 6.5Z"
865
+ stroke="currentColor"
866
+ />
867
+ </symbol>
862
868
  </defs>
863
869
  </svg>
864
870
  );
package/src/components/icon/generated/iconNames.ts CHANGED
@@ -76,6 +76,7 @@ export const iconNames = [
76
76
  'bell',
77
77
  'home',
78
78
  'thermometer',
79
+ 'lightbulb',
79
80
  ] as const;
80
81
 
81
82
  export type IconName = (typeof iconNames)[number];
package/src/components/masonry/masonry.stories.tsx CHANGED
@@ -14,17 +14,38 @@ export default meta;
14
14
 
15
15
  type Story = StoryObj<typeof Masonry>;
16
16
 
17
- const sizes = Array.from({ length: 100 }, (_, i) => {
18
- const size = 100 + Math.floor(Math.random() * 100);
19
- return (
20
- <div key={i} className="bg-gray-5 rounded-lg" style={{ height: size }}>
21
- {size}
22
- </div>
23
- );
24
- });
17
+ const content = (spans?: boolean) =>
18
+ Array.from({ length: 100 }, (_, i) => {
19
+ const size = 100 + Math.floor(Math.random() * 100);
20
+ let span = undefined;
21
+ if (spans) {
22
+ if (Math.random() < 0.1) {
23
+ span = 2;
24
+ } else if (Math.random() < 0.03) {
25
+ span = 3;
26
+ }
27
+ }
28
+
29
+ return (
30
+ <div
31
+ key={i}
32
+ className="bg-gray-5 rounded-lg"
33
+ style={{ height: size }}
34
+ data-span={span}
35
+ >
36
+ {size}
37
+ </div>
38
+ );
39
+ });
25
40
 
26
41
  export const Default: Story = {
27
42
  render(props) {
28
- return <Masonry {...props}>{sizes}</Masonry>;
43
+ return <Masonry {...props}>{content()}</Masonry>;
44
+ },
45
+ };
46
+
47
+ export const WithSpan: Story = {
48
+ render(props) {
49
+ return <Masonry {...props}>{content(true)}</Masonry>;
29
50
  },
30
51
  };
package/src/components/masonry/masonry.tsx CHANGED
@@ -1,3 +1,4 @@
1
+ import { debounce } from '@a-type/utils';
1
2
  import { CSSProperties, ReactNode, useEffect, useRef, useState } from 'react';
2
3
 
3
4
  interface MasonryLayoutConfig {
@@ -8,6 +9,7 @@ interface MasonryLayoutConfig {
8
9
  class MasonryLayout {
9
10
  private containerResizeObserver: ResizeObserver | null = null;
10
11
  private containerMutationObserver: MutationObserver | null = null;
12
+ private childSizeObserver: ResizeObserver;
11
13
 
12
14
  private container: HTMLElement | null = null;
13
15
 
@@ -16,6 +18,7 @@ class MasonryLayout {
16
18
  constructor(private config: MasonryLayoutConfig) {
17
19
  this.columns =
18
20
  typeof config.columns === 'function' ? config.columns(0) : config.columns;
21
+ this.childSizeObserver = new ResizeObserver(this.handleChildResize);
19
22
  }
20
23
 
21
24
  attach = (container: HTMLElement) => {
@@ -41,6 +44,7 @@ class MasonryLayout {
41
44
  node.style.setProperty('position', 'absolute');
42
45
  // hide until laid out
43
46
  node.style.setProperty('visibility', 'hidden');
47
+ this.childSizeObserver.observe(node);
44
48
  }
45
49
  });
46
50
 
@@ -93,6 +97,13 @@ class MasonryLayout {
93
97
  node.style.setProperty('position', 'absolute');
94
98
  // hide until laid out
95
99
  node.style.setProperty('visibility', 'hidden');
100
+
101
+ this.childSizeObserver?.observe(node);
102
+ }
103
+ });
104
+ entry.removedNodes.forEach((node) => {
105
+ if (node instanceof HTMLElement) {
106
+ this.childSizeObserver?.unobserve(node);
96
107
  }
97
108
  });
98
109
  }
@@ -100,14 +111,24 @@ class MasonryLayout {
100
111
  setTimeout(this.relayout, 100);
101
112
  };
102
113
 
103
- private relayout = () => {
114
+ private handleChildResize = (entries: ResizeObserverEntry[]) => {
115
+ // only worry about height changes
116
+ for (const entry of entries) {
117
+ const lastSeenHeight = entry.target.getAttribute('data-last-height');
118
+ const currentHeight = entry.contentRect.height;
119
+ entry.target.setAttribute('data-last-height', currentHeight.toString());
120
+ if (lastSeenHeight && lastSeenHeight !== currentHeight.toString()) {
121
+ this.relayout();
122
+ }
123
+ }
124
+ };
125
+
126
+ private relayout = debounce(() => {
104
127
  if (!this.container) {
105
128
  return;
106
129
  }
107
130
 
108
- console.log('relayout');
109
-
110
- const tracks = new Array(this.columns).fill(0);
131
+ const tracks: number[] = new Array(this.columns).fill(0);
111
132
  const gap = this.config.gap;
112
133
  // percentage-based width and x position so that items automatically
113
134
  // layout correctly when the container is resized (as long as columns
@@ -119,23 +140,50 @@ class MasonryLayout {
119
140
  const gapPercentageWidth = (gap / this.container.offsetWidth) * 100;
120
141
 
121
142
  const children = Array.from(this.container.children) as HTMLElement[];
122
- children.forEach((child) => {
123
- const trackIndex = tracks.indexOf(Math.min(...tracks));
143
+ children.forEach((child, index) => {
144
+ let itemTrackSpan = parseInt(child.getAttribute('data-span') || '1');
145
+ if (isNaN(itemTrackSpan) || itemTrackSpan < 1) {
146
+ itemTrackSpan = 1;
147
+ }
148
+ if (itemTrackSpan > this.columns) {
149
+ itemTrackSpan = this.columns;
150
+ }
151
+
152
+ const trackIndex = pickTrack(tracks, itemTrackSpan);
153
+ const affectedTracks = tracks.slice(
154
+ trackIndex,
155
+ trackIndex + itemTrackSpan,
156
+ );
124
157
  const x = (columnPercentageWidth + gapPercentageWidth) * trackIndex;
125
- const y = tracks[trackIndex];
126
- const width = columnPercentageWidth;
158
+ const y = Math.max(...affectedTracks);
159
+ const width =
160
+ columnPercentageWidth * itemTrackSpan +
161
+ gapPercentageWidth * (itemTrackSpan - 1);
127
162
  child.style.setProperty('position', 'absolute');
128
163
  child.style.setProperty('visibility', 'visible');
129
164
  child.style.setProperty('width', `${width}%`);
130
165
  child.style.setProperty('left', `${x}%`);
131
166
  child.style.setProperty('top', `${y}px`);
167
+ child.style.setProperty('z-index', index.toString());
132
168
  requestAnimationFrame(() => {
133
169
  child.classList.add('transition-all');
134
170
  });
135
- tracks[trackIndex] += child.offsetHeight + gap;
171
+ for (let i = 0; i < itemTrackSpan; i++) {
172
+ tracks[trackIndex + i] = y + child.offsetHeight + gap;
173
+ }
136
174
  });
137
175
  this.container.style.setProperty('height', `${Math.max(...tracks)}px`);
138
- };
176
+ }, 100);
177
+ }
178
+
179
+ function pickTrack(tracks: number[], trackSpan: number) {
180
+ const subTracks = tracks.slice(0, tracks.length - trackSpan + 1);
181
+ const min = Math.min(...subTracks);
182
+ const index = subTracks.indexOf(min);
183
+ if (index === -1) {
184
+ return 0;
185
+ }
186
+ return index;
139
187
  }
140
188
 
141
189
  export interface MasonryProps {
@@ -175,3 +223,7 @@ export function Masonry({
175
223
  </div>
176
224
  );
177
225
  }
226
+
227
+ export function masonrySpan(span: number) {
228
+ return { 'data-span': span };
229
+ }
package/src/components/numberStepper/NumberStepper.tsx CHANGED
@@ -13,6 +13,8 @@ export interface NumberStepperProps {
13
13
  renderValue?: (value: number) => ReactNode;
14
14
  className?: string;
15
15
  disabled?: boolean;
16
+ min?: number;
17
+ max?: number;
16
18
  }
17
19
 
18
20
  export function NumberStepper({
@@ -24,6 +26,8 @@ export function NumberStepper({
24
26
  renderValue = fractionToText,
25
27
  className,
26
28
  disabled,
29
+ min,
30
+ max,
27
31
  ...rest
28
32
  }: NumberStepperProps) {
29
33
  const index = steps?.indexOf(value) ?? 0;
@@ -50,8 +54,14 @@ export function NumberStepper({
50
54
  }
51
55
  };
52
56
 
53
- const canIncrement = !disabled && (steps ? index < steps.length - 1 : true);
54
- const canDecrement = !disabled && (steps ? index > 0 : true);
57
+ const canIncrement =
58
+ !disabled &&
59
+ (steps ? index < steps.length - 1 : true) &&
60
+ (max === undefined || value < max);
61
+ const canDecrement =
62
+ !disabled &&
63
+ (steps ? index > 0 : true) &&
64
+ (min === undefined || value > min);
55
65
 
56
66
  return (
57
67
  <div