@a-type/ui 1.1.3 → 1.1.5

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 (57) hide show
  1. package/dist/cjs/components/camera/Camera.d.ts +8 -0
  2. package/dist/cjs/components/camera/Camera.js +30 -8
  3. package/dist/cjs/components/camera/Camera.js.map +1 -1
  4. package/dist/cjs/components/camera/Camera.stories.d.ts +9 -1
  5. package/dist/cjs/components/camera/Camera.stories.js +2 -1
  6. package/dist/cjs/components/camera/Camera.stories.js.map +1 -1
  7. package/dist/cjs/components/icon/generated/IconSpritesheet.js +1 -1
  8. package/dist/cjs/components/icon/generated/IconSpritesheet.js.map +1 -1
  9. package/dist/cjs/components/icon/generated/iconNames.d.ts +1 -1
  10. package/dist/cjs/components/icon/generated/iconNames.js +1 -0
  11. package/dist/cjs/components/icon/generated/iconNames.js.map +1 -1
  12. package/dist/cjs/components/imageUploader/ImageUploader.js +2 -2
  13. package/dist/cjs/components/imageUploader/ImageUploader.js.map +1 -1
  14. package/dist/cjs/components/masonry/masonry.d.ts +3 -0
  15. package/dist/cjs/components/masonry/masonry.js +29 -5
  16. package/dist/cjs/components/masonry/masonry.js.map +1 -1
  17. package/dist/cjs/components/masonry/masonry.stories.d.ts +1 -0
  18. package/dist/cjs/components/masonry/masonry.stories.js +18 -4
  19. package/dist/cjs/components/masonry/masonry.stories.js.map +1 -1
  20. package/dist/cjs/components/numberStepper/NumberStepper.d.ts +3 -1
  21. package/dist/cjs/components/numberStepper/NumberStepper.js +7 -3
  22. package/dist/cjs/components/numberStepper/NumberStepper.js.map +1 -1
  23. package/dist/cjs/uno.preset.js +5 -5
  24. package/dist/css/main.css +6 -6
  25. package/dist/esm/components/camera/Camera.d.ts +8 -0
  26. package/dist/esm/components/camera/Camera.js +28 -7
  27. package/dist/esm/components/camera/Camera.js.map +1 -1
  28. package/dist/esm/components/camera/Camera.stories.d.ts +9 -1
  29. package/dist/esm/components/camera/Camera.stories.js +3 -2
  30. package/dist/esm/components/camera/Camera.stories.js.map +1 -1
  31. package/dist/esm/components/icon/generated/IconSpritesheet.js +1 -1
  32. package/dist/esm/components/icon/generated/IconSpritesheet.js.map +1 -1
  33. package/dist/esm/components/icon/generated/iconNames.d.ts +1 -1
  34. package/dist/esm/components/icon/generated/iconNames.js +1 -0
  35. package/dist/esm/components/icon/generated/iconNames.js.map +1 -1
  36. package/dist/esm/components/imageUploader/ImageUploader.js +3 -3
  37. package/dist/esm/components/imageUploader/ImageUploader.js.map +1 -1
  38. package/dist/esm/components/masonry/masonry.d.ts +3 -0
  39. package/dist/esm/components/masonry/masonry.js +27 -4
  40. package/dist/esm/components/masonry/masonry.js.map +1 -1
  41. package/dist/esm/components/masonry/masonry.stories.d.ts +1 -0
  42. package/dist/esm/components/masonry/masonry.stories.js +17 -3
  43. package/dist/esm/components/masonry/masonry.stories.js.map +1 -1
  44. package/dist/esm/components/numberStepper/NumberStepper.d.ts +3 -1
  45. package/dist/esm/components/numberStepper/NumberStepper.js +7 -3
  46. package/dist/esm/components/numberStepper/NumberStepper.js.map +1 -1
  47. package/dist/esm/uno.preset.js +5 -5
  48. package/package.json +1 -1
  49. package/src/components/camera/Camera.stories.tsx +6 -12
  50. package/src/components/camera/Camera.tsx +49 -5
  51. package/src/components/icon/generated/IconSpritesheet.tsx +6 -0
  52. package/src/components/icon/generated/iconNames.ts +1 -0
  53. package/src/components/imageUploader/ImageUploader.tsx +9 -4
  54. package/src/components/masonry/masonry.stories.tsx +30 -9
  55. package/src/components/masonry/masonry.tsx +35 -5
  56. package/src/components/numberStepper/NumberStepper.tsx +12 -2
  57. package/src/uno.preset.ts +5 -5
@@ -111,10 +111,19 @@ class MasonryLayout {
111
111
  const gapPercentageWidth = (gap / this.container.offsetWidth) * 100;
112
112
  const children = Array.from(this.container.children);
113
113
  children.forEach((child, index) => {
114
- const trackIndex = tracks.indexOf(Math.min(...tracks));
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);
115
123
  const x = (columnPercentageWidth + gapPercentageWidth) * trackIndex;
116
- const y = tracks[trackIndex];
117
- const width = columnPercentageWidth;
124
+ const y = Math.max(...affectedTracks);
125
+ const width = columnPercentageWidth * itemTrackSpan +
126
+ gapPercentageWidth * (itemTrackSpan - 1);
118
127
  child.style.setProperty('position', 'absolute');
119
128
  child.style.setProperty('visibility', 'visible');
120
129
  child.style.setProperty('width', `${width}%`);
@@ -124,7 +133,9 @@ class MasonryLayout {
124
133
  requestAnimationFrame(() => {
125
134
  child.classList.add('transition-all');
126
135
  });
127
- tracks[trackIndex] += child.offsetHeight + gap;
136
+ for (let i = 0; i < itemTrackSpan; i++) {
137
+ tracks[trackIndex + i] = y + child.offsetHeight + gap;
138
+ }
128
139
  });
129
140
  this.container.style.setProperty('height', `${Math.max(...tracks)}px`);
130
141
  }, 100);
@@ -133,6 +144,15 @@ class MasonryLayout {
133
144
  this.childSizeObserver = new ResizeObserver(this.handleChildResize);
134
145
  }
135
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
+ }
136
156
  const initialStyle = {
137
157
  height: 0,
138
158
  position: 'relative',
@@ -152,4 +172,7 @@ export function Masonry({ className, children, columns = 3, gap = 16, }) {
152
172
  }, [layout, ref]);
153
173
  return (_jsx("div", Object.assign({ ref: ref, style: initialStyle, className: className }, { children: children })));
154
174
  }
175
+ export function masonrySpan(span) {
176
+ return { 'data-span': span };
177
+ }
155
178
  //# sourceMappingURL=masonry.js.map
@@ -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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"}
@@ -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;
@@ -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
@@ -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"}
@@ -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;
@@ -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,
@@ -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"}
@@ -421,17 +421,17 @@ export default function presetAglio({ spacingIncrement = 0.25, interFontLocation
421
421
  --palette-blue-90: #e3f3ff;
422
422
  --palette-blue-80: #c4e7ff;
423
423
  --palette-blue-70: #7bd0ff;
424
- --palette-blue-60: #2db7f2;
425
- --palette-blue-50: #009bd1;
426
- --palette-blue-40: #0080ad;
427
- --palette-blue-30: #00668a;
424
+ --palette-blue-60: #4cc5f9;
425
+ --palette-blue-50: #18b5ed;
426
+ --palette-blue-40: #0a9acf;
427
+ --palette-blue-30: #077da7;
428
428
  --palette-blue-20: #005979;
429
429
  --palette-blue-10: #004c69;
430
430
  --palette-blue-00: #00354a;
431
431
  --palette-purple-90: #f1efff;
432
432
  --palette-purple-80: #e0e0ff;
433
433
  --palette-purple-70: #bdc2ff;
434
- --palette-purple-60: #9ba4ff;
434
+ --palette-purple-60: #a0a8ff;
435
435
  --palette-purple-50: #7c87f3;
436
436
  --palette-purple-40: #6d78d7;
437
437
  --palette-purple-30: #6068c0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-type/ui",
3
- "version": "1.1.3",
3
+ "version": "1.1.5",
4
4
  "type": "module",
5
5
  "files": [
6
6
  "/dist",
@@ -1,23 +1,20 @@
1
1
  import type { Meta, StoryObj } from '@storybook/react';
2
- import {
3
- CameraDeviceSelector,
4
- CameraRoot,
5
- CameraShutterButton,
6
- } from './Camera.js';
2
+ import { Camera } from './Camera.js';
7
3
  import { useMemo, useState } from 'react';
8
4
 
9
5
  const meta = {
10
6
  title: 'Camera',
7
+ component: Camera,
11
8
  argTypes: {},
12
9
  parameters: {
13
10
  controls: { expanded: true },
14
11
  },
15
12
  args: {},
16
- } satisfies Meta;
13
+ } satisfies Meta<typeof Camera>;
17
14
 
18
15
  export default meta;
19
16
 
20
- type Story = StoryObj;
17
+ type Story = StoryObj<typeof Camera>;
21
18
 
22
19
  export const Default: Story = {
23
20
  render() {
@@ -40,14 +37,11 @@ function CameraDemo({ facingMode }: { facingMode?: 'user' | 'environment' }) {
40
37
 
41
38
  return (
42
39
  <div>
43
- <CameraRoot
40
+ <Camera
44
41
  facingMode={facingMode}
45
42
  onCapture={setLatest}
46
43
  className="w-64 h-64"
47
- >
48
- <CameraShutterButton />
49
- <CameraDeviceSelector />
50
- </CameraRoot>
44
+ />
51
45
  {latest && <img src={dataUri} className="w-full" />}
52
46
  </div>
53
47
  );
@@ -9,7 +9,7 @@ import {
9
9
  useRef,
10
10
  useState,
11
11
  } from 'react';
12
- import { Button } from '../button.js';
12
+ import { Button, ButtonProps } from '../button.js';
13
13
  import { Icon } from '../icon.js';
14
14
  import { Select, SelectContent, SelectItem, SelectTrigger } from '../select.js';
15
15
  import { Slot } from '@radix-ui/react-slot';
@@ -20,11 +20,15 @@ const CameraContext = createContext<{
20
20
  selectedDeviceId: string | undefined;
21
21
  selectDeviceId: (id: string) => void;
22
22
  devices: MediaDeviceInfo[];
23
+ fullscreen: boolean;
24
+ setFullscreen: (fullscreen: boolean) => void;
23
25
  }>({
24
26
  triggerCapture: () => {},
25
27
  selectedDeviceId: 'default',
26
28
  selectDeviceId: () => {},
27
29
  devices: [],
30
+ fullscreen: false,
31
+ setFullscreen: () => {},
28
32
  });
29
33
 
30
34
  export interface CameraRootProps {
@@ -62,8 +66,10 @@ export const CameraRoot = forwardRef<HTMLDivElement, CameraRootProps>(
62
66
  string | undefined
63
67
  >();
64
68
 
69
+ const cleanupRef = useRef<() => void>();
65
70
  useEffect(() => {
66
71
  const init = () => {
72
+ cleanupRef.current?.();
67
73
  navigator.mediaDevices
68
74
  ?.getUserMedia({
69
75
  video: {
@@ -73,6 +79,8 @@ export const CameraRoot = forwardRef<HTMLDivElement, CameraRootProps>(
73
79
  })
74
80
  .then((s) => {
75
81
  setStream(s);
82
+ cleanupRef.current = () =>
83
+ s.getTracks().forEach((track) => track.stop());
76
84
  });
77
85
  };
78
86
  init();
@@ -85,13 +93,12 @@ export const CameraRoot = forwardRef<HTMLDivElement, CameraRootProps>(
85
93
  init();
86
94
  };
87
95
  document.addEventListener('visibilitychange', reconnect);
88
- }, [selectedDeviceId, facingMode]);
89
96
 
90
- useEffect(() => {
91
97
  return () => {
92
- stream?.getTracks().forEach((track) => track.stop());
98
+ document.removeEventListener('visibilitychange', reconnect);
99
+ cleanupRef.current?.();
93
100
  };
94
- }, [stream]);
101
+ }, [selectedDeviceId, facingMode]);
95
102
 
96
103
  useEffect(() => {
97
104
  const video = videoRef.current;
@@ -142,6 +149,8 @@ export const CameraRoot = forwardRef<HTMLDivElement, CameraRootProps>(
142
149
  }
143
150
  };
144
151
 
152
+ const [fullscreen, setFullscreen] = useState(false);
153
+
145
154
  return (
146
155
  <CameraContext.Provider
147
156
  value={{
@@ -149,12 +158,15 @@ export const CameraRoot = forwardRef<HTMLDivElement, CameraRootProps>(
149
158
  triggerCapture,
150
159
  selectedDeviceId,
151
160
  selectDeviceId: setSelectedDeviceId,
161
+ setFullscreen,
162
+ fullscreen,
152
163
  }}
153
164
  >
154
165
  <div
155
166
  ref={ref}
156
167
  className={classNames(
157
168
  'layer-components:([font-family:inherit] text-white bg-black rounded-lg overflow-hidden min-w-4 min-h-4 relative)',
169
+ fullscreen && 'fixed inset-0 w-full h-full z-1000 rounded-none',
158
170
  className,
159
171
  )}
160
172
  {...rest}
@@ -266,6 +278,38 @@ export const CameraDeviceSelector = (props: CameraDeviceSelectorProps) => {
266
278
  );
267
279
  };
268
280
 
281
+ export const CameraFullscreenButton = (props: ButtonProps) => {
282
+ const { setFullscreen, fullscreen } = useContext(CameraContext);
283
+ return (
284
+ <Button
285
+ {...props}
286
+ size="icon"
287
+ color="ghost"
288
+ className="absolute top-2 right-2 text-white"
289
+ onClick={() => setFullscreen(!fullscreen)}
290
+ >
291
+ <Icon name={fullscreen ? 'x' : 'maximize'} />
292
+ </Button>
293
+ );
294
+ };
295
+
296
+ const CameraBase = (props: CameraRootProps) => {
297
+ return (
298
+ <CameraRoot {...props}>
299
+ <CameraShutterButton />
300
+ <CameraDeviceSelector />
301
+ <CameraFullscreenButton />
302
+ </CameraRoot>
303
+ );
304
+ };
305
+
306
+ export const Camera = Object.assign(CameraBase, {
307
+ Root: CameraRoot,
308
+ ShutterButton: CameraShutterButton,
309
+ DeviceSelector: CameraDeviceSelector,
310
+ FullscreenButton: CameraFullscreenButton,
311
+ });
312
+
269
313
  function dataURItoFile(dataURI: string) {
270
314
  // convert base64/URLEncoded data component to raw binary data held in a string
271
315
  var byteString;
@@ -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
  );
@@ -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];
@@ -6,6 +6,7 @@ import { Icon } from '../icon.js';
6
6
  import { Button } from '../button.js';
7
7
  import {
8
8
  CameraDeviceSelector,
9
+ CameraFullscreenButton,
9
10
  CameraRoot,
10
11
  CameraShutterButton,
11
12
  } from '../camera.js';
@@ -113,7 +114,10 @@ export function ImageUploader({
113
114
 
114
115
  return (
115
116
  <div
116
- className={classNames('relative overflow-hidden', rest.className)}
117
+ className={classNames(
118
+ 'relative overflow-hidden rounded-lg',
119
+ rest.className,
120
+ )}
117
121
  onDragEnter={onDragEnter}
118
122
  onDragLeave={onDragLeave}
119
123
  onDragOver={onDragOver}
@@ -165,13 +169,14 @@ export function ImageUploader({
165
169
  >
166
170
  <CameraShutterButton />
167
171
  <CameraDeviceSelector />
172
+ <CameraFullscreenButton />
168
173
  <Button
169
174
  onClick={() => setCameraOpen(false)}
170
175
  color="ghost"
171
- size="icon"
172
- className="text-white absolute top-2 right-2"
176
+ size="small"
177
+ className="text-white absolute top-2 left-2"
173
178
  >
174
- <Icon name="x" />
179
+ Cancel
175
180
  </Button>
176
181
  </CameraRoot>
177
182
  )}
@@ -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
  };
@@ -128,7 +128,7 @@ class MasonryLayout {
128
128
  return;
129
129
  }
130
130
 
131
- const tracks = new Array(this.columns).fill(0);
131
+ const tracks: number[] = new Array(this.columns).fill(0);
132
132
  const gap = this.config.gap;
133
133
  // percentage-based width and x position so that items automatically
134
134
  // layout correctly when the container is resized (as long as columns
@@ -141,10 +141,24 @@ class MasonryLayout {
141
141
 
142
142
  const children = Array.from(this.container.children) as HTMLElement[];
143
143
  children.forEach((child, index) => {
144
- const trackIndex = tracks.indexOf(Math.min(...tracks));
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
+ );
145
157
  const x = (columnPercentageWidth + gapPercentageWidth) * trackIndex;
146
- const y = tracks[trackIndex];
147
- const width = columnPercentageWidth;
158
+ const y = Math.max(...affectedTracks);
159
+ const width =
160
+ columnPercentageWidth * itemTrackSpan +
161
+ gapPercentageWidth * (itemTrackSpan - 1);
148
162
  child.style.setProperty('position', 'absolute');
149
163
  child.style.setProperty('visibility', 'visible');
150
164
  child.style.setProperty('width', `${width}%`);
@@ -154,12 +168,24 @@ class MasonryLayout {
154
168
  requestAnimationFrame(() => {
155
169
  child.classList.add('transition-all');
156
170
  });
157
- tracks[trackIndex] += child.offsetHeight + gap;
171
+ for (let i = 0; i < itemTrackSpan; i++) {
172
+ tracks[trackIndex + i] = y + child.offsetHeight + gap;
173
+ }
158
174
  });
159
175
  this.container.style.setProperty('height', `${Math.max(...tracks)}px`);
160
176
  }, 100);
161
177
  }
162
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;
187
+ }
188
+
163
189
  export interface MasonryProps {
164
190
  children: ReactNode;
165
191
  className?: string;
@@ -197,3 +223,7 @@ export function Masonry({
197
223
  </div>
198
224
  );
199
225
  }
226
+
227
+ export function masonrySpan(span: number) {
228
+ return { 'data-span': span };
229
+ }
@@ -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
package/src/uno.preset.ts CHANGED
@@ -454,17 +454,17 @@ export default function presetAglio({
454
454
  --palette-blue-90: #e3f3ff;
455
455
  --palette-blue-80: #c4e7ff;
456
456
  --palette-blue-70: #7bd0ff;
457
- --palette-blue-60: #2db7f2;
458
- --palette-blue-50: #009bd1;
459
- --palette-blue-40: #0080ad;
460
- --palette-blue-30: #00668a;
457
+ --palette-blue-60: #4cc5f9;
458
+ --palette-blue-50: #18b5ed;
459
+ --palette-blue-40: #0a9acf;
460
+ --palette-blue-30: #077da7;
461
461
  --palette-blue-20: #005979;
462
462
  --palette-blue-10: #004c69;
463
463
  --palette-blue-00: #00354a;
464
464
  --palette-purple-90: #f1efff;
465
465
  --palette-purple-80: #e0e0ff;
466
466
  --palette-purple-70: #bdc2ff;
467
- --palette-purple-60: #9ba4ff;
467
+ --palette-purple-60: #a0a8ff;
468
468
  --palette-purple-50: #7c87f3;
469
469
  --palette-purple-40: #6d78d7;
470
470
  --palette-purple-30: #6068c0;