@tableslayer/ui 0.0.1

package/dist/components/Button/Button.svelte

@@ -0,0 +1,182 @@
+<script lang="ts">
+  import type { ButtonProps } from './types';
+  import { Loader } from '../Loading';
+  /* @type {ButtonProps} */
+  let {
+    children,
+    start,
+    end,
+    isLoading = false,
+    isDisabled = false,
+    size = 'md',
+    variant = 'primary',
+    href,
+    as,
+    ...restProps
+  }: ButtonProps = $props();
+
+  let btnClasses = $derived([
+    'btn',
+    `btn--${size}`,
+    isLoading && 'btn-isLoading',
+    isDisabled && 'btn--isDisabled',
+    `btn--${variant}`,
+    restProps.class ?? ''
+  ]);
+
+  const component = as !== undefined ? as : href !== undefined ? 'a' : 'button';
+
+  let buttonProps = $state({});
+  if (component === 'button') {
+    buttonProps = { disabled: isDisabled };
+  } else if (component === 'a') {
+    buttonProps = { href };
+  }
+</script>
+
+<!--
+@component
+  ## Button
+
+  Button component is used to trigger an action or event.
+
+  @example
+  ```svelte
+  <Button>
+    {#snippet start()}
+      <Icon Icon={IconCheck} />
+    {/snippet}
+    Primary
+  </Button>
+  ```
+  @props
+  - `variant` - The variant of the button. Default is `primary`.
+  - `size` - The size of the button. Default is `md`.
+  - `isLoading` - The loading state of the button. Default is `false`.
+  - `isDisabled` - The disabled state of the button. Default is `false`.
+  - `start` - The start snippet of the button.
+  - `end` - The end snippet of the button.
+-->
+
+<svelte:element this={component} {...buttonProps} {...restProps} class={btnClasses}>
+  {#if isLoading}
+    <Loader />
+  {/if}
+  {#if start}
+    {@render start()}
+  {/if}
+  {@render children()}
+  {#if end}
+    {@render end()}
+  {/if}
+</svelte:element>
+
+<style>
+  :global(.light) {
+    color-scheme: light;
+    --btn-bg: var(--contrastEmpty);
+    --btn-bgHover: var(--primary-50);
+    --btn-border: solid 2px var(--fg);
+    --btn-borderHover: solid 2px var(--primary-600);
+    --btn-color: var(--fg);
+    --btn-dangerStripesHover: var(--primary-300);
+    --btn-bgSpecial: var(--primary-100);
+  }
+
+  :global(.dark) {
+    color-scheme: dark;
+    --btn-bg: var(--bg);
+    --btn-bgHover: var(--primary-950);
+    --btn-border: solid 2px var(--fg);
+    --btn-borderHover: solid 2px var(--primary-500);
+    --btn-color: var(--fg);
+    --btn-dangerStripesHover: var(--primary-700);
+    --btn-bgSpecial: var(--primary-900);
+  }
+
+  .btn {
+    color: var(--btn-color);
+    background-color: var(--btn-bg);
+    padding: 0 var(--size-2);
+    border-radius: var(--radius-2);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--size-2);
+    cursor: pointer;
+    border: var(--btn-border);
+    border-color: transparent;
+    font-family: var(--font-sans);
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .btn--sm {
+    font-size: var(--font-size-1);
+    height: var(--size-6);
+  }
+  .btn--md {
+    font-size: var(--font-size-1);
+    height: var(--size-8);
+  }
+  .btn--lg {
+    font-size: var(--font-size-2);
+    height: var(--size-9);
+  }
+
+  .btn--primary {
+    border-color: var(--fg);
+  }
+  .btn--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);
+  }
+  .btn--danger:hover {
+    background-image: linear-gradient(
+      135deg,
+      transparent 10%,
+      transparent 10%,
+      transparent 50%,
+      var(--btn-dangerStripesHover),
+      var(--btn-dangerStripesHover),
+      transparent 60%,
+      transparent 100%
+    );
+  }
+  .btn--special {
+    border: var(--btn-borderHover);
+    background: var(--btn-bgSpecial);
+  }
+  .btn:hover {
+    background-color: var(--btn-bgHover);
+    border: var(--btn-borderHover);
+  }
+  .btn--isDisabled {
+    cursor: pointer;
+  }
+  .btn--ghost {
+    background: none;
+    border-color: transparent;
+  }
+  .btn--link {
+    background: none;
+    border-color: transparent;
+    color: var(--fgPrimary);
+  }
+  .btn--link:hover {
+    background: none;
+    border-color: transparent;
+    text-decoration: underline;
+  }
+</style>

package/dist/components/Button/Button.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { ButtonProps } from './types';
+/**
+ * ## Button
+ *
+ * Button component is used to trigger an action or event.
+ *
+ * @example
+ * ```svelte
+ * <Button>
+ *   {#snippet start()}
+ *     <Icon Icon={IconCheck} />
+ *   {/snippet}
+ *   Primary
+ * </Button>
+ * ```
+ * @props
+ * - `variant` - The variant of the button. Default is `primary`.
+ * - `size` - The size of the button. Default is `md`.
+ * - `isLoading` - The loading state of the button. Default is `false`.
+ * - `isDisabled` - The disabled state of the button. Default is `false`.
+ * - `start` - The start snippet of the button.
+ * - `end` - The end snippet of the button.
+ */
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/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/dist/components/Button/ConfirmActionButton.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type ConfirmActionButtonProps } from './';
+declare const ConfirmActionButton: import("svelte").Component<ConfirmActionButtonProps, {}, "">;
+type ConfirmActionButton = ReturnType<typeof ConfirmActionButton>;
+export default ConfirmActionButton;

package/dist/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/dist/components/Button/IconButton.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { IconButtonProps } from './types';
+declare const IconButton: import("svelte").Component<IconButtonProps, {}, "">;
+type IconButton = ReturnType<typeof IconButton>;
+export default IconButton;

package/dist/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/dist/components/Button/RadioButton.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { RadioButtonProps } from './types';
+/**
+ * ## 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.
+ */
+declare const RadioButton: import("svelte").Component<RadioButtonProps, {}, "">;
+type RadioButton = ReturnType<typeof RadioButton>;
+export default RadioButton;

package/dist/components/Button/index.d.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/dist/components/Button/index.js

@@ -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/dist/components/Button/types.d.ts

@@ -0,0 +1,55 @@
+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/dist/components/Button/types.js

@@ -0,0 +1 @@
+export {};