@solidpb/ui-kit 0.1.0 → 0.1.1

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

@@ -3,9 +3,10 @@ import { ButtonRootProps } from "@kobalte/core/button";
 import { PolymorphicProps } from "@kobalte/core/polymorphic";
 type BaseProps<T extends ValidComponent = "button"> = PolymorphicProps<T, ButtonRootProps<T>>;
 interface Props extends BaseProps {
-    variant?: "text" | "solid";
-    appearance?: "primary" | "success" | "warning" | "neutral" | "error" | "muted";
-    size?: "xs" | "sm" | "md" | "lg";
+    variant?: "outline" | "dash" | "soft" | "ghost" | "link";
+    appearance?: "primary" | "secondary" | "success" | "warning" | "neutral" | "error" | "accent" | "info";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    modifier?: "wide" | "block" | "square" | "circle";
     isLoading?: boolean;
 }
 export declare const Button: ParentComponent<Props>;

package/dist/components/Button/Button.jsx

@@ -3,71 +3,55 @@ import { Button as KButton } from "@kobalte/core/button";
 import { tv } from "tailwind-variants";
 import Loader from "lucide-solid/icons/loader";
 const button = tv({
-    base: `
-    inline-flex items-center justify-center gap-2 font-medium
-    transition active:opacity-60 hover:opacity-90
-    focus:outline-none focus:ring-1
-    disabled:opacity-50 disabled:cursor-not-allowed
-    rounded-md
-  `,
+    base: "btn",
     variants: {
         appearance: {
-            primary: "bg-light-primary dark:bg-dark-primary/20 dark:text-dark-primary",
-            success: "bg-light-success dark:bg-dark-success/20 dark:text-dark-success",
-            warning: "bg-light-warning dark:bg-dark-warning/20 dark:text-dark-warning",
-            neutral: "bg-light-neutral dark:bg-dark-neutral/20 dark:text-dark-neutral",
-            error: "bg-light-error dark:bg-dark-error/20 dark:text-dark-error",
-            muted: "bg-light-muted dark:bg-dark-muted/20 dark:text-dark-muted",
+            primary: "btn-primary",
+            secondary: "btn-secondary",
+            success: "btn-success",
+            warning: "btn-warning",
+            neutral: "btn-neutral",
+            error: "btn-error",
+            accent: "btn-accent",
+            info: "btn-info",
         },
         size: {
-            xs: "text-xs px-2 py-1",
-            sm: "text-sm px-3 py-1.5",
-            md: "text-base px-4 py-2",
-            lg: "text-lg px-5 py-3",
+            xs: "btn-xs",
+            sm: "btn-sm",
+            md: "btn-md",
+            lg: "btn-lg",
+            xl: "btn-xl",
         },
         variant: {
-            text: "bg-transparent dark:bg-transparent border-none py-0 px-1 hover:underline underline-offset-4",
-            solid: "dark:border-1",
+            outline: "btn-outline",
+            dash: "btn-dash",
+            soft: "btn-soft",
+            ghost: "btn-ghost",
+            link: "btn-link",
+            none: "",
         },
-    },
-    compoundVariants: [
-        {
-            variant: "text",
-            appearance: "primary",
-            class: "text-light-primary dark:text-dark-primary",
-        },
-        {
-            variant: "text",
-            appearance: "success",
-            class: "text-light-success dark:text-dark-success",
-        },
-        {
-            variant: "text",
-            appearance: "warning",
-            class: "text-light-warning dark:text-dark-warning",
-        },
-        {
-            variant: "text",
-            appearance: "neutral",
-            class: "text-light-neutral dark:text-dark-neutral",
+        modifier: {
+            wide: "btn-wide",
+            block: "btn-block",
+            square: "btn-square",
+            circle: "btn-circle",
+            none: "",
         },
-        {
-            variant: "text",
-            appearance: "error",
-            class: "text-light-error dark:text-dark-error",
-        },
-        {
-            variant: "text",
-            appearance: "muted",
-            class: "text-light-muted dark:text-dark-muted",
-        },
-    ],
+    },
     defaultVariants: {
-        variant: "solid",
+        variant: "none",
         appearance: "neutral",
         size: "md",
+        modifier: "none",
     },
 });
+const spinnerSizeMap = {
+    xs: 12,
+    sm: 16,
+    md: 20,
+    lg: 24,
+    xl: 28,
+};
 export const Button = (props) => {
     const [local, others] = splitProps(props, [
         "children",
@@ -76,17 +60,19 @@ export const Button = (props) => {
         "appearance",
         "size",
         "isLoading",
+        "modifier",
     ]);
     const classes = createMemo(() => button({
         variant: local.variant,
         appearance: local.appearance,
         size: local.size,
+        modifier: local.modifier,
         class: local.class,
     }));
     return (<KButton class={classes()} disabled={local.isLoading} {...others}>
       {local.children}
       <Show when={local.isLoading}>
-        <Loader class="ml-2 animate-spin"/>
+        <Loader class="ml-1 animate-spin" size={spinnerSizeMap[local.size ?? "md"]}/>
       </Show>
     </KButton>);
 };

package/dist/components/Card/Card.d.ts

@@ -1,6 +1,15 @@
 import { ParentComponent } from "solid-js";
 interface Props {
     class?: string;
+    img?: string;
+    imgAlt?: string;
+    bodyClass?: string;
 }
-export declare const Card: ParentComponent<Props>;
+export declare const Card: ParentComponent<Props> & {
+    Title: typeof CardTitle;
+};
+interface CardTitleProps {
+    class?: string;
+}
+declare const CardTitle: ParentComponent<CardTitleProps>;
 export default Card;

package/dist/components/Card/Card.jsx

@@ -1,6 +1,26 @@
+import { Show } from "solid-js";
+import { tv } from "tailwind-variants";
+const card = tv({
+    base: "card bg-base-100 shadow-sm",
+});
+const cardBody = tv({
+    base: "card-body w-full",
+});
 export const Card = (props) => {
-    return (<div class={`rounded-xl p-3 bg-[var(--color-light-surface)] dark:bg-[var(--color-dark-surface)] text-[var(--color-text-light-primary)] dark:text-[var(--color-text-dark-primary)] ${props.class ?? ""}`}>
-      {props.children}
+    return (<div class={card({ class: props.class })}>
+      <Show when={props.img}>
+        <figure>
+          <img src={props.img} alt={props.imgAlt ?? "Card Image"}/>
+        </figure>
+      </Show>
+      <div class={cardBody({ class: props.bodyClass })}>{props.children}</div>
     </div>);
 };
+const cardTitle = tv({
+    base: "card-title",
+});
+const CardTitle = (props) => {
+    return <h2 class={cardTitle({ class: props.class })}>{props.children}</h2>;
+};
+Card.Title = CardTitle;
 export default Card;

package/dist/components/Container/Container.jsx

@@ -1,5 +1,15 @@
+import { tv } from "tailwind-variants";
+const container = tv({
+    base: "flex-1 bg-base-100 dark:bg-base-900 min-h-[calc(100vh-4rem)]",
+    variants: {
+        noPadding: {
+            true: "",
+            false: "py-4 px-[3vw]",
+        },
+    },
+});
 export const Container = (props) => {
-    const classes = `flex-1 ${props.noPadding ? "" : "py-4 px-[3vw]"} ${props.class ?? ""}`;
+    const classes = container({ noPadding: props.noPadding, class: props.class });
     return <div class={classes}>{props.children}</div>;
 };
 export default Container;

package/dist/components/Input/Input.jsx

@@ -3,7 +3,16 @@ import { TextField } from "@kobalte/core/text-field";
 import { tv } from "tailwind-variants";
 import { debounce } from "../../methods/debounce";
 const inputRoot = tv({
-    base: "relative flex flex-col gap-1 mt-3",
+    base: "relative flex flex-col gap-1",
+    variants: {
+        marginTop: {
+            yes: "mt-2",
+            no: "",
+        },
+    },
+    defaultVariants: {
+        marginTop: "no",
+    },
 });
 const inputLabel = tv({
     base: "absolute left-3 px-1 font-medium pointer-events-none z-10 bg-base-100",
@@ -67,7 +76,7 @@ export const Input = (props) => {
         local.onChange?.(v);
         debouncedSave()?.(v);
     };
-    return (<TextField class={inputRoot({ class: local.class })} {...others} onChange={handleChange}>
+    return (<TextField class={inputRoot({ class: local.class, marginTop: local.label ? "yes" : "no" })} {...others} onChange={handleChange}>
       <div class="relative w-full">
         <Show when={local.label}>
           <TextField.Label class={inputLabel({ size: local.size })} style="transform: translateY(-50%);">

package/dist/components/List/List.jsx

@@ -63,7 +63,7 @@ export const List = (props) => {
           <Show when={props.search}>
             <div class="flex items-center space-x-2 mt-3 mb-1">
               <Show when={props.createFunc}>
-                <Button class="flex text-sm items-center pl-1 pr-2" variant="solid" appearance="success" onClick={props.createFunc}>
+                <Button class="flex text-sm items-center pl-1 pr-2" appearance="success" onClick={props.createFunc}>
                   <Plus size={20}/>
                   New
                 </Button>

package/dist/components/RelationPicker/RelationPicker.d.ts

@@ -1,4 +1,4 @@
-interface RelationPickerProps<T extends TagRecord = TagRecord> {
+interface RelationPickerProps<T extends Tag = Tag> {
     relations: T[];
     setRelations: (relations: T[]) => void;
     suggestions?: T[];
@@ -7,5 +7,5 @@ interface RelationPickerProps<T extends TagRecord = TagRecord> {
     placeholder?: string;
     label?: string;
 }
-export declare const RelationPicker: <T extends TagRecord = TagRecord>(props: RelationPickerProps<T>) => import("solid-js").JSX.Element;
+export declare const RelationPicker: <T extends Tag = Tag>(props: RelationPickerProps<T>) => import("solid-js").JSX.Element;
 export default RelationPicker;

package/dist/components/TagArea/TagArea.d.ts

@@ -1,5 +1,5 @@
 import { JSX } from "solid-js";
-interface TagAreaProps<T extends TagRecord = TagRecord> {
+interface TagAreaProps<T extends Tag = Tag> {
     tags: T[];
     setTags: (tags: T[]) => void;
     onCreateTag: (name: string) => Promise<T>;
@@ -7,5 +7,5 @@ interface TagAreaProps<T extends TagRecord = TagRecord> {
     suggestions?: T[];
     placeholder?: string;
 }
-export declare const TagArea: <T extends TagRecord = TagRecord>(props: TagAreaProps<T>) => JSX.Element;
+export declare const TagArea: <T extends Tag = Tag>(props: TagAreaProps<T>) => JSX.Element;
 export default TagArea;

package/dist/index.d.ts

@@ -6,7 +6,6 @@ export * from "./components/DateInput";
 export * from "./components/DropdownMenu";
 export * from "./components/FileInput";
 export * from "./components/Form";
-export * from "./components/Heading";
 export * from "./components/Image";
 export * from "./components/Input";
 export * from "./components/Link";
@@ -20,7 +19,6 @@ export * from "./components/Switch";
 export * from "./components/Tabs";
 export * from "./components/Tag";
 export * from "./components/TagArea";
-export * from "./components/Text";
 export * from "./components/TextArea";
 export * from "./components/Tooltip";
 export * from "./methods/debounce";

package/dist/index.js

@@ -6,7 +6,6 @@ export * from "./components/DateInput";
 export * from "./components/DropdownMenu";
 export * from "./components/FileInput";
 export * from "./components/Form";
-export * from "./components/Heading";
 export * from "./components/Image";
 export * from "./components/Input";
 export * from "./components/Link";
@@ -20,7 +19,6 @@ export * from "./components/Switch";
 export * from "./components/Tabs";
 export * from "./components/Tag";
 export * from "./components/TagArea";
-export * from "./components/Text";
 export * from "./components/TextArea";
 export * from "./components/Tooltip";
 export * from "./methods/debounce";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solidpb/ui-kit",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -35,7 +35,7 @@
     "publish": "npm publish --access=public",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "build": "vite build && tsc -p tsconfig.json",
+    "build": "vite build && tsc -p tsconfig.build.json",
     "prepublishOnly": "npm run build"
   }
 }

package/dist/components/Heading/Heading.d.ts

@@ -1,7 +0,0 @@
-import { JSX } from "solid-js";
-interface Props extends JSX.HTMLAttributes<HTMLElement> {
-    as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
-    appearance?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
-}
-export declare const Heading: (props: Props) => JSX.Element;
-export default Heading;

package/dist/components/Heading/Heading.jsx

@@ -1,29 +0,0 @@
-import { splitProps, createMemo } from "solid-js";
-import { Dynamic } from "solid-js/web";
-import { tv } from "tailwind-variants";
-const heading = tv({
-    base: "font-sans text-balance tracking-tight",
-    variants: {
-        appearance: {
-            h1: "text-4xl font-bold",
-            h2: "text-3xl font-semibold",
-            h3: "text-2xl font-semibold",
-            h4: "text-xl font-medium",
-            h5: "text-lg font-medium",
-            h6: "text-base font-medium",
-            p: "text-base font-normal",
-        },
-    },
-    defaultVariants: {
-        appearance: "p",
-    },
-});
-export const Heading = (props) => {
-    const [local, others] = splitProps(props, ["as", "appearance", "class", "children"]);
-    const Tag = (local.as ?? "p");
-    const classes = createMemo(() => heading({ appearance: local.appearance ?? local.as ?? "p", class: local.class }));
-    return (<Dynamic component={Tag} class={classes()} {...others}>
-      {local.children}
-    </Dynamic>);
-};
-export default Heading;

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

@@ -1 +0,0 @@
-export * from "./Heading";

package/dist/components/Heading/index.js

@@ -1 +0,0 @@
-export * from "./Heading";

package/dist/components/Text/Text.d.ts

@@ -1,9 +0,0 @@
-import { Component, JSX } from "solid-js";
-interface TextProps {
-    children: JSX.Element;
-    size?: "sm" | "md" | "lg";
-    color?: "primary" | "secondary" | "error" | "success" | "warning" | "muted";
-    class?: string;
-}
-export declare const Text: Component<TextProps>;
-export default Text;

package/dist/components/Text/Text.jsx

@@ -1,25 +0,0 @@
-import { tv } from "tailwind-variants";
-const text = tv({
-    base: "font-normal",
-    variants: {
-        size: {
-            sm: "text-sm",
-            md: "text-base",
-            lg: "text-lg",
-        },
-        color: {
-            primary: "text-[var(--color-text-light-primary)] dark:text-[var(--color-text-dark-primary)]",
-            secondary: "text-[var(--color-text-light-secondary)] dark:text-[var(--color-text-dark-secondary)]",
-            error: "text-[var(--color-light-error)] dark:text-[var(--color-dark-error)]",
-            success: "text-[var(--color-light-success)] dark:text-[var(--color-dark-success)]",
-            warning: "text-[var(--color-light-warning)] dark:text-[var(--color-dark-warning)]",
-            muted: "text-[var(--color-light-muted)] dark:text-[var(--color-dark-muted)]",
-        },
-    },
-    defaultVariants: {
-        size: "md",
-        color: "primary",
-    },
-});
-export const Text = (props) => (<span class={text({ size: props.size, color: props.color, class: props.class })}>{props.children}</span>);
-export default Text;

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

@@ -1 +0,0 @@
-export * from "./Text";

package/dist/components/Text/index.js

@@ -1 +0,0 @@
-export * from "./Text";