@tableslayer/ui 0.1.4 → 0.1.6

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

@@ -1,98 +0,0 @@
-<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

@@ -1,121 +0,0 @@
-<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

@@ -1,93 +0,0 @@
-<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

@@ -1,5 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,165 +0,0 @@
-<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

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

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

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

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

@@ -1,7 +0,0 @@
-<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

@@ -1,102 +0,0 @@
-<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

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

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

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

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

@@ -1,8 +0,0 @@
-<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

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