@max-ts/svelte 0.2.0 → 0.3.0

package/dist/components/Select/Item/styles.css.js

@@ -0,0 +1,52 @@
+import { globalStyle, style, theme } from '../../../styles/index.js';
+const item = style({
+    position: 'relative',
+    display: 'flex',
+    width: '100%',
+    cursor: 'default',
+    alignItems: 'center',
+    gap: theme.spacing[2],
+    borderRadius: theme.borderRadius.sm,
+    paddingTop: '0.375rem',
+    paddingBottom: '0.375rem',
+    paddingLeft: theme.spacing[2],
+    paddingRight: theme.spacing[8],
+    fontSize: theme.fontSize.sm,
+    outline: '2px solid transparent',
+    outlineOffset: '2px',
+    userSelect: 'none',
+    selectors: {
+        '&[data-highlighted]': {
+            backgroundColor: theme.colors.background.elementHover,
+            color: theme.colors.text.primary,
+        },
+        '&[data-disabled]': {
+            pointerEvents: 'none',
+            opacity: 0.5,
+        },
+    },
+});
+globalStyle(`${item} svg`, {
+    pointerEvents: 'none',
+    flexShrink: 0,
+    width: theme.spacing[4],
+    height: theme.spacing[4],
+});
+globalStyle(`${item} > span:last-child`, {
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing[2],
+});
+const checkSpan = style({
+    position: 'absolute',
+    insetInlineEnd: theme.spacing[2],
+    display: 'flex',
+    width: '0.875rem',
+    height: '0.875rem',
+    alignItems: 'center',
+    justifyContent: 'center',
+});
+export default {
+    item,
+    checkSpan,
+};

package/dist/components/Select/Label/Label.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../styles/index.js';
+import styles from './styles.css.js';
+
+let {
+	ref = $bindable(null),
+	class: className,
+	children,
+	...restProps
+}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="select-label"
+	class={[styles.label, className]}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/Select/Label/Label.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import type { WithElementRef } from '../../../styles/index.js';
+declare const Label: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/dist/components/Select/Label/index.d.ts

@@ -0,0 +1 @@
+export { default as Label } from './Label.svelte';

package/dist/components/Select/Label/index.js

@@ -0,0 +1 @@
+export { default as Label } from './Label.svelte';

package/dist/components/Select/Label/styles.css.js

@@ -0,0 +1,12 @@
+import { style, theme } from '../../../styles/index.js';
+const label = style({
+    color: theme.colors.text.secondary,
+    paddingLeft: theme.spacing[2],
+    paddingRight: theme.spacing[2],
+    paddingTop: '0.375rem',
+    paddingBottom: '0.375rem',
+    fontSize: theme.fontSize.xs,
+});
+export default {
+    label,
+};

package/dist/components/Select/Portal/Portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+import { Select as SelectPrimitive } from 'bits-ui';
+
+let { ...restProps }: SelectPrimitive.PortalProps = $props();
+</script>
+
+<SelectPrimitive.Portal {...restProps} />

package/dist/components/Select/Portal/Portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type Portal = ReturnType<typeof Portal>;
+export default Portal;

package/dist/components/Select/Portal/index.d.ts

@@ -0,0 +1 @@
+export { default as Portal } from './Portal.svelte';

package/dist/components/Select/Portal/index.js

@@ -0,0 +1 @@
+export { default as Portal } from './Portal.svelte';

package/dist/components/Select/ScrollDownButton/ScrollDownButton.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+import { ChevronDownIcon } from '@lucide/svelte';
+import { Select as SelectPrimitive } from 'bits-ui';
+import type { WithoutChildrenOrChild } from '../../../styles/index.js';
+import styles from './styles.css.js';
+
+let {
+	ref = $bindable(null),
+	class: className,
+	...restProps
+}: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+	bind:ref
+	data-slot="select-scroll-down-button"
+	class={[styles.scrollDownButton, className]}
+	{...restProps}
+>
+	<ChevronDownIcon size={16} />
+</SelectPrimitive.ScrollDownButton>

package/dist/components/Select/ScrollDownButton/ScrollDownButton.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+declare const ScrollDownButton: import("svelte").Component<Omit<Omit<SelectPrimitive.ScrollDownButtonProps, "child">, "children">, {}, "ref">;
+type ScrollDownButton = ReturnType<typeof ScrollDownButton>;
+export default ScrollDownButton;

package/dist/components/Select/ScrollDownButton/index.js

@@ -0,0 +1 @@
+export { default as ScrollDownButton } from './ScrollDownButton.svelte';

package/dist/components/Select/ScrollDownButton/styles.css.js

@@ -0,0 +1,12 @@
+import { style, theme } from '../../../styles/index.js';
+const scrollDownButton = style({
+    display: 'flex',
+    cursor: 'default',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: theme.spacing[1],
+    paddingBottom: theme.spacing[1],
+});
+export default {
+    scrollDownButton,
+};

package/dist/components/Select/ScrollUpButton/ScrollUpButton.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+import { ChevronUpIcon } from '@lucide/svelte';
+import { Select as SelectPrimitive } from 'bits-ui';
+import type { WithoutChildrenOrChild } from '../../../styles/index.js';
+import styles from './styles.css.js';
+
+let {
+	ref = $bindable(null),
+	class: className,
+	...restProps
+}: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+	bind:ref
+	data-slot="select-scroll-up-button"
+	class={[styles.scrollUpButton, className]}
+	{...restProps}
+>
+	<ChevronUpIcon class={styles.icon} />
+</SelectPrimitive.ScrollUpButton>

package/dist/components/Select/ScrollUpButton/ScrollUpButton.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+declare const ScrollUpButton: import("svelte").Component<Omit<Omit<SelectPrimitive.ScrollUpButtonProps, "child">, "children">, {}, "ref">;
+type ScrollUpButton = ReturnType<typeof ScrollUpButton>;
+export default ScrollUpButton;

package/dist/components/Select/ScrollUpButton/index.js

@@ -0,0 +1 @@
+export { default as ScrollUpButton } from './ScrollUpButton.svelte';

package/dist/components/Select/ScrollUpButton/styles.css.js

@@ -0,0 +1,17 @@
+import { style, theme } from '../../../styles/index.js';
+const scrollUpButton = style({
+    display: 'flex',
+    cursor: 'default',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: theme.spacing[1],
+    paddingBottom: theme.spacing[1],
+});
+const icon = style({
+    width: theme.spacing[4],
+    height: theme.spacing[4],
+});
+export default {
+    scrollUpButton,
+    icon,
+};

package/dist/components/Select/Select.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+import { Select as SelectPrimitive } from 'bits-ui';
+
+let {
+	open = $bindable(false),
+	value = $bindable(),
+	...restProps
+}: SelectPrimitive.RootProps = $props();
+</script>
+
+<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />

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

@@ -0,0 +1,3 @@
+declare const Select: import("svelte").Component<import("bits-ui").SelectRootPropsWithoutHTML, {}, "value" | "open">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/components/Select/Separator/Separator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+import type { SeparatorProps } from '../../Separator/index.js';
+import { Separator } from './index.js';
+
+import styles from './styles.css.js';
+
+let {
+	ref = $bindable(null),
+	class: className,
+	...restProps
+}: SeparatorProps = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="select-separator"
+	class={[styles.separator, className]}
+	{...restProps}
+/>

package/dist/components/Select/Separator/Separator.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Separator } from './index.js';
+declare const Separator: import("svelte").Component<import("bits-ui").SeparatorRootProps, {}, "ref">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/components/Select/Separator/index.d.ts

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.svelte';

package/dist/components/Select/Separator/index.js

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.svelte';

package/dist/components/Select/Separator/styles.css.js

@@ -0,0 +1,13 @@
+import { negativeSpacing, style, theme } from '../../../styles/index.js';
+const separator = style({
+    backgroundColor: theme.colors.border,
+    pointerEvents: 'none',
+    marginLeft: negativeSpacing(1),
+    marginRight: negativeSpacing(1),
+    marginTop: theme.spacing[1],
+    marginBottom: theme.spacing[1],
+    height: '1px',
+});
+export default {
+    separator,
+};

package/dist/components/Select/Trigger/Trigger.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+import { ChevronDownIcon } from '@lucide/svelte';
+import { Select as SelectPrimitive } from 'bits-ui';
+import type { WithoutChild } from '../../../styles/index.js';
+import styles from './styles.css.js';
+
+let {
+	ref = $bindable(null),
+	class: className,
+	children,
+	size = 'default',
+	...restProps
+}: WithoutChild<SelectPrimitive.TriggerProps> & {
+	size?: 'sm' | 'default';
+} = $props();
+</script>
+
+<SelectPrimitive.Trigger
+	bind:ref
+	data-slot="select-trigger"
+	data-size={size}
+	class={[styles.trigger, className]}
+	{...restProps}
+>
+	{@render children?.()}
+	<ChevronDownIcon class={styles.chevronIcon} />
+</SelectPrimitive.Trigger>

package/dist/components/Select/Trigger/Trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Select as SelectPrimitive } from 'bits-ui';
+import type { WithoutChild } from '../../../styles/index.js';
+type $$ComponentProps = WithoutChild<SelectPrimitive.TriggerProps> & {
+    size?: 'sm' | 'default';
+};
+declare const Trigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Trigger = ReturnType<typeof Trigger>;
+export default Trigger;

package/dist/components/Select/Trigger/index.d.ts

@@ -0,0 +1 @@
+export { default as Trigger } from './Trigger.svelte';

package/dist/components/Select/Trigger/index.js

@@ -0,0 +1 @@
+export { default as Trigger } from './Trigger.svelte';

package/dist/components/Select/Trigger/styles.css.js

@@ -0,0 +1,70 @@
+import { globalStyle, style, theme } from '../../../styles/index.js';
+const trigger = style({
+    borderColor: theme.colors.border,
+    display: 'flex',
+    width: 'fit-content',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: theme.spacing[2],
+    borderRadius: theme.borderRadius.md,
+    border: `1px solid ${theme.colors.border}`,
+    backgroundColor: 'transparent',
+    paddingLeft: theme.spacing[3],
+    paddingRight: theme.spacing[3],
+    paddingTop: theme.spacing[2],
+    paddingBottom: theme.spacing[2],
+    fontSize: theme.fontSize.sm,
+    whiteSpace: 'nowrap',
+    boxShadow: theme.shadow[1],
+    transitionProperty: 'color, box-shadow',
+    outline: '2px solid transparent',
+    outlineOffset: '2px',
+    userSelect: 'none',
+    selectors: {
+        '&[data-placeholder]': {
+            color: theme.colors.text.secondary,
+        },
+        '&:focus-visible': {
+            borderColor: theme.colors.info,
+            boxShadow: `0 0 0 3px ${theme.colors.info}`,
+        },
+        '&[aria-invalid=true]': {
+            boxShadow: `0 0 0 3px rgba(${theme.colors.error}, 0.2)`,
+            borderColor: theme.colors.error,
+        },
+        '&[disabled]': {
+            cursor: 'not-allowed',
+            opacity: 0.5,
+        },
+        '&[data-size=default]': {
+            height: '2.25rem',
+        },
+        '&[data-size=sm]': {
+            height: '2rem',
+        },
+    },
+});
+globalStyle(`${trigger} svg`, {
+    pointerEvents: 'none',
+    flexShrink: 0,
+    width: theme.spacing[4],
+    height: theme.spacing[4],
+});
+globalStyle(`${trigger} > [data-slot=select-value]`, {
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing[2],
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    WebkitLineClamp: 1,
+    WebkitBoxOrient: 'vertical',
+});
+const chevronIcon = style({
+    width: theme.spacing[4],
+    height: theme.spacing[4],
+    opacity: 0.5,
+});
+export default {
+    trigger,
+    chevronIcon,
+};

package/dist/components/Select/index.d.ts

@@ -0,0 +1,26 @@
+import { Portal } from './Portal/index.js';
+declare const Select: {
+    Root: import("svelte").Component<import("bits-ui").SelectRootPropsWithoutHTML, {}, "value" | "open">;
+    Trigger: import("svelte").Component<Omit<import("bits-ui").ComboboxTriggerProps, "child"> & {
+        size?: "sm" | "default";
+    }, {}, "ref">;
+    Label: import("svelte").Component<import("../../index.js").WithElementRef<import("svelte/elements").HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+    Portal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+    ScrollUpButton: import("svelte").Component<Omit<Omit<import("bits-ui").ComboboxScrollUpButtonProps, "child">, "children">, {}, "ref">;
+    ScrollDownButton: import("svelte").Component<Omit<Omit<import("bits-ui").ComboboxScrollDownButtonProps, "child">, "children">, {}, "ref">;
+    Item: import("svelte").Component<Omit<import("bits-ui").ComboboxItemProps, "child">, {}, "ref">;
+    Group: import("svelte").Component<import("bits-ui").ComboboxGroupProps, {}, "ref">;
+    Separator: import("svelte").Component<import("bits-ui").SeparatorRootProps, {}, "ref">;
+    GroupHeading: import("svelte").Component<Omit<{}, "child" | "children"> & {
+        child?: import("svelte").Snippet<[{
+            props: Record<string, unknown>;
+        }]> | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
+        style?: import("bits-ui").StyleProperties | string | null | undefined;
+        ref?: HTMLElement | null | undefined;
+    } & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").ComboboxGroupHeadingPropsWithoutHTML>, {}, "ref">;
+    Content: import("svelte").Component<Omit<import("bits-ui").ComboboxContentProps, "child"> & {
+        portalProps?: import("../../index.js").WithoutChildrenOrChild<import("svelte").ComponentProps<typeof Portal>>;
+    }, {}, "ref">;
+};
+export { Select };

package/dist/components/Select/index.js

@@ -0,0 +1,25 @@
+import { Content } from './Content/index.js';
+import { Group } from './Group/index.js';
+import { GroupHeading } from './GroupHeading/index.js';
+import { Item } from './Item/index.js';
+import { Label } from './Label/index.js';
+import { Portal } from './Portal/index.js';
+import { ScrollDownButton } from './ScrollDownButton/index.js';
+import { ScrollUpButton } from './ScrollUpButton/index.js';
+import Root from './Select.svelte';
+import { Separator } from './Separator/index.js';
+import { Trigger } from './Trigger/index.js';
+const Select = {
+    Root,
+    Trigger,
+    Label,
+    Portal,
+    ScrollUpButton,
+    ScrollDownButton,
+    Item,
+    Group,
+    Separator,
+    GroupHeading,
+    Content,
+};
+export { Select };

package/dist/components/Separator/Separator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+import { Separator as SeparatorPrimitive } from 'bits-ui';
+import styles from './styles.css.js';
+import type { SeparatorProps } from './types.js';
+
+let {
+	ref = $bindable(null),
+	class: className,
+	'data-slot': dataSlot = 'separator',
+	...restProps
+}: SeparatorProps = $props();
+</script>
+
+<SeparatorPrimitive.Root
+	bind:ref
+	data-slot={dataSlot}
+	class={[styles.separator, className]}
+	{...restProps}
+/>

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

@@ -0,0 +1,4 @@
+import { Separator as SeparatorPrimitive } from 'bits-ui';
+declare const Separator: import("svelte").Component<SeparatorPrimitive.RootProps, {}, "ref">;
+type Separator = ReturnType<typeof Separator>;
+export default Separator;

package/dist/components/Separator/index.js

@@ -0,0 +1 @@
+export { default as Separator } from './Separator.svelte';

package/dist/components/Separator/styles.css.js

@@ -0,0 +1,18 @@
+import { style, theme } from '../../styles/index.js';
+const separator = style({
+    backgroundColor: theme.colors.border,
+    flexShrink: 0,
+    selectors: {
+        '&[data-orientation=horizontal]': {
+            height: '1px',
+            width: '100%',
+        },
+        '&[data-orientation=vertical]': {
+            height: '100%',
+            width: '1px',
+        },
+    },
+});
+export default {
+    separator,
+};

package/dist/components/Separator/types.js

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

package/dist/components/Tooltip/Content/Content.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import type { ComponentProps } from 'svelte';
+import type { WithoutChildrenOrChild } from '../../../styles/index.js';
+import { Portal } from '../Portal/index.js';
+import styles from './styles.css.js';
+
+let {
+	ref = $bindable(null),
+	class: className,
+	sideOffset = 0,
+	side = 'top',
+	children,
+	arrowClasses,
+	portalProps,
+	arrow,
+	...restProps
+}: TooltipPrimitive.ContentProps & {
+	arrowClasses?: string;
+	arrow?: boolean;
+	portalProps?: WithoutChildrenOrChild<ComponentProps<typeof Portal>>;
+} = $props();
+</script>
+
+<Portal {...portalProps}>
+	<TooltipPrimitive.Content
+		bind:ref
+		data-slot="tooltip-content"
+		{sideOffset}
+		{side}
+		class={[
+			styles.content,
+			className
+		]}
+		{...restProps}
+	>
+		{@render children?.()}
+		{#if arrow}
+			<TooltipPrimitive.Arrow>
+				{#snippet child({ props })}
+					<div
+						class={[
+							styles.arrow,
+							arrowClasses
+						]}
+						{...props}
+					></div>
+				{/snippet}
+			</TooltipPrimitive.Arrow>
+		{/if}
+
+	</TooltipPrimitive.Content>
+</Portal>

package/dist/components/Tooltip/Content/Content.svelte.d.ts

@@ -0,0 +1,12 @@
+import { Tooltip as TooltipPrimitive } from 'bits-ui';
+import type { ComponentProps } from 'svelte';
+import type { WithoutChildrenOrChild } from '../../../styles/index.js';
+import { Portal } from '../Portal/index.js';
+type $$ComponentProps = TooltipPrimitive.ContentProps & {
+    arrowClasses?: string;
+    arrow?: boolean;
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof Portal>>;
+};
+declare const Content: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Content = ReturnType<typeof Content>;
+export default Content;

package/dist/components/Tooltip/Content/index.d.ts

@@ -0,0 +1 @@
+export { default as Content } from './Content.svelte';

package/dist/components/Tooltip/Content/index.js

@@ -0,0 +1 @@
+export { default as Content } from './Content.svelte';