@tableslayer/ui 0.1.3 → 0.1.4

package/src/lib/components/Button/ConfirmActionButton.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { computePosition, offset, flip, shift, platform } from '@floating-ui/dom';
+  import { Button, type ConfirmActionButtonProps } from './';
+  import { tick } from 'svelte';
+
+  let {
+    trigger,
+    actionMessage,
+    actionButtonText = 'Confirm delete',
+    action,
+    isLoading,
+    positioning = { placement: 'bottom' },
+    ...restProps
+  }: ConfirmActionButtonProps = $props();
+
+  let triggerElement: HTMLElement | null = null;
+  let popoverElement = $state<HTMLElement | null>(null);
+  let isShowingConfirm = $state(false);
+  let floatingStyles = $state('');
+
+  const toggleShowConfirm = async () => {
+    isShowingConfirm = true;
+    await tick();
+    updatePosition();
+  };
+
+  const triggerProps = {
+    onclick: () => {
+      toggleShowConfirm();
+    }
+  };
+
+  function updatePosition() {
+    if (!triggerElement || !popoverElement) {
+      return;
+    }
+
+    computePosition(triggerElement, popoverElement, {
+      placement: positioning?.placement,
+      middleware: [offset(({ rects }) => -rects.reference.height / 2 - rects.floating.height / 2), flip(), shift()],
+      platform
+    })
+      .then(({ x, y, strategy }) => {
+        floatingStyles = `position: ${strategy}; left: ${x}px; top: ${y}px;`;
+      })
+      .catch((error) => {
+        console.error('Error in computePosition:', error);
+      });
+  }
+
+  const handleGlobalClick = (e: MouseEvent) => {
+    if (isShowingConfirm && popoverElement && triggerElement) {
+      const target = e.target as Node;
+      if (!popoverElement.contains(target) && !triggerElement.contains(target)) {
+        isShowingConfirm = false;
+      }
+    }
+  };
+</script>
+
+<svelte:window onclick={handleGlobalClick} />
+
+<div class="confirmAction" bind:this={triggerElement} {...restProps}>
+  {@render trigger({ triggerProps })}
+</div>
+
+{#if isShowingConfirm}
+  <div bind:this={popoverElement} class="confirmAction__content" style={floatingStyles}>
+    {@render actionMessage()}
+    <div class="confirmAction__buttons">
+      <Button onclick={action} variant="danger" {isLoading} data-testid="confirmActionButton">
+        {actionButtonText}
+      </Button>
+      <Button onclick={() => (isShowingConfirm = false)} variant="ghost">Cancel</Button>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .confirmAction {
+    display: inline-flex;
+    flex-direction: column;
+    align-items: center;
+  }
+  .confirmAction__content {
+    background-color: var(--popoverBg);
+    border-radius: var(--radius-2);
+    box-shadow: var(--shadow-1);
+    padding: 1rem;
+    z-index: 1000;
+    border: var(--borderThin);
+  }
+  .confirmAction__buttons {
+    margin-top: 0.5rem;
+    display: flex;
+    gap: 0.5rem;
+  }
+</style>

package/src/lib/components/Button/IconButton.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import type { IconButtonProps } from './types';
+
+  let { children, size = 'md', href, as, variant = 'primary', ...restProps }: IconButtonProps = $props();
+
+  const iconBtnClasses = $derived(['iconBtn', `iconBtn--${size}`, `iconBtn--${variant}`, restProps.class ?? '']);
+  const component = as ?? 'button';
+  let iconButtonProps = $state({});
+  if (component === 'a') {
+    iconButtonProps = { href };
+  }
+</script>
+
+<svelte:element this={component} {...iconButtonProps} {...restProps} class={iconBtnClasses}>
+  {@render children()}
+</svelte:element>
+
+<style>
+  :global(.light) {
+    --iconBtn-bg: var(--contrastEmpty);
+    --iconBtn-bgHover: var(--primary-50);
+    --iconBtn-border: solid 2px var(--fg);
+    --iconBtn-borderHover: solid 2px var(--primary-600);
+    --iconBtn-color: var(--fg);
+    --iconBtn-dangerStripesHover: var(--primary-300);
+  }
+
+  :global(.dark) {
+    color-scheme: dark;
+    --iconBtn-bg: var(--bg);
+    --iconBtn-bgHover: var(--primary-950);
+    --iconBtn-border: solid 2px var(--fg);
+    --iconBtn-borderHover: solid 2px var(--primary-500);
+    --iconBtn-color: var(--fg);
+    --iconBtn-dangerStripesHover: var(--primary-700);
+  }
+  .iconBtn {
+    color: var(--iconBtn-color);
+    background-color: var(--iconBtn-bg);
+    border-radius: var(--radius-2);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--size-2);
+    cursor: pointer;
+    font-weight: var(--font-weight-5);
+    border: var(--iconBtn-border);
+    border-color: transparent;
+    font-weight: var(--font-weight-6);
+  }
+
+  .iconBtn--sm {
+    font-size: var(--font-size-1);
+    height: var(--size-6);
+    width: var(--size-6);
+    min-width: var(--size-6);
+  }
+  .iconBtn--md {
+    font-size: var(--font-size-1);
+    height: var(--size-8);
+    width: var(--size-8);
+    min-width: var(--size-8);
+  }
+  .iconBtn--lg {
+    font-size: var(--font-size-2);
+    height: var(--size-9);
+    width: var(--size-9);
+    min-width: var(--size-9);
+  }
+  .iconBtn--primary {
+    border-color: var(--fg);
+  }
+  .iconBtn--danger {
+    border-color: var(--fg);
+    background-image: linear-gradient(
+      135deg,
+      transparent 10%,
+      transparent 10%,
+      transparent 50%,
+      color-mix(in srgb, var(--fg), transparent 40%) 50%,
+      color-mix(in srgb, var(--fg), transparent 40%) 50%,
+      transparent 60%,
+      transparent 100%
+    );
+    background-size: 14.14px 14.14px;
+    text-shadow: 0 0 4px var(--bg);
+  }
+  .iconBtn--danger:hover {
+    background-image: linear-gradient(
+      135deg,
+      transparent 10%,
+      transparent 10%,
+      transparent 50%,
+      var(--iconBtn-dangerStripesHover),
+      var(--iconBtn-dangerStripesHover),
+      transparent 60%,
+      transparent 100%
+    );
+  }
+  .iconBtn:hover {
+    background-color: var(--iconBtn-bgHover);
+    border: var(--iconBtn-borderHover);
+  }
+  .iconBtn--isDisabled {
+    cursor: pointer;
+  }
+  .iconBtn--ghost {
+    background: none;
+    border-color: transparent;
+  }
+  .iconBtn--link {
+    background: none;
+    border-color: transparent;
+    color: var(--fgPrimary);
+  }
+  .iconBtn--link:hover {
+    background: none;
+    border-color: transparent;
+    text-decoration: underline;
+  }
+</style>

package/src/lib/components/Button/RadioButton.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+  import type { RadioButtonProps } from './types';
+
+  let { options, selected = '', variant = 'default', onSelectedChange, ...restProps }: RadioButtonProps = $props();
+
+  function handleChange(value: string) {
+    selected = value;
+    onSelectedChange?.(value);
+  }
+
+  const radioClasses = (value: string) =>
+    ['radioButton', `radioButton--${variant}`, value === selected ? 'radioButton--checked' : ''].join(' ');
+
+  let radioGroupClasses = $derived(['radioGroup', restProps.class ?? '']);
+</script>
+
+<!--
+@component
+  ## RadioButton
+
+  A radio button component styled like a segmented button group.
+
+  @props
+  - `options` - Array of `{ label, value }` objects for each option.
+  - `variant` - Optional styling variant.
+  - `selected` - The currently selected value (bindable).
+  - `onchange` - Callback when selection changes.
+-->
+
+<div {...restProps} class={radioGroupClasses}>
+  {#each options as { label, value }}
+    <label class={radioClasses(value)}>
+      <input
+        type="radio"
+        name="radio"
+        checked={value === selected}
+        {value}
+        bind:group={selected}
+        onchange={() => handleChange(value)}
+      />
+      {#if typeof label === 'string'}
+        {label}
+      {:else}
+        {@render label()}
+      {/if}
+    </label>
+  {/each}
+</div>
+
+<style>
+  .radioGroup {
+    display: inline-flex;
+    border-radius: var(--radius-2);
+    overflow: hidden;
+    height: var(--size-8);
+    border: var(--borderThin);
+    border-color: var(--inputBorderColor);
+  }
+
+  .radioButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--font-size-1);
+    min-width: 2rem;
+    height: 100%;
+    cursor: pointer;
+    border: none;
+    padding: 0 0.5rem;
+    transition:
+      background-color 0.2s ease,
+      border-color 0.2s ease;
+    user-select: none;
+    font-weight: 600;
+    font-size: 0.875rem;
+  }
+
+  .radioButton input {
+    display: none;
+  }
+
+  .radioButton--default {
+    background-color: var(--btn-bg);
+    color: var(--fgMuted);
+  }
+  .radioButton--default:hover {
+    text-decoration: underline;
+  }
+  .radioButton--default.radioButton--checked {
+    background-color: var(--inputBorderColor);
+    color: var(--fg);
+  }
+</style>

package/src/lib/components/Button/index.ts

@@ -0,0 +1,5 @@
+export { default as Button } from './Button.svelte';
+export { default as ConfirmActionButton } from './ConfirmActionButton.svelte';
+export { default as IconButton } from './IconButton.svelte';
+export { default as RadioButton } from './RadioButton.svelte';
+export * from './types';

package/src/lib/components/Button/types.ts

@@ -0,0 +1,54 @@
+import type { FloatingConfig } from '@melt-ui/svelte/internal/actions';
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes, HTMLButtonAttributes, SvelteHTMLElements } from 'svelte/elements';
+
+export type _ButtonProps = {
+  children: Snippet;
+  /**
+   * Renders inside of a flex before the children.
+   */
+  start?: Snippet;
+  /**
+   * Renders inside of a flex after the children.
+   */
+  end?: Snippet;
+  isLoading?: boolean;
+  isDisabled?: boolean;
+  as?: keyof SvelteHTMLElements;
+  /**
+   * Size of the button.
+   * @default md
+   */
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'primary' | 'ghost' | 'danger' | 'link' | 'special';
+  href?: string;
+};
+
+export type ButtonProps = (_ButtonProps & HTMLButtonAttributes) | (_ButtonProps & HTMLAnchorAttributes);
+
+export type _IconButtonProps = {
+  children: Snippet;
+  size?: 'sm' | 'md' | 'lg';
+  variant?: 'primary' | 'ghost' | 'danger' | 'link';
+  href?: string;
+  as?: keyof SvelteHTMLElements;
+};
+
+export type IconButtonProps = (_IconButtonProps & HTMLButtonAttributes) | (_IconButtonProps & HTMLAnchorAttributes);
+
+export type ConfirmActionButtonProps = {
+  trigger: Snippet<[{ triggerProps: { onclick: (e: Event) => void } }]>;
+  actionMessage: Snippet;
+  action: (e: Event) => void;
+  actionButtonText?: string;
+  isLoading?: boolean;
+  positioning?: FloatingConfig;
+};
+
+export type RadioOption = { label: string | Snippet; value: string };
+export type RadioButtonProps = {
+  options: RadioOption[];
+  variant?: 'default';
+  selected: string;
+  onSelectedChange?: (value: string) => void;
+} & SvelteHTMLElements['div'];

package/src/lib/components/CardFan/CardFan.svelte

@@ -0,0 +1,165 @@
+<script lang="ts">
+  import type { CardFanProps } from './types';
+  let { images, height = '120px', ...restProps }: CardFanProps = $props();
+  const cardFanClasses = $derived(['cardFan', `cardFan--count-${images.length}`, restProps.class ?? '']);
+</script>
+
+<div {...restProps} class={cardFanClasses} style="--cardFanHeight: {height}">
+  {#each images as image}
+    <div class="cardFan__card">
+      <div class="cardFan__cardImage" style="background-image: url({image});"></div>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .cardFan {
+    position: relative;
+    height: calc(var(--cardFanHeight) * 1.3);
+    width: calc(var(--cardFanHeight) * 2);
+  }
+
+  .cardFan__card {
+    background: var(--bg);
+    height: var(--cardFanHeight);
+    width: calc(var(--cardFanHeight) * 0.6818);
+    border-radius: 0.25rem;
+    position: absolute;
+    box-shadow:
+      0 0 0.5rem rgba(0, 0, 0, 0.2),
+      1px 1px 32px 4px rgba(0, 0, 0, 0.76) inset;
+    left: 50%;
+    top: 50%;
+    transform-origin: center 120%;
+    border: var(--borderThick);
+    border-color: var(--fg);
+    transition: transform 0.2s var(--ease-in-2);
+    overflow: hidden;
+  }
+
+  .cardFan__cardImage {
+    position: absolute;
+    width: var(--cardFanHeight);
+    height: calc(var(--cardFanHeight) * 0.6818);
+    background-size: cover;
+    background-position: center center;
+    transform: rotate(-90deg);
+    transform-origin: center center;
+    top: 50%;
+    left: 50%;
+    translate: -50% -50%;
+  }
+
+  .cardFan__card:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border-radius: var(--radius-2);
+    border: solid var(--bg) 0.3rem;
+    z-index: 1;
+  }
+
+  .cardFan--count-1 .cardFan__card:nth-child(1) {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+
+  .cardFan--count-2 .cardFan__card:nth-child(1) {
+    transform: translate(-50%, -50%) rotate(-10deg);
+  }
+  .cardFan--count-2 .cardFan__card:nth-child(2) {
+    transform: translate(-50%, -50%) rotate(10deg);
+  }
+
+  .cardFan--count-3 .cardFan__card:nth-child(1) {
+    transform: translate(-50%, -50%) rotate(-15deg);
+  }
+  .cardFan--count-3 .cardFan__card:nth-child(2) {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  .cardFan--count-3 .cardFan__card:nth-child(3) {
+    transform: translate(-50%, -50%) rotate(15deg);
+  }
+
+  .cardFan--count-4 .cardFan__card:nth-child(1) {
+    transform: translate(-50%, -50%) rotate(-20deg);
+  }
+  .cardFan--count-4 .cardFan__card:nth-child(2) {
+    transform: translate(-50%, -50%) rotate(-7deg);
+  }
+  .cardFan--count-4 .cardFan__card:nth-child(3) {
+    transform: translate(-50%, -50%) rotate(7deg);
+  }
+  .cardFan--count-4 .cardFan__card:nth-child(4) {
+    transform: translate(-50%, -50%) rotate(20deg);
+  }
+
+  .cardFan--count-5 .cardFan__card:nth-child(1) {
+    transform: translate(-50%, -50%) rotate(-25deg);
+  }
+  .cardFan--count-5 .cardFan__card:nth-child(2) {
+    transform: translate(-50%, -50%) rotate(-12.5deg);
+  }
+  .cardFan--count-5 .cardFan__card:nth-child(3) {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  .cardFan--count-5 .cardFan__card:nth-child(4) {
+    transform: translate(-50%, -50%) rotate(12.5deg);
+  }
+  .cardFan--count-5 .cardFan__card:nth-child(5) {
+    transform: translate(-50%, -50%) rotate(25deg);
+  }
+
+  :global {
+    *:hover > .cardFan--count-1 .cardFan__card:nth-child(1) {
+      transform: translate(-50%, -50%) rotate(0deg) !important;
+    }
+
+    *:hover > .cardFan--count-2 .cardFan__card:nth-child(1) {
+      transform: translate(-120%, -42%) rotate(-10deg) !important;
+    }
+    *:hover > .cardFan--count-2 .cardFan__card:nth-child(2) {
+      transform: translate(20%, -42%) rotate(10deg) !important;
+    }
+
+    *:hover > .cardFan--count-3 .cardFan__card:nth-child(1) {
+      transform: translate(-130%, -45%) rotate(-10deg) !important;
+    }
+    *:hover > .cardFan--count-3 .cardFan__card:nth-child(2) {
+      transform: translate(-50%, -50%) rotate(0deg) !important;
+    }
+    *:hover > .cardFan--count-3 .cardFan__card:nth-child(3) {
+      transform: translate(30%, -45%) rotate(10deg) !important;
+    }
+
+    *:hover > .cardFan--count-4 .cardFan__card:nth-child(1) {
+      transform: translate(-140%, -42%) rotate(-10deg) !important;
+    }
+    *:hover > .cardFan--count-4 .cardFan__card:nth-child(2) {
+      transform: translate(-70%, -46%) rotate(-5deg) !important;
+    }
+    *:hover > .cardFan--count-4 .cardFan__card:nth-child(3) {
+      transform: translate(-10%, -46%) rotate(5deg) !important;
+    }
+    *:hover > .cardFan--count-4 .cardFan__card:nth-child(4) {
+      transform: translate(60%, -42%) rotate(10deg) !important;
+    }
+    *:hover > .cardFan--count-5 .cardFan__card:nth-child(1) {
+      transform: translate(-150%, -42%) rotate(-10deg) !important;
+    }
+    *:hover > .cardFan--count-5 .cardFan__card:nth-child(2) {
+      transform: translate(-100%, -46%) rotate(-5deg) !important;
+    }
+    *:hover > .cardFan--count-5 .cardFan__card:nth-child(3) {
+      transform: translate(-50%, -50%) rotate(0deg) !important;
+    }
+    *:hover > .cardFan--count-5 .cardFan__card:nth-child(4) {
+      transform: translate(0%, -46%) rotate(5deg) !important;
+    }
+    *:hover > .cardFan--count-5 .cardFan__card:nth-child(5) {
+      transform: translate(50%, -42%) rotate(10deg) !important;
+    }
+  }
+</style>

package/src/lib/components/CardFan/index.ts

@@ -0,0 +1,2 @@
+export { default as CardFan } from './CardFan.svelte';
+export * from './types';

package/src/lib/components/CardFan/types.ts

@@ -0,0 +1,6 @@
+import type { HTMLAttributes } from 'svelte/elements';
+
+export type CardFanProps = {
+  images: string[];
+  height?: string;
+} & HTMLAttributes<HTMLDivElement>;

package/src/lib/components/CodeBlock/Code.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { CodeBlock } from './';
+  import type { CodeProps } from './';
+  let { code, lang = 'svelte', ...restProps }: CodeProps = $props();
+</script>
+
+<CodeBlock {code} {lang} variant="inline" {...restProps} />

package/src/lib/components/CodeBlock/CodeBlock.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import type { CodeBlockProps } from './types';
+  import { onMount } from 'svelte';
+  import { codeToHtml } from 'shiki';
+
+  let { code, lang = 'svelte', variant = 'default' }: CodeBlockProps = $props();
+
+  let highlightedCode = $state('');
+
+  onMount(async () => {
+    highlightedCode = await codeToHtml(code, {
+      lang: lang,
+      themes: {
+        light: 'github-light',
+        dark: 'github-dark'
+      },
+      defaultColor: false // Forces shiki to use light / dark css vars which we need for nesting
+    });
+  });
+
+  let codeBlockClasses = $derived(['codeBlock', `codeBlock--${variant}`]);
+</script>
+
+<span class={codeBlockClasses}>
+  <!-- eslint-disable-next-line svelte/no-at-html-tags -->
+  {@html highlightedCode}
+</span>
+
+<style>
+  :global(.shiki) {
+    font-family: var(--font-mono);
+    padding: var(--size-4);
+    margin: 0;
+  }
+  :global(.codeBlock--inline .shiki) {
+    font-family: var(--font-mono);
+    padding: 0 var(--size-1);
+    margin: 0;
+  }
+  .codeBlock {
+    font-family: var(--font-mono);
+    max-width: 100%;
+    overflow-x: auto;
+    border: var(--borderThin);
+    border-color: var(--contrastEmpty);
+    display: block;
+  }
+  .codeBlock--inline {
+    display: inline-block;
+    width: auto;
+    overflow-x: unset;
+  }
+  :global {
+    /* Default: Inherit colors from inline styles (Shiki sets both light & dark variables inline) */
+    .shiki,
+    .shiki span {
+      color: var(--shiki-light) !important;
+      background-color: var(--contrastLowest) !important;
+      font-style: var(--shiki-light-font-style) !important;
+      font-weight: var(--shiki-light-font-weight) !important;
+      text-decoration: var(--shiki-light-text-decoration) !important;
+    }
+
+    /* In light mode, just inherit (Shiki's inline styles apply the light theme by default) */
+    .light .shiki,
+    .light .shiki span {
+      color: var(--shiki-light) !important;
+      background-color: var(--contrastLowest) !important;
+      font-style: var(--shiki-light-font-style) !important;
+      font-weight: var(--shiki-light-font-weight) !important;
+      text-decoration: var(--shiki-light-text-decoration) !important;
+    }
+
+    /* In dark mode, override with the Shiki dark theme variables */
+    .dark .shiki,
+    .dark .shiki span {
+      color: var(--shiki-dark) !important;
+      background-color: var(--contrastLowest) !important;
+      font-style: var(--shiki-dark-font-style) !important;
+      font-weight: var(--shiki-dark-font-weight) !important;
+      text-decoration: var(--shiki-dark-text-decoration) !important;
+    }
+    .dark .light .shiki,
+    .dark .light .shiki span {
+      color: var(--shiki-light) !important;
+      background-color: var(--contrastLowest) !important;
+      font-style: var(--shiki-light-font-style) !important;
+      font-weight: var(--shiki-light-font-weight) !important;
+      text-decoration: var(--shiki-light-text-decoration) !important;
+    }
+
+    /* Handle nested dark inside light: force dark mode variables */
+    .light .dark .shiki,
+    .light .dark .shiki span {
+      color: var(--shiki-dark) !important;
+      background-color: var(--contrastLowest) !important;
+      font-style: var(--shiki-dark-font-style) !important;
+      font-weight: var(--shiki-dark-font-weight) !important;
+      text-decoration: var(--shiki-dark-text-decoration) !important;
+    }
+  }
+</style>

package/src/lib/components/CodeBlock/index.ts

@@ -0,0 +1,3 @@
+export { default as Code } from './Code.svelte';
+export { default as CodeBlock } from './CodeBlock.svelte';
+export * from './types';

package/src/lib/components/CodeBlock/types.ts

@@ -0,0 +1,10 @@
+export type CodeBlockProps = {
+  code: string;
+  lang?: string;
+  variant?: 'default' | 'inline';
+};
+
+export type CodeProps = {
+  code: string;
+  lang?: string;
+};

package/src/lib/components/ColorMode/ColorMode.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import type { ColorModeProps } from './types';
+  let { children, mode, as = 'div', ...restProps }: ColorModeProps = $props();
+</script>
+
+<svelte:element this={as} class={mode} {...restProps}>
+  {@render children()}
+</svelte:element>

package/src/lib/components/ColorMode/index.ts

@@ -0,0 +1,2 @@
+export { default as ColorMode } from './ColorMode.svelte';
+export type { ColorModeProps } from './types';