npm - @ynput/ayon-frontend-shared - Versions diffs - 0.2.34 → 0.2.36 - Mend

@ynput/ayon-frontend-shared 0.2.34 → 0.2.36

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1111) hide show

package/dist/shared/src/components/SimpleFormDialog/SimpleFormDialog.cjs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SimpleFormDialog.cjs.js","sources":["../../../../../src/components/SimpleFormDialog/SimpleFormDialog.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport React, { useState, useEffect } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport {\n Button,\n Spacer,\n Dialog,\n FormLayout,\n FormRow,\n InputNumber,\n InputText,\n InputSwitch,\n Dropdown,\n DefaultItemTemplate,\n} from '@ynput/ayon-react-components'\nimport { Badge } from '@shared/components'\n\nimport type { FormSelectOption, SimpleFormField } from '@shared/api'\n\nexport type SimpleFormValue = string \| number \| boolean \| string[] \| null \| undefined\nexport type SimpleFormValueDict = Record<string, SimpleFormValue>\n\nconst getDefaults = (fields: SimpleFormField[], values: SimpleFormValueDict) => {\n const defaults: SimpleFormValueDict = {}\n fields.forEach((field) => {\n if (field.name in values) {\n defaults[field.name] = values[field.name]\n } else if (field.value) {\n defaults[field.name] = field.value\n } else if (field.type === 'boolean') {\n defaults[field.name] = false\n } else if (field.type === 'integer') {\n defaults[field.name] = 0\n } else if (field.type === 'float') {\n defaults[field.name] = 0.0\n } else if (field.type === 'text') {\n defaults[field.name] = ''\n } else if (field.type === 'multiselect') {\n defaults[field.name] = []\n }\n })\n return defaults\n}\n\nconst LabelContainer = styled.div`\n &.normal {\n // maybe something here\n }\n\n &.info,\n &.warning,\n &.error {\n padding: 0.5rem;\n text-align: center;\n font-weight: bold;\n margin: 1rem 0;\n }\n\n &.info {\n background-color: var(--md-sys-color-on-secondary-dark);\n }\n &.warning {\n background-color: var(--md-sys-color-warning-container-dark);\n }\n &.error {\n background-color: var(--md-sys-color-on-error-dark);\n }\n`\n\ntype FormLabelProps = {\n field: SimpleFormField\n}\n\nconst FormLabel = ({ field }: FormLabelProps) => {\n const text = typeof field.value === 'string' ? field.value : 'Invalid label value'\n\n return (\n <LabelContainer className={field.highlight \|\| 'normal'}>\n <ReactMarkdown>{text}</ReactMarkdown>\n </LabelContainer>\n )\n}\n\ntype FormFieldProps = {\n field: SimpleFormField\n value: SimpleFormValue\n onChange: (value: SimpleFormValue) => void\n}\n\nconst DropdownItemTemplate = (option: FormSelectOption) => {\n const endContent = (\n <>\n <div style={{ flex: 1 }} />\n {option.badges && option.badges.map((badge, index) => <Badge key={index}>{badge}</Badge>)}\n </>\n )\n return (\n <DefaultItemTemplate\n option={option}\n dataKey={'value'}\n labelKey={'label'}\n value={[option.value]}\n endContent={endContent}\n />\n )\n}\n\nconst FormField = ({ field, value, onChange }: FormFieldProps) => {\n if (field.type === 'text') {\n const parsedValue = typeof value === 'string' ? value : ''\n return (\n <InputText\n value={parsedValue}\n onChange={(e) => onChange(e.target.value)}\n placeholder={field.placeholder \|\| ''}\n />\n )\n }\n if (field.type === 'boolean') {\n const parsedValue = typeof value === 'boolean' ? value : false\n\n const handleCheckboxEvent = (\n event: React.ChangeEvent<HTMLInputElement> \| React.KeyboardEvent<HTMLInputElement>,\n ) => {\n if ('target' in event && 'checked' in event.target) {\n onChange((event.target as HTMLInputElement).checked)\n }\n }\n\n return <InputSwitch checked={parsedValue} onChange={handleCheckboxEvent} />\n }\n if (field.type === 'integer') {\n const parsedValue = typeof value === 'number' ? value : 0\n return (\n <InputNumber\n value={parsedValue}\n onChange={(e) => onChange(parseInt(e.target.value))}\n placeholder={field.placeholder \|\| ''}\n />\n )\n }\n if (field.type === 'float') {\n const parsedValue = typeof value === 'number' ? value : 0.0\n return (\n <InputNumber\n type=\"number\"\n value={parsedValue}\n onChange={(e) => onChange(parseFloat(e.target.value))}\n placeholder={field.placeholder \|\| ''}\n />\n )\n }\n\n if (field.type === 'select') {\n const parsedValue = typeof value === 'string' ? value : ''\n return (\n <Dropdown\n widthExpand\n options={field.options \|\| []}\n value={parsedValue ? [parsedValue] : []}\n onSelectionChange={(e) => onChange(e[0])}\n className={`form-field`}\n multiSelect={false}\n itemTemplate={DropdownItemTemplate}\n />\n )\n } // Handle select\n\n if (field.type === 'multiselect') {\n const parsedValue = Array.isArray(value) ? value : []\n return (\n <Dropdown\n widthExpand\n options={field.options \|\| []}\n value={parsedValue}\n onSelectionChange={(e) => onChange(e)}\n className={`form-field`}\n multiSelect={true}\n itemTemplate={DropdownItemTemplate}\n />\n )\n }\n}\n\nexport interface SimpleFormDialogProps {\n title: string\n fields: SimpleFormField[]\n values?: SimpleFormValueDict\n submitLabel?: string\n cancelLabel?: string\n submitIcon?: string\n cancelIcon?: string\n onClose: () => void\n onSubmit: (values: SimpleFormValueDict) => void\n isOpen: boolean\n}\n\nexport const SimpleFormDialog = ({\n fields,\n values,\n onClose,\n onSubmit,\n isOpen,\n title,\n submitLabel,\n cancelLabel,\n submitIcon,\n cancelIcon,\n}: SimpleFormDialogProps) => {\n const [formData, setFormData] = useState<SimpleFormValueDict \| null>(null)\n\n useEffect(() => {\n if (isOpen) {\n const defaults = getDefaults(fields, values \|\| {})\n setFormData(defaults)\n }\n }, [isOpen, fields, values])\n\n if (!isOpen) return null\n if (!formData) return null\n\n const footer = (\n <div style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>\n <Spacer />\n {cancelLabel && <Button onClick={() => onClose()} label={cancelLabel} icon={cancelIcon} />}\n {submitLabel && (\n <Button\n onClick={() => onSubmit(formData)}\n label={submitLabel}\n icon={submitIcon}\n variant=\"filled\"\n />\n )}\n </div>\n )\n\n return (\n <Dialog\n isOpen={isOpen}\n onClose={onClose}\n header={title}\n footer={footer}\n style={{ minHeight: 500, minWidth: 600 }}\n >\n <FormLayout\n style={{ width: '95%' }}\n onKeyDown={(e) => {\n e.stopPropagation()\n }}\n >\n {fields.map((field: SimpleFormField) => {\n if (field.type === 'label') {\n return <FormLabel key={field.name} field={field} />\n }\n\n return (\n <FormRow key={field.name} label={field.label \|\| ''}>\n <FormField\n field={field}\n value={formData[field.name]}\n onChange={(value) => {\n setFormData((prev) => ({\n ...prev,\n [field.name]: value,\n }))\n }}\n />\n </FormRow>\n )\n })}\n </FormLayout>\n </Dialog>\n )\n}\n"],"names":["getDefaults","fields","values","defaults","field","LabelContainer","styled","FormLabel","text","jsx","ReactMarkdown","DropdownItemTemplate","option","endContent","jsxs","Fragment","badge","index","Badge","DefaultItemTemplate","FormField","value","onChange","parsedValue","InputText","e","handleCheckboxEvent","event","InputSwitch","InputNumber","Dropdown","SimpleFormDialog","onClose","onSubmit","isOpen","title","submitLabel","cancelLabel","submitIcon","cancelIcon","formData","setFormData","useState","useEffect","footer","Spacer","Button","Dialog","FormLayout","FormRow","prev"],"mappings":"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"}
1	+ {"version":3,"file":"SimpleFormDialog.cjs.js","sources":["../../../../../src/components/SimpleFormDialog/SimpleFormDialog.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport React, { useState, useEffect } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport {\n Button,\n Spacer,\n Dialog,\n FormLayout,\n FormRow,\n InputNumber,\n InputText,\n InputSwitch,\n Dropdown,\n DefaultItemTemplate,\n} from '@ynput/ayon-react-components'\nimport { Badge } from '@shared/components'\n\nimport type { FormSelectOption, SimpleFormField } from '@shared/api'\n\nexport type SimpleFormValue = string \| number \| boolean \| string[] \| null \| undefined\nexport type SimpleFormValueDict = Record<string, SimpleFormValue>\n\nconst getDefaults = (fields: SimpleFormField[], values: SimpleFormValueDict) => {\n const defaults: SimpleFormValueDict = {}\n fields.forEach((field) => {\n if (field.name in values) {\n defaults[field.name] = values[field.name]\n } else if (field.value) {\n defaults[field.name] = field.value\n } else if (field.type === 'boolean') {\n defaults[field.name] = false\n } else if (field.type === 'integer') {\n defaults[field.name] = 0\n } else if (field.type === 'float') {\n defaults[field.name] = 0.0\n } else if (field.type === 'text') {\n defaults[field.name] = ''\n } else if (field.type === 'multiselect') {\n defaults[field.name] = []\n }\n })\n return defaults\n}\n\nconst LabelContainer = styled.div`\n &.normal {\n // maybe something here\n }\n\n &.info,\n &.warning,\n &.error {\n padding: 0.5rem;\n text-align: center;\n font-weight: bold;\n margin: 1rem 0;\n }\n\n &.info {\n background-color: var(--md-sys-color-on-secondary-dark);\n }\n &.warning {\n background-color: var(--md-sys-color-warning-container-dark);\n }\n &.error {\n background-color: var(--md-sys-color-on-error-dark);\n }\n`\n\ntype FormLabelProps = {\n field: SimpleFormField\n}\n\nconst FormLabel = ({ field }: FormLabelProps) => {\n const text = typeof field.value === 'string' ? field.value : 'Invalid label value'\n\n return (\n <LabelContainer className={field.highlight \|\| 'normal'}>\n <ReactMarkdown>{text}</ReactMarkdown>\n </LabelContainer>\n )\n}\n\ntype FormFieldProps = {\n field: SimpleFormField\n value: SimpleFormValue\n onChange: (value: SimpleFormValue) => void\n}\n\nconst DropdownItemTemplate = (option: FormSelectOption) => {\n const endContent = (\n <>\n <div style={{ flex: 1 }} />\n {option.badges && option.badges.map((badge, index) => <Badge key={index} label={badge}/>)}\n </>\n )\n return (\n <DefaultItemTemplate\n option={option}\n dataKey={'value'}\n labelKey={'label'}\n value={[option.value]}\n endContent={endContent}\n />\n )\n}\n\nconst FormField = ({ field, value, onChange }: FormFieldProps) => {\n if (field.type === 'text') {\n const parsedValue = typeof value === 'string' ? value : ''\n return (\n <InputText\n value={parsedValue}\n onChange={(e) => onChange(e.target.value)}\n placeholder={field.placeholder \|\| ''}\n />\n )\n }\n if (field.type === 'boolean') {\n const parsedValue = typeof value === 'boolean' ? value : false\n\n const handleCheckboxEvent = (\n event: React.ChangeEvent<HTMLInputElement> \| React.KeyboardEvent<HTMLInputElement>,\n ) => {\n if ('target' in event && 'checked' in event.target) {\n onChange((event.target as HTMLInputElement).checked)\n }\n }\n\n return <InputSwitch checked={parsedValue} onChange={handleCheckboxEvent} />\n }\n if (field.type === 'integer') {\n const parsedValue = typeof value === 'number' ? value : 0\n return (\n <InputNumber\n value={parsedValue}\n onChange={(e) => onChange(parseInt(e.target.value))}\n placeholder={field.placeholder \|\| ''}\n />\n )\n }\n if (field.type === 'float') {\n const parsedValue = typeof value === 'number' ? value : 0.0\n return (\n <InputNumber\n type=\"number\"\n value={parsedValue}\n onChange={(e) => onChange(parseFloat(e.target.value))}\n placeholder={field.placeholder \|\| ''}\n />\n )\n }\n\n if (field.type === 'select') {\n const parsedValue = typeof value === 'string' ? value : ''\n return (\n <Dropdown\n widthExpand\n options={field.options \|\| []}\n value={parsedValue ? [parsedValue] : []}\n onSelectionChange={(e) => onChange(e[0])}\n className={`form-field`}\n multiSelect={false}\n itemTemplate={DropdownItemTemplate}\n />\n )\n } // Handle select\n\n if (field.type === 'multiselect') {\n const parsedValue = Array.isArray(value) ? value : []\n return (\n <Dropdown\n widthExpand\n options={field.options \|\| []}\n value={parsedValue}\n onSelectionChange={(e) => onChange(e)}\n className={`form-field`}\n multiSelect={true}\n itemTemplate={DropdownItemTemplate}\n />\n )\n }\n}\n\nexport interface SimpleFormDialogProps {\n title: string\n fields: SimpleFormField[]\n values?: SimpleFormValueDict\n submitLabel?: string\n cancelLabel?: string\n submitIcon?: string\n cancelIcon?: string\n onClose: () => void\n onSubmit: (values: SimpleFormValueDict) => void\n isOpen: boolean\n}\n\nexport const SimpleFormDialog = ({\n fields,\n values,\n onClose,\n onSubmit,\n isOpen,\n title,\n submitLabel,\n cancelLabel,\n submitIcon,\n cancelIcon,\n}: SimpleFormDialogProps) => {\n const [formData, setFormData] = useState<SimpleFormValueDict \| null>(null)\n\n useEffect(() => {\n if (isOpen) {\n const defaults = getDefaults(fields, values \|\| {})\n setFormData(defaults)\n }\n }, [isOpen, fields, values])\n\n if (!isOpen) return null\n if (!formData) return null\n\n const footer = (\n <div style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>\n <Spacer />\n {cancelLabel && <Button onClick={() => onClose()} label={cancelLabel} icon={cancelIcon} />}\n {submitLabel && (\n <Button\n onClick={() => onSubmit(formData)}\n label={submitLabel}\n icon={submitIcon}\n variant=\"filled\"\n />\n )}\n </div>\n )\n\n return (\n <Dialog\n isOpen={isOpen}\n onClose={onClose}\n header={title}\n footer={footer}\n style={{ minHeight: 500, minWidth: 600 }}\n >\n <FormLayout\n style={{ width: '95%' }}\n onKeyDown={(e) => {\n e.stopPropagation()\n }}\n >\n {fields.map((field: SimpleFormField) => {\n if (field.type === 'label') {\n return <FormLabel key={field.name} field={field} />\n }\n\n return (\n <FormRow key={field.name} label={field.label \|\| ''}>\n <FormField\n field={field}\n value={formData[field.name]}\n onChange={(value) => {\n setFormData((prev) => ({\n ...prev,\n [field.name]: value,\n }))\n }}\n />\n </FormRow>\n )\n })}\n </FormLayout>\n </Dialog>\n )\n}\n"],"names":["getDefaults","fields","values","defaults","field","LabelContainer","styled","FormLabel","text","jsx","ReactMarkdown","DropdownItemTemplate","option","endContent","jsxs","Fragment","badge","index","Badge","DefaultItemTemplate","FormField","value","onChange","parsedValue","InputText","e","handleCheckboxEvent","event","InputSwitch","InputNumber","Dropdown","SimpleFormDialog","onClose","onSubmit","isOpen","title","submitLabel","cancelLabel","submitIcon","cancelIcon","formData","setFormData","useState","useEffect","footer","Spacer","Button","Dialog","FormLayout","FormRow","prev"],"mappings":"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"}

package/dist/shared/src/components/SimpleFormDialog/SimpleFormDialog.es.js CHANGED Viewed

@@ -73,6 +73,7 @@ import "../../api/queries/links/getLinks.es.js";
 import "../../api/queries/links/getEntityLinks.es.js";
 import "../../api/queries/overview/getOverview.es.js";
 import "../../api/queries/overview/updateOverview.es.js";
+import "../../api/queries/versions/getVersionsProducts.es.js";
 import "../../api/queries/permissions/getPermissions.es.js";
 import "../../api/queries/products/createProduct.es.js";
 import "../../api/queries/project/getProject.es.js";
@@ -111,6 +112,7 @@ import "../../context/AddonContext.es.js";
 import "../../context/PowerpackContext.es.js";
 import "../../context/MoveEntityContext.es.js";
 import "../../context/MenuContext.es.js";
+import "../../context/WebsocketContext.es.js";
 import "../ReviewableCard/ReviewableCard.es.js";
 import "../ReviewableProgressCard/ReviewableProgressCard.styled.es.js";
 import "../FileThumbnail/FileThumbnail.es.js";
@@ -148,6 +150,7 @@ import "../../containers/Feed/components/ActivityCategorySelect/ActivityCategory
 import "../../containers/Feed/components/ActivityCategorySelect/CategoryDropdownItem.es.js";
 import "../../containers/ProjectTreeTable/ProjectTreeTable.es.js";
 import "../../containers/ProjectTreeTable/context/CellEditingContext.es.js";
+import "short-uuid";
 import "@tanstack/react-table";
 import "../../containers/ProjectTreeTable/widgets/CollapsedWidget.es.js";
 import "../../containers/ProjectTreeTable/widgets/DateWidget.es.js";
@@ -162,6 +165,8 @@ import "../LinksManager/CellEditingDialog.es.js";
 import "../../containers/ProjectTreeTable/context/DetailsPanelEntityContext.es.js";
 import "../../containers/ProjectTreeTable/context/SelectedRowsContext.es.js";
 import "../LinksManager/LinksManager.styled.es.js";
+import "../../containers/ProjectTreeTable/widgets/EmptyWidget.es.js";
+import "../../containers/ProjectTreeTable/widgets/ErrorWidget.es.js";
 import "../../containers/ProjectTreeTable/ProjectTreeTable.styled.es.js";
 import "../../containers/ProjectTreeTable/components/SelectionCell.es.js";
 import "../../containers/ProjectTreeTable/components/RowSelectionHeader.es.js";
@@ -206,12 +211,14 @@ import "../Powerpack/PowerpackButton.es.js";
 import "../Powerpack/PricingLink.es.js";
 import "../Powerpack/PowerpackDialog.styled.es.js";
 import "../Powerpack/CTAButton.es.js";
-import "../Powerpack/RequiredPowerpackVersion.es.js";
+import "../Powerpack/RequiredAddonVersion.es.js";
+import "../SizeSlider/SizeSlider.es.js";
 import "../SettingsPanel/SettingsPanel.es.js";
 import "../SettingsPanel/SettingsPanelItemTemplate.es.js";
 import "../AttributeEditor/components/MinMaxField.es.js";
 import "../EnumEditor/EnumEditor.styled.es.js";
 import "../SearchFilter/filterDates.es.js";
+import "../FeaturedVersionOrder/FeaturedVersionOrder.es.js";
 import { Badge as N } from "../Badge/Badge.es.js";
 import "../VersionUploader/components/UploadVersionDialog.es.js";
 import "../VersionUploader/context/VersionUploadContext.es.js";
@@ -224,6 +231,10 @@ import "../ShareOptionIcon/ShareOptionIcon.es.js";
 import "../AccessUser/AccessUser.es.js";
 import "../../../../node_modules/match-sorter/dist/match-sorter.esm.es.js";
 import "../AccessSearchInput/AccessSearchInput.styled.es.js";
+import "../TableGridSwitch/TableGridSwitch.es.js";
+import "../SortingSetting/SortingSetting.styled.es.js";
+import "../EarlyPreview/EarlyPreview.es.js";
+import "../LegacyBadge/LegacyBadge.es.js";
 const K = (r, o) => {
   const p = {};
   return r.forEach((t) => {
@@ -255,10 +266,10 @@ const K = (r, o) => {
 `, A = ({ field: r }) => {
   const o = typeof r.value == "string" ? r.value : "Invalid label value";
   return /* @__PURE__ */ m.jsx(R, { className: r.highlight || "normal", children: /* @__PURE__ */ m.jsx(D, { children: o }) });
-}, h = (r) => {
+}, x = (r) => {
   const o = /* @__PURE__ */ m.jsxs(m.Fragment, { children: [
     /* @__PURE__ */ m.jsx("div", { style: { flex: 1 } }),
-    r.badges && r.badges.map((p, t) => /* @__PURE__ */ m.jsx(N, { children: p }, t))
+    r.badges && r.badges.map((p, t) => /* @__PURE__ */ m.jsx(N, { label: p }, t))
   ] });
   return /* @__PURE__ */ m.jsx(
     T,
@@ -322,7 +333,7 @@ const K = (r, o) => {
         onSelectionChange: (i) => p(i[0]),
         className: "form-field",
         multiSelect: !1,
-        itemTemplate: h
+        itemTemplate: x
       }
     );
   }
@@ -337,11 +348,11 @@ const K = (r, o) => {
         onSelectionChange: (i) => p(i),
         className: "form-field",
         multiSelect: !0,
-        itemTemplate: h
+        itemTemplate: x
       }
     );
   }
-}, Xm = ({
+}, ip = ({
   fields: r,
   values: o,
   onClose: p,
@@ -350,7 +361,7 @@ const K = (r, o) => {
   title: a,
   submitLabel: s,
   cancelLabel: l,
-  submitIcon: x,
+  submitIcon: h,
   cancelIcon: d
 }) => {
   const [n, c] = k(null);
@@ -360,7 +371,7 @@ const K = (r, o) => {
       c(e);
     }
   }, [i, r, o]), !i || !n) return null;
-  const j = /* @__PURE__ */ m.jsxs("div", { style: { display: "flex", flexDirection: "row", gap: 8 }, children: [
+  const b = /* @__PURE__ */ m.jsxs("div", { style: { display: "flex", flexDirection: "row", gap: 8 }, children: [
     /* @__PURE__ */ m.jsx(C, {}),
     l && /* @__PURE__ */ m.jsx(u, { onClick: () => p(), label: l, icon: d }),
     s && /* @__PURE__ */ m.jsx(
@@ -368,7 +379,7 @@ const K = (r, o) => {
       {
         onClick: () => t(n),
         label: s,
-        icon: x,
+        icon: h,
         variant: "filled"
       }
     )
@@ -379,7 +390,7 @@ const K = (r, o) => {
       isOpen: i,
       onClose: p,
       header: a,
-      footer: j,
+      footer: b,
       style: { minHeight: 500, minWidth: 600 },
       children: /* @__PURE__ */ m.jsx(
         S,
@@ -393,10 +404,10 @@ const K = (r, o) => {
             {
               field: e,
               value: n[e.name],
-              onChange: (b) => {
+              onChange: (j) => {
                 c((f) => ({
                   ...f,
-                  [e.name]: b
+                  [e.name]: j
                 }));
               }
             }
@@ -407,6 +418,6 @@ const K = (r, o) => {
   );
 };
 export {
-  Xm as SimpleFormDialog
+  ip as SimpleFormDialog
 };
 //# sourceMappingURL=SimpleFormDialog.es.js.map

package/dist/shared/src/components/SimpleFormDialog/SimpleFormDialog.es.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SimpleFormDialog.es.js","sources":["../../../../../src/components/SimpleFormDialog/SimpleFormDialog.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport React, { useState, useEffect } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport {\n Button,\n Spacer,\n Dialog,\n FormLayout,\n FormRow,\n InputNumber,\n InputText,\n InputSwitch,\n Dropdown,\n DefaultItemTemplate,\n} from '@ynput/ayon-react-components'\nimport { Badge } from '@shared/components'\n\nimport type { FormSelectOption, SimpleFormField } from '@shared/api'\n\nexport type SimpleFormValue = string \| number \| boolean \| string[] \| null \| undefined\nexport type SimpleFormValueDict = Record<string, SimpleFormValue>\n\nconst getDefaults = (fields: SimpleFormField[], values: SimpleFormValueDict) => {\n const defaults: SimpleFormValueDict = {}\n fields.forEach((field) => {\n if (field.name in values) {\n defaults[field.name] = values[field.name]\n } else if (field.value) {\n defaults[field.name] = field.value\n } else if (field.type === 'boolean') {\n defaults[field.name] = false\n } else if (field.type === 'integer') {\n defaults[field.name] = 0\n } else if (field.type === 'float') {\n defaults[field.name] = 0.0\n } else if (field.type === 'text') {\n defaults[field.name] = ''\n } else if (field.type === 'multiselect') {\n defaults[field.name] = []\n }\n })\n return defaults\n}\n\nconst LabelContainer = styled.div`\n &.normal {\n // maybe something here\n }\n\n &.info,\n &.warning,\n &.error {\n padding: 0.5rem;\n text-align: center;\n font-weight: bold;\n margin: 1rem 0;\n }\n\n &.info {\n background-color: var(--md-sys-color-on-secondary-dark);\n }\n &.warning {\n background-color: var(--md-sys-color-warning-container-dark);\n }\n &.error {\n background-color: var(--md-sys-color-on-error-dark);\n }\n`\n\ntype FormLabelProps = {\n field: SimpleFormField\n}\n\nconst FormLabel = ({ field }: FormLabelProps) => {\n const text = typeof field.value === 'string' ? field.value : 'Invalid label value'\n\n return (\n <LabelContainer className={field.highlight \|\| 'normal'}>\n <ReactMarkdown>{text}</ReactMarkdown>\n </LabelContainer>\n )\n}\n\ntype FormFieldProps = {\n field: SimpleFormField\n value: SimpleFormValue\n onChange: (value: SimpleFormValue) => void\n}\n\nconst DropdownItemTemplate = (option: FormSelectOption) => {\n const endContent = (\n <>\n <div style={{ flex: 1 }} />\n {option.badges && option.badges.map((badge, index) => <Badge key={index}>{badge}</Badge>)}\n </>\n )\n return (\n <DefaultItemTemplate\n option={option}\n dataKey={'value'}\n labelKey={'label'}\n value={[option.value]}\n endContent={endContent}\n />\n )\n}\n\nconst FormField = ({ field, value, onChange }: FormFieldProps) => {\n if (field.type === 'text') {\n const parsedValue = typeof value === 'string' ? value : ''\n return (\n <InputText\n value={parsedValue}\n onChange={(e) => onChange(e.target.value)}\n placeholder={field.placeholder \|\| ''}\n />\n )\n }\n if (field.type === 'boolean') {\n const parsedValue = typeof value === 'boolean' ? value : false\n\n const handleCheckboxEvent = (\n event: React.ChangeEvent<HTMLInputElement> \| React.KeyboardEvent<HTMLInputElement>,\n ) => {\n if ('target' in event && 'checked' in event.target) {\n onChange((event.target as HTMLInputElement).checked)\n }\n }\n\n return <InputSwitch checked={parsedValue} onChange={handleCheckboxEvent} />\n }\n if (field.type === 'integer') {\n const parsedValue = typeof value === 'number' ? value : 0\n return (\n <InputNumber\n value={parsedValue}\n onChange={(e) => onChange(parseInt(e.target.value))}\n placeholder={field.placeholder \|\| ''}\n />\n )\n }\n if (field.type === 'float') {\n const parsedValue = typeof value === 'number' ? value : 0.0\n return (\n <InputNumber\n type=\"number\"\n value={parsedValue}\n onChange={(e) => onChange(parseFloat(e.target.value))}\n placeholder={field.placeholder \|\| ''}\n />\n )\n }\n\n if (field.type === 'select') {\n const parsedValue = typeof value === 'string' ? value : ''\n return (\n <Dropdown\n widthExpand\n options={field.options \|\| []}\n value={parsedValue ? [parsedValue] : []}\n onSelectionChange={(e) => onChange(e[0])}\n className={`form-field`}\n multiSelect={false}\n itemTemplate={DropdownItemTemplate}\n />\n )\n } // Handle select\n\n if (field.type === 'multiselect') {\n const parsedValue = Array.isArray(value) ? value : []\n return (\n <Dropdown\n widthExpand\n options={field.options \|\| []}\n value={parsedValue}\n onSelectionChange={(e) => onChange(e)}\n className={`form-field`}\n multiSelect={true}\n itemTemplate={DropdownItemTemplate}\n />\n )\n }\n}\n\nexport interface SimpleFormDialogProps {\n title: string\n fields: SimpleFormField[]\n values?: SimpleFormValueDict\n submitLabel?: string\n cancelLabel?: string\n submitIcon?: string\n cancelIcon?: string\n onClose: () => void\n onSubmit: (values: SimpleFormValueDict) => void\n isOpen: boolean\n}\n\nexport const SimpleFormDialog = ({\n fields,\n values,\n onClose,\n onSubmit,\n isOpen,\n title,\n submitLabel,\n cancelLabel,\n submitIcon,\n cancelIcon,\n}: SimpleFormDialogProps) => {\n const [formData, setFormData] = useState<SimpleFormValueDict \| null>(null)\n\n useEffect(() => {\n if (isOpen) {\n const defaults = getDefaults(fields, values \|\| {})\n setFormData(defaults)\n }\n }, [isOpen, fields, values])\n\n if (!isOpen) return null\n if (!formData) return null\n\n const footer = (\n <div style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>\n <Spacer />\n {cancelLabel && <Button onClick={() => onClose()} label={cancelLabel} icon={cancelIcon} />}\n {submitLabel && (\n <Button\n onClick={() => onSubmit(formData)}\n label={submitLabel}\n icon={submitIcon}\n variant=\"filled\"\n />\n )}\n </div>\n )\n\n return (\n <Dialog\n isOpen={isOpen}\n onClose={onClose}\n header={title}\n footer={footer}\n style={{ minHeight: 500, minWidth: 600 }}\n >\n <FormLayout\n style={{ width: '95%' }}\n onKeyDown={(e) => {\n e.stopPropagation()\n }}\n >\n {fields.map((field: SimpleFormField) => {\n if (field.type === 'label') {\n return <FormLabel key={field.name} field={field} />\n }\n\n return (\n <FormRow key={field.name} label={field.label \|\| ''}>\n <FormField\n field={field}\n value={formData[field.name]}\n onChange={(value) => {\n setFormData((prev) => ({\n ...prev,\n [field.name]: value,\n }))\n }}\n />\n </FormRow>\n )\n })}\n </FormLayout>\n </Dialog>\n )\n}\n"],"names":["getDefaults","fields","values","defaults","field","LabelContainer","styled","FormLabel","text","jsx","ReactMarkdown","DropdownItemTemplate","option","endContent","jsxs","Fragment","badge","index","Badge","DefaultItemTemplate","FormField","value","onChange","parsedValue","InputText","e","handleCheckboxEvent","event","InputSwitch","InputNumber","Dropdown","SimpleFormDialog","onClose","onSubmit","isOpen","title","submitLabel","cancelLabel","submitIcon","cancelIcon","formData","setFormData","useState","useEffect","footer","Spacer","Button","Dialog","FormLayout","FormRow","prev"],"mappings":"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"}
1	+ {"version":3,"file":"SimpleFormDialog.es.js","sources":["../../../../../src/components/SimpleFormDialog/SimpleFormDialog.tsx"],"sourcesContent":["import styled from 'styled-components'\nimport React, { useState, useEffect } from 'react'\nimport ReactMarkdown from 'react-markdown'\nimport {\n Button,\n Spacer,\n Dialog,\n FormLayout,\n FormRow,\n InputNumber,\n InputText,\n InputSwitch,\n Dropdown,\n DefaultItemTemplate,\n} from '@ynput/ayon-react-components'\nimport { Badge } from '@shared/components'\n\nimport type { FormSelectOption, SimpleFormField } from '@shared/api'\n\nexport type SimpleFormValue = string \| number \| boolean \| string[] \| null \| undefined\nexport type SimpleFormValueDict = Record<string, SimpleFormValue>\n\nconst getDefaults = (fields: SimpleFormField[], values: SimpleFormValueDict) => {\n const defaults: SimpleFormValueDict = {}\n fields.forEach((field) => {\n if (field.name in values) {\n defaults[field.name] = values[field.name]\n } else if (field.value) {\n defaults[field.name] = field.value\n } else if (field.type === 'boolean') {\n defaults[field.name] = false\n } else if (field.type === 'integer') {\n defaults[field.name] = 0\n } else if (field.type === 'float') {\n defaults[field.name] = 0.0\n } else if (field.type === 'text') {\n defaults[field.name] = ''\n } else if (field.type === 'multiselect') {\n defaults[field.name] = []\n }\n })\n return defaults\n}\n\nconst LabelContainer = styled.div`\n &.normal {\n // maybe something here\n }\n\n &.info,\n &.warning,\n &.error {\n padding: 0.5rem;\n text-align: center;\n font-weight: bold;\n margin: 1rem 0;\n }\n\n &.info {\n background-color: var(--md-sys-color-on-secondary-dark);\n }\n &.warning {\n background-color: var(--md-sys-color-warning-container-dark);\n }\n &.error {\n background-color: var(--md-sys-color-on-error-dark);\n }\n`\n\ntype FormLabelProps = {\n field: SimpleFormField\n}\n\nconst FormLabel = ({ field }: FormLabelProps) => {\n const text = typeof field.value === 'string' ? field.value : 'Invalid label value'\n\n return (\n <LabelContainer className={field.highlight \|\| 'normal'}>\n <ReactMarkdown>{text}</ReactMarkdown>\n </LabelContainer>\n )\n}\n\ntype FormFieldProps = {\n field: SimpleFormField\n value: SimpleFormValue\n onChange: (value: SimpleFormValue) => void\n}\n\nconst DropdownItemTemplate = (option: FormSelectOption) => {\n const endContent = (\n <>\n <div style={{ flex: 1 }} />\n {option.badges && option.badges.map((badge, index) => <Badge key={index} label={badge}/>)}\n </>\n )\n return (\n <DefaultItemTemplate\n option={option}\n dataKey={'value'}\n labelKey={'label'}\n value={[option.value]}\n endContent={endContent}\n />\n )\n}\n\nconst FormField = ({ field, value, onChange }: FormFieldProps) => {\n if (field.type === 'text') {\n const parsedValue = typeof value === 'string' ? value : ''\n return (\n <InputText\n value={parsedValue}\n onChange={(e) => onChange(e.target.value)}\n placeholder={field.placeholder \|\| ''}\n />\n )\n }\n if (field.type === 'boolean') {\n const parsedValue = typeof value === 'boolean' ? value : false\n\n const handleCheckboxEvent = (\n event: React.ChangeEvent<HTMLInputElement> \| React.KeyboardEvent<HTMLInputElement>,\n ) => {\n if ('target' in event && 'checked' in event.target) {\n onChange((event.target as HTMLInputElement).checked)\n }\n }\n\n return <InputSwitch checked={parsedValue} onChange={handleCheckboxEvent} />\n }\n if (field.type === 'integer') {\n const parsedValue = typeof value === 'number' ? value : 0\n return (\n <InputNumber\n value={parsedValue}\n onChange={(e) => onChange(parseInt(e.target.value))}\n placeholder={field.placeholder \|\| ''}\n />\n )\n }\n if (field.type === 'float') {\n const parsedValue = typeof value === 'number' ? value : 0.0\n return (\n <InputNumber\n type=\"number\"\n value={parsedValue}\n onChange={(e) => onChange(parseFloat(e.target.value))}\n placeholder={field.placeholder \|\| ''}\n />\n )\n }\n\n if (field.type === 'select') {\n const parsedValue = typeof value === 'string' ? value : ''\n return (\n <Dropdown\n widthExpand\n options={field.options \|\| []}\n value={parsedValue ? [parsedValue] : []}\n onSelectionChange={(e) => onChange(e[0])}\n className={`form-field`}\n multiSelect={false}\n itemTemplate={DropdownItemTemplate}\n />\n )\n } // Handle select\n\n if (field.type === 'multiselect') {\n const parsedValue = Array.isArray(value) ? value : []\n return (\n <Dropdown\n widthExpand\n options={field.options \|\| []}\n value={parsedValue}\n onSelectionChange={(e) => onChange(e)}\n className={`form-field`}\n multiSelect={true}\n itemTemplate={DropdownItemTemplate}\n />\n )\n }\n}\n\nexport interface SimpleFormDialogProps {\n title: string\n fields: SimpleFormField[]\n values?: SimpleFormValueDict\n submitLabel?: string\n cancelLabel?: string\n submitIcon?: string\n cancelIcon?: string\n onClose: () => void\n onSubmit: (values: SimpleFormValueDict) => void\n isOpen: boolean\n}\n\nexport const SimpleFormDialog = ({\n fields,\n values,\n onClose,\n onSubmit,\n isOpen,\n title,\n submitLabel,\n cancelLabel,\n submitIcon,\n cancelIcon,\n}: SimpleFormDialogProps) => {\n const [formData, setFormData] = useState<SimpleFormValueDict \| null>(null)\n\n useEffect(() => {\n if (isOpen) {\n const defaults = getDefaults(fields, values \|\| {})\n setFormData(defaults)\n }\n }, [isOpen, fields, values])\n\n if (!isOpen) return null\n if (!formData) return null\n\n const footer = (\n <div style={{ display: 'flex', flexDirection: 'row', gap: 8 }}>\n <Spacer />\n {cancelLabel && <Button onClick={() => onClose()} label={cancelLabel} icon={cancelIcon} />}\n {submitLabel && (\n <Button\n onClick={() => onSubmit(formData)}\n label={submitLabel}\n icon={submitIcon}\n variant=\"filled\"\n />\n )}\n </div>\n )\n\n return (\n <Dialog\n isOpen={isOpen}\n onClose={onClose}\n header={title}\n footer={footer}\n style={{ minHeight: 500, minWidth: 600 }}\n >\n <FormLayout\n style={{ width: '95%' }}\n onKeyDown={(e) => {\n e.stopPropagation()\n }}\n >\n {fields.map((field: SimpleFormField) => {\n if (field.type === 'label') {\n return <FormLabel key={field.name} field={field} />\n }\n\n return (\n <FormRow key={field.name} label={field.label \|\| ''}>\n <FormField\n field={field}\n value={formData[field.name]}\n onChange={(value) => {\n setFormData((prev) => ({\n ...prev,\n [field.name]: value,\n }))\n }}\n />\n </FormRow>\n )\n })}\n </FormLayout>\n </Dialog>\n )\n}\n"],"names":["getDefaults","fields","values","defaults","field","LabelContainer","styled","FormLabel","text","jsx","ReactMarkdown","DropdownItemTemplate","option","endContent","jsxs","Fragment","badge","index","Badge","DefaultItemTemplate","FormField","value","onChange","parsedValue","InputText","e","handleCheckboxEvent","event","InputSwitch","InputNumber","Dropdown","SimpleFormDialog","onClose","onSubmit","isOpen","title","submitLabel","cancelLabel","submitIcon","cancelIcon","formData","setFormData","useState","useEffect","footer","Spacer","Button","Dialog","FormLayout","FormRow","prev"],"mappings":"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"}

package/dist/shared/src/components/SizeSlider/SizeSlider.cjs.js ADDED Viewed

@@ -0,0 +1,56 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../../../../_virtual/jsx-runtime.cjs.js"),r=require("react"),o=require("styled-components"),R=require("../../../node_modules/primereact/hooks/hooks.esm.cjs.js"),E=o.div`
+  padding: var(--padding-m);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`,D=o.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`,q=o.input`
+  flex: 1;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--md-sys-color-outline-variant);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--md-sys-color-primary);
+    cursor: grab;
+    box-shadow: var(--box-fill);
+  }
+  &:active::-webkit-slider-thumb {
+    cursor: grabbing;
+  }
+  &::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--md-sys-color-primary);
+    cursor: grabbing;
+    border: 2px solid var(--md-sys-color-surface);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+  &:hover::-webkit-slider-thumb {
+    background: var(--md-sys-color-primary-hover);
+  }
+  &:hover::-moz-range-thumb {
+    background: var(--md-sys-color-primary-container);
+  }
+`,z=o.span`
+  color: var(--md-sys-color-on-surface-variant);
+  min-width: 40px;
+  text-align: right;
+`,I=({value:t,onChange:l,onChangeComplete:i,title:m,id:c="height-slider",min:n=24,max:d=200,step:h=2,debounceMs:v=25})=>{const[u,p]=r.useState(!1),[e,g]=r.useState(t),[a,b]=r.useState(!1);r.useEffect(()=>{!u&&!a&&g(t)},[t,u,a]);const y=r.useCallback(j=>{const w=parseInt(j.target.value,10);b(!0),g(w)},[]),f=R.useDebounce(e,v);r.useEffect(()=>{a&&l(e)},[f,l,a,e]);const k=r.useCallback(()=>{p(!0)},[]),S=r.useCallback(()=>{p(!1),b(!1),i&&i(e)},[e,i]),x=(e-n)/(d-n)*100;return s.jsxRuntimeExports.jsxs(E,{children:[s.jsxRuntimeExports.jsx("label",{htmlFor:c,children:m}),s.jsxRuntimeExports.jsxs(D,{children:[s.jsxRuntimeExports.jsx(q,{id:c,type:"range",min:n,max:d,step:h,value:e,onChange:y,onMouseDown:k,onMouseUp:S,style:{background:`linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-primary) ${x}%, var(--md-sys-color-outline-variant) ${x}%, var(--md-sys-color-outline-variant) 100%)`}}),s.jsxRuntimeExports.jsx(z,{children:e})]})]})};exports.SizeSlider=I;
+//# sourceMappingURL=SizeSlider.cjs.js.map

package/dist/shared/src/components/SizeSlider/SizeSlider.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SizeSlider.cjs.js","sources":["../../../../../src/components/SizeSlider/SizeSlider.tsx"],"sourcesContent":["import { FC, useState, useCallback, useEffect } from 'react'\nimport styled from 'styled-components'\nimport { useDebounce } from 'primereact/hooks'\n\nconst Container = styled.div`\n padding: var(--padding-m);\n display: flex;\n flex-direction: column;\n gap: 12px;\n`\n\nconst SliderContainer = styled.div`\n display: flex;\n align-items: center;\n gap: 12px;\n`\n\nconst Slider = styled.input`\n flex: 1;\n height: 4px;\n border-radius: 2px;\n background: var(--md-sys-color-outline-variant);\n outline: none;\n -webkit-appearance: none;\n appearance: none;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: var(--md-sys-color-primary);\n cursor: grab;\n box-shadow: var(--box-fill);\n }\n\n &:active::-webkit-slider-thumb {\n cursor: grabbing;\n }\n\n &::-moz-range-thumb {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: var(--md-sys-color-primary);\n cursor: grabbing;\n border: 2px solid var(--md-sys-color-surface);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n }\n\n &:hover::-webkit-slider-thumb {\n background: var(--md-sys-color-primary-hover);\n }\n\n &:hover::-moz-range-thumb {\n background: var(--md-sys-color-primary-container);\n }\n`\n\nconst ValueDisplay = styled.span`\n color: var(--md-sys-color-on-surface-variant);\n min-width: 40px;\n text-align: right;\n`\n\nexport interface HeightSliderProps {\n value: number\n onChange: (value: number) => void\n onChangeComplete?: (value: number) => void\n title: string\n id?: string\n min?: number\n max?: number\n step?: number\n debounceMs?: number\n}\n\nexport const SizeSlider: FC<HeightSliderProps> = ({\n value: externalValue,\n onChange,\n onChangeComplete,\n title,\n id = 'height-slider',\n min = 24,\n max = 200,\n step = 2,\n debounceMs = 25,\n}) => {\n const [isDragging, setIsDragging] = useState(false)\n const [localValue, setLocalValue] = useState(externalValue)\n const [isUserAdjusting, setIsUserAdjusting] = useState(false)\n\n // Sync local value when external value changes and we're not dragging or adjusting\n useEffect(() => {\n if (!isDragging && !isUserAdjusting) {\n setLocalValue(externalValue)\n }\n }, [externalValue, isDragging, isUserAdjusting])\n\n const handleSliderChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = parseInt(e.target.value, 10)\n\n // Mark that user is actively adjusting\n setIsUserAdjusting(true)\n // Update local state immediately for responsive slider\n setLocalValue(newValue)\n }, [])\n\n // Debounce the local value to avoid too many updates\n const debouncedValue = useDebounce(localValue, debounceMs)\n\n // Update via onChange when debounced value changes, but only if user is adjusting\n useEffect(() => {\n if (isUserAdjusting) {\n onChange(localValue)\n }\n }, [debouncedValue, onChange, isUserAdjusting, localValue])\n\n const handleSliderStart = useCallback(() => {\n setIsDragging(true)\n }, [])\n\n const handleSliderRelease = useCallback(() => {\n setIsDragging(false)\n setIsUserAdjusting(false)\n // Call onChangeComplete when user finishes adjusting (if provided)\n if (onChangeComplete) {\n onChangeComplete(localValue)\n }\n }, [localValue, onChangeComplete])\n\n // Calculate the percentage for the gradient fill\n const fillPercentage = ((localValue - min) / (max - min)) * 100\n\n return (\n <Container>\n <label htmlFor={id}>{title}</label>\n <SliderContainer>\n <Slider\n id={id}\n type=\"range\"\n min={min}\n max={max}\n step={step}\n value={localValue}\n onChange={handleSliderChange}\n onMouseDown={handleSliderStart}\n onMouseUp={handleSliderRelease}\n style={{\n background: `linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-primary) ${fillPercentage}%, var(--md-sys-color-outline-variant) ${fillPercentage}%, var(--md-sys-color-outline-variant) 100%)`,\n }}\n />\n <ValueDisplay>{localValue}</ValueDisplay>\n </SliderContainer>\n </Container>\n )\n}\n"],"names":["Container","styled","SliderContainer","Slider","ValueDisplay","SizeSlider","externalValue","onChange","onChangeComplete","title","id","min","max","step","debounceMs","isDragging","setIsDragging","useState","localValue","setLocalValue","isUserAdjusting","setIsUserAdjusting","useEffect","handleSliderChange","useCallback","e","newValue","debouncedValue","useDebounce","handleSliderStart","handleSliderRelease","fillPercentage","jsx"],"mappings":"kQAIMA,EAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAOnBC,EAAkBD,EAAO;AAAA;AAAA;AAAA;AAAA,EAMzBE,EAASF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA2ChBG,EAAeH,EAAO;AAAA;AAAA;AAAA;AAAA,EAkBfI,EAAoC,CAAC,CAChD,MAAOC,EACP,SAAAC,EACA,iBAAAC,EACA,MAAAC,EACA,GAAAC,EAAK,gBACL,IAAAC,EAAM,GACN,IAAAC,EAAM,IACN,KAAAC,EAAO,EACP,WAAAC,EAAa,EACf,IAAM,CACJ,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAAA,SAAS,EAAK,EAC5C,CAACC,EAAYC,CAAa,EAAIF,EAAAA,SAASX,CAAa,EACpD,CAACc,EAAiBC,CAAkB,EAAIJ,EAAAA,SAAS,EAAK,EAG5DK,EAAAA,UAAU,IAAM,CACV,CAACP,GAAc,CAACK,GAClBD,EAAcb,CAAa,CAE5B,EAAA,CAACA,EAAeS,EAAYK,CAAe,CAAC,EAEzC,MAAAG,EAAqBC,cAAaC,GAA2C,CACjF,MAAMC,EAAW,SAASD,EAAE,OAAO,MAAO,EAAE,EAG5CJ,EAAmB,EAAI,EAEvBF,EAAcO,CAAQ,CACxB,EAAG,EAAE,EAGCC,EAAiBC,EAAAA,YAAYV,EAAYJ,CAAU,EAGzDQ,EAAAA,UAAU,IAAM,CACVF,GACFb,EAASW,CAAU,GAEpB,CAACS,EAAgBpB,EAAUa,EAAiBF,CAAU,CAAC,EAEpD,MAAAW,EAAoBL,EAAAA,YAAY,IAAM,CAC1CR,EAAc,EAAI,CACpB,EAAG,EAAE,EAECc,EAAsBN,EAAAA,YAAY,IAAM,CAC5CR,EAAc,EAAK,EACnBK,EAAmB,EAAK,EAEpBb,GACFA,EAAiBU,CAAU,CAC7B,EACC,CAACA,EAAYV,CAAgB,CAAC,EAG3BuB,GAAmBb,EAAaP,IAAQC,EAAMD,GAAQ,IAE5D,gCACGX,EACC,CAAA,SAAA,CAACgC,EAAA,kBAAA,IAAA,QAAA,CAAM,QAAStB,EAAK,SAAMD,EAAA,2BAC1BP,EACC,CAAA,SAAA,CAAA8B,EAAA,kBAAA,IAAC7B,EAAA,CACC,GAAAO,EACA,KAAK,QACL,IAAAC,EACA,IAAAC,EACA,KAAAC,EACA,MAAOK,EACP,SAAUK,EACV,YAAaM,EACb,UAAWC,EACX,MAAO,CACL,WAAY,yFAAyFC,CAAc,0CAA0CA,CAAc,8CAAA,CAC7K,CACF,EACAC,EAAAA,kBAAAA,IAAC5B,GAAc,SAAWc,CAAA,CAAA,CAAA,CAC5B,CAAA,CAAA,EACF,CAEJ"}

package/dist/shared/src/components/SizeSlider/SizeSlider.es.js ADDED Viewed

@@ -0,0 +1,113 @@
+import { j as e } from "../../../../_virtual/jsx-runtime.es.js";
+import { useState as t, useEffect as v, useCallback as l } from "react";
+import o from "styled-components";
+import { useDebounce as I } from "../../../node_modules/primereact/hooks/hooks.esm.es.js";
+const U = o.div`
+  padding: var(--padding-m);
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`, V = o.div`
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`, A = o.input`
+  flex: 1;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--md-sys-color-outline-variant);
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--md-sys-color-primary);
+    cursor: grab;
+    box-shadow: var(--box-fill);
+  }
+  &:active::-webkit-slider-thumb {
+    cursor: grabbing;
+  }
+  &::-moz-range-thumb {
+    width: 16px;
+    height: 16px;
+    border-radius: 50%;
+    background: var(--md-sys-color-primary);
+    cursor: grabbing;
+    border: 2px solid var(--md-sys-color-surface);
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  }
+  &:hover::-webkit-slider-thumb {
+    background: var(--md-sys-color-primary-hover);
+  }
+  &:hover::-moz-range-thumb {
+    background: var(--md-sys-color-primary-container);
+  }
+`, E = o.span`
+  color: var(--md-sys-color-on-surface-variant);
+  min-width: 40px;
+  text-align: right;
+`, L = ({
+  value: s,
+  onChange: d,
+  onChangeComplete: i,
+  title: x,
+  id: c = "height-slider",
+  min: n = 24,
+  max: u = 200,
+  step: y = 2,
+  debounceMs: f = 25
+}) => {
+  const [p, g] = t(!1), [r, b] = t(s), [a, m] = t(!1);
+  v(() => {
+    !p && !a && b(s);
+  }, [s, p, a]);
+  const k = l((D) => {
+    const z = parseInt(D.target.value, 10);
+    m(!0), b(z);
+  }, []), w = I(r, f);
+  v(() => {
+    a && d(r);
+  }, [w, d, a, r]);
+  const j = l(() => {
+    g(!0);
+  }, []), S = l(() => {
+    g(!1), m(!1), i && i(r);
+  }, [r, i]), h = (r - n) / (u - n) * 100;
+  return /* @__PURE__ */ e.jsxs(U, { children: [
+    /* @__PURE__ */ e.jsx("label", { htmlFor: c, children: x }),
+    /* @__PURE__ */ e.jsxs(V, { children: [
+      /* @__PURE__ */ e.jsx(
+        A,
+        {
+          id: c,
+          type: "range",
+          min: n,
+          max: u,
+          step: y,
+          value: r,
+          onChange: k,
+          onMouseDown: j,
+          onMouseUp: S,
+          style: {
+            background: `linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-primary) ${h}%, var(--md-sys-color-outline-variant) ${h}%, var(--md-sys-color-outline-variant) 100%)`
+          }
+        }
+      ),
+      /* @__PURE__ */ e.jsx(E, { children: r })
+    ] })
+  ] });
+};
+export {
+  L as SizeSlider
+};
+//# sourceMappingURL=SizeSlider.es.js.map

package/dist/shared/src/components/SizeSlider/SizeSlider.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SizeSlider.es.js","sources":["../../../../../src/components/SizeSlider/SizeSlider.tsx"],"sourcesContent":["import { FC, useState, useCallback, useEffect } from 'react'\nimport styled from 'styled-components'\nimport { useDebounce } from 'primereact/hooks'\n\nconst Container = styled.div`\n padding: var(--padding-m);\n display: flex;\n flex-direction: column;\n gap: 12px;\n`\n\nconst SliderContainer = styled.div`\n display: flex;\n align-items: center;\n gap: 12px;\n`\n\nconst Slider = styled.input`\n flex: 1;\n height: 4px;\n border-radius: 2px;\n background: var(--md-sys-color-outline-variant);\n outline: none;\n -webkit-appearance: none;\n appearance: none;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: var(--md-sys-color-primary);\n cursor: grab;\n box-shadow: var(--box-fill);\n }\n\n &:active::-webkit-slider-thumb {\n cursor: grabbing;\n }\n\n &::-moz-range-thumb {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n background: var(--md-sys-color-primary);\n cursor: grabbing;\n border: 2px solid var(--md-sys-color-surface);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n }\n\n &:hover::-webkit-slider-thumb {\n background: var(--md-sys-color-primary-hover);\n }\n\n &:hover::-moz-range-thumb {\n background: var(--md-sys-color-primary-container);\n }\n`\n\nconst ValueDisplay = styled.span`\n color: var(--md-sys-color-on-surface-variant);\n min-width: 40px;\n text-align: right;\n`\n\nexport interface HeightSliderProps {\n value: number\n onChange: (value: number) => void\n onChangeComplete?: (value: number) => void\n title: string\n id?: string\n min?: number\n max?: number\n step?: number\n debounceMs?: number\n}\n\nexport const SizeSlider: FC<HeightSliderProps> = ({\n value: externalValue,\n onChange,\n onChangeComplete,\n title,\n id = 'height-slider',\n min = 24,\n max = 200,\n step = 2,\n debounceMs = 25,\n}) => {\n const [isDragging, setIsDragging] = useState(false)\n const [localValue, setLocalValue] = useState(externalValue)\n const [isUserAdjusting, setIsUserAdjusting] = useState(false)\n\n // Sync local value when external value changes and we're not dragging or adjusting\n useEffect(() => {\n if (!isDragging && !isUserAdjusting) {\n setLocalValue(externalValue)\n }\n }, [externalValue, isDragging, isUserAdjusting])\n\n const handleSliderChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {\n const newValue = parseInt(e.target.value, 10)\n\n // Mark that user is actively adjusting\n setIsUserAdjusting(true)\n // Update local state immediately for responsive slider\n setLocalValue(newValue)\n }, [])\n\n // Debounce the local value to avoid too many updates\n const debouncedValue = useDebounce(localValue, debounceMs)\n\n // Update via onChange when debounced value changes, but only if user is adjusting\n useEffect(() => {\n if (isUserAdjusting) {\n onChange(localValue)\n }\n }, [debouncedValue, onChange, isUserAdjusting, localValue])\n\n const handleSliderStart = useCallback(() => {\n setIsDragging(true)\n }, [])\n\n const handleSliderRelease = useCallback(() => {\n setIsDragging(false)\n setIsUserAdjusting(false)\n // Call onChangeComplete when user finishes adjusting (if provided)\n if (onChangeComplete) {\n onChangeComplete(localValue)\n }\n }, [localValue, onChangeComplete])\n\n // Calculate the percentage for the gradient fill\n const fillPercentage = ((localValue - min) / (max - min)) * 100\n\n return (\n <Container>\n <label htmlFor={id}>{title}</label>\n <SliderContainer>\n <Slider\n id={id}\n type=\"range\"\n min={min}\n max={max}\n step={step}\n value={localValue}\n onChange={handleSliderChange}\n onMouseDown={handleSliderStart}\n onMouseUp={handleSliderRelease}\n style={{\n background: `linear-gradient(to right, var(--md-sys-color-primary) 0%, var(--md-sys-color-primary) ${fillPercentage}%, var(--md-sys-color-outline-variant) ${fillPercentage}%, var(--md-sys-color-outline-variant) 100%)`,\n }}\n />\n <ValueDisplay>{localValue}</ValueDisplay>\n </SliderContainer>\n </Container>\n )\n}\n"],"names":["Container","styled","SliderContainer","Slider","ValueDisplay","SizeSlider","externalValue","onChange","onChangeComplete","title","id","min","max","step","debounceMs","isDragging","setIsDragging","useState","localValue","setLocalValue","isUserAdjusting","setIsUserAdjusting","useEffect","handleSliderChange","useCallback","e","newValue","debouncedValue","useDebounce","handleSliderStart","handleSliderRelease","fillPercentage","jsx"],"mappings":";;;;AAIA,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnBC,IAAkBD,EAAO;AAAA;AAAA;AAAA;AAAA,GAMzBE,IAASF,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GA2ChBG,IAAeH,EAAO;AAAA;AAAA;AAAA;AAAA,GAkBfI,IAAoC,CAAC;AAAA,EAChD,OAAOC;AAAA,EACP,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,IAAAC,IAAK;AAAA,EACL,KAAAC,IAAM;AAAA,EACN,KAAAC,IAAM;AAAA,EACN,MAAAC,IAAO;AAAA,EACP,YAAAC,IAAa;AACf,MAAM;AACJ,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,EAAK,GAC5C,CAACC,GAAYC,CAAa,IAAIF,EAASX,CAAa,GACpD,CAACc,GAAiBC,CAAkB,IAAIJ,EAAS,EAAK;AAG5D,EAAAK,EAAU,MAAM;AACV,IAAA,CAACP,KAAc,CAACK,KAClBD,EAAcb,CAAa;AAAA,EAE5B,GAAA,CAACA,GAAeS,GAAYK,CAAe,CAAC;AAEzC,QAAAG,IAAqBC,EAAY,CAACC,MAA2C;AACjF,UAAMC,IAAW,SAASD,EAAE,OAAO,OAAO,EAAE;AAG5C,IAAAJ,EAAmB,EAAI,GAEvBF,EAAcO,CAAQ;AAAA,EACxB,GAAG,EAAE,GAGCC,IAAiBC,EAAYV,GAAYJ,CAAU;AAGzD,EAAAQ,EAAU,MAAM;AACd,IAAIF,KACFb,EAASW,CAAU;AAAA,KAEpB,CAACS,GAAgBpB,GAAUa,GAAiBF,CAAU,CAAC;AAEpD,QAAAW,IAAoBL,EAAY,MAAM;AAC1C,IAAAR,EAAc,EAAI;AAAA,EACpB,GAAG,EAAE,GAECc,IAAsBN,EAAY,MAAM;AAC5C,IAAAR,EAAc,EAAK,GACnBK,EAAmB,EAAK,GAEpBb,KACFA,EAAiBU,CAAU;AAAA,EAC7B,GACC,CAACA,GAAYV,CAAgB,CAAC,GAG3BuB,KAAmBb,IAAaP,MAAQC,IAAMD,KAAQ;AAE5D,gCACGX,GACC,EAAA,UAAA;AAAA,IAACgC,gBAAAA,EAAA,IAAA,SAAA,EAAM,SAAStB,GAAK,UAAMD,GAAA;AAAA,2BAC1BP,GACC,EAAA,UAAA;AAAA,MAAA8B,gBAAAA,EAAA;AAAA,QAAC7B;AAAA,QAAA;AAAA,UACC,IAAAO;AAAA,UACA,MAAK;AAAA,UACL,KAAAC;AAAA,UACA,KAAAC;AAAA,UACA,MAAAC;AAAA,UACA,OAAOK;AAAA,UACP,UAAUK;AAAA,UACV,aAAaM;AAAA,UACb,WAAWC;AAAA,UACX,OAAO;AAAA,YACL,YAAY,yFAAyFC,CAAc,0CAA0CA,CAAc;AAAA,UAAA;AAAA,QAC7K;AAAA,MACF;AAAA,MACAC,gBAAAA,EAAAA,IAAC5B,KAAc,UAAWc,EAAA,CAAA;AAAA,IAAA,EAC5B,CAAA;AAAA,EAAA,GACF;AAEJ;"}

package/dist/shared/src/components/SortingSetting/SortingSetting.cjs.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("../../../../_virtual/jsx-runtime.cjs.js"),e=require("./SortingSetting.styled.cjs.js"),n=({title:r,...i})=>t.jsxRuntimeExports.jsxs(e.Container,{children:[t.jsxRuntimeExports.jsx("label",{children:r}),t.jsxRuntimeExports.jsx(e.Dropdown,{title:"No sorting",...i})]});exports.SortingSetting=n;exports.default=n;
2	+ //# sourceMappingURL=SortingSetting.cjs.js.map

package/dist/shared/src/components/SortingSetting/SortingSetting.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SortingSetting.cjs.js","sources":["../../../../../src/components/SortingSetting/SortingSetting.tsx"],"sourcesContent":["import { SortingDropdownProps } from '@ynput/ayon-react-components'\nimport { FC } from 'react'\nimport * as Styled from './SortingSetting.styled'\n\ninterface SortingSettingProps extends SortingDropdownProps {}\n\nexport const SortingSetting: FC<SortingSettingProps> = ({ title, ...props }) => {\n return (\n <Styled.Container>\n <label>{title}</label>\n <Styled.Dropdown title={'No sorting'} {...props} />\n </Styled.Container>\n )\n}\n\nexport default SortingSetting\n"],"names":["SortingSetting","title","props","jsxs","Styled.Container","jsx","Styled.Dropdown"],"mappings":"mNAMaA,EAA0C,CAAC,CAAE,MAAAC,EAAO,GAAGC,KAEhEC,EAAA,kBAAA,KAACC,YAAA,CACC,SAAA,CAAAC,EAAAA,kBAAAA,IAAC,SAAO,SAAMJ,CAAA,CAAA,0BACbK,EAAAA,SAAA,CAAgB,MAAO,aAAe,GAAGJ,CAAO,CAAA,CAAA,EACnD"}

package/dist/shared/src/components/SortingSetting/SortingSetting.es.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { j as t } from "../../../../_virtual/jsx-runtime.es.js";
+import { Container as n, Dropdown as e } from "./SortingSetting.styled.es.js";
+const l = ({ title: r, ...o }) => /* @__PURE__ */ t.jsxs(n, { children: [
+  /* @__PURE__ */ t.jsx("label", { children: r }),
+  /* @__PURE__ */ t.jsx(e, { title: "No sorting", ...o })
+] });
+export {
+  l as SortingSetting,
+  l as default
+};
+//# sourceMappingURL=SortingSetting.es.js.map

package/dist/shared/src/components/SortingSetting/SortingSetting.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SortingSetting.es.js","sources":["../../../../../src/components/SortingSetting/SortingSetting.tsx"],"sourcesContent":["import { SortingDropdownProps } from '@ynput/ayon-react-components'\nimport { FC } from 'react'\nimport * as Styled from './SortingSetting.styled'\n\ninterface SortingSettingProps extends SortingDropdownProps {}\n\nexport const SortingSetting: FC<SortingSettingProps> = ({ title, ...props }) => {\n return (\n <Styled.Container>\n <label>{title}</label>\n <Styled.Dropdown title={'No sorting'} {...props} />\n </Styled.Container>\n )\n}\n\nexport default SortingSetting\n"],"names":["SortingSetting","title","props","jsxs","Styled.Container","jsx","Styled.Dropdown"],"mappings":";;AAMO,MAAMA,IAA0C,CAAC,EAAE,OAAAC,GAAO,GAAGC,QAEhEC,gBAAAA,EAAA,KAACC,GAAA,EACC,UAAA;AAAA,EAAAC,gBAAAA,EAAAA,IAAC,WAAO,UAAMJ,EAAA,CAAA;AAAA,wBACbK,GAAA,EAAgB,OAAO,cAAe,GAAGJ,EAAO,CAAA;AAAA,GACnD;"}

package/dist/shared/src/components/SortingSetting/SortingSetting.styled.cjs.js ADDED Viewed

@@ -0,0 +1,43 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("@ynput/ayon-react-components"),o=require("styled-components"),r=o.div`
+  padding: var(--padding-m);
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-large);
+  border-radius: var(--border-radius-m);
+  cursor: pointer;
+  width: 100%;
+`;o.label`
+  white-space: nowrap;
+  flex: 1;
+`;const n=o(e.SortingDropdown)`
+  .template-value {
+    border: none;
+  }
+  .template-value {
+    & > :nth-child(1) {
+      display: none;
+    }
+    & > :nth-child(2) {
+      color: var(--md-sys-color-outline);
+    }
+  }
+  .template-value {
+    &:has(.sort-chip) {
+      /* hide first two children */
+      & > :nth-child(2) {
+        display: none;
+      }
+    }
+  }
+  .control {
+    margin-left: auto;
+  }
+  button:hover {
+    background-color: var(--md-sys-color-surface-container-hover);
+  }
+`;exports.Container=r;exports.Dropdown=n;
+//# sourceMappingURL=SortingSetting.styled.cjs.js.map

package/dist/shared/src/components/SortingSetting/SortingSetting.styled.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SortingSetting.styled.cjs.js","sources":["../../../../../src/components/SortingSetting/SortingSetting.styled.ts"],"sourcesContent":["import { SortingDropdown } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const Container = styled.div`\n padding: var(--padding-m);\n display: flex;\n flex-direction: column;\n gap: var(--base-gap-large);\n border-radius: var(--border-radius-m);\n cursor: pointer;\n width: 100%;\n`\n\nexport const Label = styled.label`\n white-space: nowrap;\n flex: 1;\n`\n\nexport const Dropdown = styled(SortingDropdown)`\n .template-value {\n border: none;\n }\n\n .template-value {\n & > :nth-child(1) {\n display: none;\n }\n & > :nth-child(2) {\n color: var(--md-sys-color-outline);\n }\n }\n\n .template-value {\n &:has(.sort-chip) {\n /* hide first two children */\n\n & > :nth-child(2) {\n display: none;\n }\n }\n }\n\n .control {\n margin-left: auto;\n }\n button:hover {\n background-color: var(--md-sys-color-surface-container-hover);\n }\n`\n"],"names":["Container","styled","Dropdown","SortingDropdown"],"mappings":"+JAGaA,EAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAUXA,EAAO;AAAA;AAAA;AAAA,EAKf,MAAAC,EAAWD,EAAOE,iBAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA"}

package/dist/shared/src/components/SortingSetting/SortingSetting.styled.es.js ADDED Viewed

@@ -0,0 +1,51 @@
+import { SortingDropdown as r } from "@ynput/ayon-react-components";
+import o from "styled-components";
+const t = o.div`
+  padding: var(--padding-m);
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-gap-large);
+  border-radius: var(--border-radius-m);
+  cursor: pointer;
+  width: 100%;
+`;
+o.label`
+  white-space: nowrap;
+  flex: 1;
+`;
+const n = o(r)`
+  .template-value {
+    border: none;
+  }
+  .template-value {
+    & > :nth-child(1) {
+      display: none;
+    }
+    & > :nth-child(2) {
+      color: var(--md-sys-color-outline);
+    }
+  }
+  .template-value {
+    &:has(.sort-chip) {
+      /* hide first two children */
+      & > :nth-child(2) {
+        display: none;
+      }
+    }
+  }
+  .control {
+    margin-left: auto;
+  }
+  button:hover {
+    background-color: var(--md-sys-color-surface-container-hover);
+  }
+`;
+export {
+  t as Container,
+  n as Dropdown
+};
+//# sourceMappingURL=SortingSetting.styled.es.js.map

package/dist/shared/src/components/SortingSetting/SortingSetting.styled.es.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"SortingSetting.styled.es.js","sources":["../../../../../src/components/SortingSetting/SortingSetting.styled.ts"],"sourcesContent":["import { SortingDropdown } from '@ynput/ayon-react-components'\nimport styled from 'styled-components'\n\nexport const Container = styled.div`\n padding: var(--padding-m);\n display: flex;\n flex-direction: column;\n gap: var(--base-gap-large);\n border-radius: var(--border-radius-m);\n cursor: pointer;\n width: 100%;\n`\n\nexport const Label = styled.label`\n white-space: nowrap;\n flex: 1;\n`\n\nexport const Dropdown = styled(SortingDropdown)`\n .template-value {\n border: none;\n }\n\n .template-value {\n & > :nth-child(1) {\n display: none;\n }\n & > :nth-child(2) {\n color: var(--md-sys-color-outline);\n }\n }\n\n .template-value {\n &:has(.sort-chip) {\n /* hide first two children */\n\n & > :nth-child(2) {\n display: none;\n }\n }\n }\n\n .control {\n margin-left: auto;\n }\n button:hover {\n background-color: var(--md-sys-color-surface-container-hover);\n }\n`\n"],"names":["Container","styled","Dropdown","SortingDropdown"],"mappings":";;AAGO,MAAMA,IAAYC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUXA,EAAO;AAAA;AAAA;AAAA;AAKf,MAAAC,IAAWD,EAAOE,CAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/shared/src/components/TableGridSwitch/TableGridSwitch.cjs.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("../../../../_virtual/jsx-runtime.cjs.js"),n=require("react"),s=require("./TableGridSwitch.styled.cjs.js"),l=n.forwardRef(({showGrid:o,onChange:t,...d},c)=>(n.useEffect(()=>{const a=r=>{const e=r.target;e.tagName==="INPUT"\|\|e.tagName==="TEXTAREA"\|\|e.isContentEditable\|\|e.getAttribute("role")==="textbox"\|\|e.tagName==="LI"\|\|(r.key.toLowerCase()==="t"?t(!1):r.key.toLowerCase()==="g"&&t(!0))};return window.addEventListener("keydown",a),()=>window.removeEventListener("keydown",a)},[t]),i.jsxRuntimeExports.jsxs(s.ButtonsContainer,{...d,ref:c,children:[i.jsxRuntimeExports.jsx(s.InnerButton,{icon:"table_rows",selected:!o,onClick:()=>t(!1),variant:"text","data-tooltip":"Table","data-shortcut":"T"}),i.jsxRuntimeExports.jsx(s.InnerButton,{icon:"grid_view",selected:o,onClick:()=>t(!0),variant:"text","data-tooltip":"Cards","data-shortcut":"G"})]})));exports.TableGridSwitch=l;
2	+ //# sourceMappingURL=TableGridSwitch.cjs.js.map

package/dist/shared/src/components/TableGridSwitch/TableGridSwitch.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TableGridSwitch.cjs.js","sources":["../../../../../src/components/TableGridSwitch/TableGridSwitch.tsx"],"sourcesContent":["import { forwardRef, useEffect } from 'react'\nimport * as Styled from './TableGridSwitch.styled'\n\ninterface TableGridSwitchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {\n showGrid: boolean\n onChange: (showGrid: boolean) => void\n}\n\nexport const TableGridSwitch = forwardRef<HTMLDivElement, TableGridSwitchProps>(\n ({ showGrid, onChange, ...props }, ref) => {\n useEffect(() => {\n const handleKeyPress = (event: KeyboardEvent) => {\n // check we are not in an input or textarea\n const target = event.target as HTMLElement\n if (\n target.tagName === 'INPUT' ||\n target.tagName === 'TEXTAREA' ||\n target.isContentEditable ||\n target.getAttribute('role') === 'textbox' ||\n target.tagName === 'LI'\n ) {\n return\n }\n if (event.key.toLowerCase() === 't') {\n onChange(false)\n } else if (event.key.toLowerCase() === 'g') {\n onChange(true)\n }\n }\n\n window.addEventListener('keydown', handleKeyPress)\n return () => window.removeEventListener('keydown', handleKeyPress)\n }, [onChange])\n\n return (\n <Styled.ButtonsContainer {...props} ref={ref}>\n <Styled.InnerButton\n icon=\"table_rows\"\n selected={!showGrid}\n onClick={() => onChange(false)}\n variant=\"text\"\n data-tooltip=\"Table\"\n data-shortcut=\"T\"\n />\n <Styled.InnerButton\n icon=\"grid_view\"\n selected={showGrid}\n onClick={() => onChange(true)}\n variant=\"text\"\n data-tooltip=\"Cards\"\n data-shortcut=\"G\"\n />\n </Styled.ButtonsContainer>\n )\n },\n)\n"],"names":["TableGridSwitch","forwardRef","showGrid","onChange","props","ref","useEffect","handleKeyPress","event","target","Styled.ButtonsContainer","jsx","Styled.InnerButton"],"mappings":"2MAQaA,EAAkBC,EAAA,WAC7B,CAAC,CAAE,SAAAC,EAAU,SAAAC,EAAU,GAAGC,CAAA,EAASC,KACjCC,EAAAA,UAAU,IAAM,CACR,MAAAC,EAAkBC,GAAyB,CAE/C,MAAMC,EAASD,EAAM,OAEnBC,EAAO,UAAY,SACnBA,EAAO,UAAY,YACnBA,EAAO,mBACPA,EAAO,aAAa,MAAM,IAAM,WAChCA,EAAO,UAAY,OAIjBD,EAAM,IAAI,YAAY,IAAM,IAC9BL,EAAS,EAAK,EACLK,EAAM,IAAI,YAAA,IAAkB,KACrCL,EAAS,EAAI,EAEjB,EAEO,cAAA,iBAAiB,UAAWI,CAAc,EAC1C,IAAM,OAAO,oBAAoB,UAAWA,CAAc,CAAA,EAChE,CAACJ,CAAQ,CAAC,2BAGVO,EAAAA,iBAAA,CAAyB,GAAGN,EAAO,IAAAC,EAClC,SAAA,CAAAM,EAAA,kBAAA,IAACC,EAAO,YAAP,CACC,KAAK,aACL,SAAU,CAACV,EACX,QAAS,IAAMC,EAAS,EAAK,EAC7B,QAAQ,OACR,eAAa,QACb,gBAAc,GAAA,CAChB,EACAQ,EAAA,kBAAA,IAACC,EAAO,YAAP,CACC,KAAK,YACL,SAAUV,EACV,QAAS,IAAMC,EAAS,EAAI,EAC5B,QAAQ,OACR,eAAa,QACb,gBAAc,GAAA,CAAA,CAChB,EACF,EAGN"}