@apia/icons 5.0.0 → 5.0.1

package/dist/FileIcon.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+declare const FileIcon: ({ docName, iconSize, className, }: {
+    docName: string;
+    iconSize?: "xs" | "sm" | "md" | "lg" | "xl";
+    className?: string;
+}) => React.JSX.Element;
+
+export { FileIcon };
+//# sourceMappingURL=FileIcon.d.ts.map

package/dist/FileIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileIcon.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/FileIcon.js

@@ -0,0 +1,123 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import { injectStyles, Box, getVariant } from '@apia/theme';
+
+function getFileExtension(fileName) {
+  return (fileName.match(/\.?([^.]+)$/) ?? [])[1] ?? "";
+}
+injectStyles("layout.common.components.fileIcon", {
+  "&": {
+    fontFamily: "Arial, Tahoma, sans-serif",
+    fontWeight: 300,
+    display: "inline-block",
+    width: "24px",
+    height: "32px",
+    background: "#018fef",
+    position: "relative",
+    borderRadius: "2px",
+    textAlign: "left",
+    WebkitFontSmoothing: "antialiased",
+    margin: "2px !important"
+  },
+  "&::before": {
+    display: "block",
+    content: '""',
+    position: "absolute",
+    top: "0",
+    right: "0",
+    width: "0",
+    height: "0",
+    borderBottomLeftRadius: "2px",
+    borderWidth: "5px",
+    borderStyle: "solid",
+    borderTopColor: "palette.background.paper",
+    borderRightColor: "palette.background.paper",
+    borderBottomColor: "rgba(255,255,255,.35)",
+    borderLeftColor: "rgba(255,255,255,.35)"
+  },
+  "&::after": {
+    display: "block",
+    content: "attr(data-extension)",
+    position: "absolute",
+    bottom: "0",
+    left: "0",
+    fontSize: "10px",
+    color: "#fff",
+    textTransform: "lowercase",
+    width: "100%",
+    padding: "2px",
+    whiteSpace: "nowrap",
+    overflow: "hidden"
+  },
+  "&.xs": { width: "12px", height: "16px", borderRadius: "2px" },
+  "&.xs::before": {
+    borderBottomLeftRadius: "1px",
+    borderWidth: "3px"
+  },
+  "&.xs::after": {
+    content: '""',
+    borderBottom: "2px solid rgba(255,255,255,.45)",
+    width: "auto",
+    left: "2px",
+    right: "2px",
+    bottom: "3px"
+  },
+  "&.sm": { width: "18px", height: "24px", borderRadius: "2px" },
+  "&.sm::before": {
+    borderBottomLeftRadius: "2px",
+    borderWidth: "4px"
+  },
+  "&.sm::after": { fontSize: "7px", padding: "2px" },
+  "&.lg": { width: "48px", height: "64px", borderRadius: "3px" },
+  "&.lg::before": {
+    borderBottomLeftRadius: "2px",
+    borderWidth: "8px"
+  },
+  "&.lg::after": { fontSize: "11px", padding: "4px 6px" },
+  "&.lg.sm": { width: "30px", height: "40px", fontSize: "11px" },
+  "&.xl": { width: "96px", height: "128px", borderRadius: "4px" },
+  "&.xl::before": {
+    borderBottomLeftRadius: "4px",
+    borderWidth: "16px"
+  },
+  "&.xl::after": { fontSize: "24px", padding: "4px 10px" },
+  "&.sm.sm": { height: "18px" },
+  "&[data-extension=zip], &[data-extension=rar]": {
+    background: "#acacac"
+  },
+  "&[data-extension^=doc], &[data-extension^=docx], &[data-extension^=odt]": {
+    background: "#307cf1"
+  },
+  "&[data-extension^=xls], &[data-extension^=xlsx]": {
+    background: "#0f9d58"
+  },
+  "&[data-extension^=ppt]": { background: "#d24726" },
+  "&[data-extension=pdf]": { background: "#e13d34" },
+  "&[data-extension=txt]": { background: "#5eb533" },
+  "&[data-extension=mp3], &[data-extension=wma], &[data-extension=m4a], &[data-extension=flac]": {
+    background: "#8e44ad"
+  },
+  "&[data-extension=mp4], &[data-extension=wmv], &[data-extension=mov], &[data-extension=avi], &[data-extension=mkv]": {
+    background: "#7a3ce7"
+  },
+  "&[data-extension=bmp], &[data-extension=jpg], &[data-extension=jpeg], &[data-extension=gif], &[data-extension=png]": {
+    background: "#f4b400"
+  }
+});
+const FileIcon = ({
+  docName,
+  iconSize,
+  className
+}) => {
+  const extension = getFileExtension(docName);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: `file__icon ${className || ""} ${iconSize ?? ""}`,
+      "data-extension": extension,
+      ...getVariant("layout.common.components.fileIcon")
+    }
+  );
+};
+
+export { FileIcon };
+//# sourceMappingURL=FileIcon.js.map

package/dist/FileIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileIcon.js","sources":["../src/FileIcon.tsx"],"sourcesContent":["import { Box, getVariant, injectStyles } from '@apia/theme';\r\n\r\nfunction getFileExtension(fileName: string) {\r\n  return (fileName.match(/\\.?([^.]+)$/) ?? [])[1] ?? '';\r\n}\r\n\r\ninjectStyles('layout.common.components.fileIcon', {\r\n  '&': {\r\n    fontFamily: 'Arial, Tahoma, sans-serif',\r\n    fontWeight: 300,\r\n    display: 'inline-block',\r\n    width: '24px',\r\n    height: '32px',\r\n    background: '#018fef',\r\n    position: 'relative',\r\n    borderRadius: '2px',\r\n    textAlign: 'left',\r\n    WebkitFontSmoothing: 'antialiased',\r\n    margin: '2px !important',\r\n  },\r\n  '&::before': {\r\n    display: 'block',\r\n    content: '\"\"',\r\n    position: 'absolute',\r\n    top: '0',\r\n    right: '0',\r\n    width: '0',\r\n    height: '0',\r\n    borderBottomLeftRadius: '2px',\r\n    borderWidth: '5px',\r\n    borderStyle: 'solid',\r\n    borderTopColor: 'palette.background.paper',\r\n    borderRightColor: 'palette.background.paper',\r\n    borderBottomColor: 'rgba(255,255,255,.35)',\r\n    borderLeftColor: 'rgba(255,255,255,.35)',\r\n  },\r\n  '&::after': {\r\n    display: 'block',\r\n    content: 'attr(data-extension)',\r\n    position: 'absolute',\r\n    bottom: '0',\r\n    left: '0',\r\n    fontSize: '10px',\r\n    color: '#fff',\r\n    textTransform: 'lowercase',\r\n    width: '100%',\r\n    padding: '2px',\r\n    whiteSpace: 'nowrap',\r\n    overflow: 'hidden',\r\n  },\r\n  '&.xs': { width: '12px', height: '16px', borderRadius: '2px' },\r\n  '&.xs::before': {\r\n    borderBottomLeftRadius: '1px',\r\n    borderWidth: '3px',\r\n  },\r\n  '&.xs::after': {\r\n    content: '\"\"',\r\n    borderBottom: '2px solid rgba(255,255,255,.45)',\r\n    width: 'auto',\r\n    left: '2px',\r\n    right: '2px',\r\n    bottom: '3px',\r\n  },\r\n  '&.sm': { width: '18px', height: '24px', borderRadius: '2px' },\r\n  '&.sm::before': {\r\n    borderBottomLeftRadius: '2px',\r\n    borderWidth: '4px',\r\n  },\r\n  '&.sm::after': { fontSize: '7px', padding: '2px' },\r\n  '&.lg': { width: '48px', height: '64px', borderRadius: '3px' },\r\n  '&.lg::before': {\r\n    borderBottomLeftRadius: '2px',\r\n    borderWidth: '8px',\r\n  },\r\n  '&.lg::after': { fontSize: '11px', padding: '4px 6px' },\r\n  '&.lg.sm': { width: '30px', height: '40px', fontSize: '11px' },\r\n  '&.xl': { width: '96px', height: '128px', borderRadius: '4px' },\r\n  '&.xl::before': {\r\n    borderBottomLeftRadius: '4px',\r\n    borderWidth: '16px',\r\n  },\r\n  '&.xl::after': { fontSize: '24px', padding: '4px 10px' },\r\n  '&.sm.sm': { height: '18px' },\r\n  '&[data-extension=zip], &[data-extension=rar]': {\r\n    background: '#acacac',\r\n  },\r\n  '&[data-extension^=doc], &[data-extension^=docx], &[data-extension^=odt]': {\r\n    background: '#307cf1',\r\n  },\r\n  '&[data-extension^=xls], &[data-extension^=xlsx]': {\r\n    background: '#0f9d58',\r\n  },\r\n  '&[data-extension^=ppt]': { background: '#d24726' },\r\n  '&[data-extension=pdf]': { background: '#e13d34' },\r\n  '&[data-extension=txt]': { background: '#5eb533' },\r\n  '&[data-extension=mp3], &[data-extension=wma], &[data-extension=m4a], &[data-extension=flac]':\r\n    {\r\n      background: '#8e44ad',\r\n    },\r\n  '&[data-extension=mp4], &[data-extension=wmv], &[data-extension=mov], &[data-extension=avi], &[data-extension=mkv]':\r\n    {\r\n      background: '#7a3ce7',\r\n    },\r\n  '&[data-extension=bmp], &[data-extension=jpg], &[data-extension=jpeg], &[data-extension=gif], &[data-extension=png]':\r\n    {\r\n      background: '#f4b400',\r\n    },\r\n});\r\n\r\nexport const FileIcon = ({\r\n  docName,\r\n  iconSize,\r\n  className,\r\n}: {\r\n  docName: string;\r\n  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\r\n  className?: string;\r\n}) => {\r\n  const extension = getFileExtension(docName);\r\n\r\n  return (\r\n    <Box\r\n      className={`file__icon ${className || ''} ${iconSize ?? ''}`}\r\n      data-extension={extension}\r\n      {...getVariant('layout.common.components.fileIcon')}\r\n    />\r\n  );\r\n};\r\n"],"names":[],"mappings":"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"}

package/dist/Icon.d.ts

@@ -0,0 +1,16 @@
+import { IconBaseProps } from '@meronex/icons';
+import { RequireExactlyOne } from 'type-fest';
+import React__default from 'react';
+import { TIconName, TIconType } from './iconMap.js';
+
+type TIconArgs = RequireExactlyOne<{
+    icon: TIconName | TIconType;
+    name: TIconName;
+}>;
+declare const Icon: React__default.ForwardRefExoticComponent<(TIconArgs & IconBaseProps & {
+    title: string;
+    imageSrc?: string;
+}) & React__default.RefAttributes<any>>;
+
+export { Icon };
+//# sourceMappingURL=Icon.d.ts.map

package/dist/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/Icon.js

@@ -0,0 +1,53 @@
+import { jsx } from '@apia/theme/jsx-runtime';
+import React, { forwardRef } from 'react';
+import { icons, isIconName } from './iconMap.js';
+import { Box } from '@apia/theme';
+
+const Icon = forwardRef(({ className, icon, name, size, ...props }, ref) => {
+  const IconComponent = (
+    // eslint-disable-next-line no-nested-ternary
+    icon === void 0 ? icons[name] : isIconName(icon) ? icons[icon] : icon
+  );
+  const sx = React.useMemo(() => {
+    return {
+      "&.icon__wrapper": {
+        display: "inline-flex",
+        p: 0,
+        m: 0,
+        svg: {
+          width: size,
+          height: size
+        }
+      }
+    };
+  }, [size]);
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref,
+      as: "span",
+      className: `icon__wrapper ${className ?? ""}`,
+      sx,
+      children: props.imageSrc ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          "aria-label": props["aria-label"] ?? props.title,
+          style: {
+            height: size,
+            width: size
+          },
+          src: props.imageSrc
+        }
+      ) : /* @__PURE__ */ jsx(
+        IconComponent,
+        {
+          ...props,
+          "aria-label": props["aria-label"] ?? props.title
+        }
+      )
+    }
+  );
+});
+
+export { Icon };
+//# sourceMappingURL=Icon.js.map

package/dist/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sources":["../src/Icon.tsx"],"sourcesContent":["import { IconBaseProps } from '@meronex/icons';\r\nimport { RequireExactlyOne } from 'type-fest';\r\nimport React, { forwardRef } from 'react';\r\nimport { icons, isIconName, TIconName, TIconType } from './iconMap';\r\nimport { Box } from '@apia/theme';\r\n\r\ntype TIconArgs = RequireExactlyOne<{\r\n  icon: TIconName | TIconType;\r\n  name: TIconName;\r\n}>;\r\n\r\nexport const Icon = forwardRef<\r\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\r\n  any,\r\n  TIconArgs & IconBaseProps & { title: string; imageSrc?: string }\r\n>(({ className, icon, name, size, ...props }, ref) => {\r\n  const IconComponent =\r\n    // eslint-disable-next-line no-nested-ternary\r\n    icon === undefined ? icons[name] : isIconName(icon) ? icons[icon] : icon;\r\n\r\n  const sx = React.useMemo(() => {\r\n    return {\r\n      '&.icon__wrapper': {\r\n        display: 'inline-flex',\r\n        p: 0,\r\n        m: 0,\r\n\r\n        svg: {\r\n          width: size,\r\n          height: size,\r\n        },\r\n      },\r\n    };\r\n  }, [size]);\r\n\r\n  return (\r\n    <Box\r\n      ref={ref}\r\n      as=\"span\"\r\n      className={`icon__wrapper ${className ?? ''}`}\r\n      sx={sx}\r\n    >\r\n      {props.imageSrc ? (\r\n        <img\r\n          aria-label={props['aria-label'] ?? props.title}\r\n          style={{\r\n            height: size,\r\n            width: size,\r\n          }}\r\n          src={props.imageSrc}\r\n        />\r\n      ) : (\r\n        <IconComponent\r\n          {...props}\r\n          aria-label={props['aria-label'] ?? props.title}\r\n        />\r\n      )}\r\n    </Box>\r\n  );\r\n});\r\n"],"names":[],"mappings":";;;;;AAWO,MAAM,IAAA,GAAO,UAAA,CAIlB,CAAC,EAAE,SAAA,EAAW,IAAA,EAAM,IAAA,EAAM,IAAA,EAAM,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACpD,EAAA,MAAM,aAAA;AAAA;AAAA,IAEJ,IAAA,KAAS,MAAA,GAAY,KAAA,CAAM,IAAI,CAAA,GAAI,WAAW,IAAI,CAAA,GAAI,KAAA,CAAM,IAAI,CAAA,GAAI;AAAA,GAAA;AAEtE,EAAA,MAAM,EAAA,GAAK,KAAA,CAAM,OAAA,CAAQ,MAAM;AAC7B,IAAA,OAAO;AAAA,MACL,iBAAA,EAAmB;AAAA,QACjB,OAAA,EAAS,aAAA;AAAA,QACT,CAAA,EAAG,CAAA;AAAA,QACH,CAAA,EAAG,CAAA;AAAA,QAEH,GAAA,EAAK;AAAA,UACH,KAAA,EAAO,IAAA;AAAA,UACP,MAAA,EAAQ;AAAA;AACV;AACF,KACF;AAAA,GACF,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,uBACE,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,EAAA,EAAG,MAAA;AAAA,MACH,SAAA,EAAW,CAAA,cAAA,EAAiB,SAAA,IAAa,EAAE,CAAA,CAAA;AAAA,MAC3C,EAAA;AAAA,MAEC,gBAAM,QAAA,mBACL,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,YAAA,EAAY,KAAA,CAAM,YAAY,CAAA,IAAK,KAAA,CAAM,KAAA;AAAA,UACzC,KAAA,EAAO;AAAA,YACL,MAAA,EAAQ,IAAA;AAAA,YACR,KAAA,EAAO;AAAA,WACT;AAAA,UACA,KAAK,KAAA,CAAM;AAAA;AAAA,OACb,mBAEA,GAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACE,GAAG,KAAA;AAAA,UACJ,YAAA,EAAY,KAAA,CAAM,YAAY,CAAA,IAAK,KAAA,CAAM;AAAA;AAAA;AAC3C;AAAA,GAEJ;AAEJ,CAAC;;;;"}