@studiocms/ui 0.4.17 → 1.0.0-beta.0

package/dist/components/Icon/Icon.astro

@@ -1,13 +1,121 @@
 ---
-import { icons } from '@iconify-json/heroicons';
+// @ts-ignore - This is a TypeGenerated Module, available in dev thanks to manual d.ts file - This comment is here because this causes a type-error during build
+import { type AvailableIcons, type IconCollections, iconCollections } from 'studiocms:ui/icons';
+// @ts-ignore - This is a TypeGenerated Module, available in dev thanks to manual d.ts file - This comment is here because this causes a type-error during build
+import * as Icons from 'studiocms:ui/icons';
 import type { HTMLAttributes } from 'astro/types';
 import IconBase from './IconBase.astro';
-import { type HeroIconName } from './iconType.js';
+import { StudioCMS_UI_IconError, errorHintBuilder } from './errors.js';
 
+/**
+ * Props interface for the Icon component.
+ *
+ * @extends HTMLAttributes<'svg'>
+ *
+ * @property {AvailableIcons} name - The name of the icon to be displayed.
+ * @property {number} height - The height of the icon.
+ * @property {number} width - The width of the icon.
+ */
 interface Props extends HTMLAttributes<'svg'> {
-	name: HeroIconName;
-	height?: number;
-	width?: number;
+	/**
+	 * Name of the icon to be displayed.
+	 */
+	name: AvailableIcons;
+
+	/**
+	 * Height of the icon.
+	 */
+	height: number;
+
+	/**
+	 * Width of the icon.
+	 */
+	width: number;
+}
+
+// Extract the props from the Astro component.
+const { name: __name, height, width, ...rest } = Astro.props;
+
+/**
+ * Splits the `__name` string by the colon (:) character.
+ * The resulting array is stored in the `_nameSplit` variable.
+ *
+ * Example:
+ * If `__name` is "prefix:suffix", `_nameSplit` will be ["prefix", "suffix"].
+ */
+const _nameSplit = __name.split(':');
+
+/**
+ * Checks if the icon name contains a colon and if the split name length is not equal to 1.
+ * If both conditions are met, throws a StudioCMS_UI_IconError with a message indicating an invalid icon name.
+ *
+ * @throws {StudioCMS_UI_IconError} Throws an error if the icon name is invalid.
+ * @param {string} __name - The name of the icon to be validated.
+ * @param {Array} _nameSplit - The split parts of the icon name.
+ * @param {Object} iconCollections - The available icon collections.
+ */
+if (__name.includes(':') && _nameSplit.length !== 2) {
+	throw new StudioCMS_UI_IconError(
+		`Invalid icon name: ${__name}`,
+		errorHintBuilder({ iconCollections, prefix: '', iconName: __name })
+	);
+}
+
+/**
+ * Extracts the prefix from the `_nameSplit` array and casts it to the `IconCollections` type.
+ *
+ * @constant
+ * @type {IconCollections}
+ */
+const prefix: IconCollections = _nameSplit[0] as IconCollections;
+
+/**
+ * Extracts the second element from the `_nameSplit` array and casts it to the `AvailableIcons` type.
+ *
+ * @constant
+ * @type {AvailableIcons}
+ */
+const name: AvailableIcons = _nameSplit[1] as AvailableIcons;
+
+/**
+ * Retrieves the icon collection based on the provided prefix.
+ *
+ * @constant
+ * @param {string} prefix - The prefix used to identify the icon collection.
+ */
+const iconCollection = Icons[prefix];
+
+/**
+ * Validates the provided icon collection prefix and throws an error if it is invalid.
+ *
+ * @throws {StudioCMS_UI_IconError} If the prefix is not provided, not included in the icon collections, or if the icon collection is not defined.
+ *
+ * @param {string} prefix - The prefix of the icon collection to validate.
+ * @param {Array<string>} iconCollections - The list of valid icon collection prefixes.
+ * @param {Object} iconCollection - The icon collection object to validate.
+ * @param {string} name - The name of the icon.
+ */
+if (!prefix || !iconCollections.includes(prefix) || !iconCollection) {
+	throw new StudioCMS_UI_IconError(
+		`Invalid icon collection: ${prefix}`,
+		errorHintBuilder({ iconCollections, prefix, iconName: name })
+	);
+}
+
+/**
+ * Throws an error if the icon name is invalid.
+ *
+ * @throws {StudioCMS_UI_IconError} If the icon name is not provided or invalid.
+ * @param {string} name - The name of the icon.
+ * @param {Object} iconCollections - The collections of available icons.
+ * @param {string} prefix - The prefix for the icon name.
+ * @param {Function} errorHintBuilder - A function to build error hints.
+ */
+if (!name) {
+	throw new StudioCMS_UI_IconError(
+		`Invalid icon name: ${name}`,
+		errorHintBuilder({ iconCollections, prefix, iconName: name })
+	);
 }
 ---
-<IconBase iconCollection={icons} {...Astro.props} />
+<IconBase {iconCollection} {name} {prefix} {...rest} {height} {width} />

package/dist/components/Icon/IconBase.astro

@@ -1,9 +1,20 @@
 ---
 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';
+import { StudioCMS_UI_IconError } from './errors.js';
 
+/**
+ * Props interface for the IconBase component.
+ *
+ * @extends HTMLAttributes<'svg'>
+ *
+ * @property {IconifyJSON} iconCollection - The collection of icons.
+ * @property {string} name - The name of the icon from the collection.
+ * @property {string} prefix - The prefix of the icon collection.
+ * @property {number} height - The height of the icon.
+ * @property {number} width - The width of the icon.
+ */
 interface Props extends HTMLAttributes<'svg'> {
 	/**
 	 * Collection of icons
@@ -25,54 +36,144 @@ interface Props extends HTMLAttributes<'svg'> {
 	 *
 	 * const { name, ...props } = Astro.props;
 	 * ---
-	 * <IconBase iconCollection={icons} {name} {...props} />
+	 * <IconBase iconCollection={icons} {name} prefix={icons.prefix} {...props} />
 	 * ```
 	 */
 	iconCollection: IconifyJSON;
+
 	/**
 	 * Name of the icon from the collection
 	 */
 	name: string;
+
+	/**
+	 * Prefix of the icon collection
+	 */
+	prefix: string;
+
 	/**
 	 * Height of the icon in pixels
 	 */
-	height?: number;
+	height: number;
+
 	/**
 	 * Width of the icon in pixels
 	 */
-	width?: number;
+	width: number;
 }
 
 const { iconCollection, name, ...props } = Astro.props;
 
+/**
+ * Interface representing the attributes for an SVG element.
+ * Extends the HTMLAttributes interface for 'svg' elements.
+ *
+ * @interface SVGAttributes
+ * @extends {HTMLAttributes<'svg'>}
+ *
+ * @property {any} [key: string] - Allows any string index to be used as a property.
+ */
 interface SVGAttributes extends HTMLAttributes<'svg'> {
 	// biome-ignore lint/suspicious/noExplicitAny: Allow any string index
 	[key: string]: any;
 }
 
 const attributes = props as SVGAttributes;
+
+/**
+ * Retrieves the icon data from the specified icon collection.
+ *
+ * @param {string} iconCollection - The collection of icons to retrieve from.
+ * @param {string} name - The name of the icon to retrieve.
+ * @returns {object} The data for the specified icon.
+ */
 const iconData = getIconData(iconCollection, name);
 
+/**
+ * Throws an error if the icon data is missing from the collection.
+ *
+ * @throws {StudioCMS_UI_IconError} If the icon data is not found in the collection.
+ * @param {Object} iconData - The data for the icon.
+ * @param {string} name - The name of the icon.
+ * @param {Object} iconCollections - The collection of icons.
+ * @param {Object} iconCollection - The specific icon collection.
+ * @param {string} iconCollection.prefix - The prefix for the icon collection.
+ * @param {Function} errorHintBuilder - A function to build error hints.
+ */
 if (!iconData) {
-	throw new AstroError(`Icon "${name}" is missing in collection`);
+	throw new StudioCMS_UI_IconError(
+		`Icon "${name}" is missing in ${iconCollection.prefix} collection`
+	);
 }
 
+/**
+ * Converts icon data to SVG format and renders it with specified attributes.
+ *
+ * @param {Object} iconData - The data representing the icon to be converted to SVG.
+ * @param {Object} attributes - The attributes to apply to the SVG element.
+ * @param {number} [attributes.height=24] - The height of the SVG element. Defaults to 24 if not provided.
+ * @param {number} [attributes.width=24] - The width of the SVG element. Defaults to 24 if not provided.
+ * @returns {string} The rendered SVG data as a string.
+ */
 const renderData = iconToSVG(iconData, {
-	height: attributes.height || 24,
-	width: attributes.width || 24,
+	height: attributes.height || iconData.height || iconCollection.height || 24,
+	width: attributes.width || iconData.width || iconCollection.width || 24,
 });
 
+/**
+ * Replaces IDs in the provided render data body.
+ *
+ * @param {string} renderData.body - The body of the render data where IDs need to be replaced.
+ * @returns {string} The body with replaced IDs.
+ */
 const body = replaceIDs(renderData.body);
 
+/**
+ * Determines the value of the `renderAttribsHTML` variable based on the presence of the 'xlink:' substring in the `body` string.
+ * If 'xlink:' is found in the `body`, `renderAttribsHTML` is set to the XML namespace for xlink.
+ * Otherwise, it is set to an empty string.
+ *
+ * @example
+ * // Assuming `body` contains 'xlink:href="some-link"'
+ * let renderAttribsHTML = ' xmlns:xlink="http://www.w3.org/1999/xlink"';
+ *
+ * @example
+ * // Assuming `body` does not contain 'xlink:'
+ * let renderAttribsHTML = '';
+ */
 let renderAttribsHTML =
 	body.indexOf('xlink:') === -1 ? '' : ' xmlns:xlink="http://www.w3.org/1999/xlink"';
 
+/**
+ * Iterates over the `attributes` object and constructs a string of HTML attributes.
+ * Each attribute is added to the `renderAttribsHTML` string in the format ` key="value"`.
+ *
+ * @param {Object} attributes - An object containing key-value pairs of HTML attributes.
+ * @param {string} renderAttribsHTML - A string that accumulates the HTML attributes.
+ */
 for (const attr in attributes) {
 	renderAttribsHTML += ` ${attr}="${attributes[attr]}"`;
 }
 
+/**
+ * Extracts the `viewBox` attribute from the `renderData` object.
+ *
+ * @constant
+ * @type {string}
+ * @memberof IconBase
+ */
 const viewBox = renderData.attributes.viewBox;
 
+/**
+ * Generates an SVG element as a string with specified attributes and content.
+ *
+ * @param {Object} attributes - The attributes for the SVG element.
+ * @param {number} [attributes.height=24] - The minimum height of the SVG element in pixels.
+ * @param {string} renderAttribsHTML - The HTML string of additional attributes to be added to the SVG element.
+ * @param {string} [viewBox] - The viewBox attribute for the SVG element, if provided.
+ * @param {string} body - The inner content of the SVG element.
+ * @returns {string} The generated SVG element as a string.
+ */
 const svg = `<svg style="min-width: ${attributes.height || 24}px" xmlns="http://www.w3.org/2000/svg"${renderAttribsHTML}${viewBox && ` viewbox="${viewBox}"`}>${body}</svg>`;
 ---
 <Fragment set:html={svg} />

package/dist/components/Icon/errors.d.ts

@@ -0,0 +1,29 @@
+import type { iconCollections as _iconCollections } from 'studiocms:ui/icons';
+import { AstroError } from 'astro/errors';
+/**
+ * Custom error class for handling errors related to StudioCMS UI Icons.
+ *
+ * @extends {AstroError}
+ *
+ * @property {string} name - The name of the error, set to 'StudioCMS UI Icon Error'.
+ * @property {string} hint - A hint message suggesting to check the Icon Collection for the required icon.
+ * @property {const} type - The type of the error, set to 'AstroUserError'.
+ */
+export declare class StudioCMS_UI_IconError extends AstroError {
+    name: string;
+    type: "AstroUserError";
+}
+/**
+ * Builds an error hint message for invalid or missing icons.
+ *
+ * @param data - An object containing the following properties:
+ * @param data.iconCollections - An array of valid icon collections.
+ * @param data.prefix - The prefix of the icon name.
+ * @param data.iconName - The name of the icon.
+ * @returns A string containing the error hint message.
+ */
+export declare function errorHintBuilder(data: {
+    iconCollections: typeof _iconCollections;
+    prefix: string | undefined;
+    iconName: string | undefined;
+}): string;

package/dist/components/Icon/errors.js

@@ -0,0 +1,25 @@
+import { AstroError } from "astro/errors";
+class StudioCMS_UI_IconError extends AstroError {
+  name = "@studiocms/ui Icon Error";
+  type = "AstroUserError";
+}
+function receivedIcon(prefix, iconName) {
+  if (!prefix && !iconName) {
+    return "undefined";
+  }
+  if (!prefix) {
+    return `${iconName}`;
+  }
+  if (!iconName) {
+    return `${prefix}:undefined`;
+  }
+  return `${prefix}:${iconName}`;
+}
+function errorHintBuilder(data) {
+  const { iconCollections, prefix, iconName } = data;
+  return `Valid icon collections: ${iconCollections.join(", ")}. Received: "${receivedIcon(prefix, iconName)}", Icon is either missing or invalid.`;
+}
+export {
+  StudioCMS_UI_IconError,
+  errorHintBuilder
+};

package/dist/components/Input/input.css

@@ -7,7 +7,7 @@
 .sui-input-label.disabled {
   opacity: 0.5;
   pointer-events: none;
-  color: hsl(var(--text-muted));
+  color: var(--text-muted);
 }
 .label {
   font-size: 14px;
@@ -15,24 +15,24 @@
 .sui-input {
   padding: .5rem 1rem;
   border-radius: var(--radius-md);
-  border: 1px solid hsl(var(--border));
-  background: hsl(var(--background-step-2));
-  color: hsl(var(--text-normal));
+  border: 1px solid var(--border);
+  background: var(--background-step-2);
+  color: var(--text-normal);
   transition: all .15s ease;
 }
 .sui-input:hover {
-  background: hsl(var(--background-step-3));
+  background: var(--background-step-3);
 }
 .sui-input:active,
 .sui-input:focus {
-  border: 1px solid hsl(var(--primary-base));
+  border: 1px solid var(--primary-base);
   outline: none;
-  background: hsl(var(--background-step-2));
+  background: var(--background-step-2);
 }
 .disabled .sui-input:active {
-  border: 1px solid hsl(var(--border));
+  border: 1px solid var(--border);
 }
 .req-star {
-  color: hsl(var(--danger-base));
+  color: var(--danger-base);
   font-weight: 700;
 }

package/dist/components/Modal/Modal.astro

@@ -65,7 +65,7 @@ const {
     <slot name="header" />
     {(dismissable || (!cancelButton && !actionButton)) && (
       <button class="x-mark-container" id={`${id}-btn-x`}>
-        <Icon name="x-mark" width={24} height={24} class={'dismiss-icon'} />
+        <Icon name="heroicons:x-mark" width={24} height={24} class={'dismiss-icon'} />
       </button>
     )}
   </div>

package/dist/components/Modal/modal.css

@@ -1,8 +1,8 @@
 .sui-modal {
-  border: 1px solid hsl(var(--border));
+  border: 1px solid var(--border);
   border-radius: var(--radius-md);
   padding: 1.5rem;
-  box-shadow: 0px 6px 8px hsl(var(--shadow));
+  box-shadow: 0px 4px 8px var(--shadow);
   animation: hide .25s ease;
   overflow: visible;
   margin: auto;
@@ -50,10 +50,10 @@ body:has(.sui-modal[open]) {
   border-radius: var(--radius-sm);
 }
 .x-mark-container:hover {
-  background-color: hsl(var(--default-base));
+  background-color: var(--default-base);
 }
 .x-mark-container:focus-visible {
-  outline: 2px solid hsl(var(--text-normal));
+  outline: 2px solid var(--text-normal);
   outline-offset: 2px;
 }
 .sui-modal-footer {

package/dist/components/Progress/progress.css

@@ -1,7 +1,7 @@
 .sui-progress {
   width: 100%;
   height: 1rem;
-  border: 1px solid hsl(var(--border));
+  border: 1px solid var(--border);
   border-radius: var(--radius-sm);
   overflow: hidden;
 }
@@ -10,20 +10,20 @@
   width: 0;
   transition: all .75s ease;
   border-radius: var(--radius-sm);
-  background-color: hsl(var(--primary-base));
+  background-color: var(--primary-base);
 }
 .sui-progress.success .sui-progress-slider {
-  background-color: hsl(var(--success-base));
+  background-color: var(--success-base);
 }
 .sui-progress.warning .sui-progress-slider {
-  background-color: hsl(var(--warning-base));
+  background-color: var(--warning-base);
 }
 .sui-progress.danger .sui-progress-slider {
-  background-color: hsl(var(--danger-base));
+  background-color: var(--danger-base);
 }
 .sui-progress.info .sui-progress-slider {
-  background-color: hsl(var(--info-base));
+  background-color: var(--info-base);
 }
 .sui-progress.monochrome .sui-progress-slider {
-  background-color: hsl(var(--mono-base));
+  background-color: var(--mono-base);
 }

package/dist/components/RadioGroup/radiogroup.css

@@ -5,15 +5,15 @@
 }
 .sui-radio-container.disabled {
   opacity: 0.5;
-  color: hsl(var(--text-muted));
+  color: var(--text-muted);
 }
 .sui-radio-label.disabled {
   opacity: 0.5;
-  color: hsl(var(--text-muted));
+  color: var(--text-muted);
   pointer-events: none;
 }
 .req-star {
-  color: hsl(var(--danger-base));
+  color: var(--danger-base);
   font-weight: 700;
 }
 .sui-radio-inputs {
@@ -32,39 +32,39 @@
   align-items: center;
 }
 .sui-radio-label:hover .sui-radio-box {
-  outline-color: hsl(var(--default-hover));
+  outline-color: var(--default-hover);
 }
 .sui-radio-container:not(.disabled) .sui-radio-label:active .sui-radio-box {
-  outline-color: hsl(var(--default-active));
+  outline-color: var(--default-active);
   scale: 0.9;
 }
 .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
-  background-color: hsl(var(--text-normal));
-  outline-color: hsl(var(--text-normal));
+  background-color: var(--text-normal);
+  outline-color: var(--text-normal);
 }
 .sui-radio-container.primary .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
-  background-color: hsl(var(--primary-base));
-  outline-color: hsl(var(--primary-base));
+  background-color: var(--primary-base);
+  outline-color: var(--primary-base);
 }
 .sui-radio-container.success .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
-  background-color: hsl(var(--success-base));
-  outline-color: hsl(var(--success-base));
+  background-color: var(--success-base);
+  outline-color: var(--success-base);
 }
 .sui-radio-container.warning .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
-  background-color: hsl(var(--warning-base));
-  outline-color: hsl(var(--warning-base));
+  background-color: var(--warning-base);
+  outline-color: var(--warning-base);
 }
 .sui-radio-container.danger .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
-  background-color: hsl(var(--danger-base));
-  outline-color: hsl(var(--danger-base));
+  background-color: var(--danger-base);
+  outline-color: var(--danger-base);
 }
 .sui-radio-container.info .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
-  background-color: hsl(var(--info-base));
-  outline-color: hsl(var(--info-base));
+  background-color: var(--info-base);
+  outline-color: var(--info-base);
 }
 .sui-radio-container.mono .sui-radio-label:has(.sui-radio-toggle:checked) .sui-radio-box {
-  background-color: hsl(var(--mono-base));
-  outline-color: hsl(var(--mono-base));
+  background-color: var(--mono-base);
+  outline-color: var(--mono-base);
 }
 .sui-radio-box-container {
   width: 20px;
@@ -79,12 +79,12 @@
   width: 12px;
   height: 12px;
   border-radius: var(--radius-full);
-  outline: 1px solid hsl(var(--default-base));
+  outline: 1px solid var(--default-base);
   outline-offset: 4px;
   transition: all .15s ease;
 }
 .sui-radio-box:focus-visible {
-  outline-color: hsl(var(--text-normal)) !important;
+  outline-color: var(--text-normal) !important;
 }
 .sui-radio-toggle {
   width: 0;

package/dist/components/SearchSelect/SearchSelect.astro

@@ -152,7 +152,7 @@ const defaultLabel = selected
 				label={label || ''}
 				isRequired={isRequired || false}
 			/>
-			<Icon name="chevron-up-down" class="sui-search-select-indicator" width={24} height={24} />
+			<Icon name="heroicons:chevron-up-down" class="sui-search-select-indicator" width={24} height={24} />
 		</div>
 		<div class="sui-search-select-dropdown">
 			<ul class="sui-search-select-dropdown-list" role="listbox" id={`${name}-dropdown`}>
@@ -212,7 +212,7 @@ const defaultLabel = selected
 			<div class="sui-search-select-badge-container">
 				{
 					((selected ?? []) as SearchSelectOption[]).map((s) => s && 
-						<Badge class="sui-search-select-badge" data-value={s.value} size="sm" label={s.label} iconPosition="right" icon="x-mark" />
+						<Badge class="sui-search-select-badge" data-value={s.value} size="sm" label={s.label} iconPosition="right" icon="heroicons:x-mark" />
 					)
 				}
 			</div>