@synnaxlabs/pluto 0.13.0 → 0.14.0

package/dist/{SelectLevel-cewIWtOv.js.map → SelectLevel-Uod3Ez6y.js.map}

@@ -1 +1 @@
-{"version":3,"file":"SelectLevel-cewIWtOv.js","sources":["../src/hooks/useSelectMultiple.ts","../src/select/Button.tsx","../src/text/SelectLevel.tsx"],"sourcesContent":["// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { useCallback, useRef } from \"react\";\n\nimport { type Key, type KeyedRecord, unique } from \"@synnaxlabs/x\";\n\nimport { Triggers } from \"@/triggers\";\n\n/**\n * Extra information passed as an additional argument to the `onChange` callback.\n * of the {@link useSelectMultiple} hook.\n */\nexport interface UseSelectMultipleOnChangeExtra<\n  K extends Key = Key,\n  E extends KeyedRecord<K, E> = KeyedRecord<K>,\n> {\n  /** The key of the entry that was last clicked. */\n  clicked: K | null;\n  /** The entries that are currently selected. */\n  entries: E[];\n}\n\n/** Props for the {@link useSelectMultiple} hook. */\nexport interface UseSelectMultipleProps<\n  K extends Key = Key,\n  E extends KeyedRecord<K, E> = KeyedRecord<K>,\n> {\n  data: E[];\n  allowMultiple?: boolean;\n  allowNone?: boolean;\n  replaceOnSingle?: boolean;\n  value: K[];\n  onChange: (next: K[], extra: UseSelectMultipleOnChangeExtra<K, E>) => void;\n}\n\n/** Return value for the {@link useSelectMultiple} hook. */\nexport interface UseSelectMultipleReturn<\n  K extends Key = Key,\n  E extends KeyedRecord<K, E> = KeyedRecord<K>,\n> {\n  onSelect: (key: K) => void;\n  clear: () => void;\n}\n\n/**\n * Implements generic multiple selection over a collection of keyed records. The hook\n * does not maintain internal selection state, but instead relies on the `value` and\n * `onChange` props to manage the selection state. This allows the hook to be used\n * with any selection state implementation, such as a React state hook or a Redux\n * store.\n *\n * The hook also supports shift-selection of a range. This means that the data passed in\n * must be in the same order/cardinality as the data that is displayed.\n *\n * It's important to note that the hook implements the InputControl interface, which\n *  means that it can be used as a controlled input in a form.\n *\n * @param props - The props for the hook.\n * @param props.data - The data to select from.\n * @param props.value - The current selection state.\n * @param props.onChange - The callback to invoke when the selection state changes.\n * @param props.allowMultiple - Whether to allow multiple selections.\n *\n * @returns transform - A transform that can be used to add a `selected` property to\n * each record in the data.\n * @returns onSelect - A callback that can be used to select a record. This should\n * probably be passed to the `onClick` corresponding to each record.\n * @returns clear - A callback that can be used to clear the selection.\n */\nexport const useSelectMultiple = <\n  K extends Key = Key,\n  E extends KeyedRecord<K, E> = KeyedRecord<K>,\n>({\n  data = [],\n  value = [],\n  allowMultiple = true,\n  allowNone = true,\n  replaceOnSingle = false,\n  onChange,\n}: UseSelectMultipleProps<K, E>): UseSelectMultipleReturn<K, E> => {\n  const shiftValueRef = useRef<K | null>(null);\n  const shift = Triggers.useHeldRef({ triggers: [[\"Shift\"]], loose: true });\n\n  const handleSelect = useCallback(\n    (key: K): void => {\n      let nextSelected: K[] = [];\n      const shiftValue = shiftValueRef.current;\n      if (!allowMultiple) {\n        nextSelected = value.includes(key) ? [] : [key];\n      } else if (shift.current.held && shiftValue !== null) {\n        // We might select in reverse order, so we need to sort the indexes.\n        const [start, end] = [\n          data.findIndex((v) => v.key === key),\n          data.findIndex((v) => v.key === shiftValue),\n        ].sort((a, b) => a - b);\n        const nextKeys = data.slice(start, end + 1).map(({ key }) => key);\n        // We already deselect the shiftSelected key, so we don't included it\n        // when checking whether to select or deselect the entire range.\n        if (\n          nextKeys.slice(1, nextKeys.length - 1).every((k) => value.includes(k)) &&\n          value.includes(key)\n        )\n          nextSelected = value.filter((k) => !nextKeys.includes(k));\n        else nextSelected = [...value, ...nextKeys];\n        shiftValueRef.current = null;\n      } else {\n        shiftValueRef.current = key;\n        if (replaceOnSingle)\n          nextSelected = value.includes(key) && value.length === 1 ? [] : [key];\n        else if (value.includes(key)) nextSelected = value.filter((k) => k !== key);\n        else nextSelected = [...value, key];\n      }\n      const v = unique(nextSelected);\n      if (!allowNone && v.length === 0) return;\n      if (v.length === 0) shiftValueRef.current = null;\n      onChange(unique(nextSelected), {\n        entries: data.filter(({ key }) => nextSelected.includes(key)),\n        clicked: key,\n      });\n    },\n    [onChange, value, data, allowMultiple],\n  );\n\n  const clear = useCallback(\n    (): void => onChange([], { entries: [], clicked: null }),\n    [onChange],\n  );\n\n  return { onSelect: handleSelect, clear };\n};\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type Key, type KeyedRenderableRecord } from \"@synnaxlabs/x\";\n\nimport { Align } from \"@/align\";\nimport { Button as CoreButton } from \"@/button\";\nimport {\n  type UseSelectMultipleProps,\n  useSelectMultiple,\n} from \"@/hooks/useSelectMultiple\";\nimport { type Input } from \"@/input\";\nimport { type RenderProp } from \"@/util/renderProp\";\n\nexport interface ButtonOptionProps<\n  K extends Key = Key,\n  E extends KeyedRenderableRecord<K, E> = KeyedRenderableRecord<K>,\n> extends Pick<CoreButton.ButtonProps, \"onClick\"> {\n  key: K;\n  selected: boolean;\n  entry: E;\n  title: E[keyof E];\n}\n\nexport interface ButtonProps<\n  K extends Key = Key,\n  E extends KeyedRenderableRecord<K, E> = KeyedRenderableRecord<K>,\n> extends Input.Control<K>,\n    Omit<Align.PackProps, \"children\" | \"onChange\">,\n    Pick<UseSelectMultipleProps, \"allowNone\" | \"allowMultiple\"> {\n  children?: RenderProp<ButtonOptionProps<K, E>>;\n  entryRenderKey?: keyof E;\n  data: E[];\n}\n\nexport const Button = <\n  K extends Key = Key,\n  E extends KeyedRenderableRecord<K, E> = KeyedRenderableRecord<K>,\n>({\n  children = defaultSelectButtonOption,\n  value,\n  onChange,\n  entryRenderKey = \"key\",\n  allowNone = false,\n  allowMultiple = false,\n  data,\n  ...props\n}: ButtonProps<K, E>): JSX.Element => {\n  const { onSelect } = useSelectMultiple({\n    allowMultiple,\n    allowNone,\n    data,\n    value: [value],\n    onChange: ([v]) => onChange(v),\n  });\n\n  return (\n    <Align.Pack {...props}>\n      {data.map((e) => {\n        return children({\n          key: e.key,\n          onClick: () => onSelect(e.key),\n          selected: e.key === value,\n          entry: e,\n          title: e[entryRenderKey],\n        });\n      })}\n    </Align.Pack>\n  );\n};\n\nconst defaultSelectButtonOption = <\n  K extends Key = Key,\n  E extends KeyedRenderableRecord<K, E> = KeyedRenderableRecord<K>,\n>({\n  key,\n  onClick,\n  selected,\n  title,\n}: ButtonOptionProps<K, E>): JSX.Element => {\n  return (\n    <CoreButton.Button\n      key={key}\n      onClick={onClick}\n      variant={selected ? \"filled\" : \"outlined\"}\n    >\n      {title}\n    </CoreButton.Button>\n  );\n};\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type ReactElement } from \"react\";\n\nimport { Button as CoreButton } from \"@/button\";\nimport { Button, type ButtonOptionProps, type ButtonProps } from \"@/select/Button\";\nimport { type Level } from \"@/text/types\";\n\ninterface Entry {\n  key: Level;\n  label: string;\n}\n\nexport interface SelectLevelProps\n  extends Omit<ButtonProps<Level, Entry>, \"data\" | \"entryRenderKey\"> {}\n\nconst DATA: Entry[] = [\n  {\n    key: \"h2\",\n    label: \"XL\",\n  },\n  {\n    key: \"h3\",\n    label: \"L\",\n  },\n  {\n    key: \"h4\",\n    label: \"M\",\n  },\n  {\n    key: \"p\",\n    label: \"S\",\n  },\n  {\n    key: \"small\",\n    label: \"XS\",\n  },\n];\n\nconst defaultSelectDirectionButton = ({\n  key,\n  entry,\n  onClick,\n  selected,\n}: ButtonOptionProps<Level, Entry>): ReactElement => {\n  return (\n    <CoreButton.Button\n      key={key}\n      variant={selected ? \"filled\" : \"outlined\"}\n      onClick={onClick}\n    >\n      {entry.label}\n    </CoreButton.Button>\n  );\n};\n\nexport const SelectLevel = ({\n  children = defaultSelectDirectionButton,\n  ...props\n}: SelectLevelProps): ReactElement => {\n  return (\n    <Button {...props} data={DATA}>\n      {children}\n    </Button>\n  );\n};\n"],"names":["Triggers.useHeldRef","v","key","jsx","Align.Pack","CoreButton.Button"],"mappings":"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"}
+{"version":3,"file":"SelectLevel-Uod3Ez6y.js","sources":["../src/hooks/useSelectMultiple.ts","../src/select/Button.tsx","../src/text/SelectLevel.tsx"],"sourcesContent":["// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { useCallback, useRef } from \"react\";\n\nimport { type Key, type KeyedRecord, unique } from \"@synnaxlabs/x\";\n\nimport { Triggers } from \"@/triggers\";\n\n/**\n * Extra information passed as an additional argument to the `onChange` callback.\n * of the {@link useSelectMultiple} hook.\n */\nexport interface UseSelectMultipleOnChangeExtra<\n  K extends Key = Key,\n  E extends KeyedRecord<K, E> = KeyedRecord<K>,\n> {\n  /** The key of the entry that was last clicked. */\n  clicked: K | null;\n  /** The entries that are currently selected. */\n  entries: E[];\n}\n\n/** Props for the {@link useSelectMultiple} hook. */\nexport interface UseSelectMultipleProps<\n  K extends Key = Key,\n  E extends KeyedRecord<K, E> = KeyedRecord<K>,\n> {\n  data: E[];\n  allowMultiple?: boolean;\n  allowNone?: boolean;\n  replaceOnSingle?: boolean;\n  value: K[];\n  onChange: (next: K[], extra: UseSelectMultipleOnChangeExtra<K, E>) => void;\n}\n\n/** Return value for the {@link useSelectMultiple} hook. */\nexport interface UseSelectMultipleReturn<\n  K extends Key = Key,\n  E extends KeyedRecord<K, E> = KeyedRecord<K>,\n> {\n  onSelect: (key: K) => void;\n  clear: () => void;\n}\n\n/**\n * Implements generic multiple selection over a collection of keyed records. The hook\n * does not maintain internal selection state, but instead relies on the `value` and\n * `onChange` props to manage the selection state. This allows the hook to be used\n * with any selection state implementation, such as a React state hook or a Redux\n * store.\n *\n * The hook also supports shift-selection of a range. This means that the data passed in\n * must be in the same order/cardinality as the data that is displayed.\n *\n * It's important to note that the hook implements the InputControl interface, which\n *  means that it can be used as a controlled input in a form.\n *\n * @param props - The props for the hook.\n * @param props.data - The data to select from.\n * @param props.value - The current selection state.\n * @param props.onChange - The callback to invoke when the selection state changes.\n * @param props.allowMultiple - Whether to allow multiple selections.\n *\n * @returns transform - A transform that can be used to add a `selected` property to\n * each record in the data.\n * @returns onSelect - A callback that can be used to select a record. This should\n * probably be passed to the `onClick` corresponding to each record.\n * @returns clear - A callback that can be used to clear the selection.\n */\nexport const useSelectMultiple = <\n  K extends Key = Key,\n  E extends KeyedRecord<K, E> = KeyedRecord<K>,\n>({\n  data = [],\n  value = [],\n  allowMultiple = true,\n  allowNone = true,\n  replaceOnSingle = false,\n  onChange,\n}: UseSelectMultipleProps<K, E>): UseSelectMultipleReturn<K, E> => {\n  const shiftValueRef = useRef<K | null>(null);\n  const shift = Triggers.useHeldRef({ triggers: [[\"Shift\"]], loose: true });\n\n  const handleSelect = useCallback(\n    (key: K): void => {\n      let nextSelected: K[] = [];\n      const shiftValue = shiftValueRef.current;\n      if (!allowMultiple) {\n        nextSelected = value.includes(key) ? [] : [key];\n      } else if (shift.current.held && shiftValue !== null) {\n        // We might select in reverse order, so we need to sort the indexes.\n        const [start, end] = [\n          data.findIndex((v) => v.key === key),\n          data.findIndex((v) => v.key === shiftValue),\n        ].sort((a, b) => a - b);\n        const nextKeys = data.slice(start, end + 1).map(({ key }) => key);\n        // We already deselect the shiftSelected key, so we don't included it\n        // when checking whether to select or deselect the entire range.\n        if (\n          nextKeys.slice(1, nextKeys.length - 1).every((k) => value.includes(k)) &&\n          value.includes(key)\n        )\n          nextSelected = value.filter((k) => !nextKeys.includes(k));\n        else nextSelected = [...value, ...nextKeys];\n        shiftValueRef.current = null;\n      } else {\n        shiftValueRef.current = key;\n        if (replaceOnSingle)\n          nextSelected = value.includes(key) && value.length === 1 ? [] : [key];\n        else if (value.includes(key)) nextSelected = value.filter((k) => k !== key);\n        else nextSelected = [...value, key];\n      }\n      const v = unique(nextSelected);\n      if (!allowNone && v.length === 0) return;\n      if (v.length === 0) shiftValueRef.current = null;\n      onChange(unique(nextSelected), {\n        entries: data.filter(({ key }) => nextSelected.includes(key)),\n        clicked: key,\n      });\n    },\n    [onChange, value, data, allowMultiple],\n  );\n\n  const clear = useCallback(\n    (): void => onChange([], { entries: [], clicked: null }),\n    [onChange],\n  );\n\n  return { onSelect: handleSelect, clear };\n};\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type Key, type KeyedRenderableRecord } from \"@synnaxlabs/x\";\n\nimport { Align } from \"@/align\";\nimport { Button as CoreButton } from \"@/button\";\nimport {\n  type UseSelectMultipleProps,\n  useSelectMultiple,\n} from \"@/hooks/useSelectMultiple\";\nimport { type Input } from \"@/input\";\nimport { type RenderProp } from \"@/util/renderProp\";\n\nexport interface ButtonOptionProps<\n  K extends Key = Key,\n  E extends KeyedRenderableRecord<K, E> = KeyedRenderableRecord<K>,\n> extends Pick<CoreButton.ButtonProps, \"onClick\"> {\n  key: K;\n  selected: boolean;\n  entry: E;\n  title: E[keyof E];\n}\n\nexport interface ButtonProps<\n  K extends Key = Key,\n  E extends KeyedRenderableRecord<K, E> = KeyedRenderableRecord<K>,\n> extends Input.Control<K>,\n    Omit<Align.PackProps, \"children\" | \"onChange\">,\n    Pick<UseSelectMultipleProps, \"allowNone\" | \"allowMultiple\"> {\n  children?: RenderProp<ButtonOptionProps<K, E>>;\n  entryRenderKey?: keyof E;\n  data: E[];\n}\n\nexport const Button = <\n  K extends Key = Key,\n  E extends KeyedRenderableRecord<K, E> = KeyedRenderableRecord<K>,\n>({\n  children = defaultSelectButtonOption,\n  value,\n  onChange,\n  entryRenderKey = \"key\",\n  allowNone = false,\n  allowMultiple = false,\n  data,\n  ...props\n}: ButtonProps<K, E>): JSX.Element => {\n  const { onSelect } = useSelectMultiple({\n    allowMultiple,\n    allowNone,\n    data,\n    value: [value],\n    onChange: ([v]) => onChange(v),\n  });\n\n  return (\n    <Align.Pack {...props}>\n      {data.map((e) => {\n        return children({\n          key: e.key,\n          onClick: () => onSelect(e.key),\n          selected: e.key === value,\n          entry: e,\n          title: e[entryRenderKey],\n        });\n      })}\n    </Align.Pack>\n  );\n};\n\nconst defaultSelectButtonOption = <\n  K extends Key = Key,\n  E extends KeyedRenderableRecord<K, E> = KeyedRenderableRecord<K>,\n>({\n  key,\n  onClick,\n  selected,\n  title,\n}: ButtonOptionProps<K, E>): JSX.Element => {\n  return (\n    <CoreButton.Button\n      key={key}\n      onClick={onClick}\n      variant={selected ? \"filled\" : \"outlined\"}\n    >\n      {title}\n    </CoreButton.Button>\n  );\n};\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type ReactElement } from \"react\";\n\nimport { Button as CoreButton } from \"@/button\";\nimport { Button, type ButtonOptionProps, type ButtonProps } from \"@/select/Button\";\nimport { type Level } from \"@/text/types\";\n\ninterface Entry {\n  key: Level;\n  label: string;\n}\n\nexport interface SelectLevelProps\n  extends Omit<ButtonProps<Level, Entry>, \"data\" | \"entryRenderKey\"> {}\n\nconst DATA: Entry[] = [\n  {\n    key: \"h2\",\n    label: \"XL\",\n  },\n  {\n    key: \"h3\",\n    label: \"L\",\n  },\n  {\n    key: \"h4\",\n    label: \"M\",\n  },\n  {\n    key: \"p\",\n    label: \"S\",\n  },\n  {\n    key: \"small\",\n    label: \"XS\",\n  },\n];\n\nconst defaultSelectDirectionButton = ({\n  key,\n  entry,\n  onClick,\n  selected,\n}: ButtonOptionProps<Level, Entry>): ReactElement => {\n  return (\n    <CoreButton.Button\n      key={key}\n      variant={selected ? \"filled\" : \"outlined\"}\n      onClick={onClick}\n    >\n      {entry.label}\n    </CoreButton.Button>\n  );\n};\n\nexport const SelectLevel = ({\n  children = defaultSelectDirectionButton,\n  ...props\n}: SelectLevelProps): ReactElement => {\n  return (\n    <Button {...props} data={DATA}>\n      {children}\n    </Button>\n  );\n};\n"],"names":["useSelectMultiple","data","value","allowMultiple","allowNone","replaceOnSingle","onChange","shiftValueRef","useRef","shift","Triggers.useHeldRef","handleSelect","useCallback","key","nextSelected","shiftValue","start","end","v","a","b","nextKeys","k","unique","clear","Button","children","defaultSelectButtonOption","entryRenderKey","props","onSelect","jsx","Align.Pack","e","onClick","selected","title","CoreButton.Button","DATA","defaultSelectDirectionButton","entry","SelectLevel"],"mappings":"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"}

package/dist/Selector-8rTHUToj.cjs

@@ -0,0 +1,2 @@
+"use strict";const l=require("./jsx-runtime-evvPGacs.cjs"),d=require("react"),j=require("./Toggle-QnKinMl4.cjs"),b=require("./Center-ER_owvfX.cjs"),i=require("./css-s9KpanYu.cjs");require("./component-dgLAEMbt.cjs");const k=(r="",e=[])=>{var t;if(e.length!==0)return e.find(s=>s.tabKey===r)!=null?r:(t=e[e.length-1])==null?void 0:t.tabKey},N=(r,e,t)=>{if(e=e.trim(),e.length===0)return t;const s=t.find(n=>n.tabKey===r);return s==null||s.name===e?t:t.map(n=>n.tabKey===r?{...n,name:e}:n)},P=({tabs:r,content:e,onSelect:t})=>{var c;const[s,n]=d.useState(((c=r[0])==null?void 0:c.tabKey)??"");return{tabs:r,selected:s,content:e,onSelect:o=>{n(o),t==null||t(o)}}},f=d.createContext({tabs:[]}),g=()=>d.useContext(f),q=({content:r,children:e,onSelect:t,selected:s,closable:n,tabs:u,onClose:c,onDragStart:o,onDragEnd:p,onCreate:C,onRename:h,emptyContent:E,className:m,onDragOver:x,onDrop:R,size:v="medium",...a})=>l.jsxRuntimeExports.jsx(b.Space,{empty:!0,className:i.CSS(i.CSS.B("tabs"),m),onDragOver:x,onDrop:R,...a,children:l.jsxRuntimeExports.jsxs(f.Provider,{value:{tabs:u,emptyContent:E,selected:s,closable:n,content:e??r,onSelect:t,onClose:c,onDragStart:o,onDragEnd:p,onRename:h,onCreate:C,onDrop:R},children:[l.jsxRuntimeExports.jsx(T,{size:v}),l.jsxRuntimeExports.jsx(B,{})]})}),I=f.Provider,B=()=>{const{tabs:r,selected:e,content:t,emptyContent:s,onSelect:n}=g();let u=null;const c=r.find(o=>o.tabKey===e);return e==null||c==null?s??null:(t!=null?u=t(c):c.content!=null&&(u=c.content),l.jsxRuntimeExports.jsx("div",{className:i.CSS.B("tabs-content"),onClick:()=>n==null?void 0:n(e),style:{width:"100%",height:"100%"},children:u}))},S="tabs-selector",T=({className:r,size:e="medium",...t})=>{const{tabs:s,selected:n,onSelect:u,onClose:c,closable:o,onDragEnd:p,onDragStart:C,onDrop:h,onRename:E,onCreate:m}=g();return l.jsxRuntimeExports.jsxs(b.Space,{className:i.CSS(i.CSS.B(S),i.CSS.size(e),r),direction:"x",align:"center",justify:"start",onDrop:h,empty:!0,...t,children:[l.jsxRuntimeExports.jsx(b.Space,{className:i.CSS.BE(S,"tabs"),empty:!0,direction:"x",grow:!0,children:s.map(x=>l.jsxRuntimeExports.jsx(W,{selected:n,onSelect:u,onClose:c,onDragStart:C,onDragEnd:p,onRename:E,closable:x.closable??o,size:e,...x},x.tabKey))}),l.jsxRuntimeExports.jsx(b.Space,{className:i.CSS.BE(S,"actions"),children:m!=null&&l.jsxRuntimeExports.jsx(j.Icon,{size:e,sharp:!0,onClick:m,children:l.jsxRuntimeExports.jsx(j.n0.Add,{})})})]})},W=({selected:r,onSelect:e,onClose:t,tabKey:s,name:n,onDragStart:u,onDragEnd:c,onRename:o,closable:p=!0,icon:C,size:h,editable:E=!0})=>{const m=d.useCallback(a=>u==null?void 0:u(a,{tabKey:s,name:n}),[u,s,n]),x=d.useCallback(a=>c==null?void 0:c(a,{tabKey:s,name:n}),[c,s,n]),R=d.useCallback(a=>{a.stopPropagation(),t==null||t(s)},[t,s]),v=d.useCallback(()=>e==null?void 0:e(s),[e,s]);return l.jsxRuntimeExports.jsxs(b.Pack,{size:h,className:i.CSS(i.CSS.BE(S,"btn"),o==null&&i.CSS.BEM(S,"btn","uneditable"),i.CSS.selected(r===s),p&&t!=null&&i.CSS.BEM(S,"btn","closable")),draggable:!0,direction:"x",justify:"center",align:"center",onClick:v,onDragStart:m,onDragEnd:x,bordered:!1,rounded:!1,children:[l.jsxRuntimeExports.jsx(y,{name:n,tabKey:s,onRename:o,icon:C,editable:E}),p&&t!=null&&l.jsxRuntimeExports.jsx(j.Icon,{onClick:R,children:l.jsxRuntimeExports.jsx(j.n0.Close,{"aria-label":"pluto-tabs__close"})})]})},y=({onRename:r,name:e,tabKey:t,icon:s,editable:n=!0})=>r==null||!n?s!=null?l.jsxRuntimeExports.jsx(j.WithIcon,{startIcon:s,level:"p",noWrap:!0,children:e}):l.jsxRuntimeExports.jsx(j.Text,{level:"p",noWrap:!0,children:e}):l.jsxRuntimeExports.jsx(j.Editable,{level:"p",onChange:u=>r(t,u),value:e,noWrap:!0});exports.Content=B;exports.Provider=I;exports.Selector=T;exports.Tabs=q;exports.TabsContext=f;exports.rename=N;exports.resetSelection=k;exports.useStatic=P;exports.useTabsContext=g;
+//# sourceMappingURL=Selector-8rTHUToj.cjs.map

package/dist/{Selector-hQLSIYum.cjs.map → Selector-8rTHUToj.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"Selector-hQLSIYum.cjs","sources":["../src/tabs/Tabs.tsx","../src/tabs/Selector.tsx"],"sourcesContent":["// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport React, {\n  createContext,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n  useState,\n} from \"react\";\n\nimport { Align } from \"@/align\";\nimport { CSS } from \"@/css\";\nimport { type TabSpec, Selector } from \"@/tabs/Selector\";\nimport { type ComponentSize } from \"@/util/component\";\nimport { type RenderProp } from \"@/util/renderProp\";\n\nexport interface Tab extends TabSpec {\n  content?: ReactNode;\n}\n\nexport type TabRenderProp = RenderProp<Tab>;\n\nexport interface UseStaticTabsProps {\n  tabs: Tab[];\n  content?: TabRenderProp;\n  onSelect?: (key: string) => void;\n}\n\nexport const resetSelection = (selected = \"\", tabs: Tab[] = []): string | undefined => {\n  if (tabs.length === 0) return undefined;\n  return tabs.find((t) => t.tabKey === selected) != null\n    ? selected\n    : tabs[tabs.length - 1]?.tabKey;\n};\n\nexport const rename = (key: string, title: string, tabs: Tab[]): Tab[] => {\n  title = title.trim();\n  if (title.length === 0) return tabs;\n  const t = tabs.find((t) => t.tabKey === key);\n  if (t == null || t.name === title) return tabs;\n  return tabs.map((t) => (t.tabKey === key ? { ...t, name: title } : t));\n};\n\nexport const useStatic = ({\n  tabs,\n  content,\n  onSelect,\n}: UseStaticTabsProps): TabsContextValue => {\n  const [selected, setSelected] = useState(tabs[0]?.tabKey ?? \"\");\n\n  const handleSelect = (key: string): void => {\n    setSelected(key);\n    onSelect?.(key);\n  };\n\n  return {\n    tabs,\n    selected,\n    content,\n    onSelect: handleSelect,\n  };\n};\n\nexport interface TabsContextValue {\n  tabs: Tab[];\n  emptyContent?: ReactElement | null;\n  closable?: boolean;\n  selected?: string;\n  onSelect?: (key: string) => void;\n  content?: TabRenderProp;\n  onClose?: (key: string) => void;\n  onDragStart?: (e: React.DragEvent<HTMLDivElement>, tab: TabSpec) => void;\n  onDragEnd?: (e: React.DragEvent<HTMLDivElement>, tab: TabSpec) => void;\n  onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;\n  onRename?: (key: string, title: string) => void;\n  onCreate?: () => void;\n}\n\nexport interface TabsProps\n  extends Omit<\n      Align.SpaceProps,\n      \"children\" | \"onSelect\" | \"size\" | \"onDragStart\" | \"onDragEnd\" | \"content\"\n    >,\n    TabsContextValue {\n  children?: TabRenderProp;\n  size?: ComponentSize;\n}\n\nexport const TabsContext = createContext<TabsContextValue>({ tabs: [] });\n\nexport const useTabsContext = (): TabsContextValue => useContext(TabsContext);\n\nexport const Tabs = ({\n  content,\n  children,\n  onSelect,\n  selected,\n  closable,\n  tabs,\n  onClose,\n  onDragStart,\n  onDragEnd,\n  onCreate,\n  onRename,\n  emptyContent,\n  className,\n  onDragOver,\n  onDrop,\n  size = \"medium\",\n  ...props\n}: TabsProps): ReactElement => (\n  <Align.Space\n    empty\n    className={CSS(CSS.B(\"tabs\"), className)}\n    onDragOver={onDragOver}\n    onDrop={onDrop}\n    {...props}\n  >\n    <TabsContext.Provider\n      value={{\n        tabs,\n        emptyContent,\n        selected,\n        closable,\n        content: children ?? content,\n        onSelect,\n        onClose,\n        onDragStart,\n        onDragEnd,\n        onRename,\n        onCreate,\n        onDrop,\n      }}\n    >\n      <Selector size={size} />\n      <Content />\n    </TabsContext.Provider>\n  </Align.Space>\n);\n\nexport const Provider = TabsContext.Provider;\n\nexport const Content = (): ReactElement | null => {\n  const {\n    tabs,\n    selected,\n    content: renderProp,\n    emptyContent,\n    onSelect,\n  } = useTabsContext();\n  let content: ReactNode = null;\n  const selectedTab = tabs.find((tab) => tab.tabKey === selected);\n  if (selected == null || selectedTab == null) return emptyContent ?? null;\n  if (renderProp != null) content = renderProp(selectedTab);\n  else if (selectedTab.content != null) content = selectedTab.content;\n  return (\n    <div\n      className={CSS.B(\"tabs-content\")}\n      onClick={() => onSelect?.(selected)}\n      style={{ width: \"100%\", height: \"100%\" }}\n    >\n      {content}\n    </div>\n  );\n};\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport {\n  type DragEventHandler,\n  type MouseEventHandler,\n  type ReactElement,\n  useCallback,\n} from \"react\";\n\nimport { Icon } from \"@synnaxlabs/media\";\n\nimport { Align } from \"@/align\";\nimport { Button } from \"@/button\";\nimport { CSS } from \"@/css\";\nimport { useTabsContext } from \"@/tabs/Tabs\";\nimport { Text } from \"@/text\";\nimport { type ComponentSize } from \"@/util/component\";\n\nimport \"@/tabs/Selector.css\";\n\nexport interface TabSpec {\n  tabKey: string;\n  name: string;\n  closable?: boolean;\n  icon?: ReactElement;\n  editable?: boolean;\n}\n\nexport interface SelectorProps extends Omit<Align.SpaceProps, \"children\" | \"size\"> {\n  size: ComponentSize;\n}\n\nconst CLS = \"tabs-selector\";\n\nexport const Selector = ({\n  className,\n  size = \"medium\",\n  ...props\n}: SelectorProps): ReactElement | null => {\n  const {\n    tabs,\n    selected,\n    onSelect,\n    onClose,\n    closable,\n    onDragEnd,\n    onDragStart,\n    onDrop,\n    onRename,\n    onCreate,\n  } = useTabsContext();\n  return (\n    <Align.Space\n      className={CSS(CSS.B(CLS), CSS.size(size), className)}\n      direction=\"x\"\n      align=\"center\"\n      justify=\"start\"\n      onDrop={onDrop}\n      empty\n      {...props}\n    >\n      <Align.Space className={CSS.BE(CLS, \"tabs\")} empty direction=\"x\" grow>\n        {tabs.map((tab) => (\n          <SelectorButton\n            key={tab.tabKey}\n            selected={selected}\n            onSelect={onSelect}\n            onClose={onClose}\n            onDragStart={onDragStart}\n            onDragEnd={onDragEnd}\n            onRename={onRename}\n            closable={tab.closable ?? closable}\n            size={size}\n            {...tab}\n          />\n        ))}\n      </Align.Space>\n      <Align.Space className={CSS.BE(CLS, \"actions\")}>\n        {onCreate != null && (\n          <Button.Icon size={size} sharp onClick={onCreate}>\n            <Icon.Add />\n          </Button.Icon>\n        )}\n      </Align.Space>\n    </Align.Space>\n  );\n};\n\nconst SelectorButton = ({\n  selected,\n  onSelect,\n  onClose,\n  tabKey,\n  name,\n  onDragStart,\n  onDragEnd,\n  onRename,\n  closable = true,\n  icon,\n  size,\n  editable = true,\n}: SelectorButtonProps): ReactElement => {\n  const handleDragStart: DragEventHandler<HTMLDivElement> = useCallback(\n    (e) => onDragStart?.(e, { tabKey, name }),\n    [onDragStart, tabKey, name],\n  );\n\n  const handleDragEnd: DragEventHandler<HTMLDivElement> = useCallback(\n    (e) => onDragEnd?.(e, { tabKey, name }),\n    [onDragEnd, tabKey, name],\n  );\n\n  const handleClose: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (e) => {\n      e.stopPropagation();\n      onClose?.(tabKey);\n    },\n    [onClose, tabKey],\n  );\n\n  const _onSelect = useCallback(() => onSelect?.(tabKey), [onSelect, tabKey]);\n\n  return (\n    <Align.Pack\n      size={size}\n      className={CSS(\n        CSS.BE(CLS, \"btn\"),\n        onRename == null && CSS.BEM(CLS, \"btn\", \"uneditable\"),\n        CSS.selected(selected === tabKey),\n        closable && onClose != null && CSS.BEM(CLS, \"btn\", \"closable\"),\n      )}\n      draggable\n      direction=\"x\"\n      justify=\"center\"\n      align=\"center\"\n      onClick={_onSelect}\n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n      bordered={false}\n      rounded={false}\n    >\n      <Name\n        name={name}\n        tabKey={tabKey}\n        onRename={onRename}\n        icon={icon}\n        editable={editable}\n      />\n      {closable && onClose != null && (\n        <Button.Icon onClick={handleClose}>\n          <Icon.Close aria-label=\"pluto-tabs__close\" />\n        </Button.Icon>\n      )}\n    </Align.Pack>\n  );\n};\n\nexport interface SelectorButtonProps extends TabSpec {\n  selected?: string;\n  onDragStart?: (e: React.DragEvent<HTMLDivElement>, tab: TabSpec) => void;\n  onDragEnd?: (e: React.DragEvent<HTMLDivElement>, tab: TabSpec) => void;\n  onSelect?: (key: string) => void;\n  onClose?: (key: string) => void;\n  onRename?: (key: string, name: string) => void;\n  size: ComponentSize;\n}\n\ninterface NameProps {\n  onRename?: (key: string, name: string) => void;\n  name: string;\n  tabKey: string;\n  icon?: ReactElement;\n  editable?: boolean;\n}\n\nconst Name = ({\n  onRename,\n  name,\n  tabKey,\n  icon,\n  editable = true,\n}: NameProps): ReactElement => {\n  if (onRename == null || !editable) {\n    if (icon != null)\n      return (\n        <Text.WithIcon startIcon={icon} level=\"p\" noWrap>\n          {name}\n        </Text.WithIcon>\n      );\n    return (\n      <Text.Text level=\"p\" noWrap>\n        {name}\n      </Text.Text>\n    );\n  }\n  return (\n    <Text.Editable<\"p\">\n      level=\"p\"\n      onChange={(newText: string) => onRename(tabKey, newText)}\n      value={name}\n      noWrap\n    />\n  );\n};\n"],"names":["t","useState","createContext","useContext","jsx","Align.Space","CSS","jsxs","Button.Icon","Icon","useCallback","Align.Pack","Text.WithIcon","Text.Text","Text.Editable"],"mappings":"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"}
+{"version":3,"file":"Selector-8rTHUToj.cjs","sources":["../src/tabs/Tabs.tsx","../src/tabs/Selector.tsx"],"sourcesContent":["// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport React, {\n  createContext,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n  useState,\n} from \"react\";\n\nimport { Align } from \"@/align\";\nimport { CSS } from \"@/css\";\nimport { type TabSpec, Selector } from \"@/tabs/Selector\";\nimport { type ComponentSize } from \"@/util/component\";\nimport { type RenderProp } from \"@/util/renderProp\";\n\nexport interface Tab extends TabSpec {\n  content?: ReactNode;\n}\n\nexport type TabRenderProp = RenderProp<Tab>;\n\nexport interface UseStaticTabsProps {\n  tabs: Tab[];\n  content?: TabRenderProp;\n  onSelect?: (key: string) => void;\n}\n\nexport const resetSelection = (selected = \"\", tabs: Tab[] = []): string | undefined => {\n  if (tabs.length === 0) return undefined;\n  return tabs.find((t) => t.tabKey === selected) != null\n    ? selected\n    : tabs[tabs.length - 1]?.tabKey;\n};\n\nexport const rename = (key: string, title: string, tabs: Tab[]): Tab[] => {\n  title = title.trim();\n  if (title.length === 0) return tabs;\n  const t = tabs.find((t) => t.tabKey === key);\n  if (t == null || t.name === title) return tabs;\n  return tabs.map((t) => (t.tabKey === key ? { ...t, name: title } : t));\n};\n\nexport const useStatic = ({\n  tabs,\n  content,\n  onSelect,\n}: UseStaticTabsProps): TabsContextValue => {\n  const [selected, setSelected] = useState(tabs[0]?.tabKey ?? \"\");\n\n  const handleSelect = (key: string): void => {\n    setSelected(key);\n    onSelect?.(key);\n  };\n\n  return {\n    tabs,\n    selected,\n    content,\n    onSelect: handleSelect,\n  };\n};\n\nexport interface TabsContextValue {\n  tabs: Tab[];\n  emptyContent?: ReactElement | null;\n  closable?: boolean;\n  selected?: string;\n  onSelect?: (key: string) => void;\n  content?: TabRenderProp;\n  onClose?: (key: string) => void;\n  onDragStart?: (e: React.DragEvent<HTMLDivElement>, tab: TabSpec) => void;\n  onDragEnd?: (e: React.DragEvent<HTMLDivElement>, tab: TabSpec) => void;\n  onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;\n  onRename?: (key: string, title: string) => void;\n  onCreate?: () => void;\n}\n\nexport interface TabsProps\n  extends Omit<\n      Align.SpaceProps,\n      \"children\" | \"onSelect\" | \"size\" | \"onDragStart\" | \"onDragEnd\" | \"content\"\n    >,\n    TabsContextValue {\n  children?: TabRenderProp;\n  size?: ComponentSize;\n}\n\nexport const TabsContext = createContext<TabsContextValue>({ tabs: [] });\n\nexport const useTabsContext = (): TabsContextValue => useContext(TabsContext);\n\nexport const Tabs = ({\n  content,\n  children,\n  onSelect,\n  selected,\n  closable,\n  tabs,\n  onClose,\n  onDragStart,\n  onDragEnd,\n  onCreate,\n  onRename,\n  emptyContent,\n  className,\n  onDragOver,\n  onDrop,\n  size = \"medium\",\n  ...props\n}: TabsProps): ReactElement => (\n  <Align.Space\n    empty\n    className={CSS(CSS.B(\"tabs\"), className)}\n    onDragOver={onDragOver}\n    onDrop={onDrop}\n    {...props}\n  >\n    <TabsContext.Provider\n      value={{\n        tabs,\n        emptyContent,\n        selected,\n        closable,\n        content: children ?? content,\n        onSelect,\n        onClose,\n        onDragStart,\n        onDragEnd,\n        onRename,\n        onCreate,\n        onDrop,\n      }}\n    >\n      <Selector size={size} />\n      <Content />\n    </TabsContext.Provider>\n  </Align.Space>\n);\n\nexport const Provider = TabsContext.Provider;\n\nexport const Content = (): ReactElement | null => {\n  const {\n    tabs,\n    selected,\n    content: renderProp,\n    emptyContent,\n    onSelect,\n  } = useTabsContext();\n  let content: ReactNode = null;\n  const selectedTab = tabs.find((tab) => tab.tabKey === selected);\n  if (selected == null || selectedTab == null) return emptyContent ?? null;\n  if (renderProp != null) content = renderProp(selectedTab);\n  else if (selectedTab.content != null) content = selectedTab.content;\n  return (\n    <div\n      className={CSS.B(\"tabs-content\")}\n      onClick={() => onSelect?.(selected)}\n      style={{ width: \"100%\", height: \"100%\" }}\n    >\n      {content}\n    </div>\n  );\n};\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport {\n  type DragEventHandler,\n  type MouseEventHandler,\n  type ReactElement,\n  useCallback,\n} from \"react\";\n\nimport { Icon } from \"@synnaxlabs/media\";\n\nimport { Align } from \"@/align\";\nimport { Button } from \"@/button\";\nimport { CSS } from \"@/css\";\nimport { useTabsContext } from \"@/tabs/Tabs\";\nimport { Text } from \"@/text\";\nimport { type ComponentSize } from \"@/util/component\";\n\nimport \"@/tabs/Selector.css\";\n\nexport interface TabSpec {\n  tabKey: string;\n  name: string;\n  closable?: boolean;\n  icon?: ReactElement;\n  editable?: boolean;\n}\n\nexport interface SelectorProps extends Omit<Align.SpaceProps, \"children\" | \"size\"> {\n  size: ComponentSize;\n}\n\nconst CLS = \"tabs-selector\";\n\nexport const Selector = ({\n  className,\n  size = \"medium\",\n  ...props\n}: SelectorProps): ReactElement | null => {\n  const {\n    tabs,\n    selected,\n    onSelect,\n    onClose,\n    closable,\n    onDragEnd,\n    onDragStart,\n    onDrop,\n    onRename,\n    onCreate,\n  } = useTabsContext();\n  return (\n    <Align.Space\n      className={CSS(CSS.B(CLS), CSS.size(size), className)}\n      direction=\"x\"\n      align=\"center\"\n      justify=\"start\"\n      onDrop={onDrop}\n      empty\n      {...props}\n    >\n      <Align.Space className={CSS.BE(CLS, \"tabs\")} empty direction=\"x\" grow>\n        {tabs.map((tab) => (\n          <SelectorButton\n            key={tab.tabKey}\n            selected={selected}\n            onSelect={onSelect}\n            onClose={onClose}\n            onDragStart={onDragStart}\n            onDragEnd={onDragEnd}\n            onRename={onRename}\n            closable={tab.closable ?? closable}\n            size={size}\n            {...tab}\n          />\n        ))}\n      </Align.Space>\n      <Align.Space className={CSS.BE(CLS, \"actions\")}>\n        {onCreate != null && (\n          <Button.Icon size={size} sharp onClick={onCreate}>\n            <Icon.Add />\n          </Button.Icon>\n        )}\n      </Align.Space>\n    </Align.Space>\n  );\n};\n\nconst SelectorButton = ({\n  selected,\n  onSelect,\n  onClose,\n  tabKey,\n  name,\n  onDragStart,\n  onDragEnd,\n  onRename,\n  closable = true,\n  icon,\n  size,\n  editable = true,\n}: SelectorButtonProps): ReactElement => {\n  const handleDragStart: DragEventHandler<HTMLDivElement> = useCallback(\n    (e) => onDragStart?.(e, { tabKey, name }),\n    [onDragStart, tabKey, name],\n  );\n\n  const handleDragEnd: DragEventHandler<HTMLDivElement> = useCallback(\n    (e) => onDragEnd?.(e, { tabKey, name }),\n    [onDragEnd, tabKey, name],\n  );\n\n  const handleClose: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (e) => {\n      e.stopPropagation();\n      onClose?.(tabKey);\n    },\n    [onClose, tabKey],\n  );\n\n  const _onSelect = useCallback(() => onSelect?.(tabKey), [onSelect, tabKey]);\n\n  return (\n    <Align.Pack\n      size={size}\n      className={CSS(\n        CSS.BE(CLS, \"btn\"),\n        onRename == null && CSS.BEM(CLS, \"btn\", \"uneditable\"),\n        CSS.selected(selected === tabKey),\n        closable && onClose != null && CSS.BEM(CLS, \"btn\", \"closable\"),\n      )}\n      draggable\n      direction=\"x\"\n      justify=\"center\"\n      align=\"center\"\n      onClick={_onSelect}\n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n      bordered={false}\n      rounded={false}\n    >\n      <Name\n        name={name}\n        tabKey={tabKey}\n        onRename={onRename}\n        icon={icon}\n        editable={editable}\n      />\n      {closable && onClose != null && (\n        <Button.Icon onClick={handleClose}>\n          <Icon.Close aria-label=\"pluto-tabs__close\" />\n        </Button.Icon>\n      )}\n    </Align.Pack>\n  );\n};\n\nexport interface SelectorButtonProps extends TabSpec {\n  selected?: string;\n  onDragStart?: (e: React.DragEvent<HTMLDivElement>, tab: TabSpec) => void;\n  onDragEnd?: (e: React.DragEvent<HTMLDivElement>, tab: TabSpec) => void;\n  onSelect?: (key: string) => void;\n  onClose?: (key: string) => void;\n  onRename?: (key: string, name: string) => void;\n  size: ComponentSize;\n}\n\ninterface NameProps {\n  onRename?: (key: string, name: string) => void;\n  name: string;\n  tabKey: string;\n  icon?: ReactElement;\n  editable?: boolean;\n}\n\nconst Name = ({\n  onRename,\n  name,\n  tabKey,\n  icon,\n  editable = true,\n}: NameProps): ReactElement => {\n  if (onRename == null || !editable) {\n    if (icon != null)\n      return (\n        <Text.WithIcon startIcon={icon} level=\"p\" noWrap>\n          {name}\n        </Text.WithIcon>\n      );\n    return (\n      <Text.Text level=\"p\" noWrap>\n        {name}\n      </Text.Text>\n    );\n  }\n  return (\n    <Text.Editable<\"p\">\n      level=\"p\"\n      onChange={(newText: string) => onRename(tabKey, newText)}\n      value={name}\n      noWrap\n    />\n  );\n};\n"],"names":["resetSelection","selected","tabs","t","_a","rename","key","title","useStatic","content","onSelect","setSelected","useState","TabsContext","createContext","useTabsContext","useContext","Tabs","children","closable","onClose","onDragStart","onDragEnd","onCreate","onRename","emptyContent","className","onDragOver","onDrop","size","props","jsx","Align.Space","CSS","jsxs","Selector","Content","Provider","renderProp","selectedTab","tab","CLS","SelectorButton","Button.Icon","Icon","tabKey","name","icon","editable","handleDragStart","useCallback","e","handleDragEnd","handleClose","_onSelect","Align.Pack","Name","Text.WithIcon","Text.Text","Text.Editable","newText"],"mappings":"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"}

package/dist/Selector-R4SumEUV.js

@@ -0,0 +1,233 @@
+import { j as l } from "./jsx-runtime-NmMXPjeo.js";
+import { createContext as T, useState as S, useContext as W, useCallback as C } from "react";
+import { I as P, F as N, W as k, g as I, E as y } from "./Toggle-HVxv8bv2.js";
+import { S as v, P as _ } from "./Center-8mBjm1cO.js";
+import { C as o } from "./css-5RvvUhjr.js";
+import "./component-LA8IXGSG.js";
+const Q = (r = "", e = []) => {
+  var t;
+  if (e.length !== 0)
+    return e.find((s) => s.tabKey === r) != null ? r : (t = e[e.length - 1]) == null ? void 0 : t.tabKey;
+}, R = (r, e, t) => {
+  if (e = e.trim(), e.length === 0)
+    return t;
+  const s = t.find((n) => n.tabKey === r);
+  return s == null || s.name === e ? t : t.map((n) => n.tabKey === r ? { ...n, name: e } : n);
+}, U = ({
+  tabs: r,
+  content: e,
+  onSelect: t
+}) => {
+  var c;
+  const [s, n] = S(((c = r[0]) == null ? void 0 : c.tabKey) ?? "");
+  return {
+    tabs: r,
+    selected: s,
+    content: e,
+    onSelect: (u) => {
+      n(u), t == null || t(u);
+    }
+  };
+}, g = T({ tabs: [] }), E = () => W(g), V = ({
+  content: r,
+  children: e,
+  onSelect: t,
+  selected: s,
+  closable: n,
+  tabs: a,
+  onClose: c,
+  onDragStart: u,
+  onDragEnd: x,
+  onCreate: h,
+  onRename: j,
+  emptyContent: f,
+  className: m,
+  onDragOver: i,
+  onDrop: b,
+  size: B = "medium",
+  ...d
+}) => /* @__PURE__ */ l.jsx(
+  v,
+  {
+    empty: !0,
+    className: o(o.B("tabs"), m),
+    onDragOver: i,
+    onDrop: b,
+    ...d,
+    children: /* @__PURE__ */ l.jsxs(
+      g.Provider,
+      {
+        value: {
+          tabs: a,
+          emptyContent: f,
+          selected: s,
+          closable: n,
+          content: e ?? r,
+          onSelect: t,
+          onClose: c,
+          onDragStart: u,
+          onDragEnd: x,
+          onRename: j,
+          onCreate: h,
+          onDrop: b
+        },
+        children: [
+          /* @__PURE__ */ l.jsx(M, { size: B }),
+          /* @__PURE__ */ l.jsx(w, {})
+        ]
+      }
+    )
+  }
+), X = g.Provider, w = () => {
+  const {
+    tabs: r,
+    selected: e,
+    content: t,
+    emptyContent: s,
+    onSelect: n
+  } = E();
+  let a = null;
+  const c = r.find((u) => u.tabKey === e);
+  return e == null || c == null ? s ?? null : (t != null ? a = t(c) : c.content != null && (a = c.content), /* @__PURE__ */ l.jsx(
+    "div",
+    {
+      className: o.B("tabs-content"),
+      onClick: () => n == null ? void 0 : n(e),
+      style: { width: "100%", height: "100%" },
+      children: a
+    }
+  ));
+}, p = "tabs-selector", M = ({
+  className: r,
+  size: e = "medium",
+  ...t
+}) => {
+  const {
+    tabs: s,
+    selected: n,
+    onSelect: a,
+    onClose: c,
+    closable: u,
+    onDragEnd: x,
+    onDragStart: h,
+    onDrop: j,
+    onRename: f,
+    onCreate: m
+  } = E();
+  return /* @__PURE__ */ l.jsxs(
+    v,
+    {
+      className: o(o.B(p), o.size(e), r),
+      direction: "x",
+      align: "center",
+      justify: "start",
+      onDrop: j,
+      empty: !0,
+      ...t,
+      children: [
+        /* @__PURE__ */ l.jsx(v, { className: o.BE(p, "tabs"), empty: !0, direction: "x", grow: !0, children: s.map((i) => /* @__PURE__ */ l.jsx(
+          A,
+          {
+            selected: n,
+            onSelect: a,
+            onClose: c,
+            onDragStart: h,
+            onDragEnd: x,
+            onRename: f,
+            closable: i.closable ?? u,
+            size: e,
+            ...i
+          },
+          i.tabKey
+        )) }),
+        /* @__PURE__ */ l.jsx(v, { className: o.BE(p, "actions"), children: m != null && /* @__PURE__ */ l.jsx(P, { size: e, sharp: !0, onClick: m, children: /* @__PURE__ */ l.jsx(N.Add, {}) }) })
+      ]
+    }
+  );
+}, A = ({
+  selected: r,
+  onSelect: e,
+  onClose: t,
+  tabKey: s,
+  name: n,
+  onDragStart: a,
+  onDragEnd: c,
+  onRename: u,
+  closable: x = !0,
+  icon: h,
+  size: j,
+  editable: f = !0
+}) => {
+  const m = C(
+    (d) => a == null ? void 0 : a(d, { tabKey: s, name: n }),
+    [a, s, n]
+  ), i = C(
+    (d) => c == null ? void 0 : c(d, { tabKey: s, name: n }),
+    [c, s, n]
+  ), b = C(
+    (d) => {
+      d.stopPropagation(), t == null || t(s);
+    },
+    [t, s]
+  ), B = C(() => e == null ? void 0 : e(s), [e, s]);
+  return /* @__PURE__ */ l.jsxs(
+    _,
+    {
+      size: j,
+      className: o(
+        o.BE(p, "btn"),
+        u == null && o.BEM(p, "btn", "uneditable"),
+        o.selected(r === s),
+        x && t != null && o.BEM(p, "btn", "closable")
+      ),
+      draggable: !0,
+      direction: "x",
+      justify: "center",
+      align: "center",
+      onClick: B,
+      onDragStart: m,
+      onDragEnd: i,
+      bordered: !1,
+      rounded: !1,
+      children: [
+        /* @__PURE__ */ l.jsx(
+          F,
+          {
+            name: n,
+            tabKey: s,
+            onRename: u,
+            icon: h,
+            editable: f
+          }
+        ),
+        x && t != null && /* @__PURE__ */ l.jsx(P, { onClick: b, children: /* @__PURE__ */ l.jsx(N.Close, { "aria-label": "pluto-tabs__close" }) })
+      ]
+    }
+  );
+}, F = ({
+  onRename: r,
+  name: e,
+  tabKey: t,
+  icon: s,
+  editable: n = !0
+}) => r == null || !n ? s != null ? /* @__PURE__ */ l.jsx(k, { startIcon: s, level: "p", noWrap: !0, children: e }) : /* @__PURE__ */ l.jsx(I, { level: "p", noWrap: !0, children: e }) : /* @__PURE__ */ l.jsx(
+  y,
+  {
+    level: "p",
+    onChange: (a) => r(t, a),
+    value: e,
+    noWrap: !0
+  }
+);
+export {
+  w as C,
+  X as P,
+  M as S,
+  V as T,
+  g as a,
+  Q as b,
+  E as c,
+  R as r,
+  U as u
+};
+//# sourceMappingURL=Selector-R4SumEUV.js.map

package/dist/{Selector-R3lL41_i.js.map → Selector-R4SumEUV.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Selector-R3lL41_i.js","sources":["../src/tabs/Tabs.tsx","../src/tabs/Selector.tsx"],"sourcesContent":["// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport React, {\n  createContext,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n  useState,\n} from \"react\";\n\nimport { Align } from \"@/align\";\nimport { CSS } from \"@/css\";\nimport { type TabSpec, Selector } from \"@/tabs/Selector\";\nimport { type ComponentSize } from \"@/util/component\";\nimport { type RenderProp } from \"@/util/renderProp\";\n\nexport interface Tab extends TabSpec {\n  content?: ReactNode;\n}\n\nexport type TabRenderProp = RenderProp<Tab>;\n\nexport interface UseStaticTabsProps {\n  tabs: Tab[];\n  content?: TabRenderProp;\n  onSelect?: (key: string) => void;\n}\n\nexport const resetSelection = (selected = \"\", tabs: Tab[] = []): string | undefined => {\n  if (tabs.length === 0) return undefined;\n  return tabs.find((t) => t.tabKey === selected) != null\n    ? selected\n    : tabs[tabs.length - 1]?.tabKey;\n};\n\nexport const rename = (key: string, title: string, tabs: Tab[]): Tab[] => {\n  title = title.trim();\n  if (title.length === 0) return tabs;\n  const t = tabs.find((t) => t.tabKey === key);\n  if (t == null || t.name === title) return tabs;\n  return tabs.map((t) => (t.tabKey === key ? { ...t, name: title } : t));\n};\n\nexport const useStatic = ({\n  tabs,\n  content,\n  onSelect,\n}: UseStaticTabsProps): TabsContextValue => {\n  const [selected, setSelected] = useState(tabs[0]?.tabKey ?? \"\");\n\n  const handleSelect = (key: string): void => {\n    setSelected(key);\n    onSelect?.(key);\n  };\n\n  return {\n    tabs,\n    selected,\n    content,\n    onSelect: handleSelect,\n  };\n};\n\nexport interface TabsContextValue {\n  tabs: Tab[];\n  emptyContent?: ReactElement | null;\n  closable?: boolean;\n  selected?: string;\n  onSelect?: (key: string) => void;\n  content?: TabRenderProp;\n  onClose?: (key: string) => void;\n  onDragStart?: (e: React.DragEvent<HTMLDivElement>, tab: TabSpec) => void;\n  onDragEnd?: (e: React.DragEvent<HTMLDivElement>, tab: TabSpec) => void;\n  onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;\n  onRename?: (key: string, title: string) => void;\n  onCreate?: () => void;\n}\n\nexport interface TabsProps\n  extends Omit<\n      Align.SpaceProps,\n      \"children\" | \"onSelect\" | \"size\" | \"onDragStart\" | \"onDragEnd\" | \"content\"\n    >,\n    TabsContextValue {\n  children?: TabRenderProp;\n  size?: ComponentSize;\n}\n\nexport const TabsContext = createContext<TabsContextValue>({ tabs: [] });\n\nexport const useTabsContext = (): TabsContextValue => useContext(TabsContext);\n\nexport const Tabs = ({\n  content,\n  children,\n  onSelect,\n  selected,\n  closable,\n  tabs,\n  onClose,\n  onDragStart,\n  onDragEnd,\n  onCreate,\n  onRename,\n  emptyContent,\n  className,\n  onDragOver,\n  onDrop,\n  size = \"medium\",\n  ...props\n}: TabsProps): ReactElement => (\n  <Align.Space\n    empty\n    className={CSS(CSS.B(\"tabs\"), className)}\n    onDragOver={onDragOver}\n    onDrop={onDrop}\n    {...props}\n  >\n    <TabsContext.Provider\n      value={{\n        tabs,\n        emptyContent,\n        selected,\n        closable,\n        content: children ?? content,\n        onSelect,\n        onClose,\n        onDragStart,\n        onDragEnd,\n        onRename,\n        onCreate,\n        onDrop,\n      }}\n    >\n      <Selector size={size} />\n      <Content />\n    </TabsContext.Provider>\n  </Align.Space>\n);\n\nexport const Provider = TabsContext.Provider;\n\nexport const Content = (): ReactElement | null => {\n  const {\n    tabs,\n    selected,\n    content: renderProp,\n    emptyContent,\n    onSelect,\n  } = useTabsContext();\n  let content: ReactNode = null;\n  const selectedTab = tabs.find((tab) => tab.tabKey === selected);\n  if (selected == null || selectedTab == null) return emptyContent ?? null;\n  if (renderProp != null) content = renderProp(selectedTab);\n  else if (selectedTab.content != null) content = selectedTab.content;\n  return (\n    <div\n      className={CSS.B(\"tabs-content\")}\n      onClick={() => onSelect?.(selected)}\n      style={{ width: \"100%\", height: \"100%\" }}\n    >\n      {content}\n    </div>\n  );\n};\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport {\n  type DragEventHandler,\n  type MouseEventHandler,\n  type ReactElement,\n  useCallback,\n} from \"react\";\n\nimport { Icon } from \"@synnaxlabs/media\";\n\nimport { Align } from \"@/align\";\nimport { Button } from \"@/button\";\nimport { CSS } from \"@/css\";\nimport { useTabsContext } from \"@/tabs/Tabs\";\nimport { Text } from \"@/text\";\nimport { type ComponentSize } from \"@/util/component\";\n\nimport \"@/tabs/Selector.css\";\n\nexport interface TabSpec {\n  tabKey: string;\n  name: string;\n  closable?: boolean;\n  icon?: ReactElement;\n  editable?: boolean;\n}\n\nexport interface SelectorProps extends Omit<Align.SpaceProps, \"children\" | \"size\"> {\n  size: ComponentSize;\n}\n\nconst CLS = \"tabs-selector\";\n\nexport const Selector = ({\n  className,\n  size = \"medium\",\n  ...props\n}: SelectorProps): ReactElement | null => {\n  const {\n    tabs,\n    selected,\n    onSelect,\n    onClose,\n    closable,\n    onDragEnd,\n    onDragStart,\n    onDrop,\n    onRename,\n    onCreate,\n  } = useTabsContext();\n  return (\n    <Align.Space\n      className={CSS(CSS.B(CLS), CSS.size(size), className)}\n      direction=\"x\"\n      align=\"center\"\n      justify=\"start\"\n      onDrop={onDrop}\n      empty\n      {...props}\n    >\n      <Align.Space className={CSS.BE(CLS, \"tabs\")} empty direction=\"x\" grow>\n        {tabs.map((tab) => (\n          <SelectorButton\n            key={tab.tabKey}\n            selected={selected}\n            onSelect={onSelect}\n            onClose={onClose}\n            onDragStart={onDragStart}\n            onDragEnd={onDragEnd}\n            onRename={onRename}\n            closable={tab.closable ?? closable}\n            size={size}\n            {...tab}\n          />\n        ))}\n      </Align.Space>\n      <Align.Space className={CSS.BE(CLS, \"actions\")}>\n        {onCreate != null && (\n          <Button.Icon size={size} sharp onClick={onCreate}>\n            <Icon.Add />\n          </Button.Icon>\n        )}\n      </Align.Space>\n    </Align.Space>\n  );\n};\n\nconst SelectorButton = ({\n  selected,\n  onSelect,\n  onClose,\n  tabKey,\n  name,\n  onDragStart,\n  onDragEnd,\n  onRename,\n  closable = true,\n  icon,\n  size,\n  editable = true,\n}: SelectorButtonProps): ReactElement => {\n  const handleDragStart: DragEventHandler<HTMLDivElement> = useCallback(\n    (e) => onDragStart?.(e, { tabKey, name }),\n    [onDragStart, tabKey, name],\n  );\n\n  const handleDragEnd: DragEventHandler<HTMLDivElement> = useCallback(\n    (e) => onDragEnd?.(e, { tabKey, name }),\n    [onDragEnd, tabKey, name],\n  );\n\n  const handleClose: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (e) => {\n      e.stopPropagation();\n      onClose?.(tabKey);\n    },\n    [onClose, tabKey],\n  );\n\n  const _onSelect = useCallback(() => onSelect?.(tabKey), [onSelect, tabKey]);\n\n  return (\n    <Align.Pack\n      size={size}\n      className={CSS(\n        CSS.BE(CLS, \"btn\"),\n        onRename == null && CSS.BEM(CLS, \"btn\", \"uneditable\"),\n        CSS.selected(selected === tabKey),\n        closable && onClose != null && CSS.BEM(CLS, \"btn\", \"closable\"),\n      )}\n      draggable\n      direction=\"x\"\n      justify=\"center\"\n      align=\"center\"\n      onClick={_onSelect}\n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n      bordered={false}\n      rounded={false}\n    >\n      <Name\n        name={name}\n        tabKey={tabKey}\n        onRename={onRename}\n        icon={icon}\n        editable={editable}\n      />\n      {closable && onClose != null && (\n        <Button.Icon onClick={handleClose}>\n          <Icon.Close aria-label=\"pluto-tabs__close\" />\n        </Button.Icon>\n      )}\n    </Align.Pack>\n  );\n};\n\nexport interface SelectorButtonProps extends TabSpec {\n  selected?: string;\n  onDragStart?: (e: React.DragEvent<HTMLDivElement>, tab: TabSpec) => void;\n  onDragEnd?: (e: React.DragEvent<HTMLDivElement>, tab: TabSpec) => void;\n  onSelect?: (key: string) => void;\n  onClose?: (key: string) => void;\n  onRename?: (key: string, name: string) => void;\n  size: ComponentSize;\n}\n\ninterface NameProps {\n  onRename?: (key: string, name: string) => void;\n  name: string;\n  tabKey: string;\n  icon?: ReactElement;\n  editable?: boolean;\n}\n\nconst Name = ({\n  onRename,\n  name,\n  tabKey,\n  icon,\n  editable = true,\n}: NameProps): ReactElement => {\n  if (onRename == null || !editable) {\n    if (icon != null)\n      return (\n        <Text.WithIcon startIcon={icon} level=\"p\" noWrap>\n          {name}\n        </Text.WithIcon>\n      );\n    return (\n      <Text.Text level=\"p\" noWrap>\n        {name}\n      </Text.Text>\n    );\n  }\n  return (\n    <Text.Editable<\"p\">\n      level=\"p\"\n      onChange={(newText: string) => onRename(tabKey, newText)}\n      value={name}\n      noWrap\n    />\n  );\n};\n"],"names":["t","jsx","Align.Space","jsxs","Button.Icon","Icon","Align.Pack","Text.WithIcon","Text.Text","Text.Editable"],"mappings":"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"}
+{"version":3,"file":"Selector-R4SumEUV.js","sources":["../src/tabs/Tabs.tsx","../src/tabs/Selector.tsx"],"sourcesContent":["// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport React, {\n  createContext,\n  type ReactElement,\n  type ReactNode,\n  useContext,\n  useState,\n} from \"react\";\n\nimport { Align } from \"@/align\";\nimport { CSS } from \"@/css\";\nimport { type TabSpec, Selector } from \"@/tabs/Selector\";\nimport { type ComponentSize } from \"@/util/component\";\nimport { type RenderProp } from \"@/util/renderProp\";\n\nexport interface Tab extends TabSpec {\n  content?: ReactNode;\n}\n\nexport type TabRenderProp = RenderProp<Tab>;\n\nexport interface UseStaticTabsProps {\n  tabs: Tab[];\n  content?: TabRenderProp;\n  onSelect?: (key: string) => void;\n}\n\nexport const resetSelection = (selected = \"\", tabs: Tab[] = []): string | undefined => {\n  if (tabs.length === 0) return undefined;\n  return tabs.find((t) => t.tabKey === selected) != null\n    ? selected\n    : tabs[tabs.length - 1]?.tabKey;\n};\n\nexport const rename = (key: string, title: string, tabs: Tab[]): Tab[] => {\n  title = title.trim();\n  if (title.length === 0) return tabs;\n  const t = tabs.find((t) => t.tabKey === key);\n  if (t == null || t.name === title) return tabs;\n  return tabs.map((t) => (t.tabKey === key ? { ...t, name: title } : t));\n};\n\nexport const useStatic = ({\n  tabs,\n  content,\n  onSelect,\n}: UseStaticTabsProps): TabsContextValue => {\n  const [selected, setSelected] = useState(tabs[0]?.tabKey ?? \"\");\n\n  const handleSelect = (key: string): void => {\n    setSelected(key);\n    onSelect?.(key);\n  };\n\n  return {\n    tabs,\n    selected,\n    content,\n    onSelect: handleSelect,\n  };\n};\n\nexport interface TabsContextValue {\n  tabs: Tab[];\n  emptyContent?: ReactElement | null;\n  closable?: boolean;\n  selected?: string;\n  onSelect?: (key: string) => void;\n  content?: TabRenderProp;\n  onClose?: (key: string) => void;\n  onDragStart?: (e: React.DragEvent<HTMLDivElement>, tab: TabSpec) => void;\n  onDragEnd?: (e: React.DragEvent<HTMLDivElement>, tab: TabSpec) => void;\n  onDrop?: (e: React.DragEvent<HTMLDivElement>) => void;\n  onRename?: (key: string, title: string) => void;\n  onCreate?: () => void;\n}\n\nexport interface TabsProps\n  extends Omit<\n      Align.SpaceProps,\n      \"children\" | \"onSelect\" | \"size\" | \"onDragStart\" | \"onDragEnd\" | \"content\"\n    >,\n    TabsContextValue {\n  children?: TabRenderProp;\n  size?: ComponentSize;\n}\n\nexport const TabsContext = createContext<TabsContextValue>({ tabs: [] });\n\nexport const useTabsContext = (): TabsContextValue => useContext(TabsContext);\n\nexport const Tabs = ({\n  content,\n  children,\n  onSelect,\n  selected,\n  closable,\n  tabs,\n  onClose,\n  onDragStart,\n  onDragEnd,\n  onCreate,\n  onRename,\n  emptyContent,\n  className,\n  onDragOver,\n  onDrop,\n  size = \"medium\",\n  ...props\n}: TabsProps): ReactElement => (\n  <Align.Space\n    empty\n    className={CSS(CSS.B(\"tabs\"), className)}\n    onDragOver={onDragOver}\n    onDrop={onDrop}\n    {...props}\n  >\n    <TabsContext.Provider\n      value={{\n        tabs,\n        emptyContent,\n        selected,\n        closable,\n        content: children ?? content,\n        onSelect,\n        onClose,\n        onDragStart,\n        onDragEnd,\n        onRename,\n        onCreate,\n        onDrop,\n      }}\n    >\n      <Selector size={size} />\n      <Content />\n    </TabsContext.Provider>\n  </Align.Space>\n);\n\nexport const Provider = TabsContext.Provider;\n\nexport const Content = (): ReactElement | null => {\n  const {\n    tabs,\n    selected,\n    content: renderProp,\n    emptyContent,\n    onSelect,\n  } = useTabsContext();\n  let content: ReactNode = null;\n  const selectedTab = tabs.find((tab) => tab.tabKey === selected);\n  if (selected == null || selectedTab == null) return emptyContent ?? null;\n  if (renderProp != null) content = renderProp(selectedTab);\n  else if (selectedTab.content != null) content = selectedTab.content;\n  return (\n    <div\n      className={CSS.B(\"tabs-content\")}\n      onClick={() => onSelect?.(selected)}\n      style={{ width: \"100%\", height: \"100%\" }}\n    >\n      {content}\n    </div>\n  );\n};\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport {\n  type DragEventHandler,\n  type MouseEventHandler,\n  type ReactElement,\n  useCallback,\n} from \"react\";\n\nimport { Icon } from \"@synnaxlabs/media\";\n\nimport { Align } from \"@/align\";\nimport { Button } from \"@/button\";\nimport { CSS } from \"@/css\";\nimport { useTabsContext } from \"@/tabs/Tabs\";\nimport { Text } from \"@/text\";\nimport { type ComponentSize } from \"@/util/component\";\n\nimport \"@/tabs/Selector.css\";\n\nexport interface TabSpec {\n  tabKey: string;\n  name: string;\n  closable?: boolean;\n  icon?: ReactElement;\n  editable?: boolean;\n}\n\nexport interface SelectorProps extends Omit<Align.SpaceProps, \"children\" | \"size\"> {\n  size: ComponentSize;\n}\n\nconst CLS = \"tabs-selector\";\n\nexport const Selector = ({\n  className,\n  size = \"medium\",\n  ...props\n}: SelectorProps): ReactElement | null => {\n  const {\n    tabs,\n    selected,\n    onSelect,\n    onClose,\n    closable,\n    onDragEnd,\n    onDragStart,\n    onDrop,\n    onRename,\n    onCreate,\n  } = useTabsContext();\n  return (\n    <Align.Space\n      className={CSS(CSS.B(CLS), CSS.size(size), className)}\n      direction=\"x\"\n      align=\"center\"\n      justify=\"start\"\n      onDrop={onDrop}\n      empty\n      {...props}\n    >\n      <Align.Space className={CSS.BE(CLS, \"tabs\")} empty direction=\"x\" grow>\n        {tabs.map((tab) => (\n          <SelectorButton\n            key={tab.tabKey}\n            selected={selected}\n            onSelect={onSelect}\n            onClose={onClose}\n            onDragStart={onDragStart}\n            onDragEnd={onDragEnd}\n            onRename={onRename}\n            closable={tab.closable ?? closable}\n            size={size}\n            {...tab}\n          />\n        ))}\n      </Align.Space>\n      <Align.Space className={CSS.BE(CLS, \"actions\")}>\n        {onCreate != null && (\n          <Button.Icon size={size} sharp onClick={onCreate}>\n            <Icon.Add />\n          </Button.Icon>\n        )}\n      </Align.Space>\n    </Align.Space>\n  );\n};\n\nconst SelectorButton = ({\n  selected,\n  onSelect,\n  onClose,\n  tabKey,\n  name,\n  onDragStart,\n  onDragEnd,\n  onRename,\n  closable = true,\n  icon,\n  size,\n  editable = true,\n}: SelectorButtonProps): ReactElement => {\n  const handleDragStart: DragEventHandler<HTMLDivElement> = useCallback(\n    (e) => onDragStart?.(e, { tabKey, name }),\n    [onDragStart, tabKey, name],\n  );\n\n  const handleDragEnd: DragEventHandler<HTMLDivElement> = useCallback(\n    (e) => onDragEnd?.(e, { tabKey, name }),\n    [onDragEnd, tabKey, name],\n  );\n\n  const handleClose: MouseEventHandler<HTMLButtonElement> = useCallback(\n    (e) => {\n      e.stopPropagation();\n      onClose?.(tabKey);\n    },\n    [onClose, tabKey],\n  );\n\n  const _onSelect = useCallback(() => onSelect?.(tabKey), [onSelect, tabKey]);\n\n  return (\n    <Align.Pack\n      size={size}\n      className={CSS(\n        CSS.BE(CLS, \"btn\"),\n        onRename == null && CSS.BEM(CLS, \"btn\", \"uneditable\"),\n        CSS.selected(selected === tabKey),\n        closable && onClose != null && CSS.BEM(CLS, \"btn\", \"closable\"),\n      )}\n      draggable\n      direction=\"x\"\n      justify=\"center\"\n      align=\"center\"\n      onClick={_onSelect}\n      onDragStart={handleDragStart}\n      onDragEnd={handleDragEnd}\n      bordered={false}\n      rounded={false}\n    >\n      <Name\n        name={name}\n        tabKey={tabKey}\n        onRename={onRename}\n        icon={icon}\n        editable={editable}\n      />\n      {closable && onClose != null && (\n        <Button.Icon onClick={handleClose}>\n          <Icon.Close aria-label=\"pluto-tabs__close\" />\n        </Button.Icon>\n      )}\n    </Align.Pack>\n  );\n};\n\nexport interface SelectorButtonProps extends TabSpec {\n  selected?: string;\n  onDragStart?: (e: React.DragEvent<HTMLDivElement>, tab: TabSpec) => void;\n  onDragEnd?: (e: React.DragEvent<HTMLDivElement>, tab: TabSpec) => void;\n  onSelect?: (key: string) => void;\n  onClose?: (key: string) => void;\n  onRename?: (key: string, name: string) => void;\n  size: ComponentSize;\n}\n\ninterface NameProps {\n  onRename?: (key: string, name: string) => void;\n  name: string;\n  tabKey: string;\n  icon?: ReactElement;\n  editable?: boolean;\n}\n\nconst Name = ({\n  onRename,\n  name,\n  tabKey,\n  icon,\n  editable = true,\n}: NameProps): ReactElement => {\n  if (onRename == null || !editable) {\n    if (icon != null)\n      return (\n        <Text.WithIcon startIcon={icon} level=\"p\" noWrap>\n          {name}\n        </Text.WithIcon>\n      );\n    return (\n      <Text.Text level=\"p\" noWrap>\n        {name}\n      </Text.Text>\n    );\n  }\n  return (\n    <Text.Editable<\"p\">\n      level=\"p\"\n      onChange={(newText: string) => onRename(tabKey, newText)}\n      value={name}\n      noWrap\n    />\n  );\n};\n"],"names":["resetSelection","selected","tabs","t","_a","rename","key","title","useStatic","content","onSelect","setSelected","useState","TabsContext","createContext","useTabsContext","useContext","Tabs","children","closable","onClose","onDragStart","onDragEnd","onCreate","onRename","emptyContent","className","onDragOver","onDrop","size","props","jsx","Align.Space","CSS","jsxs","Selector","Content","Provider","renderProp","selectedTab","tab","CLS","SelectorButton","Button.Icon","Icon","tabKey","name","icon","editable","handleDragStart","useCallback","e","handleDragEnd","handleClose","_onSelect","Align.Pack","Name","Text.WithIcon","Text.Text","Text.Editable","newText"],"mappings":"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"}

package/dist/Swatch--Prmb5q_.cjs

@@ -0,0 +1,2 @@
+"use strict";const l=require("./jsx-runtime-evvPGacs.cjs"),D=require("react"),e=require("./Toggle-QnKinMl4.cjs"),r=require("./css-s9KpanYu.cjs");require("./component-dgLAEMbt.cjs");require("./Center-ER_owvfX.cjs");const d=({value:o,onChange:t,...u})=>{const i=s=>{s.hex==="transparent"&&t(r.ZERO),t(new r.Color(s.hex,s.rgb.a))};return l.jsxRuntimeExports.jsx(e.SketchPicker,{className:r.CSS.B("color-picker"),color:new r.Color(o).hex,onChange:i,presetColors:[],...u})},x="color",E=({value:o,onChange:t,className:u,size:i="medium",onVisibleChange:s,initialVisible:g,...k})=>{const{visible:h,open:j,ref:m}=e.use$2({onVisibleChange:s,initialVisible:g}),w=e.use().colors.gray.l0,c=new r.Color(o),y=e.useDraggingState(),p=D.useCallback(({items:a})=>{const[n]=e.filterByType(x,a);return n!=null&&n.key!==c.hex},[c.hex]),{startDrag:C,...R}=e.useDragAndDrop({type:"Color.Swatch",onDrop:({items:a})=>{const n=e.filterByType(x,a);return a.length>0&&(t==null||t(new r.Color(n[0].key))),n},canDrop:p}),S=l.jsxRuntimeExports.jsx(e.Button,{className:r.CSS(r.CSS.B("color-swatch"),r.CSS.size(i),c.contrast(w)>1.5&&c.a>.5&&r.CSS.M("no-border"),r.CSS.dropRegion(p(y)),u),draggable:!0,onDragStart:()=>C([{type:x,key:c.hex}]),style:{backgroundColor:r.cssString(o)},variant:"text",onClick:j,size:i,tooltip:t!=null?l.jsxRuntimeExports.jsx(e.Text,{level:"small",children:"Click to change color"}):void 0,...R,...k});return t==null?S:l.jsxRuntimeExports.jsxs(e.Dialog,{visible:h,ref:m,className:r.CSS.BE("color-swatch","dropdown"),keepMounted:!1,children:[S,l.jsxRuntimeExports.jsx(d,{value:o,onChange:t})]})};exports.Picker=d;exports.Swatch=E;
+//# sourceMappingURL=Swatch--Prmb5q_.cjs.map

package/dist/Swatch--Prmb5q_.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swatch--Prmb5q_.cjs","sources":["../src/color/Picker/Picker.tsx","../src/color/Swatch/Swatch.tsx"],"sourcesContent":["// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport {\n  useCallback,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  useId,\n} from \"react\";\n\nimport { SketchPicker, type ColorResult } from \"react-color\";\n\nimport { color } from \"@/color/core\";\nimport { CSS } from \"@/css\";\nimport { type Input } from \"@/input\";\n\nimport \"@/color/Picker/Picker.css\";\n\nexport interface PickerProps\n  extends Input.Control<color.Crude, color.Color>,\n    Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {}\n\nexport const Picker = ({ value, onChange, ...props }: PickerProps): ReactElement => {\n  const handleChange = (res: ColorResult): void => {\n    if (res.hex === \"transparent\") onChange(color.ZERO);\n    onChange(new color.Color(res.hex, res.rgb.a));\n  };\n\n  return (\n    <SketchPicker\n      className={CSS.B(\"color-picker\")}\n      color={new color.Color(value).hex}\n      onChange={handleChange}\n      presetColors={[]}\n      {...props}\n    />\n  );\n};\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type ReactElement, useCallback } from \"react\";\n\nimport { Button } from \"@/button\";\nimport { color } from \"@/color/core\";\nimport { type Crude, type Color } from \"@/color/core/color\";\nimport { Picker } from \"@/color/Picker\";\nimport { CSS } from \"@/css\";\nimport { Dropdown } from \"@/dropdown\";\nimport { type UseProps } from \"@/dropdown/Dropdown\";\nimport { Haul } from \"@/haul\";\nimport { type Input } from \"@/input\";\nimport { Text } from \"@/text\";\nimport { Theming } from \"@/theming\";\n\nimport \"@/color/Swatch/Swatch.css\";\n\nexport interface SwatchProps\n  extends Input.Control<Crude, Color>,\n    Omit<Button.ButtonProps, \"onChange\" | \"value\">,\n    UseProps {}\n\nconst HAUL_TYPE = \"color\";\n\nexport const Swatch = ({\n  value,\n  onChange,\n  className,\n  size = \"medium\",\n  onVisibleChange,\n  initialVisible,\n  ...props\n}: SwatchProps): ReactElement => {\n  const { visible, open, ref } = Dropdown.use({ onVisibleChange, initialVisible });\n\n  const bg = Theming.use().colors.gray.l0;\n\n  const d = new color.Color(value);\n\n  const dragging = Haul.useDraggingState();\n\n  const canDrop: Haul.CanDrop = useCallback(\n    ({ items }) => {\n      const [k] = Haul.filterByType(HAUL_TYPE, items);\n      return k != null && k.key !== d.hex;\n    },\n    [d.hex],\n  );\n\n  const { startDrag, ...haulProps } = Haul.useDragAndDrop({\n    type: \"Color.Swatch\",\n    onDrop: ({ items }) => {\n      const dropped = Haul.filterByType(HAUL_TYPE, items);\n      if (items.length > 0) onChange?.(new color.Color(dropped[0].key as string));\n      return dropped;\n    },\n    canDrop,\n  });\n\n  const swatch = (\n    <Button.Button\n      className={CSS(\n        CSS.B(\"color-swatch\"),\n        CSS.size(size),\n        d.contrast(bg) > 1.5 && d.a > 0.5 && CSS.M(\"no-border\"),\n        CSS.dropRegion(canDrop(dragging)),\n        className,\n      )}\n      draggable\n      onDragStart={() => startDrag([{ type: HAUL_TYPE, key: d.hex }])}\n      style={{ backgroundColor: color.cssString(value) }}\n      variant=\"text\"\n      onClick={open}\n      size={size}\n      tooltip={\n        onChange != null ? (\n          <Text.Text level=\"small\">Click to change color</Text.Text>\n        ) : undefined\n      }\n      {...haulProps}\n      {...props}\n    />\n  );\n\n  if (onChange == null) return swatch;\n\n  return (\n    <Dropdown.Dialog\n      visible={visible}\n      ref={ref}\n      className={CSS.BE(\"color-swatch\", \"dropdown\")}\n      keepMounted={false}\n    >\n      {swatch}\n      <Picker value={value} onChange={onChange} />\n    </Dropdown.Dialog>\n  );\n};\n"],"names":["Picker","value","onChange","props","handleChange","res","color.ZERO","color.Color","jsx","SketchPicker","CSS","HAUL_TYPE","Swatch","className","size","onVisibleChange","initialVisible","visible","open","ref","Dropdown.use","bg","Theming.use","d","dragging","Haul.useDraggingState","canDrop","useCallback","items","k","Haul.filterByType","startDrag","haulProps","Haul.useDragAndDrop","dropped","swatch","Button.Button","color.cssString","Text.Text","jsxs","Dropdown.Dialog"],"mappings":"sNA4BO,MAAMA,EAAS,CAAC,CAAE,MAAAC,EAAO,SAAAC,EAAU,GAAGC,KAAuC,CAC5E,MAAAC,EAAgBC,GAA2B,CAC3CA,EAAI,MAAQ,eAAeH,EAASI,EAAU,IAAA,EACzCJ,EAAA,IAAIK,EAAY,MAAAF,EAAI,IAAKA,EAAI,IAAI,CAAC,CAAC,CAAA,EAI5C,OAAAG,EAAA,kBAAA,IAACC,EAAA,aAAA,CACC,UAAWC,EAAAA,IAAI,EAAE,cAAc,EAC/B,MAAO,IAAIH,EAAAA,MAAYN,CAAK,EAAE,IAC9B,SAAUG,EACV,aAAc,CAAC,EACd,GAAGD,CAAA,CAAA,CAGV,ECbMQ,EAAY,QAELC,EAAS,CAAC,CACrB,MAAAX,EACA,SAAAC,EACA,UAAAW,EACA,KAAAC,EAAO,SACP,gBAAAC,EACA,eAAAC,EACA,GAAGb,CACL,IAAiC,CACzB,KAAA,CAAE,QAAAc,EAAS,KAAAC,EAAM,IAAAC,CAAI,EAAIC,EAAAA,MAAa,CAAE,gBAAAL,EAAiB,eAAAC,CAAA,CAAgB,EAEzEK,EAAKC,EAAY,IAAA,EAAE,OAAO,KAAK,GAE/BC,EAAI,IAAIhB,QAAYN,CAAK,EAEzBuB,EAAWC,EAAAA,mBAEXC,EAAwBC,EAAA,YAC5B,CAAC,CAAE,MAAAC,CAAA,IAAY,CACb,KAAM,CAACC,CAAC,EAAIC,EAAK,aAAanB,EAAWiB,CAAK,EAC9C,OAAOC,GAAK,MAAQA,EAAE,MAAQN,EAAE,GAClC,EACA,CAACA,EAAE,GAAG,CAAA,EAGF,CAAE,UAAAQ,EAAW,GAAGC,CAAU,EAAIC,EAAAA,eAAoB,CACtD,KAAM,eACN,OAAQ,CAAC,CAAE,MAAAL,KAAY,CACrB,MAAMM,EAAUJ,EAAAA,aAAkBnB,EAAWiB,CAAK,EAClD,OAAIA,EAAM,OAAS,IAAG1B,GAAA,MAAAA,EAAW,IAAIK,EAAAA,MAAY2B,EAAQ,CAAC,EAAE,GAAa,IAClEA,CACT,EACA,QAAAR,CAAA,CACD,EAEKS,EACJ3B,EAAA,kBAAA,IAAC4B,EAAO,OAAP,CACC,UAAW1B,EAAA,IACTA,EAAA,IAAI,EAAE,cAAc,EACpBA,EAAA,IAAI,KAAKI,CAAI,EACbS,EAAE,SAASF,CAAE,EAAI,KAAOE,EAAE,EAAI,IAAOb,EAAAA,IAAI,EAAE,WAAW,EACtDA,EAAAA,IAAI,WAAWgB,EAAQF,CAAQ,CAAC,EAChCX,CACF,EACA,UAAS,GACT,YAAa,IAAMkB,EAAU,CAAC,CAAE,KAAMpB,EAAW,IAAKY,EAAE,GAAI,CAAC,CAAC,EAC9D,MAAO,CAAE,gBAAiBc,EAAM,UAAUpC,CAAK,CAAE,EACjD,QAAQ,OACR,QAASiB,EACT,KAAAJ,EACA,QACEZ,GAAY,KACTM,EAAAA,kBAAAA,IAAA8B,EAAAA,KAAA,CAAU,MAAM,QAAQ,SAAA,uBAAqB,CAAA,EAC5C,OAEL,GAAGN,EACH,GAAG7B,CAAA,CAAA,EAIR,OAAID,GAAY,KAAaiC,EAG3BI,EAAA,kBAAA,KAACC,EAAS,OAAT,CACC,QAAAvB,EACA,IAAAE,EACA,UAAWT,EAAA,IAAI,GAAG,eAAgB,UAAU,EAC5C,YAAa,GAEZ,SAAA,CAAAyB,EACD3B,EAAAA,kBAAAA,IAACR,EAAO,CAAA,MAAAC,EAAc,SAAAC,CAAoB,CAAA,CAAA,CAAA,CAAA,CAGhD"}

package/dist/Swatch-IH4OmVdd.js

@@ -0,0 +1,82 @@
+import { j as c } from "./jsx-runtime-NmMXPjeo.js";
+import { useCallback as j } from "react";
+import { r as B, s as P, u as E, v, w as m, x as C, B as N, g as R, y as T } from "./Toggle-HVxv8bv2.js";
+import { C as o, a as i, Z as A, c as M } from "./css-5RvvUhjr.js";
+import "./component-LA8IXGSG.js";
+import "./Center-8mBjm1cO.js";
+const Z = ({ value: s, onChange: r, ...p }) => {
+  const l = (t) => {
+    t.hex === "transparent" && r(A), r(new i(t.hex, t.rgb.a));
+  };
+  return /* @__PURE__ */ c.jsx(
+    B,
+    {
+      className: o.B("color-picker"),
+      color: new i(s).hex,
+      onChange: l,
+      presetColors: [],
+      ...p
+    }
+  );
+}, u = "color", $ = ({
+  value: s,
+  onChange: r,
+  className: p,
+  size: l = "medium",
+  onVisibleChange: t,
+  initialVisible: g,
+  ...k
+}) => {
+  const { visible: h, open: w, ref: f } = P({ onVisibleChange: t, initialVisible: g }), y = E().colors.gray.l0, e = new i(s), S = v(), d = j(
+    ({ items: n }) => {
+      const [a] = m(u, n);
+      return a != null && a.key !== e.hex;
+    },
+    [e.hex]
+  ), { startDrag: D, ...b } = C({
+    type: "Color.Swatch",
+    onDrop: ({ items: n }) => {
+      const a = m(u, n);
+      return n.length > 0 && (r == null || r(new i(a[0].key))), a;
+    },
+    canDrop: d
+  }), x = /* @__PURE__ */ c.jsx(
+    N,
+    {
+      className: o(
+        o.B("color-swatch"),
+        o.size(l),
+        e.contrast(y) > 1.5 && e.a > 0.5 && o.M("no-border"),
+        o.dropRegion(d(S)),
+        p
+      ),
+      draggable: !0,
+      onDragStart: () => D([{ type: u, key: e.hex }]),
+      style: { backgroundColor: M(s) },
+      variant: "text",
+      onClick: w,
+      size: l,
+      tooltip: r != null ? /* @__PURE__ */ c.jsx(R, { level: "small", children: "Click to change color" }) : void 0,
+      ...b,
+      ...k
+    }
+  );
+  return r == null ? x : /* @__PURE__ */ c.jsxs(
+    T,
+    {
+      visible: h,
+      ref: f,
+      className: o.BE("color-swatch", "dropdown"),
+      keepMounted: !1,
+      children: [
+        x,
+        /* @__PURE__ */ c.jsx(Z, { value: s, onChange: r })
+      ]
+    }
+  );
+};
+export {
+  Z as P,
+  $ as S
+};
+//# sourceMappingURL=Swatch-IH4OmVdd.js.map

package/dist/Swatch-IH4OmVdd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Swatch-IH4OmVdd.js","sources":["../src/color/Picker/Picker.tsx","../src/color/Swatch/Swatch.tsx"],"sourcesContent":["// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport {\n  useCallback,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  useId,\n} from \"react\";\n\nimport { SketchPicker, type ColorResult } from \"react-color\";\n\nimport { color } from \"@/color/core\";\nimport { CSS } from \"@/css\";\nimport { type Input } from \"@/input\";\n\nimport \"@/color/Picker/Picker.css\";\n\nexport interface PickerProps\n  extends Input.Control<color.Crude, color.Color>,\n    Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {}\n\nexport const Picker = ({ value, onChange, ...props }: PickerProps): ReactElement => {\n  const handleChange = (res: ColorResult): void => {\n    if (res.hex === \"transparent\") onChange(color.ZERO);\n    onChange(new color.Color(res.hex, res.rgb.a));\n  };\n\n  return (\n    <SketchPicker\n      className={CSS.B(\"color-picker\")}\n      color={new color.Color(value).hex}\n      onChange={handleChange}\n      presetColors={[]}\n      {...props}\n    />\n  );\n};\n","// Copyright 2023 Synnax Labs, Inc.\n//\n// Use of this software is governed by the Business Source License included in the file\n// licenses/BSL.txt.\n//\n// As of the Change Date specified in that file, in accordance with the Business Source\n// License, use of this software will be governed by the Apache License, Version 2.0,\n// included in the file licenses/APL.txt.\n\nimport { type ReactElement, useCallback } from \"react\";\n\nimport { Button } from \"@/button\";\nimport { color } from \"@/color/core\";\nimport { type Crude, type Color } from \"@/color/core/color\";\nimport { Picker } from \"@/color/Picker\";\nimport { CSS } from \"@/css\";\nimport { Dropdown } from \"@/dropdown\";\nimport { type UseProps } from \"@/dropdown/Dropdown\";\nimport { Haul } from \"@/haul\";\nimport { type Input } from \"@/input\";\nimport { Text } from \"@/text\";\nimport { Theming } from \"@/theming\";\n\nimport \"@/color/Swatch/Swatch.css\";\n\nexport interface SwatchProps\n  extends Input.Control<Crude, Color>,\n    Omit<Button.ButtonProps, \"onChange\" | \"value\">,\n    UseProps {}\n\nconst HAUL_TYPE = \"color\";\n\nexport const Swatch = ({\n  value,\n  onChange,\n  className,\n  size = \"medium\",\n  onVisibleChange,\n  initialVisible,\n  ...props\n}: SwatchProps): ReactElement => {\n  const { visible, open, ref } = Dropdown.use({ onVisibleChange, initialVisible });\n\n  const bg = Theming.use().colors.gray.l0;\n\n  const d = new color.Color(value);\n\n  const dragging = Haul.useDraggingState();\n\n  const canDrop: Haul.CanDrop = useCallback(\n    ({ items }) => {\n      const [k] = Haul.filterByType(HAUL_TYPE, items);\n      return k != null && k.key !== d.hex;\n    },\n    [d.hex],\n  );\n\n  const { startDrag, ...haulProps } = Haul.useDragAndDrop({\n    type: \"Color.Swatch\",\n    onDrop: ({ items }) => {\n      const dropped = Haul.filterByType(HAUL_TYPE, items);\n      if (items.length > 0) onChange?.(new color.Color(dropped[0].key as string));\n      return dropped;\n    },\n    canDrop,\n  });\n\n  const swatch = (\n    <Button.Button\n      className={CSS(\n        CSS.B(\"color-swatch\"),\n        CSS.size(size),\n        d.contrast(bg) > 1.5 && d.a > 0.5 && CSS.M(\"no-border\"),\n        CSS.dropRegion(canDrop(dragging)),\n        className,\n      )}\n      draggable\n      onDragStart={() => startDrag([{ type: HAUL_TYPE, key: d.hex }])}\n      style={{ backgroundColor: color.cssString(value) }}\n      variant=\"text\"\n      onClick={open}\n      size={size}\n      tooltip={\n        onChange != null ? (\n          <Text.Text level=\"small\">Click to change color</Text.Text>\n        ) : undefined\n      }\n      {...haulProps}\n      {...props}\n    />\n  );\n\n  if (onChange == null) return swatch;\n\n  return (\n    <Dropdown.Dialog\n      visible={visible}\n      ref={ref}\n      className={CSS.BE(\"color-swatch\", \"dropdown\")}\n      keepMounted={false}\n    >\n      {swatch}\n      <Picker value={value} onChange={onChange} />\n    </Dropdown.Dialog>\n  );\n};\n"],"names":["Picker","value","onChange","props","handleChange","res","color.ZERO","color.Color","jsx","SketchPicker","CSS","HAUL_TYPE","Swatch","className","size","onVisibleChange","initialVisible","visible","open","ref","Dropdown.use","bg","Theming.use","d","dragging","Haul.useDraggingState","canDrop","useCallback","items","k","Haul.filterByType","startDrag","haulProps","Haul.useDragAndDrop","dropped","swatch","Button.Button","color.cssString","Text.Text","jsxs","Dropdown.Dialog"],"mappings":";;;;;;AA4BO,MAAMA,IAAS,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,GAAGC,QAAuC;AAC5E,QAAAC,IAAe,CAACC,MAA2B;AAC/C,IAAIA,EAAI,QAAQ,iBAAeH,EAASI,CAAU,GACzCJ,EAAA,IAAIK,EAAYF,EAAI,KAAKA,EAAI,IAAI,CAAC,CAAC;AAAA,EAAA;AAI5C,SAAAG,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAI,EAAE,cAAc;AAAA,MAC/B,OAAO,IAAIH,EAAYN,CAAK,EAAE;AAAA,MAC9B,UAAUG;AAAA,MACV,cAAc,CAAC;AAAA,MACd,GAAGD;AAAA,IAAA;AAAA,EAAA;AAGV,GCbMQ,IAAY,SAELC,IAAS,CAAC;AAAA,EACrB,OAAAX;AAAA,EACA,UAAAC;AAAA,EACA,WAAAW;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,GAAGb;AACL,MAAiC;AACzB,QAAA,EAAE,SAAAc,GAAS,MAAAC,GAAM,KAAAC,EAAI,IAAIC,EAAa,EAAE,iBAAAL,GAAiB,gBAAAC,EAAA,CAAgB,GAEzEK,IAAKC,EAAY,EAAE,OAAO,KAAK,IAE/BC,IAAI,IAAIhB,EAAYN,CAAK,GAEzBuB,IAAWC,KAEXC,IAAwBC;AAAA,IAC5B,CAAC,EAAE,OAAAC,EAAA,MAAY;AACb,YAAM,CAACC,CAAC,IAAIC,EAAkBnB,GAAWiB,CAAK;AAC9C,aAAOC,KAAK,QAAQA,EAAE,QAAQN,EAAE;AAAA,IAClC;AAAA,IACA,CAACA,EAAE,GAAG;AAAA,EAAA,GAGF,EAAE,WAAAQ,GAAW,GAAGC,EAAU,IAAIC,EAAoB;AAAA,IACtD,MAAM;AAAA,IACN,QAAQ,CAAC,EAAE,OAAAL,QAAY;AACrB,YAAMM,IAAUJ,EAAkBnB,GAAWiB,CAAK;AAClD,aAAIA,EAAM,SAAS,MAAG1B,KAAA,QAAAA,EAAW,IAAIK,EAAY2B,EAAQ,CAAC,EAAE,GAAa,KAClEA;AAAA,IACT;AAAA,IACA,SAAAR;AAAA,EAAA,CACD,GAEKS,IACJ3B,gBAAAA,EAAA;AAAA,IAAC4B;AAAAA,IAAA;AAAA,MACC,WAAW1B;AAAA,QACTA,EAAI,EAAE,cAAc;AAAA,QACpBA,EAAI,KAAKI,CAAI;AAAA,QACbS,EAAE,SAASF,CAAE,IAAI,OAAOE,EAAE,IAAI,OAAOb,EAAI,EAAE,WAAW;AAAA,QACtDA,EAAI,WAAWgB,EAAQF,CAAQ,CAAC;AAAA,QAChCX;AAAA,MACF;AAAA,MACA,WAAS;AAAA,MACT,aAAa,MAAMkB,EAAU,CAAC,EAAE,MAAMpB,GAAW,KAAKY,EAAE,IAAI,CAAC,CAAC;AAAA,MAC9D,OAAO,EAAE,iBAAiBc,EAAgBpC,CAAK,EAAE;AAAA,MACjD,SAAQ;AAAA,MACR,SAASiB;AAAA,MACT,MAAAJ;AAAA,MACA,SACEZ,KAAY,OACTM,gBAAAA,EAAAA,IAAA8B,GAAA,EAAU,OAAM,SAAQ,UAAA,wBAAqB,CAAA,IAC5C;AAAA,MAEL,GAAGN;AAAA,MACH,GAAG7B;AAAA,IAAA;AAAA,EAAA;AAIR,SAAID,KAAY,OAAaiC,IAG3BI,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,SAAAvB;AAAA,MACA,KAAAE;AAAA,MACA,WAAWT,EAAI,GAAG,gBAAgB,UAAU;AAAA,MAC5C,aAAa;AAAA,MAEZ,UAAA;AAAA,QAAAyB;AAAA,QACD3B,gBAAAA,EAAAA,IAACR,GAAO,EAAA,OAAAC,GAAc,UAAAC,EAAoB,CAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhD;"}