@studiocms/ui 0.3.2 → 0.4.0

package/dist/components/Accordion/Accordion.astro

@@ -0,0 +1,23 @@
+---
+import './accordion.css';
+
+interface Props {
+	/**
+	 * Whether multiple items in the accordion can be open at once. Default is `true`.
+	 */
+	multipleOpen?: boolean;
+	/**
+	 * The style of the accordion. Default is `outlined`
+	 */
+	style?: 'outlined' | 'separated' | 'filled' | 'blank';
+}
+
+const { style = 'outlined', multipleOpen = true } = Astro.props;
+---
+
+<div class="sui-accordion" class:list={[style]} data-multiple={multipleOpen}>
+  <slot />
+</div>
+<script>
+  import 'studiocms:ui/scripts/accordion';
+</script>

package/dist/components/Accordion/Item.astro

@@ -0,0 +1,21 @@
+---
+import Icon from '../Icon/Icon.astro';
+
+interface Props {
+	open?: boolean;
+}
+
+const { open = false } = Astro.props;
+---
+
+<div class="sui-accordion-item" class:list={{ active: open }} data-open={open}>
+    <div class="sui-accordion-summary not-content" tabindex="0">
+        <Icon name="chevron-right-20-solid" class='sui-summary-chevron' width={20} height={20} />
+        <div class="sui-accordion-summary-content">
+            <slot name="summary" />
+        </div>
+    </div>
+    <div class="sui-accordion-details" class:list={{ active: open, open: open, initial: !open }}>
+        <slot name="default" />
+    </div>
+</div>

package/dist/components/Accordion/accordion.css

@@ -0,0 +1,64 @@
+.sui-accordion {
+  width: 100%;
+}
+.sui-accordion-item,
+.sui-accordion-details {
+  margin-top: 0 !important;
+}
+.sui-accordion-details {
+  margin-left: calc(2.25rem);
+}
+.sui-accordion-details.initial {
+  visibility: hidden;
+  transition: none;
+  max-height: none;
+  position: absolute;
+  top: -200vh;
+  left: -200vh;
+}
+.sui-accordion-details.active {
+  overflow: hidden;
+  max-height: 0;
+  transition: all .3s ease;
+  position: relative;
+  bottom: .25rem;
+}
+.sui-accordion-details.open {
+  max-height: none;
+}
+.sui-accordion.outlined,
+.sui-accordion.filled {
+  border: 1px solid hsl(var(--border));
+  border-radius: var(--radius-sm);
+}
+.sui-accordion.filled {
+  background-color: hsl(var(--background-step-1));
+}
+.sui-accordion.separated .sui-accordion-item,
+.sui-accordion.outlined .sui-accordion-item,
+.sui-accordion.filled .sui-accordion-item {
+  border-bottom: 1px solid hsl(var(--border));
+}
+.sui-accordion.separated .sui-accordion-item:first-of-type {
+  border-top: 1px solid hsl(var(--border));
+}
+.sui-accordion.filled .sui-accordion-item:last-of-type,
+.sui-accordion.outlined .sui-accordion-item:last-of-type {
+  border-bottom: none;
+}
+.sui-accordion-summary {
+  color: hsl(var(--text-normal));
+  display: flex;
+  flex-direction: row;
+  gap: .5rem;
+  align-items: center;
+  padding-left: .5rem;
+  padding-bottom: .5rem;
+  padding-top: .5rem;
+}
+.sui-summary-chevron {
+  transition: all .3s ease;
+}
+.sui-accordion-item.active .sui-summary-chevron {
+  transform: rotate(90deg);
+}

package/dist/components/Accordion/accordion.d.ts

@@ -0,0 +1 @@
+declare const allAccordions: NodeListOf<HTMLDivElement>;

package/dist/components/Accordion/accordion.js

@@ -0,0 +1,70 @@
+const allAccordions = document.querySelectorAll(".sui-accordion");
+for (const accordion of allAccordions) {
+  const multipleOpen = accordion.dataset.multiple === "true";
+  const items = accordion.querySelectorAll(".sui-accordion-item");
+  for (const item of items) {
+    const summary = item.querySelector(".sui-accordion-summary");
+    const content = item.querySelector(".sui-accordion-details");
+    if (!content || !summary) continue;
+    const itemWidth = item.getBoundingClientRect().width;
+    content.style.width = `${itemWidth - 36}px`;
+    let contentBoundingBox = content.getBoundingClientRect();
+    content.style.width = "auto";
+    if (content.classList.contains("initial")) {
+      content.classList.remove("initial");
+      content.classList.add("active");
+    }
+    const open = item.dataset.open === "true";
+    if (open) {
+      item.classList.add("active");
+      content.style.maxHeight = `${contentBoundingBox.height}px`;
+    }
+    const toggleElement = () => {
+      if (!multipleOpen) {
+        for (const otherItem of items) {
+          if (otherItem !== item) {
+            otherItem.classList.remove("active");
+            const otherContent = otherItem.querySelector(".sui-accordion-details");
+            if (otherContent) {
+              otherContent.style.maxHeight = "0";
+            }
+          }
+        }
+      }
+      item.classList.toggle("active");
+      if (item.classList.contains("active")) {
+        content.style.maxHeight = `${contentBoundingBox.height}px`;
+      } else {
+        content.style.maxHeight = "0";
+        content.classList.remove("open");
+      }
+    };
+    summary.addEventListener("click", toggleElement);
+    summary.addEventListener("keydown", (event) => {
+      if (event.key === "Enter" || event.key === " ") {
+        toggleElement();
+      }
+    });
+    let resetting = false;
+    window.addEventListener("resize", async () => {
+      if (item.classList.contains("active")) {
+        content.style.maxHeight = "none";
+        contentBoundingBox = content.getBoundingClientRect();
+        content.style.maxHeight = `${contentBoundingBox.height}px`;
+      } else if (!resetting) {
+        resetting = true;
+        content.classList.remove("active");
+        content.classList.add("initial");
+        const itemWidth2 = item.getBoundingClientRect().width;
+        content.style.width = `${itemWidth2 - 36}px`;
+        content.style.maxHeight = "none";
+        contentBoundingBox = content.getBoundingClientRect();
+        content.style.width = "auto";
+        content.style.maxHeight = "0";
+        content.classList.add("active");
+        content.classList.remove("initial");
+        resetting = false;
+      }
+    });
+  }
+}

package/dist/components/Badge/Badge.astro

@@ -0,0 +1,49 @@
+---
+import type { StudioCMSColorway } from '../../utils/colors.js';
+import './badge.css';
+import type { HTMLAttributes } from 'astro/types';
+import Icon from '../Icon/Icon.astro';
+import type { HeroIconName } from '../Icon/iconType.js';
+
+interface Props extends Omit<HTMLAttributes<'span'>, 'color'> {
+	/**
+	 * The color of the badge. Defaults to `primary`.
+	 */
+	color?: Omit<StudioCMSColorway, 'default'>;
+	/**
+	 * The icon to display in the badge.
+	 */
+	icon?: HeroIconName;
+	/**
+	 * The size of the badge. Defaults to `md`.
+	 */
+	size?: 'sm' | 'md' | 'lg';
+	/**
+	 * The variant of the badge. Defaults to `default`.
+	 */
+	variant?: 'default' | 'flat' | 'outline';
+	/**
+	 * The rounding of the badge. Full is a half-circle, semi is a quarter-circle. Defaults to `full`.
+	 */
+	rounding?: 'full' | 'semi';
+	/**
+	 * The label of the badge.
+	 */
+	label: string;
+}
+
+const {
+	color = 'primary',
+	icon,
+	size = 'md',
+	variant = 'default',
+	rounding = 'full',
+	label,
+	...props
+} = Astro.props;
+---
+
+<span class="sui-badge" class:list={[color, size, variant, rounding]} {...props}>
+  {icon && <Icon name={icon} width={16} height={16} />}
+  {label}
+</span>

package/dist/components/Badge/badge.css

@@ -0,0 +1,111 @@
+.sui-badge {
+  display: flex;
+  flex-direction: row;
+  gap: .5rem;
+  align-items: center;
+  padding: .125rem .75rem;
+  border-radius: var(--radius-full);
+  font-size: .875rem;
+}
+.sui-badge.semi {
+  border-radius: var(--radius-md);
+}
+.sui-badge.primary {
+  background-color: hsl(var(--primary-base));
+  color: hsl(var(--text-inverted));
+}
+.sui-badge.primary.flat,
+.sui-badge.primary.outlined {
+  background-color: hsla(var(--primary-flat));
+  color: hsl(var(--primary-base));
+}
+.sui-badge.primary.outlined {
+  border: 1px solid hsl(var(--primary-base));
+}
+.sui-badge.success {
+  background-color: hsl(var(--success-base));
+  color: hsl(var(--text-inverted));
+}
+.sui-badge.success.flat,
+.sui-badge.success.outlined {
+  background-color: hsla(var(--success-flat));
+  color: hsl(var(--success-base));
+}
+.sui-badge.success.outlined {
+  border: 1px solid hsl(var(--success-base));
+}
+.sui-badge.warning {
+  background-color: hsl(var(--warning-base));
+  color: hsl(var(--text-inverted));
+}
+.sui-badge.warning.flat,
+.sui-badge.warning.outlined {
+  background-color: hsla(var(--warning-flat));
+  color: hsl(var(--warning-base));
+}
+.sui-badge.warning.outlined {
+  border: 1px solid hsl(var(--warning-base));
+}
+.sui-badge.danger {
+  background-color: hsl(var(--danger-base));
+  color: hsl(var(--text-normal));
+}
+.sui-badge.danger.flat,
+.sui-badge.danger.outlined {
+  background-color: hsla(var(--danger-flat));
+  color: hsl(var(--danger-base));
+}
+.sui-badge.danger.outlined {
+  border: 1px solid hsl(var(--danger-base));
+}
+.sui-badge.info {
+  background-color: hsl(var(--info-base));
+  color: hsl(var(--text-normal));
+}
+.sui-badge.info.flat,
+.sui-badge.info.outlined {
+  background-color: hsla(var(--info-flat));
+  color: hsl(var(--info-base));
+}
+.sui-badge.info.outlined {
+  border: 1px solid hsl(var(--info-base));
+}
+.sui-badge.mono {
+  background-color: hsl(var(--mono-base));
+  color: hsl(var(--text-inverted));
+}
+.sui-badge.mono.flat,
+.sui-badge.mono.outlined {
+  background-color: hsla(var(--mono-flat));
+  color: hsl(var(--mono-base));
+}
+.sui-badge.mono.outlined {
+  border: 1px solid hsl(var(--mono-base));
+}
+[data-theme=light] .sui-badge.danger {
+  color: hsl(var(--text-inverted));
+}
+[data-theme=light] .sui-badge.info {
+  color: hsl(var(--text-inverted));
+}
+.sui-badge.sm {
+  padding: .125rem .75rem;
+}
+.sui-badge.sm {
+  font-size: .75rem;
+}
+.sui-badge.sm > svg {
+  width: 14px;
+  height: 14px;
+}
+.sui-badge.lg {
+  font-size: 1rem;
+  padding: .25rem 1rem;
+}
+.sui-badge.lg {
+  font-size: 1rem;
+}
+.sui-badge.lg > svg {
+  width: 20px;
+  height: 20px;
+}

package/dist/components/Breadcrumbs/Breadcrumbs.astro

@@ -0,0 +1,31 @@
+---
+import './breadcrumbs.css';
+
+type Props = {
+	segments: {
+		label: string;
+		segment: string;
+	}[];
+	separator?: string;
+};
+
+const { segments, separator = '>' } = Astro.props;
+
+const breadcrumbs = segments.map(({ label }, index) => {
+	const path = segments
+		.slice(0, index + 1)
+		.map(({ segment }) => segment)
+		.join('/')
+		.replaceAll('//', '/');
+	return {
+		label,
+		path,
+	};
+});
+---
+
+<div class="sui-breadcrumbs">
+  {breadcrumbs.map(({ label, path }) => (
+    <a href={path || '/'}>{label}</a><span>{separator}</span>
+  ))}  
+</div>

package/dist/components/Breadcrumbs/breadcrumbs.css

@@ -0,0 +1,15 @@
+.sui-breadcrumbs {
+  display: flex;
+  flex-direction: row;
+  gap: .25rem;
+}
+.sui-breadcrumbs > *:last-child {
+  display: none;
+}
+.sui-breadcrumbs a {
+  color: hsl(var(--primary-base));
+  text-decoration: none;
+}
+.sui-breadcrumbs a:hover {
+  text-decoration: underline;
+}

package/dist/components/Button/Button.astro

@@ -0,0 +1,75 @@
+---
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { StudioCMSColorway } from '../../utils/colors.js';
+import './button.css';
+
+/**
+ * Props for the button component.
+ */
+type Props<As extends HTMLTag = 'button'> = Omit<Polymorphic<{ as: As }>, 'as'> & {
+	/**
+	 * The polymorphic component to render the button as. Defaults to `button`.
+	 */
+	as?: As;
+	/**
+	 * The size of the button. Defaults to `md`.
+	 */
+	size?: 'sm' | 'md' | 'lg';
+	/**
+	 * Whether the button should be full width. Defaults to `false`.
+	 */
+	fullWidth?: boolean;
+	/**
+	 * The colorway of the button. Defaults to `default`.
+	 */
+	color?: StudioCMSColorway;
+	/**
+	 * The variant of the button. Defaults to `solid`.
+	 */
+	variant?: 'solid' | 'outlined' | 'flat';
+	/**
+	 * Whether the button is disabled. Defaults to `false`.
+	 */
+	disabled?: boolean;
+	/**
+	 * An optional href to use for the button. If provided, the button will render as an anchor tag.
+	 */
+	href?: string;
+};
+
+export type { Props };
+
+const {
+	size = 'md',
+	fullWidth = false,
+	color = 'default',
+	variant = 'solid',
+	disabled = false,
+	...props
+} = Astro.props;
+
+let As: HTMLTag = 'button';
+
+if ('href' in props) {
+	As = 'a';
+} else {
+	As = props.as || 'button';
+}
+---
+
+<As
+  class="sui-button"
+  class:list={[
+    fullWidth && "full",
+    disabled && "disabled",
+    size,
+    color,
+    variant,
+  ]}
+  disabled={disabled}
+  tabindex={0}
+  {...props}>
+  <slot name="start-content" />
+  <slot />
+  <slot name="end-content" />
+</As>