@studiocms/ui 0.3.2 → 0.4.1

package/src/components/Button.astro

@@ -1,372 +0,0 @@
----
-import type { HTMLTag, Polymorphic } from 'astro/types';
-import type { StudioCMSColorway } from '../utils/colors';
-
-/**
- * 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;
-};
-
-export type { Props };
-
-const {
-	size = 'md',
-	fullWidth = false,
-	color = 'default',
-	variant = 'solid',
-	as: As = 'button',
-	disabled = false,
-	...props
-} = Astro.props;
----
-
-<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>
-<style>
-  /* Default Styles */
-  .sui-button {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    text-align: center;
-
-    position: relative;
-
-    /* Move gaps & radii to spacings.css later on */
-    gap: 0.5rem;
-
-    outline: none;
-    border: none;
-
-    font-weight: 400;
-
-    border-radius: 0.5rem;
-
-    transition: transform 0.15s, background-color 0.15s, border-color 0.15s, color 0.15s;
-    transition-timing-function: ease;
-
-    cursor: pointer;
-
-    /* Default colorway */
-
-    background-color: hsl(var(--default-base));
-    border-color: hsl(var(--border));
-    color: hsl(var(--text-normal));
-
-    min-width: fit-content;
-
-    will-change: transform;
-
-    text-decoration: none;
-  }
-
-  .sui-button.disabled {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  .sui-button.outlined {
-    border-width: 1px;
-    border-style: solid;
-  }
-
-  .sui-button.outlined:hover {
-    background-color: hsl(var(--default-hover));
-  }
-
-  .sui-button.outlined:active {
-    background-color: hsl(var(--default-hover));
-  }
-
-  .sui-button:hover {
-    background-color: hsl(var(--default-hover));
-  }
-
-  .sui-button:active {
-    background-color: hsl(var(--default-active));
-    transform: scale(0.95);
-  }
-
-  .sui-button.flat {
-    background: hsla(var(--default-flat));
-  }
-
-  .sui-button.flat:hover {
-    background: hsla(var(--default-flat-hover));
-  }
-
-  .sui-button.flat:active {
-    background: hsla(var(--default-flat-active));
-  }
-
-  /* Sizes */
-  .sui-button.sm {
-    height: 32px;
-    padding: 0.5rem 0.75rem;
-
-    font-size: 0.825em;
-  }
-
-  .sui-button.md {
-    height: 40px;
-    padding: 0.5rem 0.75rem;
-
-    font-size: 0.875em;
-  }
-
-  .sui-button.lg {
-    height: 48px;
-    padding: 0.75rem 1rem;
-
-    font-size: 1em;
-  }
-
-  .sui-button:focus-visible {
-    outline: 2px solid hsl(var(--text-normal));
-    outline-offset: 2px;
-  }
-
-  /* Primary Colorway */
-  .sui-button.primary {
-    background-color: hsl(var(--primary-base));
-    border-color: hsl(var(--primary-base));
-    color: hsl(var(--text-inverted));
-  }
-
-  .sui-button.primary:hover {
-    background-color: hsl(var(--primary-hover));
-  }
-
-  .sui-button.primary:active {
-    background-color: hsl(var(--primary-active));
-  }
-
-  .sui-button.primary.outlined {
-    background-color: hsl(var(--default-base));
-    color: hsl(var(--text-normal));
-  }
-
-  .sui-button.primary.outlined:hover {
-    background-color: hsl(var(--default-hover));
-  }
-
-  .sui-button.primary.outlined:active {
-    background-color: hsl(var(--default-active));
-  }
-
-  .sui-button.primary.flat {
-    background-color: hsla(var(--primary-flat));
-    color: hsl(259, 96%, 79%);
-  }
-
-  .sui-button.primary.flat:hover {
-    background-color: hsla(var(--primary-flat-hover));
-  }
-
-  .sui-button.primary.flat:active {
-    background-color: hsla(var(--primary-flat-active));
-  }
-
-  /* Success Colorway */
-  .sui-button.success {
-    background-color: hsl(var(--success-base));
-    border-color: hsl(var(--success-base));
-    color: hsl(var(--text-dark));
-  }
-
-  .sui-button.success:hover {
-    background-color: hsl(var(--success-hover));
-  }
-
-  .sui-button.success:active {
-    background-color: hsl(var(--success-active));
-  }
-
-  .sui-button.success.outlined {
-    background-color: hsl(var(--default-base));
-    color: hsl(var(--text-normal));
-  }
-
-  .sui-button.success.outlined:hover {
-    background-color: hsl(var(--default-hover));
-  }
-
-  .sui-button.success.outlined:active {
-    background-color: hsl(var(--default-active));
-  }
-
-  .sui-button.success.flat {
-    background-color: hsla(var(--success-flat));
-    color: hsl(var(--success-base));
-  }
-
-  .sui-button.success.flat:hover {
-    background-color: hsla(var(--success-flat-hover));
-  }
-
-  .sui-button.success.flat:active {
-    background-color: hsla(var(--success-flat-active));
-  }
-
-  /* Warning Colorway */
-  .sui-button.warning {
-    background-color: hsl(var(--warning-base));
-    border-color: hsl(var(--warning-base));
-    color: hsl(var(--text-dark));
-  }
-
-  .sui-button.warning:hover {
-    background-color: hsl(var(--warning-hover));
-  }
-
-  .sui-button.warning:active {
-    background-color: hsl(var(--warning-active));
-  }
-
-  .sui-button.warning.outlined {
-    background-color: hsl(var(--default-base));
-    color: hsl(var(--text-normal));
-  }
-
-  .sui-button.warning.outlined:hover {
-    background-color: hsl(var(--default-hover));
-  }
-
-  .sui-button.warning.outlined:active {
-    background-color: hsl(var(--default-active));
-  }
-
-  .sui-button.warning.flat {
-    background-color: hsla(var(--warning-flat));
-    color: hsl(var(--warning-base));
-  }
-
-  .sui-button.warning.flat:hover {
-    background-color: hsla(var(--warning-flat-hover));
-  }
-
-  .sui-button.warning.flat:active {
-    background-color: hsla(var(--warning-flat-active));
-  }
-
-  /* Danger Colorway */
-  .sui-button.danger {
-    background-color: hsl(var(--danger-base));
-    border-color: hsl(var(--danger-base));
-    color: hsl(var(--text-light));
-  }
-
-  .sui-button.danger:hover {
-    background-color: hsl(var(--danger-hover));
-  }
-
-  .sui-button.danger:active {
-    background-color: hsl(var(--danger-active));
-  }
-
-  .sui-button.danger.outlined {
-    background-color: hsl(var(--default-base));
-    color: hsl(var(--text-normal));
-  }
-
-  .sui-button.danger.outlined:hover {
-    background-color: hsl(var(--default-hover));
-  }
-
-  .sui-button.danger.outlined:active {
-    background-color: hsl(var(--default-active));
-  }
-
-  .sui-button.danger.flat {
-    background-color: hsla(var(--danger-flat));
-    color: hsl(337, 92%, 71%);
-  }
-
-  .sui-button.danger.flat:hover {
-    background-color: hsla(var(--danger-flat-hover));
-  }
-
-  .sui-button.danger.flat:active {
-    background-color: hsla(var(--danger-flat-active));
-  }
-
-  .sui-button.full {
-    width: 100%;
-    justify-content: center;
-  }
-
-  [data-theme="light"] {
-    .sui-button.primary.flat {
-      color: hsl(259, 84%, 45%);
-    }
-
-    .sui-button.success.flat {
-      background-color: hsl(var(--success-base), 0.2);
-      color: hsl(143, 59%, 20%);
-    }
-
-    .sui-button.success.flat:hover {
-      background-color: hsla(var(--success-flat-hover));
-    }
-
-    .sui-button.success.flat:active {
-      background-color: hsla(var(--success-flat-active));
-    }
-
-    .sui-button.warning.flat {
-      background-color: hsla(var(--warning-base), 0.2);
-      color: hsl(48, 78%, 20%);
-    }
-
-    .sui-button.warning.flat:hover {
-      background-color: hsla(var(--warning-base), 0.25);
-    }
-
-    .sui-button.warning.flat:active {
-      background-color: hsla(var(--warning-base), 0.4);
-    }
-
-    .sui-button.danger.flat {
-      color: hsl(339, 97%, 29%);
-    }
-  }
-</style>

package/src/components/Center.astro

@@ -1,16 +0,0 @@
-<!-- This was made for Jumper, to keep him happy <3 -->
-<div class="sui-center">
-  <slot />
-</div>
-<style>
-  .sui-center {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: 100%;
-    height: 100%;
-
-    text-align: center;
-  }
-</style>

package/src/components/Checkbox.astro

@@ -1,250 +0,0 @@
----
-import Checkmark from '../icons/Checkmark.astro';
-import type { StudioCMSColorway } from '../utils/colors';
-import { generateID } from '../utils/generateID';
-
-/**
- * The props for the Checkbox component.
- */
-interface Props {
-	/**
-	 * The label of the checkbox.
-	 */
-	label: string;
-	/**
-	 * The size of the checkbox. Defaults to `md`.
-	 */
-	size?: 'sm' | 'md' | 'lg';
-	/**
-	 * The color of the checkbox. Defaults to `default`.
-	 */
-	color?: StudioCMSColorway;
-	/**
-	 * Whether the checkbox is checked by default.
-	 */
-	defaultChecked?: boolean;
-	/**
-	 * Whether the checkbox is disabled.
-	 */
-	disabled?: boolean;
-	/**
-	 * The name of the checkbox.
-	 */
-	name?: string;
-	/**
-	 * Whether the checkbox is required.
-	 */
-	isRequired?: boolean;
-}
-
-const {
-	size = 'md',
-	color = 'default',
-	defaultChecked,
-	disabled,
-	name = generateID('checkbox'),
-	label,
-	isRequired,
-} = Astro.props;
-
-const iconSizes = {
-	sm: 14,
-	md: 16,
-	lg: 24,
-};
----
-<label 
-  class="sui-checkmark-label"
-  for={name}
-  class:list={[
-    disabled && "disabled",
-    color,
-    size,
-  ]}
->
-  <div
-    class="sui-checkmark-container"
-    tabindex="0"
-    role="checkbox"
-    aria-checked={defaultChecked} 
-    aria-labelledby={`label-${name}`}
-    >
-    <Checkmark
-      class={'sui-checkmark'}
-      width={iconSizes[size]}
-      height={iconSizes[size]}
-    />
-    <input
-      type="checkbox"
-      name={name}
-      id={name}
-      checked={defaultChecked}
-      disabled={disabled}
-      required={isRequired}
-      class="sui-checkbox"
-      hidden
-    />
-  </div>
-  <span id={`label-${name}`}>
-    {label} <span class="req-star">{isRequired && "*"}</span>
-  </span>
-</label>
-<script>
-  const elements = document.querySelectorAll<HTMLDivElement>('.sui-checkmark-container');
-  const checkbox = document.querySelectorAll<HTMLInputElement>('.sui-checkbox');
-
-  for (const element of elements) {
-    if (element.dataset.initialized) continue;
-    
-    element.dataset.initialized = 'true';
-
-    element.addEventListener('keydown', (e) => {
-      if (e.key !== 'Enter' && e.key !== ' ') return;
-
-      e.preventDefault();
-
-      const checkbox = element.querySelector<HTMLInputElement>('.sui-checkbox');
-        
-      if (!checkbox) return;
-
-      checkbox.click();
-    });
-  }
-
-  for (const box of checkbox) {
-    if (box.dataset.initialized) continue;
-
-    box.dataset.initialized = 'true';
-
-    box.addEventListener('change', (e) => {
-      box.parentElement!.ariaChecked = (e.target as HTMLInputElement).checked ? 'true' : 'false';
-    });
-  }
-</script>
-<style>
-  .sui-checkmark-label {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    gap: .5rem;
-    position: relative;
-    margin: .25rem 0;
-  }
-
-  .sui-checkmark-label.disabled {
-    opacity: 0.5;
-    pointer-events: none;
-    color: hsl(var(--text-muted));
-  }
-
-  .sui-checkmark-container {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: hsl(var(--default-base));
-    border: 2px solid hsl(var(--default-base));
-    border-radius: .5rem;
-    cursor: pointer;
-    transition: background-color .15s, border .15s, transform .15s;
-    transition-timing-function: ease;
-  }
-
-  .sui-checkmark-container:focus-visible {
-    outline: 2px solid hsl(var(--text-normal));
-    outline-offset: 2px;
-  }
-
-  .sui-checkmark-label:hover .sui-checkmark-container {
-    background-color: hsl(var(--default-hover));
-  }
-
-  .sui-checkmark-label:active .sui-checkmark-container {
-    background-color: hsl(var(--default-active));
-    scale: 0.9;
-  }
-
-  .sui-checkmark-label.sm {
-    font-size: .875em;
-  }
-
-  .sui-checkmark-label.sm .sui-checkmark-container {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-
-  .sui-checkmark-label.md .sui-checkmark-container {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  .sui-checkmark-label.lg {
-    font-size: 1.125em;
-  }
-
-  .sui-checkmark-label.lg .sui-checkmark-container {
-    width: 1.75rem;
-    height: 1.75rem;
-    padding: .125rem;
-  }
-
-  .primary .sui-checkmark-container:has(.sui-checkbox:checked) {
-    border-color: hsl(var(--primary-base));
-    background-color: hsl(var(--primary-base));
-  }
-
-  .success .sui-checkmark-container:has(.sui-checkbox:checked) {
-    border-color: hsl(var(--success-base));
-    background-color: hsl(var(--success-base));
-  }
-
-  .warning .sui-checkmark-container:has(.sui-checkbox:checked) {
-    border-color: hsl(var(--warning-base));
-    background-color: hsl(var(--warning-base));
-  }
-
-  .danger .sui-checkmark-container:has(.sui-checkbox:checked) {
-    border-color: hsl(var(--danger-base));
-    background-color: hsl(var(--danger-base));
-  }
-
-  .req-star {
-    color: hsl(var(--danger-base));
-    font-weight: 700;
-  }
-
-  .sui-checkbox {
-    width: 0;
-    height: 0;
-    visibility: hidden;
-    opacity: 0;
-    margin: 0;
-  }
-</style>
-<style is:global>
-  .sui-checkmark polyline {
-    transition: all .15s ease;
-    color: hsl(var(--text-normal));
-  }
-
-  .primary .sui-checkmark polyline {
-    color: hsl(var(--text-inverted));
-  }
-
-  .success .sui-checkmark polyline {
-    color: hsl(var(--text-dark));
-  }
-
-  .warning .sui-checkmark polyline {
-    color: hsl(var(--text-dark));
-  }
-
-  .danger .sui-checkmark polyline {
-    color: hsl(var(--text-light));
-  }
-
-  .sui-checkmark-container:has(.sui-checkbox:checked) {
-    .sui-checkmark polyline {
-      stroke-dashoffset: 44;
-    }
-  }
-</style>