@fluentui/react-swatch-picker 0.0.0-nightly-20240517-0405.1

package/lib/components/ColorSwatch/useColorSwatch.js

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { slot, useEventCallback, getIntrinsicElementProps, mergeCallbacks } from '@fluentui/react-utilities';
+import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
+import { swatchCSSVars } from './useColorSwatchStyles.styles';
+import { ProhibitedFilled } from '@fluentui/react-icons';
+import { tokens } from '@fluentui/react-theme';
+/**
+ * Create the state required to render ColorSwatch.
+ *
+ * The returned state can be modified with hooks such as useColorSwatchStyles_unstable,
+ * before being passed to renderColorSwatch_unstable.
+ *
+ * @param props - props from this instance of ColorSwatch
+ * @param ref - reference to root HTMLButtonElement of ColorSwatch
+ */ export const useColorSwatch_unstable = (props, ref)=>{
+    const { borderColor, color, disabled, disabledIcon, icon, value, onClick, size, shape, style, ...rest } = props;
+    const _size = useSwatchPickerContextValue_unstable((ctx)=>ctx.size);
+    const _shape = useSwatchPickerContextValue_unstable((ctx)=>ctx.shape);
+    const isGrid = useSwatchPickerContextValue_unstable((ctx)=>ctx.isGrid);
+    const requestSelectionChange = useSwatchPickerContextValue_unstable((ctx)=>ctx.requestSelectionChange);
+    const selected = useSwatchPickerContextValue_unstable((ctx)=>ctx.selectedValue === value);
+    const onColorSwatchClick = useEventCallback(mergeCallbacks(onClick, (event)=>requestSelectionChange(event, {
+            selectedValue: value,
+            selectedSwatch: color
+        })));
+    const rootVariables = {
+        [swatchCSSVars.color]: color,
+        [swatchCSSVars.borderColor]: borderColor !== null && borderColor !== void 0 ? borderColor : tokens.colorTransparentStroke
+    };
+    const role = isGrid ? 'gridcell' : 'radio';
+    const ariaSelected = isGrid ? {
+        'aria-selected': selected
+    } : {
+        'aria-checked': selected
+    };
+    const iconShorthand = slot.optional(icon, {
+        elementType: 'span'
+    });
+    const disabledIconShorthand = slot.optional(disabledIcon, {
+        defaultProps: {
+            children: /*#__PURE__*/ React.createElement(ProhibitedFilled, null)
+        },
+        renderByDefault: true,
+        elementType: 'span'
+    });
+    return {
+        components: {
+            root: 'button',
+            icon: 'span',
+            disabledIcon: 'span'
+        },
+        root: slot.always(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
+    };
+};

package/lib/components/ColorSwatch/useColorSwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useColorSwatch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { slot, useEventCallback, getIntrinsicElementProps, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { ColorSwatchProps, ColorSwatchState } from './ColorSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\nimport { swatchCSSVars } from './useColorSwatchStyles.styles';\nimport { ProhibitedFilled } from '@fluentui/react-icons';\nimport { tokens } from '@fluentui/react-theme';\n\n/**\n * Create the state required to render ColorSwatch.\n *\n * The returned state can be modified with hooks such as useColorSwatchStyles_unstable,\n * before being passed to renderColorSwatch_unstable.\n *\n * @param props - props from this instance of ColorSwatch\n * @param ref - reference to root HTMLButtonElement of ColorSwatch\n */\nexport const useColorSwatch_unstable = (\n  props: ColorSwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ColorSwatchState => {\n  const { borderColor, color, disabled, disabledIcon, icon, value, onClick, size, shape, 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 onColorSwatchClick = useEventCallback(\n    mergeCallbacks(onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      requestSelectionChange(event, {\n        selectedValue: value,\n        selectedSwatch: color,\n      }),\n    ),\n  );\n\n  const rootVariables = {\n    [swatchCSSVars.color]: color,\n    [swatchCSSVars.borderColor]: borderColor ?? tokens.colorTransparentStroke,\n  };\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const ariaSelected = isGrid\n    ? {\n        'aria-selected': selected,\n      }\n    : { 'aria-checked': selected };\n\n  const iconShorthand = slot.optional(icon, { elementType: 'span' });\n  const disabledIconShorthand = slot.optional(disabledIcon, {\n    defaultProps: {\n      children: <ProhibitedFilled />,\n    },\n    renderByDefault: true,\n    elementType: 'span',\n  });\n\n  return {\n    components: {\n      root: 'button',\n      icon: 'span',\n      disabledIcon: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...ariaSelected,\n        onClick: onColorSwatchClick,\n        type: 'button',\n        disabled,\n        ...rest,\n        style: {\n          ...rootVariables,\n          ...style,\n        },\n      }),\n      { elementType: 'button' },\n    ),\n    icon: iconShorthand,\n    disabledIcon: disabledIconShorthand,\n    disabled,\n    size: size ?? _size,\n    shape: shape ?? _shape,\n    selected,\n    color,\n    value,\n  };\n};\n"],"names":["React","slot","useEventCallback","getIntrinsicElementProps","mergeCallbacks","useSwatchPickerContextValue_unstable","swatchCSSVars","ProhibitedFilled","tokens","useColorSwatch_unstable","props","ref","borderColor","color","disabled","disabledIcon","icon","value","onClick","size","shape","style","rest","_size","ctx","_shape","isGrid","requestSelectionChange","selected","selectedValue","onColorSwatchClick","event","selectedSwatch","rootVariables","colorTransparentStroke","role","ariaSelected","iconShorthand","optional","elementType","disabledIconShorthand","defaultProps","children","renderByDefault","components","root","always","type"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,EAAEC,gBAAgB,EAAEC,wBAAwB,EAAEC,cAAc,QAAQ,4BAA4B;AAE7G,SAASC,oCAAoC,QAAQ,8BAA8B;AACnF,SAASC,aAAa,QAAQ,gCAAgC;AAC9D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,MAAM,QAAQ,wBAAwB;AAE/C;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,WAAW,EAAEC,KAAK,EAAEC,QAAQ,EAAEC,YAAY,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,IAAI,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGZ;IAC1G,MAAMa,QAAQlB,qCAAqCmB,CAAAA,MAAOA,IAAIL,IAAI;IAClE,MAAMM,SAASpB,qCAAqCmB,CAAAA,MAAOA,IAAIJ,KAAK;IACpE,MAAMM,SAASrB,qCAAqCmB,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,yBAAyBtB,qCAAqCmB,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,WAAWvB,qCAAqCmB,CAAAA,MAAOA,IAAIK,aAAa,KAAKZ;IAEnF,MAAMa,qBAAqB5B,iBACzBE,eAAec,SAAS,CAACa,QACvBJ,uBAAuBI,OAAO;YAC5BF,eAAeZ;YACfe,gBAAgBnB;QAClB;IAIJ,MAAMoB,gBAAgB;QACpB,CAAC3B,cAAcO,KAAK,CAAC,EAAEA;QACvB,CAACP,cAAcM,WAAW,CAAC,EAAEA,wBAAAA,yBAAAA,cAAeJ,OAAO0B,sBAAsB;IAC3E;IAEA,MAAMC,OAAOT,SAAS,aAAa;IACnC,MAAMU,eAAeV,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMS,gBAAgBpC,KAAKqC,QAAQ,CAACtB,MAAM;QAAEuB,aAAa;IAAO;IAChE,MAAMC,wBAAwBvC,KAAKqC,QAAQ,CAACvB,cAAc;QACxD0B,cAAc;YACZC,wBAAU,oBAACnC;QACb;QACAoC,iBAAiB;QACjBJ,aAAa;IACf;IAEA,OAAO;QACLK,YAAY;YACVC,MAAM;YACN7B,MAAM;YACND,cAAc;QAChB;QACA8B,MAAM5C,KAAK6C,MAAM,CACf3C,yBAAyB,UAAU;YACjCQ;YACAwB;YACA,GAAGC,YAAY;YACflB,SAASY;YACTiB,MAAM;YACNjC;YACA,GAAGQ,IAAI;YACPD,OAAO;gBACL,GAAGY,aAAa;gBAChB,GAAGZ,KAAK;YACV;QACF,IACA;YAAEkB,aAAa;QAAS;QAE1BvB,MAAMqB;QACNtB,cAAcyB;QACd1B;QACAK,MAAMA,iBAAAA,kBAAAA,OAAQI;QACdH,OAAOA,kBAAAA,mBAAAA,QAASK;QAChBG;QACAf;QACAI;IACF;AACF,EAAE"}

package/lib/components/ColorSwatch/useColorSwatchStyles.styles.js

@@ -0,0 +1,148 @@
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const colorSwatchClassNames = {
+  root: 'fui-ColorSwatch',
+  icon: 'fui-ColorSwatch__icon',
+  disabledIcon: 'fui-ColorSwatch__disabledIcon'
+};
+export const swatchCSSVars = {
+  color: `--fui-SwatchPicker--color`,
+  borderColor: `--fui-SwatchPicker--borderColor`
+};
+const {
+  color,
+  borderColor
+} = swatchCSSVars;
+/**
+ * Styles for the root slot
+ */
+const useResetStyles = /*#__PURE__*/__resetStyles("rwl4y25", null, {
+  r: [".rwl4y25{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;}", ".rwl4y25:hover{cursor:pointer;border:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}", ".rwl4y25:hover:active{border:none;box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}", ".rwl4y25:focus{outline:none;}", ".rwl4y25:focus-visible{outline:none;}", ".rwl4y25[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){.rwl4y25{forced-color-adjust:none;}.rwl4y25:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke2Hover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}.rwl4y25:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}}"]
+});
+const useStyles = /*#__PURE__*/__styles({
+  disabled: {
+    eoavqd: "fphbwmw",
+    Bvxd0ez: "f1q3txrk"
+  },
+  selected: {
+    icvyot: "f1ern45e",
+    vrafjx: ["f1n71otn", "f1deefiw"],
+    oivjwe: "f1h8hb77",
+    wvpqe5: ["f1deefiw", "f1n71otn"],
+    E5pizo: "f8ps3yo",
+    Bvxd0ez: "f1txz9o1",
+    vajtyg: "f1frtkom",
+    j6ew2k: "f16jq8vy",
+    Bspt33j: "f18nq7tj"
+  }
+}, {
+  h: [".fphbwmw:hover{cursor:not-allowed;}", ".f1q3txrk:hover{box-shadow:none;}", ".f1txz9o1:hover{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorBrandStroke1),inset 0 0 0 6px var(--colorStrokeFocus1);}", ".f1frtkom:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorBrandStroke1),inset 0 0 0 7px var(--colorStrokeFocus1);}"],
+  d: [".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".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);}"],
+  m: [["@media (forced-colors: active){.f18nq7tj{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 5px var(--colorStrokeFocus1);}}", {
+    m: "(forced-colors: active)"
+  }]]
+});
+const useSizeStyles = /*#__PURE__*/__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__*/__styles({
+  rounded: {
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
+    kdpuga: ["f1o2ludy", "f1kjnpwc"],
+    Bw81rd7: ["f1kjnpwc", "f1o2ludy"],
+    B6xbmo0: ["fxmnebo", "f1witrsb"],
+    dm238s: ["f1witrsb", "fxmnebo"]
+  },
+  circular: {
+    Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
+    Beyfa6y: ["f1nfllo7", "f8fbkgy"],
+    B7oj6ja: ["f1djnp8u", "f1s8kh49"],
+    Btl43ni: ["f1s8kh49", "f1djnp8u"],
+    kdpuga: ["fanj13w", "f1gou5sz"],
+    Bw81rd7: ["f1gou5sz", "fanj13w"],
+    B6xbmo0: ["fulf6x3", "foeb2x"],
+    dm238s: ["foeb2x", "fulf6x3"]
+  },
+  square: {
+    Bbmb7ep: ["fzi6hpg", "fyowgf4"],
+    Beyfa6y: ["fyowgf4", "fzi6hpg"],
+    B7oj6ja: ["f3fg2lr", "f13av6d4"],
+    Btl43ni: ["f13av6d4", "f3fg2lr"],
+    kdpuga: ["f1ndz5i7", "f1co4qro"],
+    Bw81rd7: ["f1co4qro", "f1ndz5i7"],
+    B6xbmo0: ["f146y5a9", "f1k2ftg"],
+    dm238s: ["f1k2ftg", "f146y5a9"]
+  }
+}, {
+  d: [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fanj13w[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1gou5sz[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fulf6x3[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusCircular);}", ".foeb2x[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusCircular);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1ndz5i7[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusNone);}", ".f1co4qro[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusNone);}", ".f146y5a9[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusNone);}", ".f1k2ftg[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusNone);}"]
+});
+const useIconStyles = /*#__PURE__*/__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;}"]
+});
+/**
+ * Apply styling to the ColorSwatch slots based on the state
+ */
+export const useColorSwatchStyles_unstable = state => {
+  const resetStyles = useResetStyles();
+  const styles = useStyles();
+  const sizeStyles = useSizeStyles();
+  const shapeStyles = useShapeStyles();
+  const iconStyles = useIconStyles();
+  const {
+    size = 'medium',
+    shape = 'square'
+  } = state;
+  state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.disabled && styles.disabled, state.root.className);
+  if (state.disabled && state.disabledIcon) {
+    state.disabledIcon.className = mergeClasses(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);
+  }
+  if (state.icon) {
+    state.icon.className = mergeClasses(iconStyles.icon, iconStyles[size], state.icon.className);
+  }
+  return state;
+};
+//# sourceMappingURL=useColorSwatchStyles.styles.js.map

package/lib/components/ColorSwatch/useColorSwatchStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","colorSwatchClassNames","root","icon","disabledIcon","swatchCSSVars","color","borderColor","useResetStyles","r","s","useStyles","disabled","eoavqd","Bvxd0ez","selected","icvyot","vrafjx","oivjwe","wvpqe5","E5pizo","vajtyg","j6ew2k","Bspt33j","h","d","m","useSizeStyles","a9b677","Bqenvij","small","medium","large","useShapeStyles","rounded","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","kdpuga","Bw81rd7","B6xbmo0","dm238s","circular","square","useIconStyles","sj55zd","Bhu2qc9","qhf8xq","mc9l5x","qb2dma","Be2twd7","useColorSwatchStyles_unstable","state","resetStyles","styles","sizeStyles","shapeStyles","iconStyles","size","shape","className"],"sources":["useColorSwatchStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const colorSwatchClassNames = {\n    root: 'fui-ColorSwatch',\n    icon: 'fui-ColorSwatch__icon',\n    disabledIcon: 'fui-ColorSwatch__disabledIcon'\n};\nexport const swatchCSSVars = {\n    color: `--fui-SwatchPicker--color`,\n    borderColor: `--fui-SwatchPicker--borderColor`\n};\nconst { color, borderColor } = swatchCSSVars;\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n    display: 'inline-flex',\n    flexShrink: 0,\n    alignItems: 'center',\n    justifyContent: 'center',\n    boxSizing: 'border-box',\n    border: `1px solid var(${borderColor})`,\n    background: `var(${color})`,\n    overflow: 'hidden',\n    padding: '0',\n    ':hover': {\n        cursor: 'pointer',\n        border: 'none',\n        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n    },\n    ':hover:active': {\n        border: 'none',\n        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n    },\n    ':focus': {\n        outline: 'none'\n    },\n    ':focus-visible': {\n        outline: 'none'\n    },\n    ...createCustomFocusIndicatorStyle({\n        border: 'none',\n        outline: 'none',\n        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n    }),\n    // High contrast styles\n    '@media (forced-colors: active)': {\n        forcedColorAdjust: 'none',\n        ':hover': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`\n        },\n        ':hover:active': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`\n        }\n    }\n});\nconst useStyles = makeStyles({\n    disabled: {\n        ':hover': {\n            cursor: 'not-allowed',\n            boxShadow: 'none'\n        }\n    },\n    selected: {\n        ...shorthands.border('none'),\n        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,\n        ':hover': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorBrandStroke1}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`\n        },\n        ':hover:active': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorBrandStroke1}, inset 0 0 0 7px ${tokens.colorStrokeFocus1}`\n        },\n        ...createCustomFocusIndicatorStyle({\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus2}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`\n        }),\n        '@media (forced-colors: active)': {\n            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`\n        }\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});\nconst useShapeStyles = makeStyles({\n    rounded: {\n        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.borderRadius(tokens.borderRadiusMedium)\n        })\n    },\n    circular: {\n        ...shorthands.borderRadius(tokens.borderRadiusCircular),\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.borderRadius(tokens.borderRadiusCircular)\n        })\n    },\n    square: {\n        ...shorthands.borderRadius(tokens.borderRadiusNone),\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.borderRadius(tokens.borderRadiusNone)\n        })\n    }\n});\nconst useIconStyles = makeStyles({\n    disabledIcon: {\n        color: tokens.colorNeutralForegroundInverted,\n        filter: 'drop-shadow(0 1px 1px rgb(0 0 0 / 1))'\n    },\n    icon: {\n        position: 'absolute',\n        display: 'flex',\n        alignSelf: 'center'\n    },\n    'extra-small': {\n        fontSize: '16px'\n    },\n    small: {\n        fontSize: '16px'\n    },\n    medium: {\n        fontSize: '20px'\n    },\n    large: {\n        fontSize: '24px'\n    }\n});\n/**\n * Apply styling to the ColorSwatch slots based on the state\n */ export const useColorSwatchStyles_unstable = (state)=>{\n    const resetStyles = useResetStyles();\n    const styles = useStyles();\n    const sizeStyles = useSizeStyles();\n    const shapeStyles = useShapeStyles();\n    const iconStyles = useIconStyles();\n    const { size = 'medium', shape = 'square' } = state;\n    state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.disabled && styles.disabled, state.root.className);\n    if (state.disabled && state.disabledIcon) {\n        state.disabledIcon.className = mergeClasses(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);\n    }\n    if (state.icon) {\n        state.icon.className = mergeClasses(iconStyles.icon, iconStyles[size], state.icon.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/EmptySwatch/EmptySwatch.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useEmptySwatch_unstable } from './useEmptySwatch';
+import { renderEmptySwatch_unstable } from './renderEmptySwatch';
+import { useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * EmptySwatch component is used for adding new color swatches.
+ */ export const EmptySwatch = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useEmptySwatch_unstable(props, ref);
+    useEmptySwatchStyles_unstable(state);
+    useCustomStyleHook_unstable('useEmptySwatchStyles_unstable')(state);
+    return renderEmptySwatch_unstable(state);
+});
+EmptySwatch.displayName = 'EmptySwatch';

package/lib/components/EmptySwatch/EmptySwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["EmptySwatch.tsx"],"sourcesContent":["import * 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,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAC7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib/components/EmptySwatch/EmptySwatch.types.js

@@ -0,0 +1 @@
+export { };

package/lib/components/EmptySwatch/EmptySwatch.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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":"AAAA,WAe2G"}

package/lib/components/EmptySwatch/index.js

@@ -0,0 +1,5 @@
+export * from './EmptySwatch';
+export * from './EmptySwatch.types';
+export * from './renderEmptySwatch';
+export * from './useEmptySwatch';
+export * from './useEmptySwatchStyles.styles';

package/lib/components/EmptySwatch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './EmptySwatch';\nexport * from './EmptySwatch.types';\nexport * from './renderEmptySwatch';\nexport * from './useEmptySwatch';\nexport * from './useEmptySwatchStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,gCAAgC"}

package/lib/components/EmptySwatch/renderEmptySwatch.js

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of EmptySwatch
+ */ export const renderEmptySwatch_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

package/lib/components/EmptySwatch/renderEmptySwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderEmptySwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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) => {\n  assertSlots<EmptySwatchSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderEmptySwatch_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/EmptySwatch/useEmptySwatch.js

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
+/**
+ * Create the state required to render EmptySwatch.
+ *
+ * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,
+ * before being passed to renderEmptySwatch_unstable.
+ *
+ * @param props - props from this instance of EmptySwatch
+ * @param ref - reference to root HTMLDivElement of EmptySwatch
+ */ export const useEmptySwatch_unstable = (props, ref)=>{
+    const { size, shape, ...rest } = props;
+    const _size = useSwatchPickerContextValue_unstable((ctx)=>ctx.size);
+    const _shape = useSwatchPickerContextValue_unstable((ctx)=>ctx.shape);
+    const isGrid = useSwatchPickerContextValue_unstable((ctx)=>ctx.isGrid);
+    const role = isGrid ? 'gridcell' : 'radio';
+    const a11yProps = isGrid ? {} : {
+        'aria-checked': false
+    };
+    return {
+        components: {
+            root: 'button'
+        },
+        root: slot.always(getIntrinsicElementProps('button', {
+            ref,
+            role,
+            ...a11yProps,
+            ...rest
+        }), {
+            elementType: 'button'
+        }),
+        size: size !== null && size !== void 0 ? size : _size,
+        shape: shape !== null && shape !== void 0 ? shape : _shape
+    };
+};

package/lib/components/EmptySwatch/useEmptySwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useEmptySwatch.ts"],"sourcesContent":["import * 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,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IACjC,MAAMK,QAAQP,qCAAqCQ,CAAAA,MAAOA,IAAIJ,IAAI;IAClE,MAAMK,SAAST,qCAAqCQ,CAAAA,MAAOA,IAAIH,KAAK;IACpE,MAAMK,SAASV,qCAAqCQ,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,KAAKgB,MAAM,CACfjB,yBAAyB,UAAU;YACjCK;YACAQ;YACA,GAAGC,SAAS;YACZ,GAAGN,IAAI;QACT,IACA;YAAEU,aAAa;QAAS;QAE1BZ,MAAMA,iBAAAA,kBAAAA,OAAQG;QACdF,OAAOA,kBAAAA,mBAAAA,QAASI;IAClB;AACF,EAAE"}

package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.js

@@ -0,0 +1,78 @@
+import { __resetStyles, __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const emptySwatchClassNames = {
+  root: 'fui-EmptySwatch'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__resetStyles("r1top892", null, [".r1top892{background-color:var(--colorTransparentBackground);border:1px dashed var(--colorNeutralForeground4);}"]);
+const useSizeStyles = /*#__PURE__*/__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__*/__styles({
+  rounded: {
+    Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
+    Beyfa6y: ["f16jpd5f", "f1aa9q02"],
+    B7oj6ja: ["f1jar5jt", "fyu767a"],
+    Btl43ni: ["fyu767a", "f1jar5jt"],
+    kdpuga: ["f1o2ludy", "f1kjnpwc"],
+    Bw81rd7: ["f1kjnpwc", "f1o2ludy"],
+    B6xbmo0: ["fxmnebo", "f1witrsb"],
+    dm238s: ["f1witrsb", "fxmnebo"]
+  },
+  circular: {
+    Bbmb7ep: ["f8fbkgy", "f1nfllo7"],
+    Beyfa6y: ["f1nfllo7", "f8fbkgy"],
+    B7oj6ja: ["f1djnp8u", "f1s8kh49"],
+    Btl43ni: ["f1s8kh49", "f1djnp8u"],
+    kdpuga: ["fanj13w", "f1gou5sz"],
+    Bw81rd7: ["f1gou5sz", "fanj13w"],
+    B6xbmo0: ["fulf6x3", "foeb2x"],
+    dm238s: ["foeb2x", "fulf6x3"]
+  },
+  square: {
+    Bbmb7ep: ["fzi6hpg", "fyowgf4"],
+    Beyfa6y: ["fyowgf4", "fzi6hpg"],
+    B7oj6ja: ["f3fg2lr", "f13av6d4"],
+    Btl43ni: ["f13av6d4", "f3fg2lr"],
+    kdpuga: ["f1ndz5i7", "f1co4qro"],
+    Bw81rd7: ["f1co4qro", "f1ndz5i7"],
+    B6xbmo0: ["f146y5a9", "f1k2ftg"],
+    dm238s: ["f1k2ftg", "f146y5a9"]
+  }
+}, {
+  d: [".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f1o2ludy[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1kjnpwc[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fxmnebo[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusMedium);}", ".f1witrsb[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusMedium);}", ".f8fbkgy{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1nfllo7{border-bottom-left-radius:var(--borderRadiusCircular);}", ".f1djnp8u{border-top-right-radius:var(--borderRadiusCircular);}", ".f1s8kh49{border-top-left-radius:var(--borderRadiusCircular);}", ".fanj13w[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusCircular);}", ".f1gou5sz[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusCircular);}", ".fulf6x3[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusCircular);}", ".foeb2x[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusCircular);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f1ndz5i7[data-fui-focus-visible]{border-bottom-right-radius:var(--borderRadiusNone);}", ".f1co4qro[data-fui-focus-visible]{border-bottom-left-radius:var(--borderRadiusNone);}", ".f146y5a9[data-fui-focus-visible]{border-top-right-radius:var(--borderRadiusNone);}", ".f1k2ftg[data-fui-focus-visible]{border-top-left-radius:var(--borderRadiusNone);}"]
+});
+/**
+ * Apply styling to the EmptySwatch slots based on the state
+ */
+export const useEmptySwatchStyles_unstable = state => {
+  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 = mergeClasses(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);
+  return state;
+};
+//# sourceMappingURL=useEmptySwatchStyles.styles.js.map

package/lib/components/EmptySwatch/useEmptySwatchStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","shorthands","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","useSizeStyles","a9b677","Bqenvij","small","medium","large","d","useShapeStyles","rounded","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","kdpuga","Bw81rd7","B6xbmo0","dm238s","circular","square","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","_state_size","size","_state_shape","className","shape"],"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["import { makeResetStyles, makeStyles, mergeClasses, shorthands } 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        ...shorthands.borderRadius(tokens.borderRadiusMedium),\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.borderRadius(tokens.borderRadiusMedium)\n        })\n    },\n    circular: {\n        ...shorthands.borderRadius(tokens.borderRadiusCircular),\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.borderRadius(tokens.borderRadiusCircular)\n        })\n    },\n    square: {\n        ...shorthands.borderRadius(tokens.borderRadiusNone),\n        ...createCustomFocusIndicatorStyle({\n            ...shorthands.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    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"],"mappings":"AAAA,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACtF,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGR,aAAA,sIAGrB,CAAC;AACF,MAAMS,aAAa,gBAAGR,QAAA;EAAA;IAAAS,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAF,MAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAH,MAAA;IAAAC,OAAA;EAAA;EAAAG,KAAA;IAAAJ,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAiBrB,CAAC;AACF,MAAMC,cAAc,gBAAGf,QAAA;EAAAgB,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAR,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAE,MAAA;IAAAT,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAV,CAAA;AAAA,CAmBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMa,6BAA6B,GAAIC,KAAK,IAAG;EACtD,MAAMC,MAAM,GAAGtB,SAAS,CAAC,CAAC;EAC1B,MAAMuB,UAAU,GAAGtB,aAAa,CAAC,CAAC;EAClC,MAAMuB,WAAW,GAAGhB,cAAc,CAAC,CAAC;EACpC,IAAIiB,WAAW;EACf,MAAMC,IAAI,GAAG,CAACD,WAAW,GAAGJ,KAAK,CAACK,IAAI,MAAM,IAAI,IAAID,WAAW,KAAK,KAAK,CAAC,GAAGA,WAAW,GAAG,QAAQ;EACnG,IAAIE,YAAY;EAChBN,KAAK,CAACtB,IAAI,CAAC6B,SAAS,GAAGlC,YAAY,CAACI,qBAAqB,CAACC,IAAI,EAAEuB,MAAM,EAAEC,UAAU,CAACG,IAAI,CAAC,EAAEF,WAAW,CAAC,CAACG,YAAY,GAAGN,KAAK,CAACQ,KAAK,MAAM,IAAI,IAAIF,YAAY,KAAK,KAAK,CAAC,GAAGA,YAAY,GAAG,QAAQ,CAAC,EAAEN,KAAK,CAACtB,IAAI,CAAC6B,SAAS,CAAC;EACxN,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}

package/lib/components/ImageSwatch/ImageSwatch.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useImageSwatch_unstable } from './useImageSwatch';
+import { renderImageSwatch_unstable } from './renderImageSwatch';
+import { useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * ImageSwatch component is used to render an images, patterns and textures.
+ */ export const ImageSwatch = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useImageSwatch_unstable(props, ref);
+    useImageSwatchStyles_unstable(state);
+    useCustomStyleHook_unstable('useImageSwatchStyles_unstable')(state);
+    return renderImageSwatch_unstable(state);
+});
+ImageSwatch.displayName = 'ImageSwatch';

package/lib/components/ImageSwatch/ImageSwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ImageSwatch.tsx"],"sourcesContent":["import * 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,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

package/lib/components/ImageSwatch/ImageSwatch.types.js

@@ -0,0 +1 @@
+export { };

package/lib/components/ImageSwatch/ImageSwatch.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["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":"AAAA,WA6BI"}

package/lib/components/ImageSwatch/index.js

@@ -0,0 +1,5 @@
+export * from './ImageSwatch';
+export * from './ImageSwatch.types';
+export * from './renderImageSwatch';
+export * from './useImageSwatch';
+export * from './useImageSwatchStyles.styles';

package/lib/components/ImageSwatch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ImageSwatch';\nexport * from './ImageSwatch.types';\nexport * from './renderImageSwatch';\nexport * from './useImageSwatch';\nexport * from './useImageSwatchStyles.styles';\n"],"names":[],"mappings":"AAAA,cAAc,gBAAgB;AAC9B,cAAc,sBAAsB;AACpC,cAAc,sBAAsB;AACpC,cAAc,mBAAmB;AACjC,cAAc,gCAAgC"}

package/lib/components/ImageSwatch/renderImageSwatch.js

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of ImageSwatch
+ */ export const renderImageSwatch_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

package/lib/components/ImageSwatch/renderImageSwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["renderImageSwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } 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) => {\n  assertSlots<ImageSwatchSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderImageSwatch_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

package/lib/components/ImageSwatch/useImageSwatch.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';
+import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
+/**
+ * Create the state required to render ImageSwatch.
+ *
+ * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,
+ * before being passed to renderImageSwatch_unstable.
+ *
+ * @param props - props from this instance of ImageSwatch
+ * @param ref - reference to root HTMLDivElement of ImageSwatch
+ */ export const useImageSwatch_unstable = (props, ref)=>{
+    const { src, value, onClick, style, ...rest } = props;
+    const size = useSwatchPickerContextValue_unstable((ctx)=>ctx.size);
+    const shape = useSwatchPickerContextValue_unstable((ctx)=>ctx.shape);
+    const isGrid = useSwatchPickerContextValue_unstable((ctx)=>ctx.isGrid);
+    const requestSelectionChange = useSwatchPickerContextValue_unstable((ctx)=>ctx.requestSelectionChange);
+    const selected = useSwatchPickerContextValue_unstable((ctx)=>ctx.selectedValue === value);
+    const role = isGrid ? 'gridcell' : 'radio';
+    const ariaSelected = isGrid ? {
+        'aria-selected': selected
+    } : {
+        'aria-checked': selected
+    };
+    const onImageSwatchClick = useEventCallback(mergeCallbacks(onClick, (event)=>requestSelectionChange(event, {
+            selectedValue: value,
+            selectedSwatch: src
+        })));
+    return {
+        components: {
+            root: 'button'
+        },
+        root: slot.always(getIntrinsicElementProps('button', {
+            ref,
+            role,
+            ...ariaSelected,
+            onClick: onImageSwatchClick,
+            ...rest,
+            style: {
+                backgroundImage: `url(${src})`,
+                ...style
+            }
+        }), {
+            elementType: 'button'
+        }),
+        value,
+        selected,
+        size,
+        shape
+    };
+};

package/lib/components/ImageSwatch/useImageSwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useImageSwatch.ts"],"sourcesContent":["import * 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,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,cAAc,QAAQ,4BAA4B;AAE7G,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,OAAOT,qCAAqCU,CAAAA,MAAOA,IAAID,IAAI;IACjE,MAAME,QAAQX,qCAAqCU,CAAAA,MAAOA,IAAIC,KAAK;IACnE,MAAMC,SAASZ,qCAAqCU,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,yBAAyBb,qCAAqCU,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,WAAWd,qCAAqCU,CAAAA,MAAOA,IAAIK,aAAa,KAAKV;IAEnF,MAAMW,OAAOJ,SAAS,aAAa;IACnC,MAAMK,eAAeL,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,qBAAqBpB,iBACzBC,eAAeO,SAAS,CAACa,QACvBN,uBAAuBM,OAAO;YAC5BJ,eAAeV;YACfe,gBAAgBhB;QAClB;IAIJ,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,KAAK0B,MAAM,CACf3B,yBAAyB,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"}