@studiocms/ui 0.4.2 → 0.4.4

package/dist/components/Dropdown/Dropdown.astro

@@ -102,14 +102,17 @@ const {
         role="option"
         aria-selected="false"
       >
-        {icon && (
-          <Icon width={24} height={24} name={icon} />
-        )}
-        {href ? (
-          <a href={href} class="sui-dropdown-link">{label}</a>
-        ) : (
-          <span>{label}</span>
-        )}
+				{href ? (
+          <a href={href} class="sui-dropdown-link sui-dropdown-line-container">
+          	{icon && (<Icon width={24} height={24} name={icon} />)}
+						<span>{label}</span>
+					</a>
+				) : (
+					<div class="sui-dropdown-line-container">
+						{icon && (<Icon width={24} height={24} name={icon} />)}
+						<span>{label}</span>
+					</div>
+				)}
       </li>
     ))}
   </ul>

package/dist/components/Dropdown/dropdown.css

@@ -100,18 +100,24 @@
   transform-origin: bottom right;
 }
 .sui-dropdown-option {
-  padding: .5rem .75rem;
   cursor: pointer;
   font-size: .975em;
   transition: all .15s ease;
   display: flex;
   flex-direction: row;
-  gap: .5rem;
   align-items: center;
   width: 100%;
   white-space: normal;
   user-select: none;
 }
+.sui-dropdown-line-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: .5rem .75rem;
+  width: 100%;
+  gap: .5rem;
+}
 .sui-dropdown-option:hover,
 .sui-dropdown-option:focus,
 .sui-dropdown-option.focused {
@@ -121,7 +127,6 @@
   padding: 0;
 }
 .sui-dropdown-link {
-  padding: .5rem .75rem;
   width: 100%;
   text-decoration: none;
   color: hsl(var(--text-normal));
@@ -175,6 +180,6 @@
 .sui-dropdown-option.end {
   justify-content: space-between;
 }
-.sui-dropdown-option.has-icon {
+.sui-dropdown-option.has-icon .sui-dropdown-line-container {
   padding-left: .5rem;
 }

package/dist/components/Icon/Icon.astro

@@ -1,41 +1,15 @@
 ---
 import { icons } from '@iconify-json/heroicons';
-import { getIconData, iconToSVG, replaceIDs } from '@iconify/utils';
 import type { HTMLAttributes } from 'astro/types';
+import IconBase from './IconBase.astro';
 import { type HeroIconName } from './iconType.js';
 
-interface SVGAttributes extends HTMLAttributes<'svg'> {
-	// biome-ignore lint/suspicious/noExplicitAny: Allow any string index
-	[key: string]: any;
-}
-
-interface Props extends HTMLAttributes<'svg'> {
+interface Props extends Omit<HTMLAttributes<'svg'>, 'name'> {
 	name: HeroIconName;
+	height?: number;
+	width?: number;
 }
 
 const { name, ...props } = Astro.props;
-const attributes = props as SVGAttributes;
-const iconData = getIconData(icons, name);
-
-if (!iconData) {
-	throw new Error(`Icon "${name}" is missing`);
-}
-
-const renderData = iconToSVG(iconData, {
-	height: attributes.height || 24,
-	width: attributes.width || 24,
-});
-
-const body = replaceIDs(renderData.body);
-
-let renderAttribsHTML =
-	body.indexOf('xlink:') === -1 ? '' : ' xmlns:xlink="http://www.w3.org/1999/xlink"';
-
-for (const attr in attributes) {
-	renderAttribsHTML += ` ${attr}="${attributes[attr]}"`;
-}
-
-const svg = `<svg xmlns="http://www.w3.org/2000/svg"${renderAttribsHTML}>${body}</svg>`;
 ---
-
-<Fragment set:html={svg} />
+<IconBase iconCollection={icons} {name} {...props} />

package/dist/components/Icon/IconBase.astro

@@ -0,0 +1,77 @@
+---
+import type { IconifyJSON } from '@iconify/types';
+import { AstroError } from 'astro/errors';
+import type { HTMLAttributes } from 'astro/types';
+import { getIconData, iconToSVG, replaceIDs } from '../../utils/iconifyUtils.js';
+
+interface Props extends HTMLAttributes<'svg'> {
+	/**
+	 * Collection of icons
+	 *
+	 * Must be an `IconifyJSON` object from an Iconify JSON collection
+	 *
+	 * @example
+	 * ```tsx
+	 * ---
+	 * import { icons } from '@iconify-json/heroicons';
+	 * import type { HTMLAttributes } from 'astro/types';
+	 * import { IconBase } from 'studiocms:ui/components';
+	 *
+	 * interface Props extends Omit<HTMLAttributes<'svg'>, 'name'> {
+	 * 	name: keyof typeof icons;
+	 * 	height?: number;
+	 * 	width?: number;
+	 * }
+	 *
+	 * const { name, ...props } = Astro.props;
+	 * ---
+	 * <IconBase iconCollection={icons} {name} {...props} />
+	 * ```
+	 */
+	iconCollection: IconifyJSON;
+	/**
+	 * Name of the icon from the collection
+	 */
+	name: string;
+	/**
+	 * Height of the icon in pixels
+	 */
+	height?: number;
+	/**
+	 * Width of the icon in pixels
+	 */
+	width?: number;
+}
+
+interface PropsAttributes extends Props {
+	// biome-ignore lint/suspicious/noExplicitAny: Allow any string index
+	[key: string]: any;
+}
+
+const { iconCollection, name, height = 24, width = 24, ...props } = Astro.props;
+
+const attributes = props as PropsAttributes;
+
+const iconData = getIconData(iconCollection, name);
+
+if (!iconData) {
+	throw new AstroError(`Icon "${name}" is missing in collection`);
+}
+
+const renderData = iconToSVG(iconData, {
+	height: height,
+	width: width,
+});
+
+const body = replaceIDs(renderData.body);
+
+let renderAttribsHTML =
+	body.indexOf('xlink:') === -1 ? '' : ' xmlns:xlink="http://www.w3.org/1999/xlink';
+
+for (const attr in attributes) {
+	renderAttribsHTML += ` ${attr}="${attributes[attr]}"`;
+}
+
+const svg = `<svg style="min-width: ${height}px" xmlns="http://www.w3.org/2000/svg"${renderAttribsHTML}>${body}</svg>`;
+---
+<Fragment set:html={svg} />

package/dist/index.js

@@ -65,6 +65,7 @@ function integration(options = {}) {
 							export { default as Group } from '${resolve("./components/Group/Group.astro")}';
 							export { default as Badge } from '${resolve("./components/Badge/Badge.astro")}';
 							export { default as Icon } from '${resolve("./components/Icon/Icon.astro")}';
+							export { default as IconBase } from '${resolve("./components/Icon/IconBase.astro")}';
 
 							export { ProgressHelper } from '${resolve("./components/Progress/helper.js")}';
 							export { SingleSidebarHelper, DoubleSidebarHelper } from '${resolve("./components/Sidebar/helpers.js")}';
@@ -135,6 +136,7 @@ function integration(options = {}) {
 							export const Group: typeof import('${resolve("./components/Group/Group.astro")}').default;
 							export const Badge: typeof import('${resolve("./components/Badge/Badge.astro")}').default;
 							export const Icon: typeof import('${resolve("./components/Icon/Icon.astro")}').default;
+							export const IconBase: typeof import('${resolve("./components/Icon/IconBase.astro")}').default;
 							export const toast: typeof import('${resolve("./components/Toast/toast.js")}').toast;
 							export type HeroIconName = import('${resolve("./components/Icon/iconType.js")}').HeroIconName;
 

package/dist/utils/iconifyUtils.d.ts

@@ -0,0 +1,134 @@
+import type { ExtendedIconifyIcon, IconifyDimenisons, IconifyIcon, IconifyJSON, IconifyOptional, IconifyTransformations } from '@iconify/types';
+export type FullIconifyIcon = Required<IconifyIcon>;
+/**
+ * SVG viewBox: x, y, width, height
+ */
+export type SVGViewBox = [x: number, y: number, width: number, height: number];
+/**
+ * Get viewBox from string
+ */
+export declare function getSVGViewBox(value: string): SVGViewBox | undefined;
+/**
+ * Extract definitions from SVG
+ *
+ * Can be used with other tags, but name kept for backwards compatibility.
+ * Should be used only with tags that cannot be nested, such as masks, clip paths, etc.
+ */
+interface SplitSVGDefsResult {
+    defs: string;
+    content: string;
+}
+export declare function splitSVGDefs(content: string, tag?: string): SplitSVGDefsResult;
+/**
+ * Merge defs and content
+ */
+export declare function mergeDefsAndContent(defs: string, content: string): string;
+/**
+ * Wrap SVG content, without wrapping definitions
+ */
+export declare function wrapSVGContent(body: string, start: string, end: string): string;
+export type PartialExtendedIconifyIcon = Partial<ExtendedIconifyIcon>;
+type IconifyIconExtraProps = Omit<ExtendedIconifyIcon, keyof IconifyIcon>;
+export type FullExtendedIconifyIcon = FullIconifyIcon & IconifyIconExtraProps;
+/**
+ * Calculate second dimension when only 1 dimension is set
+ */
+export declare function calculateSize(size: string, ratio: number, precision?: number): string;
+export declare function calculateSize(size: number, ratio: number, precision?: number): number;
+export declare function calculateSize(size: string | number, ratio: number, precision?: number): string | number;
+/**
+ * Default values for dimensions
+ */
+export declare const defaultIconDimensions: Required<IconifyDimenisons>;
+/**
+ * Default values for transformations
+ */
+export declare const defaultIconTransformations: Required<IconifyTransformations>;
+/**
+ * Default values for all optional IconifyIcon properties
+ */
+export declare const defaultIconProps: Required<IconifyOptional>;
+/**
+ * Default values for all properties used in ExtendedIconifyIcon
+ */
+export declare const defaultExtendedIconProps: Required<FullExtendedIconifyIcon>;
+/**
+ * Merge transformations
+ */
+export declare function mergeIconTransformations<T extends IconifyTransformations>(obj1: T, obj2: IconifyTransformations): T;
+/**
+ * Icon size
+ */
+export type IconifyIconSize = null | string | number;
+/**
+ * Dimensions
+ */
+export interface IconifyIconSizeCustomisations {
+    width?: IconifyIconSize;
+    height?: IconifyIconSize;
+}
+/**
+ * Icon customisations
+ */
+export interface IconifyIconCustomisations extends IconifyTransformations, IconifyIconSizeCustomisations {
+}
+export type FullIconCustomisations = Required<IconifyIconCustomisations>;
+/**
+ * Default icon customisations values
+ */
+export declare const defaultIconSizeCustomisations: Required<IconifyIconSizeCustomisations>;
+export declare const defaultIconCustomisations: FullIconCustomisations;
+/**
+ * Merge icon and alias
+ *
+ * Can also be used to merge default values and icon
+ */
+export declare function mergeIconData<T extends PartialExtendedIconifyIcon>(parent: T, child: PartialExtendedIconifyIcon): T;
+export type ParentIconsList = string[];
+export type ParentIconsTree = Record<string, ParentIconsList | null>;
+/**
+ * Resolve icon set icons
+ *
+ * Returns parent icon for each icon
+ */
+export declare function getIconsTree(data: IconifyJSON, names?: string[]): ParentIconsTree;
+/**
+ * Get icon data, using prepared aliases tree
+ */
+export declare function internalGetIconData(data: IconifyJSON, name: string, tree: string[]): ExtendedIconifyIcon;
+/**
+ * Get data for icon
+ */
+export declare function getIconData(data: IconifyJSON, name: string): ExtendedIconifyIcon | null;
+/**
+ * Interface for getSVGData() result
+ */
+export interface IconifyIconBuildResult {
+    attributes: {
+        width?: string;
+        height?: string;
+        viewBox: string;
+    };
+    viewBox: SVGViewBox;
+    body: string;
+}
+/**
+ * Check if value should be unset. Allows multiple keywords
+ */
+export declare const isUnsetKeyword: (value: unknown) => value is "none" | "unset" | "undefined";
+/**
+ * Replace IDs in SVG output with unique IDs
+ */
+export declare function replaceIDs(body: string, prefix?: string | ((id: string) => string)): string;
+/**
+ * Get SVG attributes and content from icon + customisations
+ *
+ * Does not generate style to make it compatible with frameworks that use objects for style, such as React.
+ * Instead, it generates 'inline' value. If true, rendering engine should add verticalAlign: -0.125em to icon.
+ *
+ * Customisations should be normalised by platform specific parser.
+ * Result should be converted to <svg> by platform specific parser.
+ * Use replaceIDs to generate unique IDs for body.
+ */
+export declare function iconToSVG(icon: IconifyIcon, customisations?: IconifyIconCustomisations): IconifyIconBuildResult;
+export {};

package/dist/utils/iconifyUtils.js

@@ -0,0 +1,327 @@
+function getSVGViewBox(value) {
+  const result = value.trim().split(/\s+/).map(Number);
+  if (result.length === 4 && result.reduce((prev, value2) => prev && !Number.isNaN(value2), true)) {
+    return result;
+  }
+  return void 0;
+}
+function splitSVGDefs(content, tag = "defs") {
+  let defs = "";
+  const index = content.indexOf(`<${tag}`);
+  while (index >= 0) {
+    const start = content.indexOf(">", index);
+    const end = content.indexOf(`</${tag}`);
+    if (start === -1 || end === -1) {
+      break;
+    }
+    const endEnd = content.indexOf(">", end);
+    if (endEnd === -1) {
+      break;
+    }
+    defs += content.slice(start + 1, end).trim();
+    content = content.slice(0, index).trim() + content.slice(endEnd + 1);
+  }
+  return {
+    defs,
+    content
+  };
+}
+function mergeDefsAndContent(defs, content) {
+  return defs ? `<defs>${defs}</defs>${content}` : content;
+}
+function wrapSVGContent(body, start, end) {
+  const split = splitSVGDefs(body);
+  return mergeDefsAndContent(split.defs, start + split.content + end);
+}
+const unitsSplit = /(-?[0-9.]*[0-9]+[0-9.]*)/g;
+const unitsTest = /^-?[0-9.]*[0-9]+[0-9.]*$/g;
+function calculateSize(size, ratio, precision) {
+  if (ratio === 1) {
+    return size;
+  }
+  precision = precision || 100;
+  if (typeof size === "number") {
+    return Math.ceil(size * ratio * precision) / precision;
+  }
+  if (typeof size !== "string") {
+    return size;
+  }
+  const oldParts = size.split(unitsSplit);
+  if (oldParts === null || !oldParts.length) {
+    return size;
+  }
+  const newParts = [];
+  let code = oldParts.shift();
+  let isNumber = unitsTest.test(code);
+  while (true) {
+    if (isNumber) {
+      const num = Number.parseFloat(code);
+      if (Number.isNaN(num)) {
+        newParts.push(code);
+      } else {
+        newParts.push(Math.ceil(num * ratio * precision) / precision);
+      }
+    } else {
+      newParts.push(code);
+    }
+    code = oldParts.shift();
+    if (code === void 0) {
+      return newParts.join("");
+    }
+    isNumber = !isNumber;
+  }
+}
+const defaultIconDimensions = Object.freeze({
+  left: 0,
+  top: 0,
+  width: 16,
+  height: 16
+});
+const defaultIconTransformations = Object.freeze({
+  rotate: 0,
+  vFlip: false,
+  hFlip: false
+});
+const defaultIconProps = Object.freeze({
+  ...defaultIconDimensions,
+  ...defaultIconTransformations
+});
+const defaultExtendedIconProps = Object.freeze({
+  ...defaultIconProps,
+  body: "",
+  hidden: false
+});
+function mergeIconTransformations(obj1, obj2) {
+  const result = {};
+  if (!obj1.hFlip !== !obj2.hFlip) {
+    result.hFlip = true;
+  }
+  if (!obj1.vFlip !== !obj2.vFlip) {
+    result.vFlip = true;
+  }
+  const rotate = ((obj1.rotate || 0) + (obj2.rotate || 0)) % 4;
+  if (rotate) {
+    result.rotate = rotate;
+  }
+  return result;
+}
+const defaultIconSizeCustomisations = Object.freeze(
+  {
+    width: null,
+    height: null
+  }
+);
+const defaultIconCustomisations = Object.freeze({
+  // Dimensions
+  ...defaultIconSizeCustomisations,
+  // Transformations
+  ...defaultIconTransformations
+});
+function mergeIconData(parent, child) {
+  const result = mergeIconTransformations(parent, child);
+  for (const key in defaultExtendedIconProps) {
+    if (key in defaultIconTransformations) {
+      if (key in parent && !(key in result)) {
+        result[key] = defaultIconTransformations[key];
+      }
+    } else if (key in child) {
+      result[key] = child[key];
+    } else if (key in parent) {
+      result[key] = parent[key];
+    }
+  }
+  return result;
+}
+function getIconsTree(data, names) {
+  const icons = data.icons;
+  const aliases = data.aliases || /* @__PURE__ */ Object.create(null);
+  const resolved = /* @__PURE__ */ Object.create(null);
+  function resolve(name) {
+    if (icons[name]) {
+      return resolved[name] = [];
+    }
+    if (!(name in resolved)) {
+      resolved[name] = null;
+      const parent = aliases[name]?.parent;
+      const value = parent && resolve(parent);
+      if (value) {
+        resolved[name] = [parent].concat(value);
+      }
+    }
+    return resolved[name] || null;
+  }
+  (names || Object.keys(icons).concat(Object.keys(aliases))).forEach(resolve);
+  return resolved;
+}
+function internalGetIconData(data, name, tree) {
+  const icons = data.icons;
+  const aliases = data.aliases || /* @__PURE__ */ Object.create(null);
+  let currentProps = {};
+  function parse(name2) {
+    currentProps = mergeIconData(
+      icons[name2] || aliases[name2],
+      currentProps
+    );
+  }
+  parse(name);
+  tree.forEach(parse);
+  return mergeIconData(data, currentProps);
+}
+function getIconData(data, name) {
+  if (data.icons[name]) {
+    return internalGetIconData(data, name, []);
+  }
+  const tree = getIconsTree(data, [name])[name];
+  return tree ? internalGetIconData(data, name, tree) : null;
+}
+const isUnsetKeyword = (value) => value === "unset" || value === "undefined" || value === "none";
+const regex = /\sid="(\S+)"/g;
+const randomPrefix = `IconifyId${Date.now().toString(16)}${(Math.random() * 16777216 | 0).toString(16)}`;
+let counter = 0;
+function replaceIDs(body, prefix = randomPrefix) {
+  const ids = [];
+  let match;
+  while (match = regex.exec(body)) {
+    ids.push(match[1]);
+  }
+  if (!ids.length) {
+    return body;
+  }
+  const suffix = `suffix${(Math.random() * 16777216 | Date.now()).toString(16)}`;
+  ids.forEach((id) => {
+    const newID = typeof prefix === "function" ? prefix(id) : prefix + (counter++).toString();
+    const escapedID = id.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    body = body.replace(
+      // Allowed characters before id: [#;"]
+      // Allowed characters after id: [)"], .[a-z]
+      new RegExp(`([#;"])(${escapedID})([")]|\\.[a-z])`, "g"),
+      `$1${newID}${suffix}$3`
+    );
+  });
+  body = body.replace(new RegExp(suffix, "g"), "");
+  return body;
+}
+function iconToSVG(icon, customisations) {
+  const fullIcon = {
+    ...defaultIconProps,
+    ...icon
+  };
+  const fullCustomisations = {
+    ...defaultIconCustomisations,
+    ...customisations
+  };
+  const box = {
+    left: fullIcon.left,
+    top: fullIcon.top,
+    width: fullIcon.width,
+    height: fullIcon.height
+  };
+  let body = fullIcon.body;
+  [fullIcon, fullCustomisations].forEach((props) => {
+    const transformations = [];
+    const hFlip = props.hFlip;
+    const vFlip = props.vFlip;
+    let rotation = props.rotate;
+    if (hFlip) {
+      if (vFlip) {
+        rotation += 2;
+      } else {
+        transformations.push(
+          `translate(${(box.width + box.left).toString()} ${(0 - box.top).toString()})`
+        );
+        transformations.push("scale(-1 1)");
+        box.top = box.left = 0;
+      }
+    } else if (vFlip) {
+      transformations.push(
+        `translate(${(0 - box.left).toString()} ${(box.height + box.top).toString()})`
+      );
+      transformations.push("scale(1 -1)");
+      box.top = box.left = 0;
+    }
+    let tempValue;
+    if (rotation < 0) {
+      rotation -= Math.floor(rotation / 4) * 4;
+    }
+    rotation = rotation % 4;
+    switch (rotation) {
+      case 1:
+        tempValue = box.height / 2 + box.top;
+        transformations.unshift(`rotate(90 ${tempValue.toString()} ${tempValue.toString()})`);
+        break;
+      case 2:
+        transformations.unshift(
+          `rotate(180 ${(box.width / 2 + box.left).toString()} ${(box.height / 2 + box.top).toString()})`
+        );
+        break;
+      case 3:
+        tempValue = box.width / 2 + box.left;
+        transformations.unshift(`rotate(-90 ${tempValue.toString()} ${tempValue.toString()})`);
+        break;
+    }
+    if (rotation % 2 === 1) {
+      if (box.left !== box.top) {
+        tempValue = box.left;
+        box.left = box.top;
+        box.top = tempValue;
+      }
+      if (box.width !== box.height) {
+        tempValue = box.width;
+        box.width = box.height;
+        box.height = tempValue;
+      }
+    }
+    if (transformations.length) {
+      body = wrapSVGContent(body, `<g transform="${transformations.join(" ")}">`, "</g>");
+    }
+  });
+  const customisationsWidth = fullCustomisations.width;
+  const customisationsHeight = fullCustomisations.height;
+  const boxWidth = box.width;
+  const boxHeight = box.height;
+  let width;
+  let height;
+  if (customisationsWidth === null) {
+    height = customisationsHeight === null ? "1em" : customisationsHeight === "auto" ? boxHeight : customisationsHeight;
+    width = calculateSize(height, boxWidth / boxHeight);
+  } else {
+    width = customisationsWidth === "auto" ? boxWidth : customisationsWidth;
+    height = customisationsHeight === null ? calculateSize(width, boxHeight / boxWidth) : customisationsHeight === "auto" ? boxHeight : customisationsHeight;
+  }
+  const attributes = {};
+  const setAttr = (prop, value) => {
+    if (!isUnsetKeyword(value)) {
+      attributes[prop] = value.toString();
+    }
+  };
+  setAttr("width", width);
+  setAttr("height", height);
+  const viewBox = [box.left, box.top, boxWidth, boxHeight];
+  attributes.viewBox = viewBox.join(" ");
+  return {
+    attributes,
+    viewBox,
+    body
+  };
+}
+export {
+  calculateSize,
+  defaultExtendedIconProps,
+  defaultIconCustomisations,
+  defaultIconDimensions,
+  defaultIconProps,
+  defaultIconSizeCustomisations,
+  defaultIconTransformations,
+  getIconData,
+  getIconsTree,
+  getSVGViewBox,
+  iconToSVG,
+  internalGetIconData,
+  isUnsetKeyword,
+  mergeDefsAndContent,
+  mergeIconData,
+  mergeIconTransformations,
+  replaceIDs,
+  splitSVGDefs,
+  wrapSVGContent
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@studiocms/ui",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "description": "The UI library for StudioCMS. Includes the layouts & components we use to build StudioCMS.",
   "repository": {
     "type": "git",
@@ -54,7 +54,7 @@
   },
   "dependencies": {
     "@iconify-json/heroicons": "^1.2.1",
-    "@iconify/utils": "^2.1.33",
+    "@iconify/types": "^2.0.0",
     "astro-transition-event-polyfill": "^1.1.0",
     "pathe": "^1.1.2"
   },