sve-ui 0.1.2 → 0.2.1

package/package.json

@@ -1,69 +1,76 @@
 {
-	"name": "sve-ui",
-	"version": "0.1.2",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build && npm run package",
-		"preview": "vite preview",
-		"package": "svelte-kit sync && svelte-package && publint",
-		"prepublishOnly": "npm run package",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-		"test:unit": "vitest",
-		"lint": "prettier --plugin-search-dir . --check . && eslint .",
-		"format": "prettier --plugin-search-dir . --write ."
-	},
-	"exports": {
-		".": {
-			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
-		}
-	},
-	"files": [
-		"dist"
-	],
-	"peerDependencies": {
-		"svelte": "^3.54.0"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.5.0",
-		"@sveltejs/package": "^2.0.0",
-		"@typescript-eslint/eslint-plugin": "^5.45.0",
-		"@typescript-eslint/parser": "^5.45.0",
-		"eslint": "^8.28.0",
-		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-svelte3": "^4.0.0",
-		"prettier": "^2.8.0",
-		"prettier-plugin-svelte": "^2.8.1",
-		"publint": "^0.1.9",
-		"svelte": "^3.54.0",
-		"svelte-check": "^3.0.1",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.2.0",
-		"vitest": "^0.25.3"
-	},
-	"svelte": "./dist/index.js",
-	"types": "./dist/index.d.ts",
-	"type": "module",
-	"license": "MIT",
-	"author": "Rodrigo Abregu <me@rodriab.io> (https://rodriab.io/)",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/rodriabregu/sve-ui.git"
-	},
-	"bugs": {
-		"url": "https://github.com/rodriabregu/sve-ui/issues"
-	},
-	"homepage": "https://sveui.org/",
-	"description": "Sve-UI is a collection of customizable UI components for Svelte applications. These components are designed to be easy to use and highly flexible, allowing developers to quickly build beautiful interfaces. Sve-UI includes buttons, forms, modals, and other commonly used UI elements, all built with Svelte's lightweight and efficient framework.",
-	"keywords": [
-		"components",
-		"svelte",
-		"kit",
-		"ui",
-		"vite",
-		"component library"
-	]
+  "name": "sve-ui",
+  "version": "0.2.1",
+  "type": "module",
+  "description": "Styled, accessible Svelte 5 components built on Bits UI. No Tailwind, no config — install, import, and theme with CSS variables. Light and dark out of the box.",
+  "author": "Rodrigo Abregu <me@rodriab.io> (https://rodriab.io/)",
+  "license": "MIT",
+  "homepage": "https://sveui.org/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/rodriabregu/sve-ui.git"
+  },
+  "bugs": {
+    "url": "https://github.com/rodriabregu/sve-ui/issues"
+  },
+  "keywords": [
+    "components",
+    "svelte",
+    "kit",
+    "ui",
+    "vite",
+    "component library"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./theme": {
+      "types": "./dist/theme/index.d.ts",
+      "svelte": "./dist/theme/index.js",
+      "default": "./dist/theme/index.js"
+    },
+    "./theme.css": {
+      "default": "./dist/theme/theme.css"
+    }
+  },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "svelte": "^5"
+  },
+  "dependencies": {
+    "bits-ui": "^2.18.1"
+  },
+  "devDependencies": {
+    "@internationalized/date": "^3.8.1",
+    "jsdom": "^26.0.0",
+    "@sveltejs/kit": "^2.66.0",
+    "@sveltejs/package": "^2.5.8",
+    "@sveltejs/vite-plugin-svelte": "^7.1.2",
+    "@testing-library/svelte": "^5.3.1",
+    "eslint": "^10.5.0",
+    "eslint-plugin-svelte": "^3.19.0",
+    "publint": "^0.3.21",
+    "svelte": "^5.56.3",
+    "svelte-check": "^4.0.0",
+    "typescript": "^6.0.3",
+    "typescript-eslint": "^8.61.1",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.9",
+    "@repo/eslint-config": "0.0.0",
+    "@repo/typescript-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "vite build && pnpm package",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "test": "vitest run",
+    "lint": "eslint ."
+  }
 }

package/dist/components/Box/Box.svelte

@@ -1,48 +0,0 @@
-<script>export let as = "div";
-export let p = 0;
-export let padding = 0;
-export let m = 0;
-export let margin = 0;
-export let w = "";
-export let width = "";
-export let h = "";
-export let height = "";
-export let bg = "transparent";
-export let backgroundColor = "transparent";
-export let color = "inherit";
-export let border = "none";
-export let br = "";
-export let borderRadius = "";
-export let d = "";
-export let display = "";
-export let fontSize = 1;
-export let style = "";
-export let textAlign = "";
-export let alignItems = "";
-export let justifyContent = "";
-export let justifyItems = "";
-</script>
-
-<svelte:element
-	this={as}
-	style={`
-		padding: ${p || padding}rem;
-		margin: ${m || margin}rem;
-		width: ${w || width || 'auto'};
-		height: ${h || height || 'auto'};
-		background-color: ${bg || backgroundColor};
-		color: ${color};
-		border: ${border};
-		border-radius: ${br || borderRadius || 'none'};
-		display: ${d || display};
-		font-size: ${fontSize}rem;
-		text-align: ${textAlign};
-		align-items: ${alignItems};
-		justify-content: ${justifyContent};
-		justify-items: ${justifyItems};
-		${style}
-		`}
-	{...$$restProps}
->
-	<slot />
-</svelte:element>

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

@@ -1,160 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        /**
-         * @default 0
-         * @description The padding around the box.
-         * @type number | undefined
-         */
-        p?: number | undefined;
-        /**
-         * @default 0
-         * @description The padding around the box.
-         * @type number | undefined
-         */
-        padding?: number | undefined;
-        /**
-         * @default 0
-         * @description The margin around the box.
-         * @type number | undefined
-         */
-        m?: number | undefined;
-        /**
-         * @default 0
-         * @description The margin around the box.
-         * @type number | undefined
-         */
-        margin?: number | undefined;
-        /**
-         * @default undefined
-         * @description The width of the box.
-         * @type string | undefined
-         */
-        w?: string | undefined;
-        /**
-         * @default undefined
-         * @description The width of the box.
-         * @type string | undefined
-         */
-        width?: string | undefined;
-        /**
-         * @default undefined
-         * @description The height of the box.
-         * @type string | undefined
-         */
-        h?: string | undefined;
-        /**
-         * @default undefined
-         * @description The height of the box.
-         * @type string | undefined
-         */
-        height?: string | undefined;
-        /**
-         * @default undefined
-         * @description The background color of the box.
-         * @type string | undefined
-         */
-        bg?: string | undefined;
-        /**
-         * @default undefined
-         * @description The background color of the box.
-         * @type string | undefined
-         */
-        backgroundColor?: string | undefined;
-        /**
-         * @default 'white'
-         * @description The color of the text.
-         * @type string | undefined
-         */
-        color?: string | undefined;
-        /**
-         * @default undefined
-         * @description The border of the box.
-         * @type string | undefined
-         */
-        border?: string | undefined;
-        /**
-         * @default undefined
-         * @description The border radius of the box.
-         * @type string | undefined
-         */
-        br?: string | undefined;
-        /**
-         * @default undefined
-         * @description The border radius of the box.
-         * @type string | undefined
-         */
-        borderRadius?: string | undefined;
-        /**
-         * @default undefined
-         * @description The display of the box.
-         * @type string | undefined
-         */
-        d?: string | undefined;
-        /**
-         * @default undefined
-         * @description The display of the box.
-         * @type string | undefined
-         */
-        display?: string | undefined;
-
-        /**
-         * @default undefined
-         * @description The position of the text in the box.
-         * @type string | undefined
-         */
-        textAlign?: string | undefined;
-
-        /**
-         * @default undefined
-         * @description The align items of the box.
-         * @type string | undefined
-         */
-        alignItems?: string | undefined;
-
-        /**
-         * @default undefined
-         * @description The justify content of the box.
-         * @type string | undefined
-         */
-        justifyContent?: string | undefined;
-
-        /**
-         * @default undefined
-         * @description The justify items of the box.
-         * @type string | undefined
-         */
-        justifyItems?: string | undefined;
-
-        /**
-         * @default undefined
-         * @description The font size of the text.
-         * @type string | undefined
-         */
-        fontSize?: string | undefined;
-
-        /**
-         * @default undefined
-         * @description Style of the box.
-         * @type string | undefined
-         */
-        style?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type BoxProps = typeof __propDef.props;
-export type BoxEvents = typeof __propDef.events;
-export type BoxSlots = typeof __propDef.slots;
-
-/**
- * A box component is used to create a container for other components. Is a wrapper for the HTML div element.
- * @see Docs https://sveui.org/components/box
- */
-export default class Box extends SvelteComponentTyped<BoxProps, BoxEvents, BoxSlots> {
-}
-export { Box, BoxProps };

package/dist/components/Center/Center.svelte

@@ -1,15 +0,0 @@
-<script>import Box from "../Box/Box.svelte";
-export let width = "100%";
-export let height = "100%";
-</script>
-
-<Box
-	display={'flex'}
-	justifyContent={'center'}
-	alignItems={'center'}
-	{width}
-	{height}
-	{...$$restProps}
->
-	<slot />
-</Box>

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

@@ -1,25 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { BoxProps } from "../Box/Box.svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        width?: string | undefined;
-        height?: string | undefined;
-    } & BoxProps
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type CenterProps = typeof __propDef.props;
-export type CenterEvents = typeof __propDef.events;
-export type CenterSlots = typeof __propDef.slots;
-/**
- * A box component that can be used to center its children.
- * @see Docs https://sveui.org/components/center
- */
-export default class Center extends SvelteComponentTyped<CenterProps, CenterEvents, CenterSlots> {
-}
-export { Center, CenterProps };

package/dist/components/Circle/Circle.svelte

@@ -1,9 +0,0 @@
-<script>
-	import Square from '../Square/Square.svelte';
-
-	export let size = '1rem';
-</script>
-
-<Square {size} borderRadius="100%" {...$$restProps}>
-	<slot />
-</Square>

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

@@ -1,34 +0,0 @@
-/** @typedef {typeof __propDef.props}  CircleProps */
-/** @typedef {typeof __propDef.events}  CircleEvents */
-/** @typedef {typeof __propDef.slots}  CircleSlots */
-/**
- * A square flex component with full border radius apply.
- * @see Docs https://sveui.org/components/circle
- */
-export default class Circle extends SvelteComponentTyped<{
-  [x: string]: any;
-  size?: string | undefined;
-}, {
-  [evt: string]: CustomEvent<any>;
-}, {
-  default: {};
-}> {
-}
-export type CircleProps = typeof __propDef.props;
-export type CircleEvents = typeof __propDef.events;
-export type CircleSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-import type { SquareProps } from "../Square/Square.svelte";
-declare const __propDef: {
-  props: {
-      [x: string]: any;
-      size?: string | undefined;
-  } & SquareProps
-  events: {
-      [evt: string]: CustomEvent<any>;
-  };
-  slots: {
-      default: {};
-  };
-};
-export { Circle, CircleProps };

package/dist/components/CodeExample/CodeExample.svelte

@@ -1,128 +0,0 @@
-<script>export let typeCodeLabel = "Sve-UI";
-export let basic = false;
-let copied = false;
-const copyToClipboard = async () => {
-  try {
-    const codeElement = document.querySelector(".code-box code");
-    if (codeElement) {
-      const text = codeElement.textContent;
-      text && await navigator.clipboard.writeText(text);
-      copied = true;
-      setTimeout(() => {
-        copied = false;
-      }, 1500);
-    }
-  } catch (err) {
-    console.error("Failed to copy: ", err);
-  }
-};
-</script>
-
-<pre class="code-box">
-	{#if basic}
-		<code>
-    	<slot />
-  	</code>
-	{:else}
-		<article class="button-copy">
-		<span>{typeCodeLabel}</span>
-		<button on:click={copyToClipboard}>
-			{#if copied}
-					<span>Copied</span>
-				{:else}
-					<svg
-						stroke="currentColor"
-						fill="none"
-						stroke-width="2"
-						viewBox="0 0 24 24"
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						class="h-4 w-4"
-						height="1em"
-						width="1em"
-						xmlns="http://www.w3.org/2000/svg"
-						><path
-							d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"
-						/><rect x="8" y="2" width="8" height="4" rx="1" ry="1" /></svg
-					>
-				<span>Copy</span>
-				{/if}
-		</button>
-	</article>
-
-  <code id="textCode" class={copied ? 'textCode' : ''}>
-    <slot />
-  </code>
-	{/if}
-</pre>
-
-<style>
-	.code-box {
-		background-color: #070606;
-		font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-			Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-		border-radius: 4px;
-		max-width: 75ch;
-		margin: 0 auto;
-		color: #fffdfa;
-		position: relative;
-	}
-
-	.code-box code {
-		font-size: 0.9rem;
-		font-family: 'Söhne Mono', 'Monaco', 'Andale Mono', 'Ubuntu Mono', monospace;
-		display: block;
-		padding: 0 0.6rem;
-		overflow: auto;
-		transition: background-color 0.2s ease-in-out;
-	}
-
-	.textCode {
-		background-color: #71c562;
-		transition: background-color 0.2s ease-in-out;
-	}
-
-	.button-copy {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		background-color: rgba(52, 53, 65, 0.6);
-		border-top-left-radius: 0.375rem;
-		border-top-right-radius: 0.375rem;
-		padding: 0.8rem;
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-	}
-
-	button {
-		display: flex;
-		gap: 0.5rem;
-		cursor: pointer;
-		background-color: transparent;
-		border: none;
-		color: #fffdfa;
-		transition: background-color 0.2s ease-in-out;
-	}
-
-	button:hover {
-		background-color: #71c56250;
-		border-radius: 4px;
-	}
-
-	button:active {
-		background-color: #71c562;
-		border-radius: 4px;
-	}
-
-	@media only screen and (max-width: 768px) {
-		.code-box {
-			max-width: 100%;
-		}
-
-		.button-copy {
-			padding: 0.8rem 1.8rem;
-		}
-	}
-</style>

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

@@ -1,46 +0,0 @@
-/** @typedef {typeof __propDef.props}  CodeExampleProps */
-/** @typedef {typeof __propDef.events}  CodeExampleEvents */
-/** @typedef {typeof __propDef.slots}  CodeExampleSlots */
-
-/**
- * A code example component is used to show a code example with UI experiencie.
- * @see Docs https://sveui.org/components/codeexample
- */
-export default class CodeExample extends SvelteComponentTyped<{
-  /**
-  * The type code label text, show in the top of the code example component.
-  * @default 'Sve-UI'
-  * @type {string}
-  * @example <CodeExample typeCodeLabel="Svelte">
-  */
-  typeCodeLabel?: string | undefined;
-  /**
-   * If you want a more compact and simpler version, without the top copy button, you can use the basic option of the component with this property set to true.
-   * @default false
-   * @type {boolean}
-   * @example <CodeExample isBasic={true}>
-   */
-  basic?: boolean | undefined;
-}, {
-  [evt: string]: CustomEvent<any>;
-}, {
-  default: {};
-}> {
-}
-export type CodeExampleProps = typeof __propDef.props;
-export type CodeExampleEvents = typeof __propDef.events;
-export type CodeExampleSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-  props: {
-      typeCodeLabel?: string | undefined;
-      basic?: boolean | undefined;
-  };
-  events: {
-      [evt: string]: CustomEvent<any>;
-  };
-  slots: {
-      default: {};
-  };
-};
-export { CodeExample, CodeExampleProps };

package/dist/components/Flex/Flex.svelte

@@ -1,26 +0,0 @@
-<script>import Box from "../Box/Box.svelte";
-export let dir = "row";
-export let direction = "row";
-export let justify = "flex-start";
-export let align = "stretch";
-export let wrap = "nowrap";
-export let gap = 0;
-export let d = "";
-export let display = "";
-export let style = "";
-</script>
-
-<Box
-	style={`
-    display: ${d || display || 'flex'};
-    flex-direction: ${dir || direction};
-    justify-content: ${justify};
-    align-items: ${align};
-    flex-wrap: ${wrap};
-    gap: ${gap}rem;
-    ${style}
-  `}
-	{...$$restProps}
->
-	<slot />
-</Box>

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

@@ -1,34 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-import type { BoxProps } from '../Box/Box.svelte';
-
-declare const __propDef: {
-    props: {
-        [x: string]: any;
-        dir?: string | undefined;
-        direction?: string | undefined;
-        justify?: string | undefined;
-        align?: string | undefined;
-        wrap?: string | undefined;
-        gap?: number | undefined;
-        d?: string | undefined;
-        display?: string | undefined;
-        style?: string | undefined;
-    } & BoxProps;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        // eslint-disable-next-line @typescript-eslint/ban-types
-        default: {};
-    };
-};
-export type FlexProps = typeof __propDef.props;
-export type FlexEvents = typeof __propDef.events;
-export type FlexSlots = typeof __propDef.slots;
-/**
- * A flex box component that can be used to create layouts.
- * @see Docs https://sveui.org/components/flex
- */
-export default class Flex extends SvelteComponentTyped<FlexProps, FlexEvents, FlexSlots> {
-}
-export { Flex, FlexProps };