seblify 0.2.1 → 0.4.0

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

@@ -0,0 +1,28 @@
+import type { CustomCssSize } from 'seblify';
+import type { Snippet } from 'svelte';
+type ButtonRadius = 'none' | 'sm' | 'md' | 'lg' | 'full' | CustomCssSize;
+type ButtonSize = 'sm' | 'md' | 'lg' | 'xl' | CustomCssSize;
+type ButtonTone = 'neutral' | 'strong' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
+type ButtonSurface = 'default' | 'inverse';
+type ButtonVariant = 'solid' | 'soft' | 'tint' | 'outline' | 'plain';
+declare const Button: import("svelte").Component<{
+    [x: string]: unknown;
+    ariaLabel?: string | undefined;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    disabled?: boolean | undefined;
+    end?: Snippet | undefined;
+    fullWidth?: boolean | undefined;
+    label?: string | undefined;
+    loading?: boolean | undefined;
+    loadingLabel?: string | undefined;
+    radius?: ButtonRadius | undefined;
+    size?: ButtonSize | undefined;
+    start?: Snippet | undefined;
+    surface?: ButtonSurface | undefined;
+    tone?: ButtonTone | undefined;
+    type?: "Guard: `type` prop not allowed. Use `variant` instead" | undefined;
+    variant?: ButtonVariant | undefined;
+}, {}, "">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/action/button/button-group/ButtonGroup.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+  import type { CustomCssSize, SeblifyProps } from 'seblify';
+  import type { Snippet } from 'svelte';
+
+  type ButtonGroupOrientation = 'horizontal' | 'vertical';
+  type ButtonGroupRadius =
+    | 'none'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'full'
+    | CustomCssSize;
+
+  type Props = SeblifyProps<{
+    [key: string]: unknown;
+    ariaLabel?: string;
+    children?: Snippet;
+    class?: string;
+    orientation?: ButtonGroupOrientation;
+    radius?: ButtonGroupRadius;
+  }>;
+
+  const BUTTON_GROUP_RADIUS_MAP: Record<
+    Exclude<ButtonGroupRadius, CustomCssSize>,
+    string
+  > = {
+    none: '0',
+    sm: '0.25rem',
+    md: '0.375rem',
+    lg: '0.5rem',
+    full: '999px',
+  };
+
+  let {
+    ariaLabel,
+    children,
+    class: className,
+    orientation = 'horizontal',
+    radius = 'md',
+    ...restProps
+  }: Props = $props();
+
+  function cssSize(value: CustomCssSize): string {
+    return typeof value === 'number' ? `${value}px` : value;
+  }
+
+  function resolveRadiusValue(value: ButtonGroupRadius): string {
+    if (typeof value === 'number') {
+      return cssSize(value);
+    }
+
+    return BUTTON_GROUP_RADIUS_MAP[
+      value as keyof typeof BUTTON_GROUP_RADIUS_MAP
+    ] ?? value;
+  }
+
+  const radiusValue = $derived(resolveRadiusValue(radius));
+</script>
+
+<div
+  {...restProps}
+  aria-label={ariaLabel}
+  class={`button-group${className ? ` ${className}` : ''}`}
+  data-orientation={orientation}
+  role="group"
+  style:--button-group-radius={radiusValue}
+>
+  {#if children}
+    {@render children()}
+  {/if}
+</div>
+
+<style>
+  .button-group {
+    display: inline-flex;
+    max-width: 100%;
+    align-items: stretch;
+    vertical-align: middle;
+  }
+
+  .button-group[data-orientation='horizontal'] {
+    flex-direction: row;
+  }
+
+  .button-group[data-orientation='vertical'] {
+    flex-direction: column;
+    width: fit-content;
+  }
+
+  .button-group :global(.button),
+  .button-group :global(.icon-button) {
+    position: relative;
+    border-radius: 0;
+  }
+
+  .button-group :global(.button:focus-visible),
+  .button-group :global(.icon-button:focus-visible) {
+    z-index: 2;
+  }
+
+  .button-group[data-orientation='horizontal'] :global(.button),
+  .button-group[data-orientation='horizontal'] :global(.icon-button) {
+    margin-inline-start: -1px;
+  }
+
+  .button-group[data-orientation='horizontal']
+    :global(.button:first-child),
+  .button-group[data-orientation='horizontal']
+    :global(.icon-button:first-child) {
+    margin-inline-start: 0;
+    border-start-start-radius: var(--button-group-radius);
+    border-end-start-radius: var(--button-group-radius);
+  }
+
+  .button-group[data-orientation='horizontal']
+    :global(.button:last-child),
+  .button-group[data-orientation='horizontal']
+    :global(.icon-button:last-child) {
+    border-start-end-radius: var(--button-group-radius);
+    border-end-end-radius: var(--button-group-radius);
+  }
+
+  .button-group[data-orientation='vertical'] :global(.button),
+  .button-group[data-orientation='vertical'] :global(.icon-button) {
+    margin-block-start: -1px;
+  }
+
+  .button-group[data-orientation='vertical'] :global(.button) {
+    width: 100%;
+  }
+
+  .button-group[data-orientation='vertical'] :global(.button:first-child),
+  .button-group[data-orientation='vertical']
+    :global(.icon-button:first-child) {
+    margin-block-start: 0;
+    border-start-start-radius: var(--button-group-radius);
+    border-start-end-radius: var(--button-group-radius);
+  }
+
+  .button-group[data-orientation='vertical'] :global(.button:last-child),
+  .button-group[data-orientation='vertical']
+    :global(.icon-button:last-child) {
+    border-end-start-radius: var(--button-group-radius);
+    border-end-end-radius: var(--button-group-radius);
+  }
+</style>

package/dist/components/action/button/button-group/ButtonGroup.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { CustomCssSize } from 'seblify';
+import type { Snippet } from 'svelte';
+type ButtonGroupOrientation = 'horizontal' | 'vertical';
+type ButtonGroupRadius = 'none' | 'sm' | 'md' | 'lg' | 'full' | CustomCssSize;
+declare const ButtonGroup: import("svelte").Component<{
+    [x: string]: unknown;
+    ariaLabel?: string | undefined;
+    children?: Snippet | undefined;
+    class?: string | undefined;
+    orientation?: ButtonGroupOrientation | undefined;
+    radius?: ButtonGroupRadius | undefined;
+}, {}, "">;
+type ButtonGroup = ReturnType<typeof ButtonGroup>;
+export default ButtonGroup;