Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ColorSwatch: function() {
return _index.ColorSwatch;
},
colorSwatchClassNames: function() {
return _index.colorSwatchClassNames;
},
renderColorSwatch_unstable: function() {
return _index.renderColorSwatch_unstable;
},
swatchCSSVars: function() {
return _index.swatchCSSVars;
},
useColorSwatchStyles_unstable: function() {
return _index.useColorSwatchStyles_unstable;
},
useColorSwatch_unstable: function() {
return _index.useColorSwatch_unstable;
}
});
const _index = require("./components/ColorSwatch/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ColorSwatch.ts"],"sourcesContent":["export type { ColorSwatchProps, ColorSwatchSlots, ColorSwatchState } from './components/ColorSwatch/index';\nexport {\n ColorSwatch,\n colorSwatchClassNames,\n renderColorSwatch_unstable,\n swatchCSSVars,\n useColorSwatchStyles_unstable,\n useColorSwatch_unstable,\n} from './components/ColorSwatch/index';\n"],"names":["ColorSwatch","colorSwatchClassNames","renderColorSwatch_unstable","swatchCSSVars","useColorSwatchStyles_unstable","useColorSwatch_unstable"],"mappings":";;;;;;;;;;;;eAEEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oBAAa;;;eACbC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,iCAAiC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
EmptySwatch: function() {
return _index.EmptySwatch;
},
emptySwatchClassNames: function() {
return _index.emptySwatchClassNames;
},
renderEmptySwatch_unstable: function() {
return _index.renderEmptySwatch_unstable;
},
useEmptySwatchStyles_unstable: function() {
return _index.useEmptySwatchStyles_unstable;
},
useEmptySwatch_unstable: function() {
return _index.useEmptySwatch_unstable;
}
});
const _index = require("./components/EmptySwatch/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/EmptySwatch.ts"],"sourcesContent":["export type { EmptySwatchProps, EmptySwatchSlots, EmptySwatchState } from './components/EmptySwatch/index';\nexport {\n EmptySwatch,\n emptySwatchClassNames,\n renderEmptySwatch_unstable,\n useEmptySwatchStyles_unstable,\n useEmptySwatch_unstable,\n} from './components/EmptySwatch/index';\n"],"names":["EmptySwatch","emptySwatchClassNames","renderEmptySwatch_unstable","useEmptySwatchStyles_unstable","useEmptySwatch_unstable"],"mappings":";;;;;;;;;;;;eAEEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,iCAAiC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ImageSwatch: function() {
return _index.ImageSwatch;
},
imageSwatchClassNames: function() {
return _index.imageSwatchClassNames;
},
renderImageSwatch_unstable: function() {
return _index.renderImageSwatch_unstable;
},
useImageSwatchStyles_unstable: function() {
return _index.useImageSwatchStyles_unstable;
},
useImageSwatch_unstable: function() {
return _index.useImageSwatch_unstable;
}
});
const _index = require("./components/ImageSwatch/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ImageSwatch.ts"],"sourcesContent":["export type { ImageSwatchProps, ImageSwatchSlots, ImageSwatchState } from './components/ImageSwatch/index';\nexport {\n ImageSwatch,\n imageSwatchClassNames,\n renderImageSwatch_unstable,\n useImageSwatchStyles_unstable,\n useImageSwatch_unstable,\n} from './components/ImageSwatch/index';\n"],"names":["ImageSwatch","imageSwatchClassNames","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useImageSwatch_unstable"],"mappings":";;;;;;;;;;;;eAEEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,iCAAiC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
SwatchPicker: function() {
return _index.SwatchPicker;
},
renderSwatchPicker_unstable: function() {
return _index.renderSwatchPicker_unstable;
},
swatchPickerClassNames: function() {
return _index.swatchPickerClassNames;
},
useSwatchPickerStyles_unstable: function() {
return _index.useSwatchPickerStyles_unstable;
},
useSwatchPicker_unstable: function() {
return _index.useSwatchPicker_unstable;
}
});
const _index = require("./components/SwatchPicker/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/SwatchPicker.ts"],"sourcesContent":["export type {\n SwatchPickerOnSelectEventHandler,\n SwatchPickerOnSelectionChangeData,\n SwatchPickerProps,\n SwatchPickerSlots,\n SwatchPickerState,\n} from './components/SwatchPicker/index';\nexport {\n SwatchPicker,\n renderSwatchPicker_unstable,\n swatchPickerClassNames,\n useSwatchPickerStyles_unstable,\n useSwatchPicker_unstable,\n} from './components/SwatchPicker/index';\n"],"names":["SwatchPicker","renderSwatchPicker_unstable","swatchPickerClassNames","useSwatchPickerStyles_unstable","useSwatchPicker_unstable"],"mappings":";;;;;;;;;;;;eAQEA,mBAAY;;;eACZC,kCAA2B;;;eAC3BC,6BAAsB;;;eACtBC,qCAA8B;;;eAC9BC,+BAAwB;;;uBACnB,kCAAkC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
SwatchPickerRow: function() {
return _index.SwatchPickerRow;
},
renderSwatchPickerRow_unstable: function() {
return _index.renderSwatchPickerRow_unstable;
},
swatchPickerRowClassNames: function() {
return _index.swatchPickerRowClassNames;
},
useSwatchPickerRowStyles_unstable: function() {
return _index.useSwatchPickerRowStyles_unstable;
},
useSwatchPickerRow_unstable: function() {
return _index.useSwatchPickerRow_unstable;
}
});
const _index = require("./components/SwatchPickerRow/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/SwatchPickerRow.ts"],"sourcesContent":["export type {\n SwatchPickerRowProps,\n SwatchPickerRowSlots,\n SwatchPickerRowState,\n} from './components/SwatchPickerRow/index';\nexport {\n SwatchPickerRow,\n renderSwatchPickerRow_unstable,\n swatchPickerRowClassNames,\n useSwatchPickerRowStyles_unstable,\n useSwatchPickerRow_unstable,\n} from './components/SwatchPickerRow/index';\n"],"names":["SwatchPickerRow","renderSwatchPickerRow_unstable","swatchPickerRowClassNames","useSwatchPickerRowStyles_unstable","useSwatchPickerRow_unstable"],"mappings":";;;;;;;;;;;;eAMEA,sBAAe;;;eACfC,qCAA8B;;;eAC9BC,gCAAyB;;;eACzBC,wCAAiC;;;eACjCC,kCAA2B;;;uBACtB,qCAAqC"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ColorSwatch", {
enumerable: true,
get: function() {
return ColorSwatch;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useColorSwatch = require("./useColorSwatch");
const _renderColorSwatch = require("./renderColorSwatch");
const _useColorSwatchStylesstyles = require("./useColorSwatchStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const ColorSwatch = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useColorSwatch.useColorSwatch_unstable)(props, ref);
(0, _useColorSwatchStylesstyles.useColorSwatchStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useColorSwatchStyles_unstable')(state);
return (0, _renderColorSwatch.renderColorSwatch_unstable)(state);
});
ColorSwatch.displayName = 'ColorSwatch';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorSwatch_unstable } from './useColorSwatch';\nimport { renderColorSwatch_unstable } from './renderColorSwatch';\nimport { useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';\nimport type { ColorSwatchProps } from './ColorSwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorSwatch component is used to render a colors, icons and gradients.\n */\nexport const ColorSwatch: ForwardRefComponent<ColorSwatchProps> = React.forwardRef((props, ref) => {\n const state = useColorSwatch_unstable(props, ref);\n\n useColorSwatchStyles_unstable(state);\n useCustomStyleHook_unstable('useColorSwatchStyles_unstable')(state);\n\n return renderColorSwatch_unstable(state);\n});\n\nColorSwatch.displayName = 'ColorSwatch';\n"],"names":["React","useColorSwatch_unstable","renderColorSwatch_unstable","useColorSwatchStyles_unstable","useCustomStyleHook_unstable","ColorSwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering ColorSwatch
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ColorSwatchSlots = {\n root: NonNullable<Slot<'button'>>;\n icon?: Slot<'span'>;\n disabledIcon?: Slot<'span'>;\n};\n\n/**\n * ColorSwatch Props\n */\nexport type ColorSwatchProps = ComponentProps<ColorSwatchSlots> &\n Pick<SwatchPickerProps, 'size' | 'shape'> & {\n /**\n * Border color when contrast is low\n */\n borderColor?: string;\n\n /**\n * Swatch color\n */\n color: string;\n\n /**\n * Whether the swatch is disabled\n */\n disabled?: boolean;\n\n /**\n * Swatch value\n */\n value: string;\n };\n\n/**\n * State used in rendering ColorSwatch\n */\nexport type ColorSwatchState = ComponentState<ColorSwatchSlots> &\n Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {\n selected: boolean;\n };\n"],"names":[],"mappings":"AAmCA;;CAEC,GACD,WAGI"}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ColorSwatch: function() {
return _ColorSwatch.ColorSwatch;
},
colorSwatchClassNames: function() {
return _useColorSwatchStylesstyles.colorSwatchClassNames;
},
renderColorSwatch_unstable: function() {
return _renderColorSwatch.renderColorSwatch_unstable;
},
swatchCSSVars: function() {
return _useColorSwatchStylesstyles.swatchCSSVars;
},
useColorSwatchStyles_unstable: function() {
return _useColorSwatchStylesstyles.useColorSwatchStyles_unstable;
},
useColorSwatch_unstable: function() {
return _useColorSwatch.useColorSwatch_unstable;
}
});
const _ColorSwatch = require("./ColorSwatch");
const _renderColorSwatch = require("./renderColorSwatch");
const _useColorSwatch = require("./useColorSwatch");
const _useColorSwatchStylesstyles = require("./useColorSwatchStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorSwatch/index.ts"],"sourcesContent":["export { ColorSwatch } from './ColorSwatch';\nexport type { ColorSwatchProps, ColorSwatchSlots, ColorSwatchState } from './ColorSwatch.types';\nexport { renderColorSwatch_unstable } from './renderColorSwatch';\nexport { useColorSwatch_unstable } from './useColorSwatch';\nexport { colorSwatchClassNames, swatchCSSVars, useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';\n"],"names":["ColorSwatch","renderColorSwatch_unstable","useColorSwatch_unstable","colorSwatchClassNames","swatchCSSVars","useColorSwatchStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAIXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yCAAa;;;eAAEC,yDAA6B;;;eADnEH,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACyB,gCAAgC"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderColorSwatch_unstable", {
enumerable: true,
get: function() {
return renderColorSwatch_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderColorSwatch_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.root.children,
state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
state.disabled && state.disabledIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.disabledIcon, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorSwatch/renderColorSwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ColorSwatchState, ColorSwatchSlots } from './ColorSwatch.types';\n\n/**\n * Render the final JSX of ColorSwatch\n */\nexport const renderColorSwatch_unstable = (state: ColorSwatchState): JSXElement => {\n assertSlots<ColorSwatchSlots>(state);\n\n return (\n <state.root>\n {state.root.children}\n {state.icon && <state.icon />}\n {state.disabled && state.disabledIcon && <state.disabledIcon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderColorSwatch_unstable","state","root","children","icon","disabled","disabledIcon"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;YACzBH,MAAMI,QAAQ,IAAIJ,MAAMK,YAAY,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,YAAY,EAAA,CAAA;;;AAGlE,EAAE"}

View File

@@ -0,0 +1,80 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useColorSwatch_unstable", {
enumerable: true,
get: function() {
return useColorSwatch_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _swatchPicker = require("../../contexts/swatchPicker");
const _useColorSwatchStylesstyles = require("./useColorSwatchStyles.styles");
const _reacticons = require("@fluentui/react-icons");
const _reacttheme = require("@fluentui/react-theme");
const useColorSwatch_unstable = (props, ref)=>{
const { borderColor, color, disabled, disabledIcon, icon, value, onClick, size, shape, style, ...rest } = props;
const _size = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.size);
const _shape = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.shape);
const isGrid = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.isGrid);
const requestSelectionChange = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.requestSelectionChange);
const selected = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.selectedValue === value);
const onColorSwatchClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onClick, (event)=>requestSelectionChange(event, {
selectedValue: value,
selectedSwatch: color
})));
const rootVariables = {
[_useColorSwatchStylesstyles.swatchCSSVars.color]: color,
[_useColorSwatchStylesstyles.swatchCSSVars.borderColor]: borderColor !== null && borderColor !== void 0 ? borderColor : _reacttheme.tokens.colorTransparentStroke
};
const role = isGrid ? 'gridcell' : 'radio';
const ariaSelected = isGrid ? {
'aria-selected': selected
} : {
'aria-checked': selected
};
const iconShorthand = _reactutilities.slot.optional(icon, {
elementType: 'span'
});
const disabledIconShorthand = _reactutilities.slot.optional(disabledIcon, {
defaultProps: {
children: /*#__PURE__*/ _react.createElement(_reacticons.ProhibitedFilled, null)
},
renderByDefault: true,
elementType: 'span'
});
return {
components: {
root: 'button',
icon: 'span',
disabledIcon: 'span'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
ref,
role,
...ariaSelected,
onClick: onColorSwatchClick,
type: 'button',
disabled,
...rest,
style: {
...rootVariables,
...style
}
}), {
elementType: 'button'
}),
icon: iconShorthand,
disabledIcon: disabledIconShorthand,
disabled,
size: size !== null && size !== void 0 ? size : _size,
shape: shape !== null && shape !== void 0 ? shape : _shape,
selected,
color,
value
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,329 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
colorSwatchClassNames: function() {
return colorSwatchClassNames;
},
swatchCSSVars: function() {
return swatchCSSVars;
},
useColorSwatchStyles_unstable: function() {
return useColorSwatchStyles_unstable;
}
});
const _react = require("@griffel/react");
const colorSwatchClassNames = {
root: 'fui-ColorSwatch',
icon: 'fui-ColorSwatch__icon',
disabledIcon: 'fui-ColorSwatch__disabledIcon'
};
const swatchCSSVars = {
color: `--fui-SwatchPicker--color`,
borderColor: `--fui-SwatchPicker--borderColor`
};
const { color, borderColor } = swatchCSSVars;
/**
* Styles for the root slot
*/ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("ryw27oi", null, {
r: [
".ryw27oi{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--fui-SwatchPicker--borderColor);background:var(--fui-SwatchPicker--color);overflow:hidden;padding:0;}",
".ryw27oi:hover{cursor:pointer;border:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}",
".ryw27oi:hover:active{border:none;box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}",
".ryw27oi:focus{outline:none;}",
".ryw27oi:focus-visible{outline:none;}",
".ryw27oi[data-fui-focus-visible]{border:none;outline:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}"
],
s: [
"@media (forced-colors: active){.ryw27oi{forced-color-adjust:none;}.ryw27oi:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke2Hover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}.ryw27oi:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}}"
]
});
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
disabled: {
eoavqd: "fphbwmw",
Bvxd0ez: "f1q3txrk",
Be968up: "f10pb1y8"
},
selected: {
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f3bhgqh",
E5pizo: "f8ps3yo",
Bvxd0ez: "f106r15f",
vajtyg: "ft0nc49",
j6ew2k: "f16jq8vy",
Bv9i2bc: "f1wdoq7e"
},
selectedSmall: {
E5pizo: "fxflcoq",
Bvxd0ez: "fha7ylp",
vajtyg: "fb3iqi"
}
}, {
h: [
".fphbwmw:hover{cursor:not-allowed;}",
".f1q3txrk:hover{box-shadow:none;}",
".f106r15f:hover{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokeHover),inset 0 0 0 6px var(--colorStrokeFocus1);}",
".ft0nc49:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokePressed),inset 0 0 0 7px var(--colorStrokeFocus1);}",
".fha7ylp:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorCompoundBrandStrokeHover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}",
".fb3iqi:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}"
],
m: [
[
"@media (forced-colors: active){.f10pb1y8:hover{box-shadow:none;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1wdoq7e{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 5px var(--colorStrokeFocus1);}}",
{
m: "(forced-colors: active)"
}
]
],
d: [
[
".f3bhgqh{border:none;}",
{
p: -2
}
],
".f8ps3yo{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke1),inset 0 0 0 5px var(--colorStrokeFocus1);}",
".f16jq8vy[data-fui-focus-visible]{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus2),inset 0 0 0 5px var(--colorStrokeFocus1);}",
".fxflcoq{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}"
]
});
const useSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
"extra-small": {
a9b677: "f64fuq3",
Bqenvij: "fjamq6b",
Bvxd0ez: "fnzblak",
Bfsrqk8: 0,
B9zn80p: 0,
libdba: 0,
qi15n7: 0,
G6mxvm: 0,
Bpld233: 0,
B2v0cj4: 0,
qv9p00: 0,
Bg6oviu: 0,
Bk6r4ia: 0,
Bckajt6: 0,
Bone85h: 0,
hkxzgu: 0,
b661bw: 0,
kpb45w: 0,
uiygdg: 0,
rljib7: "f18wa7jm",
vajtyg: "faswyoo"
},
small: {
a9b677: "fq4mcun",
Bqenvij: "frvgh55",
Bfsrqk8: 0,
B9zn80p: 0,
libdba: 0,
qi15n7: 0,
G6mxvm: 0,
Bpld233: 0,
B2v0cj4: 0,
qv9p00: 0,
Bg6oviu: 0,
Bk6r4ia: 0,
Bckajt6: 0,
Bone85h: 0,
hkxzgu: 0,
b661bw: 0,
kpb45w: 0,
uiygdg: 0,
rljib7: "f18wa7jm",
vajtyg: "faswyoo"
},
medium: {
a9b677: "f1w9dchk",
Bqenvij: "fxldao9"
},
large: {
a9b677: "f1szoe96",
Bqenvij: "f1d2rq10"
}
}, {
d: [
".f64fuq3{width:20px;}",
".fjamq6b{height:20px;}",
".fq4mcun{width:24px;}",
".frvgh55{height:24px;}",
".f1w9dchk{width:28px;}",
".fxldao9{height:28px;}",
".f1szoe96{width:32px;}",
".f1d2rq10{height:32px;}"
],
h: [
".fnzblak:hover{box-shadow:inset 0 0 0 var(--strokeWidthThin) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus1);}",
[
".f18wa7jm:hover:active{border:none;}",
{
p: -2
}
],
".faswyoo:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}",
[
".f18wa7jm:hover:active{border:none;}",
{
p: -2
}
]
]
});
const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
rounded: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f2krc9w"
},
circular: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f44lkw9",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f1062rbf"
},
square: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1fabniw",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "fj0ryk1"
}
}, {
d: [
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f44lkw9{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
[
".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
[
".f1fabniw{border-radius:var(--borderRadiusNone);}",
{
p: -1
}
],
[
".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}",
{
p: -1
}
]
]
});
const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
disabledIcon: {
sj55zd: "fqpbvvt",
Bhu2qc9: "f14y0k3d"
},
icon: {
qhf8xq: "f1euv43f",
mc9l5x: "f22iagw",
qb2dma: "f7nlbp4"
},
"extra-small": {
Be2twd7: "f4ybsrx"
},
small: {
Be2twd7: "f4ybsrx"
},
medium: {
Be2twd7: "fe5j1ua"
},
large: {
Be2twd7: "f1rt2boy"
}
}, {
d: [
".fqpbvvt{color:var(--colorNeutralForegroundInverted);}",
".f14y0k3d{filter:drop-shadow(0 1px 1px rgb(0 0 0 / 1));}",
".f1euv43f{position:absolute;}",
".f22iagw{display:flex;}",
".f7nlbp4{align-self:center;}",
".f4ybsrx{font-size:16px;}",
".fe5j1ua{font-size:20px;}",
".f1rt2boy{font-size:24px;}"
]
});
const useColorSwatchStyles_unstable = (state)=>{
'use no memo';
const { size = 'medium', shape = 'square' } = state;
const resetStyles = useResetStyles();
const styles = useStyles();
const sizeStyles = useSizeStyles();
const shapeStyles = useShapeStyles();
const iconStyles = useIconStyles();
const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';
state.root.className = (0, _react.mergeClasses)(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, state.disabled && styles.disabled, state.root.className);
if (state.disabled && state.disabledIcon) {
state.disabledIcon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);
}
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,206 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
colorSwatchClassNames: function() {
return colorSwatchClassNames;
},
swatchCSSVars: function() {
return swatchCSSVars;
},
useColorSwatchStyles_unstable: function() {
return useColorSwatchStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _reacttabster = require("@fluentui/react-tabster");
const colorSwatchClassNames = {
root: 'fui-ColorSwatch',
icon: 'fui-ColorSwatch__icon',
disabledIcon: 'fui-ColorSwatch__disabledIcon'
};
const swatchCSSVars = {
color: `--fui-SwatchPicker--color`,
borderColor: `--fui-SwatchPicker--borderColor`
};
const { color, borderColor } = swatchCSSVars;
/**
* Styles for the root slot
*/ const useResetStyles = (0, _react.makeResetStyles)({
display: 'inline-flex',
flexShrink: 0,
alignItems: 'center',
justifyContent: 'center',
boxSizing: 'border-box',
border: `1px solid var(${borderColor})`,
background: `var(${color})`,
overflow: 'hidden',
padding: '0',
':hover': {
cursor: 'pointer',
border: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
},
':hover:active': {
border: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
},
':focus': {
outline: 'none'
},
':focus-visible': {
outline: 'none'
},
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
border: 'none',
outline: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorStrokeFocus2}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
}),
// High contrast styles
'@media (forced-colors: active)': {
forcedColorAdjust: 'none',
':hover': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke2Hover}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
},
':hover:active': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
}
}
});
const useStyles = (0, _react.makeStyles)({
disabled: {
':hover': {
cursor: 'not-allowed',
boxShadow: 'none'
},
'@media (forced-colors: active)': {
':hover': {
boxShadow: 'none'
}
}
},
selected: {
border: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`,
':hover': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${_reacttheme.tokens.colorStrokeFocus1}`
},
':hover:active': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${_reacttheme.tokens.colorStrokeFocus1}`
},
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus2}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`
}),
'@media (forced-colors: active)': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`
}
},
selectedSmall: {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`,
':hover': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
},
':hover:active': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
}
}
});
const useSizeStyles = (0, _react.makeStyles)({
'extra-small': {
width: '20px',
height: '20px',
':hover': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorStrokeFocus1}`
},
':hover:active': {
border: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
}
},
small: {
width: '24px',
height: '24px',
':hover:active': {
border: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
}
},
medium: {
width: '28px',
height: '28px'
},
large: {
width: '32px',
height: '32px'
}
});
const useShapeStyles = (0, _react.makeStyles)({
rounded: {
borderRadius: _reacttheme.tokens.borderRadiusMedium,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusMedium
})
},
circular: {
borderRadius: _reacttheme.tokens.borderRadiusCircular,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusCircular
})
},
square: {
borderRadius: _reacttheme.tokens.borderRadiusNone,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusNone
})
}
});
const useIconStyles = (0, _react.makeStyles)({
disabledIcon: {
color: _reacttheme.tokens.colorNeutralForegroundInverted,
filter: 'drop-shadow(0 1px 1px rgb(0 0 0 / 1))'
},
icon: {
position: 'absolute',
display: 'flex',
alignSelf: 'center'
},
'extra-small': {
fontSize: '16px'
},
small: {
fontSize: '16px'
},
medium: {
fontSize: '20px'
},
large: {
fontSize: '24px'
}
});
const useColorSwatchStyles_unstable = (state)=>{
'use no memo';
const { size = 'medium', shape = 'square' } = state;
const resetStyles = useResetStyles();
const styles = useStyles();
const sizeStyles = useSizeStyles();
const shapeStyles = useShapeStyles();
const iconStyles = useIconStyles();
const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';
state.root.className = (0, _react.mergeClasses)(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, state.disabled && styles.disabled, state.root.className);
if (state.disabled && state.disabledIcon) {
state.disabledIcon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);
}
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "EmptySwatch", {
enumerable: true,
get: function() {
return EmptySwatch;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useEmptySwatch = require("./useEmptySwatch");
const _renderEmptySwatch = require("./renderEmptySwatch");
const _useEmptySwatchStylesstyles = require("./useEmptySwatchStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const EmptySwatch = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useEmptySwatch.useEmptySwatch_unstable)(props, ref);
(0, _useEmptySwatchStylesstyles.useEmptySwatchStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useEmptySwatchStyles_unstable')(state);
return (0, _renderEmptySwatch.renderEmptySwatch_unstable)(state);
});
EmptySwatch.displayName = 'EmptySwatch';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useEmptySwatch_unstable } from './useEmptySwatch';\nimport { renderEmptySwatch_unstable } from './renderEmptySwatch';\nimport { useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';\nimport type { EmptySwatchProps } from './EmptySwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * EmptySwatch component is used for adding new color swatches.\n */\nexport const EmptySwatch: ForwardRefComponent<EmptySwatchProps> = React.forwardRef((props, ref) => {\n const state = useEmptySwatch_unstable(props, ref);\n\n useEmptySwatchStyles_unstable(state);\n useCustomStyleHook_unstable('useEmptySwatchStyles_unstable')(state);\n return renderEmptySwatch_unstable(state);\n});\n\nEmptySwatch.displayName = 'EmptySwatch';\n"],"names":["React","useEmptySwatch_unstable","renderEmptySwatch_unstable","useEmptySwatchStyles_unstable","useCustomStyleHook_unstable","EmptySwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAC7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering EmptySwatch
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type EmptySwatchSlots = {\n root: Slot<'button'>;\n};\n\n/**\n * EmptySwatch Props\n */\nexport type EmptySwatchProps = ComponentProps<EmptySwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'>;\n\n/**\n * State used in rendering EmptySwatch\n */\nexport type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<EmptySwatchProps, 'size' | 'shape'>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAA2G"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
EmptySwatch: function() {
return _EmptySwatch.EmptySwatch;
},
emptySwatchClassNames: function() {
return _useEmptySwatchStylesstyles.emptySwatchClassNames;
},
renderEmptySwatch_unstable: function() {
return _renderEmptySwatch.renderEmptySwatch_unstable;
},
useEmptySwatchStyles_unstable: function() {
return _useEmptySwatchStylesstyles.useEmptySwatchStyles_unstable;
},
useEmptySwatch_unstable: function() {
return _useEmptySwatch.useEmptySwatch_unstable;
}
});
const _EmptySwatch = require("./EmptySwatch");
const _renderEmptySwatch = require("./renderEmptySwatch");
const _useEmptySwatch = require("./useEmptySwatch");
const _useEmptySwatchStylesstyles = require("./useEmptySwatchStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/EmptySwatch/index.ts"],"sourcesContent":["export { EmptySwatch } from './EmptySwatch';\nexport type { EmptySwatchProps, EmptySwatchSlots, EmptySwatchState } from './EmptySwatch.types';\nexport { renderEmptySwatch_unstable } from './renderEmptySwatch';\nexport { useEmptySwatch_unstable } from './useEmptySwatch';\nexport { emptySwatchClassNames, useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';\n"],"names":["EmptySwatch","renderEmptySwatch_unstable","useEmptySwatch_unstable","emptySwatchClassNames","useEmptySwatchStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAIXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}

View File

@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderEmptySwatch_unstable", {
enumerable: true,
get: function() {
return renderEmptySwatch_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderEmptySwatch_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/EmptySwatch/renderEmptySwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { EmptySwatchState, EmptySwatchSlots } from './EmptySwatch.types';\n\n/**\n * Render the final JSX of EmptySwatch\n */\nexport const renderEmptySwatch_unstable = (state: EmptySwatchState): JSXElement => {\n assertSlots<EmptySwatchSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderEmptySwatch_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,6BAA6B,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,40 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useEmptySwatch_unstable", {
enumerable: true,
get: function() {
return useEmptySwatch_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _swatchPicker = require("../../contexts/swatchPicker");
const useEmptySwatch_unstable = (props, ref)=>{
const { size, shape, ...rest } = props;
const _size = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.size);
const _shape = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.shape);
const isGrid = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.isGrid);
const role = isGrid ? 'gridcell' : 'radio';
const a11yProps = isGrid ? {} : {
'aria-checked': false
};
return {
components: {
root: 'button'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
ref,
role,
...a11yProps,
...rest
}), {
elementType: 'button'
}),
size: size !== null && size !== void 0 ? size : _size,
shape: shape !== null && shape !== void 0 ? shape : _shape
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { EmptySwatchProps, EmptySwatchState } from './EmptySwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render EmptySwatch.\n *\n * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,\n * before being passed to renderEmptySwatch_unstable.\n *\n * @param props - props from this instance of EmptySwatch\n * @param ref - reference to root HTMLDivElement of EmptySwatch\n */\nexport const useEmptySwatch_unstable = (\n props: EmptySwatchProps,\n ref: React.Ref<HTMLButtonElement>,\n): EmptySwatchState => {\n const { size, shape, ...rest } = props;\n const _size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n const _shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n const role = isGrid ? 'gridcell' : 'radio';\n const a11yProps = isGrid ? {} : { 'aria-checked': false };\n return {\n components: {\n root: 'button',\n },\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref,\n role,\n ...a11yProps,\n ...rest,\n }),\n { elementType: 'button' },\n ),\n size: size ?? _size,\n shape: shape ?? _shape,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useEmptySwatch_unstable","props","ref","size","shape","rest","_size","ctx","_shape","isGrid","role","a11yProps","components","root","always","elementType"],"mappings":"AAAA;;;;;+BAgBaI;;;;;;;iEAdU,QAAQ;gCACgB,4BAA4B;8BAEtB,8BAA8B;AAW5E,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IACjC,MAAMK,YAAQP,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIJ,IAAI;IAClE,MAAMK,aAAST,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIH,KAAK;IACpE,MAAMK,aAASV,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,OAAOD,SAAS,aAAa;IACnC,MAAME,YAAYF,SAAS,CAAC,IAAI;QAAE,gBAAgB;IAAM;IACxD,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,oBAAAA,CAAKgB,MAAM,KACfjB,wCAAAA,EAAyB,UAAU;YACjCK;YACAQ;YACA,GAAGC,SAAS;YACZ,GAAGN,IAAI;QACT,IACA;YAAEU,aAAa;QAAS;QAE1BZ,MAAMA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,OAAQG;QACdF,OAAOA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAASI;IAClB;AACF,EAAE"}

View File

@@ -0,0 +1,145 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
emptySwatchClassNames: function() {
return emptySwatchClassNames;
},
useEmptySwatchStyles_unstable: function() {
return useEmptySwatchStyles_unstable;
}
});
const _react = require("@griffel/react");
const emptySwatchClassNames = {
root: 'fui-EmptySwatch'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1top892", null, [
".r1top892{background-color:var(--colorTransparentBackground);border:1px dashed var(--colorNeutralForeground4);}"
]);
const useSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
"extra-small": {
a9b677: "f64fuq3",
Bqenvij: "fjamq6b"
},
small: {
a9b677: "fq4mcun",
Bqenvij: "frvgh55"
},
medium: {
a9b677: "f1w9dchk",
Bqenvij: "fxldao9"
},
large: {
a9b677: "f1szoe96",
Bqenvij: "f1d2rq10"
}
}, {
d: [
".f64fuq3{width:20px;}",
".fjamq6b{height:20px;}",
".fq4mcun{width:24px;}",
".frvgh55{height:24px;}",
".f1w9dchk{width:28px;}",
".fxldao9{height:28px;}",
".f1szoe96{width:32px;}",
".f1d2rq10{height:32px;}"
]
});
const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
rounded: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f2krc9w"
},
circular: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f44lkw9",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f1062rbf"
},
square: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1fabniw",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "fj0ryk1"
}
}, {
d: [
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f44lkw9{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
[
".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
[
".f1fabniw{border-radius:var(--borderRadiusNone);}",
{
p: -1
}
],
[
".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}",
{
p: -1
}
]
]
});
const useEmptySwatchStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const sizeStyles = useSizeStyles();
const shapeStyles = useShapeStyles();
var _state_size;
const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';
var _state_shape;
state.root.className = (0, _react.mergeClasses)(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const emptySwatchClassNames = {\n root: 'fui-EmptySwatch'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n border: `1px dashed ${tokens.colorNeutralForeground4}`\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px'\n },\n small: {\n width: '24px',\n height: '24px'\n },\n medium: {\n width: '28px',\n height: '28px'\n },\n large: {\n width: '32px',\n height: '32px'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium\n })\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular\n })\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusNone\n })\n }\n});\n/**\n * Apply styling to the EmptySwatch slots based on the state\n */ export const useEmptySwatchStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n var _state_size;\n const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';\n var _state_shape;\n state.root.className = mergeClasses(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","useSizeStyles","a9b677","Bqenvij","small","medium","large","d","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","p","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","_state_size","size","_state_shape","className","shape"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,qBAAqB;;;IAiDjByB,6BAA6B;;;;uBApDY,gBAAgB;AAGnE,8BAA8B;IACjCxB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,oBAAA,EAAA,YAAA,MAAA;IAAA;CAGrB,CAAC;AACF,MAAMQ,aAAa,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAA,eAAA;QAAAQ,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAF,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAG,KAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAI,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAiBrB,CAAC;AACF,MAAMC,cAAc,GAAA,WAAA,OAAGd,eAAA,EAAA;IAAAe,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAV,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,MAAA,EAAA;QAAAX,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAZ,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAe,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAmBtB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGzB,SAAS,CAAC,CAAC;IAC1B,MAAM0B,UAAU,GAAGzB,aAAa,CAAC,CAAC;IAClC,MAAM0B,WAAW,GAAGnB,cAAc,CAAC,CAAC;IACpC,IAAIoB,WAAW;IACf,MAAMC,IAAI,GAAG,CAACD,WAAW,GAAGJ,KAAK,CAACK,IAAAA,AAAI,MAAM,IAAI,IAAID,WAAW,KAAK,KAAK,CAAC,GAAGA,WAAW,GAAG,QAAQ;IACnG,IAAIE,YAAY;IAChBN,KAAK,CAACzB,IAAI,CAACgC,SAAS,OAAGpC,mBAAY,EAACG,qBAAqB,CAACC,IAAI,EAAE0B,MAAM,EAAEC,UAAU,CAACG,IAAI,CAAC,EAAEF,WAAW,CAAC,CAACG,YAAY,GAAGN,KAAK,CAACQ,KAAAA,AAAK,MAAM,IAAI,IAAIF,YAAY,KAAK,KAAK,CAAC,GAAGA,YAAY,GAAG,QAAQ,CAAC,EAAEN,KAAK,CAACzB,IAAI,CAACgC,SAAS,CAAC;IACxN,OAAOP,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,80 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
emptySwatchClassNames: function() {
return emptySwatchClassNames;
},
useEmptySwatchStyles_unstable: function() {
return useEmptySwatchStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _reacttabster = require("@fluentui/react-tabster");
const emptySwatchClassNames = {
root: 'fui-EmptySwatch'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeResetStyles)({
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
border: `1px dashed ${_reacttheme.tokens.colorNeutralForeground4}`
});
const useSizeStyles = (0, _react.makeStyles)({
'extra-small': {
width: '20px',
height: '20px'
},
small: {
width: '24px',
height: '24px'
},
medium: {
width: '28px',
height: '28px'
},
large: {
width: '32px',
height: '32px'
}
});
const useShapeStyles = (0, _react.makeStyles)({
rounded: {
borderRadius: _reacttheme.tokens.borderRadiusMedium,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusMedium
})
},
circular: {
borderRadius: _reacttheme.tokens.borderRadiusCircular,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusCircular
})
},
square: {
borderRadius: _reacttheme.tokens.borderRadiusNone,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusNone
})
}
});
const useEmptySwatchStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const sizeStyles = useSizeStyles();
const shapeStyles = useShapeStyles();
var _state_size;
const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';
var _state_shape;
state.root.className = (0, _react.mergeClasses)(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { EmptySwatchSlots, EmptySwatchState } from './EmptySwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const emptySwatchClassNames: SlotClassNames<EmptySwatchSlots> = {\n root: 'fui-EmptySwatch',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n border: `1px dashed ${tokens.colorNeutralForeground4}`,\n});\n\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px',\n },\n small: {\n width: '24px',\n height: '24px',\n },\n medium: {\n width: '28px',\n height: '28px',\n },\n large: {\n width: '32px',\n height: '32px',\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusMedium }),\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n },\n});\n\n/**\n * Apply styling to the EmptySwatch slots based on the state\n */\nexport const useEmptySwatchStyles_unstable = (state: EmptySwatchState): EmptySwatchState => {\n 'use no memo';\n\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n\n const size = state.size ?? 'medium';\n\n state.root.className = mergeClasses(\n emptySwatchClassNames.root,\n styles,\n sizeStyles[size],\n shapeStyles[state.shape ?? 'square'],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","backgroundColor","colorTransparentBackground","border","colorNeutralForeground4","useSizeStyles","width","height","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","size","className","shape"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,qBAAAA;;;iCAiDAqB;eAAAA;;;uBAvD6C,iBAAiB;4BAGpD,wBAAwB;8BACC,0BAA0B;AAEnE,8BAAgE;IACrEpB,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,sBAAAA,EAAgB;IAChCQ,iBAAiBL,kBAAAA,CAAOM,0BAA0B;IAClDC,QAAQ,CAAC,WAAW,EAAEP,kBAAAA,CAAOQ,uBAAuB,EAAE;AACxD;AAEA,MAAMC,oBAAgBX,iBAAAA,EAAW;IAC/B,eAAe;QACbY,OAAO;QACPC,QAAQ;IACV;IACAC,OAAO;QACLF,OAAO;QACPC,QAAQ;IACV;IACAE,QAAQ;QACNH,OAAO;QACPC,QAAQ;IACV;IACAG,OAAO;QACLJ,OAAO;QACPC,QAAQ;IACV;AACF;AAEA,MAAMI,qBAAiBjB,iBAAAA,EAAW;IAChCkB,SAAS;QACPC,cAAcjB,kBAAAA,CAAOkB,kBAAkB;QACvC,OAAGjB,6CAAAA,EAAgC;YAAEgB,cAAcjB,kBAAAA,CAAOkB,kBAAkB;QAAC,EAAE;IACjF;IACAC,UAAU;QACRF,cAAcjB,kBAAAA,CAAOoB,oBAAoB;QACzC,OAAGnB,6CAAAA,EAAgC;YAAEgB,cAAcjB,kBAAAA,CAAOoB,oBAAoB;QAAC,EAAE;IACnF;IACAC,QAAQ;QACNJ,cAAcjB,kBAAAA,CAAOsB,gBAAgB;QACrC,OAAGrB,6CAAAA,EAAgC;YAAEgB,cAAcjB,kBAAAA,CAAOsB,gBAAgB;QAAC,EAAE;IAC/E;AACF;AAKO,sCAAsC,CAACE;IAC5C;IAEA,MAAMC,SAASrB;IACf,MAAMsB,aAAajB;IACnB,MAAMkB,cAAcZ;QAEPS;IAAb,MAAMI,OAAOJ,CAAAA,cAAAA,MAAMI,IAAAA,AAAI,MAAA,QAAVJ,gBAAAA,KAAAA,IAAAA,cAAc;QAMbA;IAJdA,MAAMrB,IAAI,CAAC0B,SAAS,OAAG9B,mBAAAA,EACrBG,sBAAsBC,IAAI,EAC1BsB,QACAC,UAAU,CAACE,KAAK,EAChBD,WAAW,CAACH,CAAAA,eAAAA,MAAMM,KAAAA,AAAK,MAAA,QAAXN,iBAAAA,KAAAA,IAAAA,eAAe,SAAS,EACpCA,MAAMrB,IAAI,CAAC0B,SAAS;IAGtB,OAAOL;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ImageSwatch", {
enumerable: true,
get: function() {
return ImageSwatch;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useImageSwatch = require("./useImageSwatch");
const _renderImageSwatch = require("./renderImageSwatch");
const _useImageSwatchStylesstyles = require("./useImageSwatchStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const ImageSwatch = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useImageSwatch.useImageSwatch_unstable)(props, ref);
(0, _useImageSwatchStylesstyles.useImageSwatchStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useImageSwatchStyles_unstable')(state);
return (0, _renderImageSwatch.renderImageSwatch_unstable)(state);
});
ImageSwatch.displayName = 'ImageSwatch';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useImageSwatch_unstable } from './useImageSwatch';\nimport { renderImageSwatch_unstable } from './renderImageSwatch';\nimport { useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';\nimport type { ImageSwatchProps } from './ImageSwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ImageSwatch component is used to render an images, patterns and textures.\n */\nexport const ImageSwatch: ForwardRefComponent<ImageSwatchProps> = React.forwardRef((props, ref) => {\n const state = useImageSwatch_unstable(props, ref);\n\n useImageSwatchStyles_unstable(state);\n useCustomStyleHook_unstable('useImageSwatchStyles_unstable')(state);\n\n return renderImageSwatch_unstable(state);\n});\n\nImageSwatch.displayName = 'ImageSwatch';\n"],"names":["React","useImageSwatch_unstable","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useCustomStyleHook_unstable","ImageSwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering ImageSwatch
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ImageSwatchSlots = {\n root: Slot<'button'>;\n};\n\n/**\n * ImageSwatch Props\n */\nexport type ImageSwatchProps = ComponentProps<ImageSwatchSlots> &\n Pick<SwatchPickerProps, 'size' | 'shape'> & {\n /**\n * Swatch color\n */\n src: string;\n\n /**\n * Swatch value\n */\n value: string;\n };\n\n/**\n * State used in rendering ImageSwatch\n */\nexport type ImageSwatchState = ComponentState<ImageSwatchSlots> &\n Pick<ImageSwatchProps, 'color' | 'size' | 'shape' | 'value'> & {\n selected: boolean;\n };\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAGI"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ImageSwatch: function() {
return _ImageSwatch.ImageSwatch;
},
imageSwatchClassNames: function() {
return _useImageSwatchStylesstyles.imageSwatchClassNames;
},
renderImageSwatch_unstable: function() {
return _renderImageSwatch.renderImageSwatch_unstable;
},
useImageSwatchStyles_unstable: function() {
return _useImageSwatchStylesstyles.useImageSwatchStyles_unstable;
},
useImageSwatch_unstable: function() {
return _useImageSwatch.useImageSwatch_unstable;
}
});
const _ImageSwatch = require("./ImageSwatch");
const _renderImageSwatch = require("./renderImageSwatch");
const _useImageSwatch = require("./useImageSwatch");
const _useImageSwatchStylesstyles = require("./useImageSwatchStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ImageSwatch/index.ts"],"sourcesContent":["export { ImageSwatch } from './ImageSwatch';\nexport type { ImageSwatchProps, ImageSwatchSlots, ImageSwatchState } from './ImageSwatch.types';\nexport { renderImageSwatch_unstable } from './renderImageSwatch';\nexport { useImageSwatch_unstable } from './useImageSwatch';\nexport { imageSwatchClassNames, useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';\n"],"names":["ImageSwatch","renderImageSwatch_unstable","useImageSwatch_unstable","imageSwatchClassNames","useImageSwatchStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAIXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}

View File

@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderImageSwatch_unstable", {
enumerable: true,
get: function() {
return renderImageSwatch_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderImageSwatch_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ImageSwatch/renderImageSwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ImageSwatchState, ImageSwatchSlots } from './ImageSwatch.types';\n\n/**\n * Render the final JSX of ImageSwatch\n */\nexport const renderImageSwatch_unstable = (state: ImageSwatchState): JSXElement => {\n assertSlots<ImageSwatchSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderImageSwatch_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,6BAA6B,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,55 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useImageSwatch_unstable", {
enumerable: true,
get: function() {
return useImageSwatch_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _swatchPicker = require("../../contexts/swatchPicker");
const useImageSwatch_unstable = (props, ref)=>{
const { src, value, onClick, style, ...rest } = props;
const size = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.size);
const shape = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.shape);
const isGrid = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.isGrid);
const requestSelectionChange = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.requestSelectionChange);
const selected = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.selectedValue === value);
const role = isGrid ? 'gridcell' : 'radio';
const ariaSelected = isGrid ? {
'aria-selected': selected
} : {
'aria-checked': selected
};
const onImageSwatchClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onClick, (event)=>requestSelectionChange(event, {
selectedValue: value,
selectedSwatch: src
})));
return {
components: {
root: 'button'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
ref,
role,
...ariaSelected,
onClick: onImageSwatchClick,
...rest,
style: {
backgroundImage: `url(${src})`,
...style
}
}), {
elementType: 'button'
}),
value,
selected,
size,
shape
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ImageSwatch/useImageSwatch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { ImageSwatchProps, ImageSwatchState } from './ImageSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render ImageSwatch.\n *\n * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,\n * before being passed to renderImageSwatch_unstable.\n *\n * @param props - props from this instance of ImageSwatch\n * @param ref - reference to root HTMLDivElement of ImageSwatch\n */\nexport const useImageSwatch_unstable = (\n props: ImageSwatchProps,\n ref: React.Ref<HTMLButtonElement>,\n): ImageSwatchState => {\n const { src, value, onClick, style, ...rest } = props;\n const size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n const shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n const requestSelectionChange = useSwatchPickerContextValue_unstable(ctx => ctx.requestSelectionChange);\n const selected = useSwatchPickerContextValue_unstable(ctx => ctx.selectedValue === value);\n\n const role = isGrid ? 'gridcell' : 'radio';\n const ariaSelected = isGrid\n ? {\n 'aria-selected': selected,\n }\n : { 'aria-checked': selected };\n\n const onImageSwatchClick = useEventCallback(\n mergeCallbacks(onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n requestSelectionChange(event, {\n selectedValue: value,\n selectedSwatch: src,\n }),\n ),\n );\n\n return {\n components: {\n root: 'button',\n },\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref,\n role,\n ...ariaSelected,\n onClick: onImageSwatchClick,\n ...rest,\n style: {\n backgroundImage: `url(${src})`,\n ...style,\n },\n }),\n { elementType: 'button' },\n ),\n value,\n selected,\n size,\n shape,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","mergeCallbacks","useSwatchPickerContextValue_unstable","useImageSwatch_unstable","props","ref","src","value","onClick","style","rest","size","ctx","shape","isGrid","requestSelectionChange","selected","selectedValue","role","ariaSelected","onImageSwatchClick","event","selectedSwatch","components","root","always","backgroundImage","elementType"],"mappings":"AAAA;;;;;+BAgBaM;;;;;;;iEAdU,QAAQ;gCACkD,4BAA4B;8BAExD,8BAA8B;AAW5E,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,WAAOT,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAID,IAAI;IACjE,MAAME,YAAQX,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIC,KAAK;IACnE,MAAMC,aAASZ,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,6BAAyBb,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,eAAWd,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIK,aAAa,KAAKV;IAEnF,MAAMW,OAAOJ,SAAS,aAAa;IACnC,MAAMK,eAAeL,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,yBAAqBpB,gCAAAA,MACzBC,8BAAAA,EAAeO,SAAS,CAACa,QACvBN,uBAAuBM,OAAO;YAC5BJ,eAAeV;YACfe,gBAAgBhB;QAClB;IAIJ,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,oBAAAA,CAAK0B,MAAM,KACf3B,wCAAAA,EAAyB,UAAU;YACjCO;YACAa;YACA,GAAGC,YAAY;YACfX,SAASY;YACT,GAAGV,IAAI;YACPD,OAAO;gBACLiB,iBAAiB,CAAC,IAAI,EAAEpB,IAAI,CAAC,CAAC;gBAC9B,GAAGG,KAAK;YACV;QACF,IACA;YAAEkB,aAAa;QAAS;QAE1BpB;QACAS;QACAL;QACAE;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,203 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
imageSwatchClassNames: function() {
return imageSwatchClassNames;
},
useImageSwatchStyles_unstable: function() {
return useImageSwatchStyles_unstable;
}
});
const _react = require("@griffel/react");
const imageSwatchClassNames = {
root: 'fui-ImageSwatch'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r18b5q7m", null, {
r: [
".r18b5q7m{display:inline-flex;box-sizing:border-box;border:1px solid var(--colorTransparentStroke);background-size:cover;background-repeat:no-repeat;padding:0;}",
".r18b5q7m:hover{cursor:pointer;border:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}",
".r18b5q7m:hover:active{border:none;box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}",
".r18b5q7m:focus{outline:none;}",
".r18b5q7m:focus-visible{outline:none;}",
".r18b5q7m[data-fui-focus-visible]{border:none;outline:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}"
],
s: [
"@media (forced-colors: active){.r18b5q7m{forced-color-adjust:none;}.r18b5q7m:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke2Hover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}.r18b5q7m:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}}"
]
});
const useStylesSelected = /*#__PURE__*/ (0, _react.__styles)({
selected: {
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f3bhgqh",
E5pizo: "f8ps3yo",
Bvxd0ez: "f106r15f",
vajtyg: "ft0nc49",
j6ew2k: "f16jq8vy",
Bv9i2bc: "f1wdoq7e"
}
}, {
d: [
[
".f3bhgqh{border:none;}",
{
p: -2
}
],
".f8ps3yo{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke1),inset 0 0 0 5px var(--colorStrokeFocus1);}",
".f16jq8vy[data-fui-focus-visible]{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus2),inset 0 0 0 5px var(--colorStrokeFocus1);}"
],
h: [
".f106r15f:hover{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokeHover),inset 0 0 0 6px var(--colorStrokeFocus1);}",
".ft0nc49:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokePressed),inset 0 0 0 7px var(--colorStrokeFocus1);}"
],
m: [
[
"@media (forced-colors: active){.f1wdoq7e{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 5px var(--colorStrokeFocus1);}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
"extra-small": {
a9b677: "f64fuq3",
Bqenvij: "fjamq6b"
},
small: {
a9b677: "fq4mcun",
Bqenvij: "frvgh55"
},
medium: {
a9b677: "f1w9dchk",
Bqenvij: "fxldao9"
},
large: {
a9b677: "f1szoe96",
Bqenvij: "f1d2rq10"
}
}, {
d: [
".f64fuq3{width:20px;}",
".fjamq6b{height:20px;}",
".fq4mcun{width:24px;}",
".frvgh55{height:24px;}",
".f1w9dchk{width:28px;}",
".fxldao9{height:28px;}",
".f1szoe96{width:32px;}",
".f1d2rq10{height:32px;}"
]
});
const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
rounded: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f2krc9w"
},
circular: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f44lkw9",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f1062rbf"
},
square: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1fabniw",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "fj0ryk1"
}
}, {
d: [
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f44lkw9{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
[
".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
[
".f1fabniw{border-radius:var(--borderRadiusNone);}",
{
p: -1
}
],
[
".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}",
{
p: -1
}
]
]
});
const useImageSwatchStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const selectedStyles = useStylesSelected();
const sizeStyles = useSizeStyles();
const shapeStyles = useShapeStyles();
const { size = 'medium', shape = 'square' } = state;
state.root.className = (0, _react.mergeClasses)(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,131 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
imageSwatchClassNames: function() {
return imageSwatchClassNames;
},
useImageSwatchStyles_unstable: function() {
return useImageSwatchStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _reacttabster = require("@fluentui/react-tabster");
const imageSwatchClassNames = {
root: 'fui-ImageSwatch'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeResetStyles)({
display: 'inline-flex',
boxSizing: 'border-box',
border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
padding: '0',
':hover': {
cursor: 'pointer',
border: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
},
':hover:active': {
border: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
},
':focus': {
outline: 'none'
},
':focus-visible': {
outline: 'none'
},
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
border: 'none',
outline: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorStrokeFocus2}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
}),
// High contrast styles
'@media (forced-colors: active)': {
forcedColorAdjust: 'none',
':hover': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke2Hover}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
},
':hover:active': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
}
}
});
const useStylesSelected = (0, _react.makeStyles)({
selected: {
border: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`,
':hover': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${_reacttheme.tokens.colorStrokeFocus1}`
},
':hover:active': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${_reacttheme.tokens.colorStrokeFocus1}`
},
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus2}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`
}),
'@media (forced-colors: active)': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`
}
}
});
const useSizeStyles = (0, _react.makeStyles)({
'extra-small': {
width: '20px',
height: '20px'
},
small: {
width: '24px',
height: '24px'
},
medium: {
width: '28px',
height: '28px'
},
large: {
width: '32px',
height: '32px'
}
});
const useShapeStyles = (0, _react.makeStyles)({
rounded: {
borderRadius: _reacttheme.tokens.borderRadiusMedium,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusMedium
})
},
circular: {
borderRadius: _reacttheme.tokens.borderRadiusCircular,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusCircular
})
},
square: {
borderRadius: _reacttheme.tokens.borderRadiusNone,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusNone
})
}
});
const useImageSwatchStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const selectedStyles = useStylesSelected();
const sizeStyles = useSizeStyles();
const shapeStyles = useShapeStyles();
const { size = 'medium', shape = 'square' } = state;
state.root.className = (0, _react.mergeClasses)(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "SwatchPicker", {
enumerable: true,
get: function() {
return SwatchPicker;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useSwatchPicker = require("./useSwatchPicker");
const _renderSwatchPicker = require("./renderSwatchPicker");
const _useSwatchPickerStylesstyles = require("./useSwatchPickerStyles.styles");
const _swatchPicker = require("../../contexts/swatchPicker");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const SwatchPicker = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useSwatchPicker.useSwatchPicker_unstable)(props, ref);
const contextValues = (0, _swatchPicker.useSwatchPickerContextValues)(state);
(0, _useSwatchPickerStylesstyles.useSwatchPickerStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSwatchPickerStyles_unstable')(state);
return (0, _renderSwatchPicker.renderSwatchPicker_unstable)(state, contextValues);
});
SwatchPicker.displayName = 'SwatchPicker';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPicker_unstable } from './useSwatchPicker';\nimport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nimport { useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\nimport type { SwatchPickerProps } from './SwatchPicker.types';\nimport { useSwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPicker component - TODO: add more docs\n */\nexport const SwatchPicker: ForwardRefComponent<SwatchPickerProps> = React.forwardRef((props, ref) => {\n const state = useSwatchPicker_unstable(props, ref);\n const contextValues = useSwatchPickerContextValues(state);\n\n useSwatchPickerStyles_unstable(state);\n useCustomStyleHook_unstable('useSwatchPickerStyles_unstable')(state);\n\n return renderSwatchPicker_unstable(state, contextValues);\n});\n\nSwatchPicker.displayName = 'SwatchPicker';\n"],"names":["React","useSwatchPicker_unstable","renderSwatchPicker_unstable","useSwatchPickerStyles_unstable","useSwatchPickerContextValues","useCustomStyleHook_unstable","SwatchPicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCAEU,oBAAoB;oCACjB,uBAAuB;6CACpB,iCAAiC;8BAEnC,8BAA8B;qCAC/B,kCAAkC;AAKvE,MAAMM,eAAAA,WAAAA,GAAuDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQT,yCAAAA,EAAyBO,OAAOC;IAC9C,MAAME,oBAAgBP,0CAAAA,EAA6BM;QAEnDP,2DAAAA,EAA+BO;QAC/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOR,+CAAAA,EAA4BQ,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport { SwatchPickerContextValue } from '../../contexts/swatchPicker';\n\nexport type SwatchPickerSlots = {\n root: Slot<'div'>;\n};\n\nexport type SwatchPickerOnSelectEventHandler = EventHandler<SwatchPickerOnSelectionChangeData>;\n\nexport type SwatchPickerOnSelectionChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement>> & {\n selectedValue: string;\n selectedSwatch: string;\n};\n\n/**\n * SwatchPicker Props\n */\nexport type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {\n /**\n * Default selected value\n */\n defaultSelectedValue?: string;\n\n /**\n * Sets the focus behavior for the SwatchPicker.\n *\n * `arrow`\n * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Arrow key.\n *\n * `tab`\n * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Tab key.\n *\n * @default 'arrow'\n */\n focusMode?: 'arrow' | 'tab';\n\n /**\n * Whether SwatchPicker is row or grid\n */\n layout?: 'row' | 'grid';\n\n /**\n * Triggers a callback when the value has been changed\n */\n onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;\n\n /**\n * Controlled selected value\n */\n selectedValue?: string;\n\n /**\n * Swatch size\n * @defaultvalue 'medium'\n */\n size?: 'extra-small' | 'small' | 'medium' | 'large';\n\n /**\n * Swatch shape\n * @defaultvalue 'square'\n */\n shape?: 'rounded' | 'square' | 'circular';\n\n /**\n * Spacing between swatches\n * @defaultvalue 'medium'\n */\n spacing?: 'small' | 'medium';\n};\n\n/**\n * State used in rendering SwatchPicker\n */\nexport type SwatchPickerState = ComponentState<SwatchPickerSlots> &\n SwatchPickerContextValue &\n Pick<SwatchPickerProps, 'layout' | 'size' | 'shape' | 'spacing'> & {\n isGrid: boolean;\n };\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
SwatchPicker: function() {
return _SwatchPicker.SwatchPicker;
},
renderSwatchPicker_unstable: function() {
return _renderSwatchPicker.renderSwatchPicker_unstable;
},
swatchPickerClassNames: function() {
return _useSwatchPickerStylesstyles.swatchPickerClassNames;
},
useSwatchPickerStyles_unstable: function() {
return _useSwatchPickerStylesstyles.useSwatchPickerStyles_unstable;
},
useSwatchPicker_unstable: function() {
return _useSwatchPicker.useSwatchPicker_unstable;
}
});
const _SwatchPicker = require("./SwatchPicker");
const _renderSwatchPicker = require("./renderSwatchPicker");
const _useSwatchPicker = require("./useSwatchPicker");
const _useSwatchPickerStylesstyles = require("./useSwatchPickerStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPicker/index.ts"],"sourcesContent":["export { SwatchPicker } from './SwatchPicker';\nexport type {\n SwatchPickerOnSelectEventHandler,\n SwatchPickerOnSelectionChangeData,\n SwatchPickerProps,\n SwatchPickerSlots,\n SwatchPickerState,\n} from './SwatchPicker.types';\nexport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nexport { useSwatchPicker_unstable } from './useSwatchPicker';\nexport { swatchPickerClassNames, useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\n"],"names":["SwatchPicker","renderSwatchPicker_unstable","useSwatchPicker_unstable","swatchPickerClassNames","useSwatchPickerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAQZC,+CAA2B;;;eAE3BE,mDAAsB;;;eAAEC,2DAA8B;;;eADtDF,yCAAwB;;;8BATJ,iBAAiB;oCAQF,uBAAuB;iCAC1B,oBAAoB;6CACU,iCAAiC"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderSwatchPicker_unstable", {
enumerable: true,
get: function() {
return renderSwatchPicker_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _swatchPicker = require("../../contexts/swatchPicker");
const renderSwatchPicker_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_swatchPicker.SwatchPickerProvider, {
value: contextValues.swatchPicker,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: state.root.children
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPicker/renderSwatchPicker.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { SwatchPickerProvider } from '../../contexts/swatchPicker';\nimport type { SwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport type { SwatchPickerState, SwatchPickerSlots } from './SwatchPicker.types';\n\n/**\n * Render the final JSX of SwatchPicker\n */\nexport const renderSwatchPicker_unstable = (\n state: SwatchPickerState,\n contextValues: SwatchPickerContextValues,\n): JSXElement => {\n assertSlots<SwatchPickerSlots>(state);\n\n return (\n <SwatchPickerProvider value={contextValues.swatchPicker}>\n <state.root>{state.root.children}</state.root>\n </SwatchPickerProvider>\n );\n};\n"],"names":["assertSlots","SwatchPickerProvider","renderSwatchPicker_unstable","state","contextValues","value","swatchPicker","root","children"],"mappings":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;8BAEnB,8BAA8B;AAO5D,oCAAoC,CACzCC,OACAC;QAEAJ,2BAAAA,EAA+BG;IAE/B,OAAA,WAAA,OACE,eAAA,EAACF,kCAAAA,EAAAA;QAAqBI,OAAOD,cAAcE,YAAY;kBACrD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;sBAAEJ,MAAMI,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}

View File

@@ -0,0 +1,61 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useSwatchPicker_unstable", {
enumerable: true,
get: function() {
return useSwatchPicker_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactfield = require("@fluentui/react-field");
const _reacttabster = require("@fluentui/react-tabster");
const _reactutilities = require("@fluentui/react-utilities");
const useSwatchPicker_unstable = (props, ref)=>{
// Merge props from surrounding <Field>, if any
props = (0, _reactfield.useFieldControlProps_unstable)(props);
const { focusMode = 'arrow', layout, onSelectionChange, size = 'medium', shape, spacing = 'medium', style, ...rest } = props;
const isGrid = layout === 'grid';
const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
circular: true,
axis: isGrid ? 'grid-linear' : 'both',
memorizeCurrent: true
});
const role = isGrid ? 'grid' : 'radiogroup';
const [selectedValue, setSelectedValue] = (0, _reactutilities.useControllableState)({
state: props.selectedValue,
defaultState: props.defaultSelectedValue,
initialState: ''
});
const requestSelectionChange = (0, _reactutilities.useEventCallback)((event, data)=>{
onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(event, {
type: 'click',
event,
selectedValue: data.selectedValue,
selectedSwatch: data.selectedSwatch
});
setSelectedValue(data.selectedValue);
});
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
role,
...focusMode === 'arrow' ? focusAttributes : {},
...rest
}), {
elementType: 'div'
}),
isGrid,
requestSelectionChange,
selectedValue,
size,
shape,
spacing
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPicker/useSwatchPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\n\nimport type { SwatchPickerProps, SwatchPickerState } from './SwatchPicker.types';\n\n/**\n * Create the state required to render SwatchPicker.\n *\n * The returned state can be modified with hooks such as useSwatchPickerStyles_unstable,\n * before being passed to renderSwatchPicker_unstable.\n *\n * @param props - props from this instance of SwatchPicker\n * @param ref - reference to root HTMLElement of SwatchPicker\n */\nexport const useSwatchPicker_unstable = (\n props: SwatchPickerProps,\n ref: React.Ref<HTMLDivElement>,\n): SwatchPickerState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props);\n\n const {\n focusMode = 'arrow',\n layout,\n onSelectionChange,\n size = 'medium',\n shape,\n spacing = 'medium',\n style,\n ...rest\n } = props;\n\n const isGrid = layout === 'grid';\n const focusAttributes = useArrowNavigationGroup({\n circular: true,\n axis: isGrid ? 'grid-linear' : 'both',\n memorizeCurrent: true,\n });\n\n const role = isGrid ? 'grid' : 'radiogroup';\n\n const [selectedValue, setSelectedValue] = useControllableState({\n state: props.selectedValue,\n defaultState: props.defaultSelectedValue,\n initialState: '',\n });\n\n const requestSelectionChange: SwatchPickerState['requestSelectionChange'] = useEventCallback((event, data) => {\n onSelectionChange?.(event, {\n type: 'click',\n event,\n selectedValue: data.selectedValue,\n selectedSwatch: data.selectedSwatch,\n });\n setSelectedValue(data.selectedValue);\n });\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role,\n ...(focusMode === 'arrow' ? focusAttributes : {}),\n ...rest,\n }),\n { elementType: 'div' },\n ),\n isGrid,\n requestSelectionChange,\n selectedValue,\n size,\n shape,\n spacing,\n };\n};\n"],"names":["React","useFieldControlProps_unstable","useArrowNavigationGroup","getIntrinsicElementProps","useControllableState","useEventCallback","slot","useSwatchPicker_unstable","props","ref","focusMode","layout","onSelectionChange","size","shape","spacing","style","rest","isGrid","focusAttributes","circular","axis","memorizeCurrent","role","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","requestSelectionChange","event","data","type","selectedSwatch","components","root","always","elementType"],"mappings":"AAAA;;;;;+BAmBaO;;;;;;;iEAjBU,QAAQ;4BAEe,wBAAwB;8BAC9B,0BAA0B;gCACqB,4BAA4B;AAa5G,iCAAiC,CACtCC,OACAC;IAEA,+CAA+C;IAC/CD,YAAQP,yCAAAA,EAA8BO;IAEtC,MAAM,EACJE,YAAY,OAAO,EACnBC,MAAM,EACNC,iBAAiB,EACjBC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,QAAQ,EAClBC,KAAK,EACL,GAAGC,MACJ,GAAGT;IAEJ,MAAMU,SAASP,WAAW;IAC1B,MAAMQ,kBAAkBjB,yCAAAA,EAAwB;QAC9CkB,UAAU;QACVC,MAAMH,SAAS,gBAAgB;QAC/BI,iBAAiB;IACnB;IAEA,MAAMC,OAAOL,SAAS,SAAS;IAE/B,MAAM,CAACM,eAAeC,iBAAiB,OAAGrB,oCAAAA,EAAqB;QAC7DsB,OAAOlB,MAAMgB,aAAa;QAC1BG,cAAcnB,MAAMoB,oBAAoB;QACxCC,cAAc;IAChB;IAEA,MAAMC,6BAAsEzB,gCAAAA,EAAiB,CAAC0B,OAAOC;QACnGpB,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBmB,OAAO;YACzBE,MAAM;YACNF;YACAP,eAAeQ,KAAKR,aAAa;YACjCU,gBAAgBF,KAAKE,cAAc;QACrC;QACAT,iBAAiBO,KAAKR,aAAa;IACrC;IAEA,OAAO;QACLW,YAAY;YACVC,MAAM;QACR;QACAA,MAAM9B,oBAAAA,CAAK+B,MAAM,KACflC,wCAAAA,EAAyB,OAAO;YAC9BM;YACAc;YACA,GAAIb,cAAc,UAAUS,kBAAkB,CAAC,CAAC;YAChD,GAAGF,IAAI;QACT,IACA;YAAEqB,aAAa;QAAM;QAEvBpB;QACAY;QACAN;QACAX;QACAC;QACAC;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,83 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
swatchPickerClassNames: function() {
return swatchPickerClassNames;
},
useSwatchPickerStyles_unstable: function() {
return useSwatchPickerStyles_unstable;
}
});
const _react = require("@griffel/react");
const swatchPickerClassNames = {
root: 'fui-SwatchPicker'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f14ufcw5",
mc9l5x: "f22iagw"
},
row: {
Beiy3e4: "f1063pyq"
},
grid: {
Beiy3e4: "f1vx9l62"
},
spacingSmall: {
i8kkvl: 0,
Belr9w4: 0,
rmohyg: "f1t6b6ee"
},
spacingMedium: {
i8kkvl: 0,
Belr9w4: 0,
rmohyg: "f4xv25i"
}
}, {
d: [
[
".f14ufcw5{padding:var(--spacingHorizontalNone) var(--spacingVerticalNone);}",
{
p: -1
}
],
".f22iagw{display:flex;}",
".f1063pyq{flex-direction:row;}",
".f1vx9l62{flex-direction:column;}",
[
".f1t6b6ee{gap:2px;}",
{
p: -1
}
],
[
".f4xv25i{gap:4px;}",
{
p: -1
}
]
]
});
const useSwatchPickerStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const layoutStyle = state.isGrid ? styles.grid : styles.row;
const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
state.root.className = (0, _react.mergeClasses)(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useSwatchPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames = {\n root: 'fui-SwatchPicker'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n display: 'flex'\n },\n row: {\n flexDirection: 'row'\n },\n grid: {\n flexDirection: 'column'\n },\n spacingSmall: {\n gap: '2px'\n },\n spacingMedium: {\n gap: '4px'\n }\n});\n/**\n * Apply styling to the SwatchPicker slots based on the state\n */ export const useSwatchPickerStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const layoutStyle = state.isGrid ? styles.grid : styles.row;\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n state.root.className = mergeClasses(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","row","Beiy3e4","grid","spacingSmall","i8kkvl","Belr9w4","rmohyg","spacingMedium","d","p","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,sBAAsB;;;IAyBlBmB,8BAA8B;;;;uBA3BN,gBAAgB;AAElD,+BAA+B;IAClClB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,GAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,IAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;IAAAE,YAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAiBrB,CAAC;AAGS,uCAAwCE,KAAK,IAAG;IACvD,aAAa;IACb,MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;IAC1B,MAAMoB,WAAW,GAAGF,KAAK,CAACG,MAAM,GAAGF,MAAM,CAACV,IAAI,GAAGU,MAAM,CAACZ,GAAG;IAC3D,MAAMe,YAAY,GAAGJ,KAAK,CAACK,OAAO,KAAK,OAAO,GAAGJ,MAAM,CAACT,YAAY,GAAGS,MAAM,CAACL,aAAa;IAC3FI,KAAK,CAACnB,IAAI,CAACyB,SAAS,OAAG5B,mBAAY,EAACE,sBAAsB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEqB,WAAW,EAAEE,YAAY,EAAEJ,KAAK,CAACnB,IAAI,CAACyB,SAAS,CAAC;IAC9H,OAAON,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,52 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
swatchPickerClassNames: function() {
return swatchPickerClassNames;
},
useSwatchPickerStyles_unstable: function() {
return useSwatchPickerStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const swatchPickerClassNames = {
root: 'fui-SwatchPicker'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
padding: `${_reacttheme.tokens.spacingHorizontalNone} ${_reacttheme.tokens.spacingVerticalNone}`,
display: 'flex'
},
row: {
flexDirection: 'row'
},
grid: {
flexDirection: 'column'
},
spacingSmall: {
gap: '2px'
},
spacingMedium: {
gap: '4px'
}
});
const useSwatchPickerStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const layoutStyle = state.isGrid ? styles.grid : styles.row;
const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
state.root.className = (0, _react.mergeClasses)(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPicker/useSwatchPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwatchPickerSlots, SwatchPickerState } from './SwatchPicker.types';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots> = {\n root: 'fui-SwatchPicker',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n display: 'flex',\n },\n row: {\n flexDirection: 'row',\n },\n grid: {\n flexDirection: 'column',\n },\n spacingSmall: { gap: '2px' },\n spacingMedium: { gap: '4px' },\n});\n\n/**\n * Apply styling to the SwatchPicker slots based on the state\n */\nexport const useSwatchPickerStyles_unstable = (state: SwatchPickerState): SwatchPickerState => {\n 'use no memo';\n\n const styles = useStyles();\n const layoutStyle = state.isGrid ? styles.grid : styles.row;\n\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n state.root.className = mergeClasses(\n swatchPickerClassNames.root,\n styles.root,\n layoutStyle,\n spacingStyle,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","padding","spacingHorizontalNone","spacingVerticalNone","display","row","flexDirection","grid","spacingSmall","gap","spacingMedium","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaG,sBAAAA;;;IAyBAa,8BAAAA;;;;uBA7B4B,iBAAiB;4BAGnC,wBAAwB;AACxC,+BAAkE;IACvEZ,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,SAAS,GAAGJ,kBAAAA,CAAOK,qBAAqB,CAAC,CAAC,EAAEL,kBAAAA,CAAOM,mBAAmB,EAAE;QACxEC,SAAS;IACX;IACAC,KAAK;QACHC,eAAe;IACjB;IACAC,MAAM;QACJD,eAAe;IACjB;IACAE,cAAc;QAAEC,KAAK;IAAM;IAC3BC,eAAe;QAAED,KAAK;IAAM;AAC9B;AAKO,uCAAuC,CAACG;IAC7C;IAEA,MAAMC,SAASb;IACf,MAAMc,cAAcF,MAAMG,MAAM,GAAGF,OAAON,IAAI,GAAGM,OAAOR,GAAG;IAE3D,MAAMW,eAAeJ,MAAMK,OAAO,KAAK,UAAUJ,OAAOL,YAAY,GAAGK,OAAOH,aAAa;IAC3FE,MAAMb,IAAI,CAACmB,SAAS,OAAGtB,mBAAAA,EACrBE,uBAAuBC,IAAI,EAC3Bc,OAAOd,IAAI,EACXe,aACAE,cACAJ,MAAMb,IAAI,CAACmB,SAAS;IAGtB,OAAON;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "SwatchPickerRow", {
enumerable: true,
get: function() {
return SwatchPickerRow;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useSwatchPickerRow = require("./useSwatchPickerRow");
const _renderSwatchPickerRow = require("./renderSwatchPickerRow");
const _useSwatchPickerRowStylesstyles = require("./useSwatchPickerRowStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const SwatchPickerRow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useSwatchPickerRow.useSwatchPickerRow_unstable)(props, ref);
(0, _useSwatchPickerRowStylesstyles.useSwatchPickerRowStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSwatchPickerRowStyles_unstable')(state);
return (0, _renderSwatchPickerRow.renderSwatchPickerRow_unstable)(state);
});
SwatchPickerRow.displayName = 'SwatchPickerRow';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPickerRow/SwatchPickerRow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPickerRow_unstable } from './useSwatchPickerRow';\nimport { renderSwatchPickerRow_unstable } from './renderSwatchPickerRow';\nimport { useSwatchPickerRowStyles_unstable } from './useSwatchPickerRowStyles.styles';\nimport type { SwatchPickerRowProps } from './SwatchPickerRow.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPickerRow component is used to render a row of swatches.\n */\nexport const SwatchPickerRow: ForwardRefComponent<SwatchPickerRowProps> = React.forwardRef((props, ref) => {\n const state = useSwatchPickerRow_unstable(props, ref);\n\n useSwatchPickerRowStyles_unstable(state);\n useCustomStyleHook_unstable('useSwatchPickerRowStyles_unstable')(state);\n return renderSwatchPickerRow_unstable(state);\n});\n\nSwatchPickerRow.displayName = 'SwatchPickerRow';\n"],"names":["React","useSwatchPickerRow_unstable","renderSwatchPickerRow_unstable","useSwatchPickerRowStyles_unstable","useCustomStyleHook_unstable","SwatchPickerRow","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;oCAEa,uBAAuB;uCACpB,0BAA0B;gDACvB,oCAAoC;qCAE1C,kCAAkC;AAKvE,MAAMK,kBAAAA,WAAAA,GAA6DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQR,+CAAAA,EAA4BM,OAAOC;QAEjDL,iEAAAA,EAAkCM;QAClCL,gDAAAA,EAA4B,qCAAqCK;IACjE,WAAOP,qDAAAA,EAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering SwatchPickerRow
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPickerRow/SwatchPickerRow.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type SwatchPickerRowSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * SwatchPickerRow Props\n */\nexport type SwatchPickerRowProps = ComponentProps<SwatchPickerRowSlots>;\n\n/**\n * State used in rendering SwatchPickerRow\n */\nexport type SwatchPickerRowState = ComponentState<SwatchPickerRowSlots> & Pick<SwatchPickerProps, 'spacing'>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAA6G"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
SwatchPickerRow: function() {
return _SwatchPickerRow.SwatchPickerRow;
},
renderSwatchPickerRow_unstable: function() {
return _renderSwatchPickerRow.renderSwatchPickerRow_unstable;
},
swatchPickerRowClassNames: function() {
return _useSwatchPickerRowStylesstyles.swatchPickerRowClassNames;
},
useSwatchPickerRowStyles_unstable: function() {
return _useSwatchPickerRowStylesstyles.useSwatchPickerRowStyles_unstable;
},
useSwatchPickerRow_unstable: function() {
return _useSwatchPickerRow.useSwatchPickerRow_unstable;
}
});
const _SwatchPickerRow = require("./SwatchPickerRow");
const _renderSwatchPickerRow = require("./renderSwatchPickerRow");
const _useSwatchPickerRow = require("./useSwatchPickerRow");
const _useSwatchPickerRowStylesstyles = require("./useSwatchPickerRowStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPickerRow/index.ts"],"sourcesContent":["export { SwatchPickerRow } from './SwatchPickerRow';\nexport type { SwatchPickerRowProps, SwatchPickerRowSlots, SwatchPickerRowState } from './SwatchPickerRow.types';\nexport { renderSwatchPickerRow_unstable } from './renderSwatchPickerRow';\nexport { useSwatchPickerRow_unstable } from './useSwatchPickerRow';\nexport { swatchPickerRowClassNames, useSwatchPickerRowStyles_unstable } from './useSwatchPickerRowStyles.styles';\n"],"names":["SwatchPickerRow","renderSwatchPickerRow_unstable","useSwatchPickerRow_unstable","swatchPickerRowClassNames","useSwatchPickerRowStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gCAAe;;;eAEfC,qDAA8B;;;eAE9BE,yDAAyB;;;eAAEC,iEAAiC;;;eAD5DF,+CAA2B;;;iCAHJ,oBAAoB;uCAEL,0BAA0B;oCAC7B,uBAAuB;gDACU,oCAAoC"}

View File

@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderSwatchPickerRow_unstable", {
enumerable: true,
get: function() {
return renderSwatchPickerRow_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderSwatchPickerRow_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPickerRow/renderSwatchPickerRow.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowState, SwatchPickerRowSlots } from './SwatchPickerRow.types';\n\n/**\n * Render the final JSX of SwatchPickerRow\n */\nexport const renderSwatchPickerRow_unstable = (state: SwatchPickerRowState): JSXElement => {\n assertSlots<SwatchPickerRowSlots>(state);\n return <state.root />;\n};\n"],"names":["assertSlots","renderSwatchPickerRow_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,iCAAiC,CAACC;QAC7CF,2BAAAA,EAAkCE;IAClC,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,32 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useSwatchPickerRow_unstable", {
enumerable: true,
get: function() {
return useSwatchPickerRow_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _swatchPicker = require("../../contexts/swatchPicker");
const useSwatchPickerRow_unstable = (props, ref)=>{
const { style, ...rest } = props;
const spacing = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.spacing);
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
role: 'row',
...rest
}), {
elementType: 'div'
}),
spacing
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowProps, SwatchPickerRowState } from './SwatchPickerRow.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render SwatchPickerRow.\n *\n * The returned state can be modified with hooks such as useSwatchPickerRowStyles_unstable,\n * before being passed to renderSwatchPickerRow_unstable.\n *\n * @param props - props from this instance of SwatchPickerRow\n * @param ref - reference to root HTMLDivElement of SwatchPickerRow\n */\nexport const useSwatchPickerRow_unstable = (\n props: SwatchPickerRowProps,\n ref: React.Ref<HTMLDivElement>,\n): SwatchPickerRowState => {\n const { style, ...rest } = props;\n const spacing = useSwatchPickerContextValue_unstable(ctx => ctx.spacing);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'row',\n ...rest,\n }),\n { elementType: 'div' },\n ),\n spacing,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useSwatchPickerRow_unstable","props","ref","style","rest","spacing","ctx","components","root","always","role","elementType"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACgB,4BAA4B;8BAEtB,8BAA8B;AAW5E,MAAMI,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGH;IAC3B,MAAMI,cAAUN,kDAAAA,EAAqCO,CAAAA,MAAOA,IAAID,OAAO;IAEvE,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMV,oBAAAA,CAAKW,MAAM,KACfZ,wCAAAA,EAAyB,OAAO;YAC9BK;YACAQ,MAAM;YACN,GAAGN,IAAI;QACT,IACA;YAAEO,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,49 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
swatchPickerRowClassNames: function() {
return swatchPickerRowClassNames;
},
useSwatchPickerRowStyles_unstable: function() {
return useSwatchPickerRowStyles_unstable;
}
});
const _react = require("@griffel/react");
const swatchPickerRowClassNames = {
root: 'fui-SwatchPickerRow'
};
/**
* Styles for the root slot
*/ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1xhj18k", null, [
".r1xhj18k{display:flex;flex-direction:row;}"
]);
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
spacingSmall: {
i8kkvl: "f16mnhsx"
},
spacingMedium: {
i8kkvl: "f1q8lukm"
}
}, {
d: [
".f16mnhsx{column-gap:2px;}",
".f1q8lukm{column-gap:4px;}"
]
});
const useSwatchPickerRowStyles_unstable = (state)=>{
'use no memo';
const resetStyles = useResetStyles();
const styles = useStyles();
const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
state.root.className = (0, _react.mergeClasses)(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useSwatchPickerRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';\nexport const swatchPickerRowClassNames = {\n root: 'fui-SwatchPickerRow'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'row'\n});\nconst useStyles = makeStyles({\n spacingSmall: {\n columnGap: '2px'\n },\n spacingMedium: {\n columnGap: '4px'\n }\n});\n/**\n * Apply styling to the SwatchPickerRow slots based on the state\n */ export const useSwatchPickerRowStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","__styles","swatchPickerRowClassNames","root","useResetStyles","useStyles","spacingSmall","i8kkvl","spacingMedium","d","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECG,yBAAyB;;;qCAmBY;;;;uBApBQ,gBAAgB;AACnE,kCAAkC;IACrCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGL,oBAAA,EAAA,YAAA,MAAA;IAAA;CAG1B,CAAC;AACF,MAAMM,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAGS,MAAMC,qCAAqCC,KAAK,IAAG;IAC1D,aAAa;IACb,MAAMC,WAAW,GAAGR,cAAc,CAAC,CAAC;IACpC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;IAC1B,MAAMS,YAAY,GAAGH,KAAK,CAACI,OAAO,KAAK,OAAO,GAAGF,MAAM,CAACP,YAAY,GAAGO,MAAM,CAACL,aAAa;IAC3FG,KAAK,CAACR,IAAI,CAACa,SAAS,OAAGhB,mBAAY,EAACE,yBAAyB,CAACC,IAAI,EAAES,WAAW,EAAEE,YAAY,EAAEH,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;IACpH,OAAOL,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,45 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
swatchPickerRowClassNames: function() {
return swatchPickerRowClassNames;
},
useSwatchPickerRowStyles_unstable: function() {
return useSwatchPickerRowStyles_unstable;
}
});
const _react = require("@griffel/react");
const swatchPickerRowClassNames = {
root: 'fui-SwatchPickerRow'
};
/**
* Styles for the root slot
*/ const useResetStyles = (0, _react.makeResetStyles)({
display: 'flex',
flexDirection: 'row'
});
const useStyles = (0, _react.makeStyles)({
spacingSmall: {
columnGap: '2px'
},
spacingMedium: {
columnGap: '4px'
}
});
const useSwatchPickerRowStyles_unstable = (state)=>{
'use no memo';
const resetStyles = useResetStyles();
const styles = useStyles();
const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
state.root.className = (0, _react.mergeClasses)(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowSlots, SwatchPickerRowState } from './SwatchPickerRow.types';\n\nexport const swatchPickerRowClassNames: SlotClassNames<SwatchPickerRowSlots> = {\n root: 'fui-SwatchPickerRow',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'row',\n});\n\nconst useStyles = makeStyles({\n spacingSmall: {\n columnGap: '2px',\n },\n spacingMedium: {\n columnGap: '4px',\n },\n});\n\n/**\n * Apply styling to the SwatchPickerRow slots based on the state\n */\nexport const useSwatchPickerRowStyles_unstable = (state: SwatchPickerRowState): SwatchPickerRowState => {\n 'use no memo';\n\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n\n state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","makeStyles","swatchPickerRowClassNames","root","useResetStyles","display","flexDirection","useStyles","spacingSmall","columnGap","spacingMedium","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaG,yBAAAA;;;qCAwBAS;;;;uBA5B6C,iBAAiB;AAIpE,kCAAwE;IAC7ER,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAiBL,sBAAAA,EAAgB;IACrCM,SAAS;IACTC,eAAe;AACjB;AAEA,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BO,cAAc;QACZC,WAAW;IACb;IACAC,eAAe;QACbD,WAAW;IACb;AACF;AAKO,MAAME,oCAAoC,CAACC;IAChD;IAEA,MAAMC,cAAcT;IACpB,MAAMU,SAASP;IACf,MAAMQ,eAAeH,MAAMI,OAAO,KAAK,UAAUF,OAAON,YAAY,GAAGM,OAAOJ,aAAa;IAE3FE,MAAMT,IAAI,CAACc,SAAS,OAAGjB,mBAAAA,EAAaE,0BAA0BC,IAAI,EAAEU,aAAaE,cAAcH,MAAMT,IAAI,CAACc,SAAS;IAEnH,OAAOL;AACT,EAAE"}

View File

@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
SwatchPickerProvider: function() {
return _swatchPicker.SwatchPickerProvider;
},
swatchPickerContextDefaultValue: function() {
return _swatchPicker.swatchPickerContextDefaultValue;
},
useSwatchPickerContextValue_unstable: function() {
return _swatchPicker.useSwatchPickerContextValue_unstable;
},
useSwatchPickerContextValues: function() {
return _swatchPicker.useSwatchPickerContextValues;
}
});
const _swatchPicker = require("./swatchPicker");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SwatchPickerContextValue, SwatchPickerContextValues } from './swatchPicker';\nexport {\n SwatchPickerProvider,\n swatchPickerContextDefaultValue,\n useSwatchPickerContextValue_unstable,\n useSwatchPickerContextValues,\n} from './swatchPicker';\n"],"names":["SwatchPickerProvider","swatchPickerContextDefaultValue","useSwatchPickerContextValue_unstable","useSwatchPickerContextValues"],"mappings":";;;;;;;;;;;;eAEEA,kCAAoB;;;eACpBC,6CAA+B;;;eAC/BC,kDAAoC;;;eACpCC,0CAA4B;;;8BACvB,iBAAiB"}

View File

@@ -0,0 +1,55 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
SwatchPickerProvider: function() {
return SwatchPickerProvider;
},
swatchPickerContextDefaultValue: function() {
return swatchPickerContextDefaultValue;
},
useSwatchPickerContextValue_unstable: function() {
return useSwatchPickerContextValue_unstable;
},
useSwatchPickerContextValues: function() {
return useSwatchPickerContextValues;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactcontextselector = require("@fluentui/react-context-selector");
const useSwatchPickerContextValues = (state)=>{
const { isGrid, size, shape, spacing, requestSelectionChange, selectedValue } = state;
// This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
const swatchPicker = {
isGrid,
size,
shape,
spacing,
selectedValue,
requestSelectionChange
};
return {
swatchPicker
};
};
const swatchPickerContextDefaultValue = {
requestSelectionChange: ()=>{
/*noop*/ },
isGrid: false,
size: 'medium',
shape: 'square',
spacing: 'medium',
selectedValue: undefined
};
const SwatchPickerContext = (0, _reactcontextselector.createContext)(undefined);
const SwatchPickerProvider = SwatchPickerContext.Provider;
const useSwatchPickerContextValue_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(SwatchPickerContext, (ctx = swatchPickerContextDefaultValue)=>selector(ctx));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/swatchPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SwatchPickerProps, SwatchPickerState } from '../components/SwatchPicker/SwatchPicker.types';\n\n/**\n * The context through which individual color controls communicate with the picker.\n */\nexport type SwatchPickerContextValue = Pick<SwatchPickerProps, 'size' | 'shape' | 'spacing' | 'selectedValue'> & {\n /**\n * Whether layout is grid.\n */\n isGrid: boolean;\n\n /**\n * Callback used by ColorSwatch to request a change on it's selected state\n * Should be used to select ColorSwatch\n *\n * @internal\n */\n requestSelectionChange: (\n event: React.MouseEvent<HTMLButtonElement>,\n data: { selectedValue: string; selectedSwatch: string },\n ) => void;\n};\n\nexport const useSwatchPickerContextValues = (state: SwatchPickerState): SwatchPickerContextValues => {\n const { isGrid, size, shape, spacing, requestSelectionChange, selectedValue } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const swatchPicker: SwatchPickerContextValue = {\n isGrid,\n size,\n shape,\n spacing,\n selectedValue,\n requestSelectionChange,\n };\n\n return { swatchPicker };\n};\n\nexport const swatchPickerContextDefaultValue: SwatchPickerContextValue = {\n requestSelectionChange: () => {\n /*noop*/\n },\n isGrid: false,\n size: 'medium',\n shape: 'square',\n spacing: 'medium',\n selectedValue: undefined,\n};\n\nexport type SwatchPickerContextValues = {\n swatchPicker: SwatchPickerContextValue;\n};\n\nconst SwatchPickerContext = createContext<SwatchPickerContextValue | undefined>(\n undefined,\n) as Context<SwatchPickerContextValue>;\n\nexport const SwatchPickerProvider = SwatchPickerContext.Provider;\n\nexport const useSwatchPickerContextValue_unstable = <T>(selector: ContextSelector<SwatchPickerContextValue, T>): T =>\n useContextSelector(SwatchPickerContext, (ctx = swatchPickerContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","useSwatchPickerContextValues","state","isGrid","size","shape","spacing","requestSelectionChange","selectedValue","swatchPicker","swatchPickerContextDefaultValue","undefined","SwatchPickerContext","SwatchPickerProvider","Provider","useSwatchPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;wBA+Dae;;;mCAnBAH;;;wCAqBAK;;;gCArCAd;;;;;iEA1BU,QAAQ;sCACmB,mCAAmC;AAyB9E,MAAMA,+BAA+B,CAACC;IAC3C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,sBAAsB,EAAEC,aAAa,EAAE,GAAGN;IAEhF,mGAAmG;IACnG,MAAMO,eAAyC;QAC7CN;QACAC;QACAC;QACAC;QACAE;QACAD;IACF;IAEA,OAAO;QAAEE;IAAa;AACxB,EAAE;AAEK,MAAMC,kCAA4D;IACvEH,wBAAwB;IACtB,MAAM,GACR;IACAJ,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTE,eAAeG;AACjB,EAAE;AAMF,MAAMC,0BAAsBb,mCAAAA,EAC1BY;AAGK,MAAME,uBAAuBD,oBAAoBE,QAAQ,CAAC;AAE1D,MAAMC,uCAAuC,CAAIC,eACtDhB,wCAAAA,EAAmBY,qBAAqB,CAACK,MAAMP,+BAA+B,GAAKM,SAASC,MAAM"}

View File

@@ -0,0 +1,112 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ColorSwatch: function() {
return _ColorSwatch.ColorSwatch;
},
EmptySwatch: function() {
return _EmptySwatch.EmptySwatch;
},
ImageSwatch: function() {
return _ImageSwatch.ImageSwatch;
},
SwatchPicker: function() {
return _SwatchPicker.SwatchPicker;
},
SwatchPickerProvider: function() {
return _contexts.SwatchPickerProvider;
},
SwatchPickerRow: function() {
return _SwatchPickerRow.SwatchPickerRow;
},
colorSwatchClassNames: function() {
return _ColorSwatch.colorSwatchClassNames;
},
emptySwatchClassNames: function() {
return _EmptySwatch.emptySwatchClassNames;
},
imageSwatchClassNames: function() {
return _ImageSwatch.imageSwatchClassNames;
},
renderColorSwatch_unstable: function() {
return _ColorSwatch.renderColorSwatch_unstable;
},
renderEmptySwatch_unstable: function() {
return _EmptySwatch.renderEmptySwatch_unstable;
},
renderImageSwatch_unstable: function() {
return _ImageSwatch.renderImageSwatch_unstable;
},
renderSwatchPickerGrid: function() {
return _renderUtils.renderSwatchPickerGrid;
},
renderSwatchPickerRow_unstable: function() {
return _SwatchPickerRow.renderSwatchPickerRow_unstable;
},
renderSwatchPicker_unstable: function() {
return _SwatchPicker.renderSwatchPicker_unstable;
},
swatchCSSVars: function() {
return _ColorSwatch.swatchCSSVars;
},
swatchPickerClassNames: function() {
return _SwatchPicker.swatchPickerClassNames;
},
swatchPickerContextDefaultValue: function() {
return _contexts.swatchPickerContextDefaultValue;
},
swatchPickerRowClassNames: function() {
return _SwatchPickerRow.swatchPickerRowClassNames;
},
useColorSwatchStyles_unstable: function() {
return _ColorSwatch.useColorSwatchStyles_unstable;
},
useColorSwatch_unstable: function() {
return _ColorSwatch.useColorSwatch_unstable;
},
useEmptySwatchStyles_unstable: function() {
return _EmptySwatch.useEmptySwatchStyles_unstable;
},
useEmptySwatch_unstable: function() {
return _EmptySwatch.useEmptySwatch_unstable;
},
useImageSwatchStyles_unstable: function() {
return _ImageSwatch.useImageSwatchStyles_unstable;
},
useImageSwatch_unstable: function() {
return _ImageSwatch.useImageSwatch_unstable;
},
useSwatchPickerContextValue_unstable: function() {
return _contexts.useSwatchPickerContextValue_unstable;
},
useSwatchPickerContextValues: function() {
return _contexts.useSwatchPickerContextValues;
},
useSwatchPickerRowStyles_unstable: function() {
return _SwatchPickerRow.useSwatchPickerRowStyles_unstable;
},
useSwatchPickerRow_unstable: function() {
return _SwatchPickerRow.useSwatchPickerRow_unstable;
},
useSwatchPickerStyles_unstable: function() {
return _SwatchPicker.useSwatchPickerStyles_unstable;
},
useSwatchPicker_unstable: function() {
return _SwatchPicker.useSwatchPicker_unstable;
}
});
const _SwatchPicker = require("./SwatchPicker");
const _contexts = require("./contexts");
const _ColorSwatch = require("./ColorSwatch");
const _ImageSwatch = require("./ImageSwatch");
const _SwatchPickerRow = require("./SwatchPickerRow");
const _renderUtils = require("./utils/renderUtils");
const _EmptySwatch = require("./EmptySwatch");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n SwatchPicker,\n renderSwatchPicker_unstable,\n useSwatchPickerStyles_unstable,\n useSwatchPicker_unstable,\n swatchPickerClassNames,\n} from './SwatchPicker';\nexport {\n SwatchPickerProvider,\n swatchPickerContextDefaultValue,\n useSwatchPickerContextValue_unstable,\n useSwatchPickerContextValues,\n} from './contexts';\nexport type { SwatchPickerContextValue, SwatchPickerContextValues } from './contexts';\nexport type {\n SwatchPickerProps,\n SwatchPickerSlots,\n SwatchPickerState,\n SwatchPickerOnSelectionChangeData,\n SwatchPickerOnSelectEventHandler,\n} from './SwatchPicker';\nexport {\n ColorSwatch,\n renderColorSwatch_unstable,\n useColorSwatchStyles_unstable,\n useColorSwatch_unstable,\n colorSwatchClassNames,\n swatchCSSVars,\n} from './ColorSwatch';\nexport type { ColorSwatchProps, ColorSwatchSlots, ColorSwatchState } from './ColorSwatch';\nexport {\n ImageSwatch,\n renderImageSwatch_unstable,\n useImageSwatchStyles_unstable,\n useImageSwatch_unstable,\n imageSwatchClassNames,\n} from './ImageSwatch';\nexport type { ImageSwatchProps, ImageSwatchSlots, ImageSwatchState } from './ImageSwatch';\nexport type { SwatchPickerRowProps, SwatchPickerRowSlots, SwatchPickerRowState } from './SwatchPickerRow';\nexport {\n SwatchPickerRow,\n renderSwatchPickerRow_unstable,\n useSwatchPickerRowStyles_unstable,\n useSwatchPickerRow_unstable,\n swatchPickerRowClassNames,\n} from './SwatchPickerRow';\nexport { renderSwatchPickerGrid } from './utils/renderUtils';\nexport type { SwatchProps, SwatchPickerGridProps } from './utils/renderUtils';\nexport {\n EmptySwatch,\n renderEmptySwatch_unstable,\n useEmptySwatchStyles_unstable,\n useEmptySwatch_unstable,\n emptySwatchClassNames,\n} from './EmptySwatch';\nexport type { EmptySwatchProps, EmptySwatchSlots, EmptySwatchState } from './EmptySwatch';\n"],"names":["SwatchPicker","renderSwatchPicker_unstable","useSwatchPickerStyles_unstable","useSwatchPicker_unstable","swatchPickerClassNames","SwatchPickerProvider","swatchPickerContextDefaultValue","useSwatchPickerContextValue_unstable","useSwatchPickerContextValues","ColorSwatch","renderColorSwatch_unstable","useColorSwatchStyles_unstable","useColorSwatch_unstable","colorSwatchClassNames","swatchCSSVars","ImageSwatch","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useImageSwatch_unstable","imageSwatchClassNames","SwatchPickerRow","renderSwatchPickerRow_unstable","useSwatchPickerRowStyles_unstable","useSwatchPickerRow_unstable","swatchPickerRowClassNames","renderSwatchPickerGrid","EmptySwatch","renderEmptySwatch_unstable","useEmptySwatchStyles_unstable","useEmptySwatch_unstable","emptySwatchClassNames"],"mappings":";;;;;;;;;;;IAsBES,WAAW;;;IA2BXiB;uCAAW;;;eAlBXX,wBAAW;;;eA9BXf,0BAAY;;IAOZK,oBAAoB;;;;eAgCpBe,gCAAe;;;eAdfP,kCAAqB;;IA2BrBiB;iDAAqB;;;eAlBrBX,kCAAqB;;IAZrBT,0BAA0B;;;;eA2B1BiB,uCAA0B;;8BAlBA;eAA1BX;;;eAcOS,mCAAsB;;;eAL7BJ,+CAA8B;;;eAvC9BpB,yCAA2B;;;eAyB3Ba,0BAAa;;0BAtBS;eAAtBV;;IAIAE,+BAA+B;;;;eAmC/BkB,0CAAyB;;IApBzBb;yDAA6B;;;eAC7BC,oCAAuB;;;eA0BvBgB,0CAA6B;;IAC7BC;mDAAuB;;;eAnBvBZ,0CAA6B;;2BACN;eAAvBC;;;eAxBAX,8CAAoC;;gCACR;eAA5BC;;IA+BAc;iEAAiC;;;eACjCC,4CAA2B;;;eAxC3BrB,4CAA8B;;;eAC9BC,sCAAwB;;;8BAEnB,iBAAiB;0BAMjB,aAAa;6BAgBb,gBAAgB;6BAQhB,gBAAgB;iCAShB,oBAAoB;6BACY,sBAAsB;6BAQtD,gBAAgB"}

View File

@@ -0,0 +1,43 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderSwatchPickerGrid", {
enumerable: true,
get: function() {
return renderSwatchPickerGrid;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _ = require("../");
const renderSwatchPickerGrid = (props)=>{
const { items, columnCount, renderRow, renderSwatch } = props;
const _renderRow = renderRow || (({ children, rowId })=>/*#__PURE__*/ _react.createElement(_.SwatchPickerRow, {
key: rowId
}, children));
const _renderSwatch = renderSwatch || ((item)=>{
var _item_src;
return item.src ? /*#__PURE__*/ _react.createElement(_.ImageSwatch, {
key: item.value,
src: (_item_src = item.src) !== null && _item_src !== void 0 ? _item_src : '',
...item
}) : /*#__PURE__*/ _react.createElement(_.ColorSwatch, {
key: item.value,
color: item.color || '',
...item
});
});
const rowCount = Math.ceil(items.length / columnCount);
const rows = Array.from({
length: rowCount
}, (_, i)=>{
const start = i * columnCount;
const end = start + columnCount;
return items.slice(start, end);
});
return rows.map((row, index)=>_renderRow({
children: row.map(_renderSwatch),
rowId: index
}));
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/renderUtils.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ColorSwatch, SwatchPickerRow, ImageSwatch } from '../';\nimport type { ColorSwatchProps, ImageSwatchProps } from '../';\n\nexport type SwatchProps = ImageSwatchProps | ColorSwatchProps;\n\nexport type SwatchPickerGridProps = {\n items: SwatchProps[];\n columnCount: number;\n renderRow?: (props: { children: JSXElement[]; rowId: string | number }) => JSXElement;\n renderSwatch?: (item: SwatchProps) => JSXElement;\n};\n\nexport const renderSwatchPickerGrid = (props: SwatchPickerGridProps): JSXElement[] => {\n const { items, columnCount, renderRow, renderSwatch } = props;\n const _renderRow = renderRow || (({ children, rowId }) => <SwatchPickerRow key={rowId}>{children}</SwatchPickerRow>);\n const _renderSwatch =\n renderSwatch ||\n ((item: SwatchProps) =>\n (item as ImageSwatchProps).src ? (\n <ImageSwatch key={item.value} src={(item as ImageSwatchProps).src ?? ''} {...item} />\n ) : (\n <ColorSwatch key={item.value} color={item.color || ''} {...item} />\n ));\n\n const rowCount = Math.ceil(items.length / columnCount);\n const rows = Array.from({ length: rowCount }, (_, i) => {\n const start = i * columnCount;\n const end = start + columnCount;\n return items.slice(start, end);\n });\n\n return rows.map((row, index) => _renderRow({ children: row.map(_renderSwatch), rowId: index }));\n};\n"],"names":["React","ColorSwatch","SwatchPickerRow","ImageSwatch","renderSwatchPickerGrid","props","items","columnCount","renderRow","renderSwatch","_renderRow","children","rowId","key","_renderSwatch","item","src","value","color","rowCount","Math","ceil","length","rows","Array","from","_","i","start","end","slice","map","row","index"],"mappings":";;;;+BAcaI;;;;;;;iEAdU,QAAQ;kBAE2B,MAAM;AAYzD,+BAA+B,CAACC;IACrC,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGJ;IACxD,MAAMK,aAAaF,aAAc,CAAA,CAAC,EAAEG,QAAQ,EAAEC,KAAK,EAAE,GAAA,WAAA,GAAK,OAAA,aAAA,CAACV,iBAAAA,EAAAA;YAAgBW,KAAKD;WAAQD,SAAAA,CAA0B;IAClH,MAAMG,gBACJL,gBACC,CAAA,CAACM;YAEqC;eADpCA,KAA0BC,GAAG,GAAA,WAAA,GAC5B,OAAA,aAAA,CAACb,aAAAA,EAAAA;YAAYU,KAAKE,KAAKE,KAAK;YAAED,KAAK,CAAA,YAACD,KAA0BC,GAAAA,AAAG,MAAA,QAA9B,cAAA,KAAA,IAAA,YAAkC;YAAK,GAAGD,IAAI;2BAEjF,OAAA,aAAA,CAACd,aAAAA,EAAAA;YAAYY,KAAKE,KAAKE,KAAK;YAAEC,OAAOH,KAAKG,KAAK,IAAI;YAAK,GAAGH,IAAI;;MACjE;IAEJ,MAAMI,WAAWC,KAAKC,IAAI,CAACf,MAAMgB,MAAM,GAAGf;IAC1C,MAAMgB,OAAOC,MAAMC,IAAI,CAAC;QAAEH,QAAQH;IAAS,GAAG,CAACO,GAAGC;QAChD,MAAMC,QAAQD,IAAIpB;QAClB,MAAMsB,MAAMD,QAAQrB;QACpB,OAAOD,MAAMwB,KAAK,CAACF,OAAOC;IAC5B;IAEA,OAAON,KAAKQ,GAAG,CAAC,CAACC,KAAKC,QAAUvB,WAAW;YAAEC,UAAUqB,IAAID,GAAG,CAACjB;YAAgBF,OAAOqB;QAAM;AAC9F,EAAE"}