@krrli/cm-designsystem 1.1.0 → 1.19.8

package/dist/components/icons/generated/Fullscreen.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const Fullscreen = (props) => (_jsxs(IconBase, { label: "Fullscreen", ...props, children: [_jsx("g", { fill: "currentColor", clipPath: "url(#a)", children: _jsx("path", { d: "M15 0h-5a1 1 0 1 0 0 2h2.587L9.294 5.293a1 1 0 1 0 1.414 1.414L14 3.414V6a1 1 0 1 0 2 0V1a1 1 0 0 0-1-1M6.707 9.293a1 1 0 0 0-1.414 0L2 12.586V10a1 1 0 0 0-2 0v5a1 1 0 0 0 1 1h5a1 1 0 0 0 0-2H3.414l3.293-3.293a1 1 0 0 0 0-1.414" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/HeartFilled.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const HeartFilled: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/HeartFilled.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const HeartFilled = (props) => (_jsxs(IconBase, { label: "HeartFilled", ...props, children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { fill: "currentColor", d: "M11.6 0C10.1 0 8.8.8 8 2 7.2.8 5.9 0 4.4 0 2 0 0 2 0 4.4c0 4.4 8 10.9 8 10.9s8-6.5 8-10.9C16 2 14 0 11.6 0" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/HeartOutline.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const HeartOutline: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/HeartOutline.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const HeartOutline = (props) => (_jsxs(IconBase, { label: "HeartOutline", ...props, children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { fill: "currentColor", d: "M7.4 15.5C6.6 14.8 0 9.3 0 5.1 0 2.4 2.2.3 4.8.3 6 .3 7.1.8 8 1.5 8.9.7 10 .3 11.2.3 13.9.3 16 2.5 16 5.1c0 4.2-6.6 9.7-7.4 10.3-.3.4-.9.4-1.2.1M4.8 2.3C3.3 2.3 2 3.6 2 5.1c0 2.2 3.5 6 6 8.2 2.1-1.9 6-5.8 6-8.2 0-1.6-1.3-2.8-2.8-2.8-.9 0-1.8.5-2.3 1.3-.4.6-1.3.6-1.7 0-.6-.8-1.4-1.3-2.4-1.3" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/Location.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const Location: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/Location.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const Location = (props) => (_jsxs(IconBase, { label: "Location", ...props, children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { fill: "currentColor", d: "M8 0C4.1 0 1 3.1 1 7c0 1.9.7 3.7 2.1 5 .1.1 4.1 3.7 4.2 3.8.4.3 1 .3 1.3 0 .1-.1 4.2-3.7 4.2-3.8 1.4-1.3 2.1-3.1 2.1-5 .1-3.9-3-7-6.9-7m0 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/LogOut.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const LogOut: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/LogOut.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const LogOut = (props) => (_jsxs(IconBase, { label: "LogOut", ...props, children: [_jsxs("g", { fill: "currentColor", clipPath: "url(#a)", children: [_jsx("path", { d: "M6.293 11.955a.5.5 0 0 0 .536-.079l4-3.5a.5.5 0 0 0 0-.752l-4-3.5A.5.5 0 0 0 6 4.5V7H1a1 1 0 0 0 0 2h5v2.5a.5.5 0 0 0 .293.455" }), _jsx("path", { d: "M14 0H2a2 2 0 0 0-2 2v2a1 1 0 0 0 2 0V2h12v12H2v-2a1 1 0 1 0-2 0v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/Mumble.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const Mumble: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/Mumble.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const Mumble = (props) => (_jsxs(IconBase, { label: "Mumble", ...props, children: [_jsxs("g", { fill: "currentColor", clipPath: "url(#a)", children: [_jsx("path", { d: "M9.793 10H6.207a.5.5 0 0 0-.353.854l1.792 1.792a.5.5 0 0 0 .708 0l1.792-1.793A.5.5 0 0 0 9.793 10" }), _jsx("path", { d: "M14.807 5.371A2.96 2.96 0 0 0 16 3a3 3 0 0 0-3-3 2.96 2.96 0 0 0-2.029.806 5.87 5.87 0 0 0-5.942 0A2.96 2.96 0 0 0 3 0a3 3 0 0 0-3 3 2.96 2.96 0 0 0 1.193 2.371C.015 7.867-.64 11.018.935 13.298 2.173 15.09 4.55 16 8 16s5.827-.91 7.065-2.702c1.575-2.28.92-5.43-.258-7.927m-1.387 6.79C12.577 13.381 10.754 14 8 14s-4.577-.62-5.42-1.839c-1.05-1.522-.417-3.836.055-5.079C3.085 5.89 4.808 2 8 2s4.914 3.89 5.365 5.082c.472 1.243 1.106 3.557.055 5.08" }), _jsx("path", { d: "M6.67 6.617c-.114-.442-.38-1.05-1.164-1.05-1.081 0-1.987 1.596-1.997 2.306s.473 1.483 1.07 1.483 1.123-.535 1.658-1.297.546-.999.432-1.442m3.825-1.05c-.784 0-1.05.608-1.163 1.05-.114.443-.103.68.432 1.442s1.06 1.297 1.658 1.297 1.08-.772 1.07-1.483c-.01-.71-.916-2.306-1.997-2.306" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/Profile.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const Profile: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/Profile.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const Profile = (props) => (_jsx(IconBase, { label: "Profile", ...props, children: _jsx("path", { fill: "currentColor", d: "M8 7a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m0 1.5a7.01 7.01 0 0 0-7 7 .5.5 0 0 0 .5.5h13a.5.5 0 0 0 .5-.5 7.01 7.01 0 0 0-7-7" }) }));

package/dist/components/icons/generated/ReplyFilled.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const ReplyFilled: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/ReplyFilled.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const ReplyFilled = (props) => (_jsxs(IconBase, { label: "ReplyFilled", ...props, children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { fill: "currentColor", d: "M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7c.4 0 .8 0 1.1-.1L14 16v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/ReplyOutline.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const ReplyOutline: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/ReplyOutline.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const ReplyOutline = (props) => (_jsxs(IconBase, { label: "ReplyOutline", ...props, children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { fill: "currentColor", d: "M8 0C3.6 0 0 3.1 0 7s3.6 7 8 7h.6l5.4 2v-4.4c1.2-1.2 2-2.8 2-4.6 0-3.9-3.6-7-8-7m4 10.8v2.3L8.9 12H8c-3.3 0-6-2.2-6-5s2.7-5 6-5 6 2.2 6 5c0 2.2-2 3.8-2 3.8" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/Repost.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const Repost: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/Repost.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const Repost = (props) => (_jsxs(IconBase, { label: "Repost", ...props, children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { fill: "currentColor", d: "M14.413.389a.5.5 0 0 0-.849-.235l-1.488 1.559a7.494 7.494 0 1 0 3.062 8.595 1 1 0 0 0-1.9-.616 5.513 5.513 0 1 1-2.573-6.5l-1.6 1.68a.5.5 0 0 0 .27.837L15.157 6.8a.48.48 0 0 0 .31-.04.5.5 0 0 0 .27-.563z" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/Send.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const Send: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/Send.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const Send = (props) => (_jsxs(IconBase, { label: "Send", ...props, children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { fill: "currentColor", d: "M15.707.293a1 1 0 0 0-1.043-.234l-14 5a.999.999 0 0 0-.111 1.835l4.586 2.292L10.999 5l-4.186 5.862 2.292 4.586a1.004 1.004 0 0 0 1.838-.112l5-14c.129-.363.037-.77-.236-1.043" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/Settings.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const Settings: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/Settings.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const Settings = (props) => (_jsxs(IconBase, { label: "Settings", ...props, children: [_jsx("g", { clipPath: "url(#a)", children: _jsx("path", { fill: "currentColor", d: "M15.135 6.784a2 2 0 0 1-1.23-2.969c.322-.536.225-.998-.094-1.316l-.31-.31c-.318-.318-.78-.415-1.316-.094A2 2 0 0 1 9.216.865C9.065.258 8.669 0 8.219 0h-.438c-.45 0-.845.258-.997.865a2 2 0 0 1-2.969 1.23c-.536-.322-.999-.225-1.317.093l-.31.31c-.318.318-.415.781-.093 1.317a2 2 0 0 1-1.23 2.969C.26 6.935 0 7.33 0 7.781v.438c0 .45.258.845.865.997a2 2 0 0 1 1.23 2.969c-.322.536-.225.998.094 1.316l.31.31c.319.319.782.415 1.316.094a2 2 0 0 1 2.969 1.23c.151.607.547.865.997.865h.438c.45 0 .845-.258.997-.865a2 2 0 0 1 2.969-1.23c.535.321.997.225 1.316-.094l.31-.31c.318-.318.415-.78.094-1.316a2 2 0 0 1 1.23-2.969c.607-.151.865-.547.865-.997v-.438c0-.451-.26-.846-.865-.997M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6" }) }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/Share.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const Share: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/Share.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const Share = (props) => (_jsx(IconBase, { label: "Share", ...props, children: _jsx("path", { fill: "currentColor", d: "M12 6c1.654 0 3-1.346 3-3s-1.346-3-3-3-3 1.346-3 3c0 .224.029.44.075.65L5.856 5.661A2.97 2.97 0 0 0 4 5C2.346 5 1 6.346 1 8s1.346 3 3 3c.704 0 1.344-.254 1.856-.661l3.219 2.012A3 3 0 0 0 9 13c0 1.654 1.346 3 3 3s3-1.346 3-3-1.346-3-3-3c-.704 0-1.343.254-1.856.661L6.925 8.649C6.971 8.44 7 8.223 7 8s-.029-.44-.075-.649l3.22-2.012A2.97 2.97 0 0 0 12 6m0-4a1.001 1.001 0 0 1 0 2 1.001 1.001 0 0 1 0-2M4 9a1.001 1.001 0 0 1 0-2 1.001 1.001 0 0 1 0 2m8 3a1.001 1.001 0 0 1 0 2 1.001 1.001 0 0 1 0-2" }) }));

package/dist/components/icons/generated/Time.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const Time: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/Time.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const Time = (props) => (_jsxs(IconBase, { label: "Time", ...props, children: [_jsxs("g", { fill: "currentColor", clipPath: "url(#a)", children: [_jsx("path", { d: "M8 0a8 8 0 1 0 8 8 8.024 8.024 0 0 0-8-8m0 14a6 6 0 1 1 6-6 6.02 6.02 0 0 1-6 6" }), _jsx("path", { d: "M11.5 7H9V4.5a1 1 0 1 0-2 0V8a1 1 0 0 0 1 1h3.5a1 1 0 1 0 0-2" })] }), _jsx("defs", { children: _jsx("clipPath", { id: "a", children: _jsx("path", { fill: "#fff", d: "M0 0h16v16H0z" }) }) })] }));

package/dist/components/icons/generated/Upload.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export declare const Upload: (props: React.ComponentProps<typeof IconBase>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/generated/Upload.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { IconBase } from "../IconBase";
+export const Upload = (props) => (_jsxs(IconBase, { label: "Upload", ...props, children: [_jsx("path", { fill: "currentColor", d: "M14 10a1 1 0 0 0-1 1v2H3v-2a1 1 0 0 0-2 0v2a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-2a1 1 0 0 0-1-1" }), _jsx("path", { fill: "currentColor", d: "M4.707 6.707 7 4.414V10a1 1 0 1 0 2 0V4.414l2.293 2.293a1 1 0 0 0 1.414-1.414l-4-4a1 1 0 0 0-1.414 0l-4 4a1 1 0 0 0 1.414 1.414" })] }));

package/dist/components/icons/generated/index.d.ts

@@ -0,0 +1,24 @@
+export * from "./ArrowDown";
+export * from "./ArrowLeft";
+export * from "./ArrowRight";
+export * from "./ArrowUp";
+export * from "./Calendar";
+export * from "./Cancel";
+export * from "./Checkmark";
+export * from "./Edit";
+export * from "./Eye";
+export * from "./Fullscreen";
+export * from "./HeartFilled";
+export * from "./HeartOutline";
+export * from "./Location";
+export * from "./LogOut";
+export * from "./Mumble";
+export * from "./Profile";
+export * from "./ReplyFilled";
+export * from "./ReplyOutline";
+export * from "./Repost";
+export * from "./Send";
+export * from "./Settings";
+export * from "./Share";
+export * from "./Time";
+export * from "./Upload";

package/dist/components/icons/generated/index.js

@@ -0,0 +1,24 @@
+export * from "./ArrowDown";
+export * from "./ArrowLeft";
+export * from "./ArrowRight";
+export * from "./ArrowUp";
+export * from "./Calendar";
+export * from "./Cancel";
+export * from "./Checkmark";
+export * from "./Edit";
+export * from "./Eye";
+export * from "./Fullscreen";
+export * from "./HeartFilled";
+export * from "./HeartOutline";
+export * from "./Location";
+export * from "./LogOut";
+export * from "./Mumble";
+export * from "./Profile";
+export * from "./ReplyFilled";
+export * from "./ReplyOutline";
+export * from "./Repost";
+export * from "./Send";
+export * from "./Settings";
+export * from "./Share";
+export * from "./Time";
+export * from "./Upload";

package/dist/components/index.d.ts

@@ -0,0 +1,25 @@
+export * from "./avatar/Avatar";
+export * from "./branding/BrandingGallery";
+export * from "./button/Button";
+export * from "./color/ColorDoc";
+export * from "./file-upload/FileUpload";
+export * from "./form/Form";
+export * from "./icon-button/IconButton";
+export * from "./icons/IconBase";
+export * from "./input/Input";
+export * from "./like-toggle/LikeToggle";
+export * from "./modal/Modal";
+export * from "./navi-button/NaviButton";
+export * from "./navi-user-button/NaviUserButton";
+export * from "./round-button/RoundButton";
+export * from "./tabs/TabItem";
+export * from "./tabs/Tabs";
+export * from "./text-link/TextLink";
+export * from "./textarea/Textarea";
+export * from "./timed-button/TimedButton";
+export * from "./toggle/Toggle";
+export * from "./typography/Heading";
+export * from "./typography/Label";
+export * from "./typography/Paragraph";
+export * from "./typography/Placeholder";
+export * from "./typography/ValidationMessage";

package/dist/components/index.js

@@ -0,0 +1,25 @@
+export * from "./avatar/Avatar";
+export * from "./branding/BrandingGallery";
+export * from "./button/Button";
+export * from "./color/ColorDoc";
+export * from "./file-upload/FileUpload";
+export * from "./form/Form";
+export * from "./icon-button/IconButton";
+export * from "./icons/IconBase";
+export * from "./input/Input";
+export * from "./like-toggle/LikeToggle";
+export * from "./modal/Modal";
+export * from "./navi-button/NaviButton";
+export * from "./navi-user-button/NaviUserButton";
+export * from "./round-button/RoundButton";
+export * from "./tabs/TabItem";
+export * from "./tabs/Tabs";
+export * from "./text-link/TextLink";
+export * from "./textarea/Textarea";
+export * from "./timed-button/TimedButton";
+export * from "./toggle/Toggle";
+export * from "./typography/Heading";
+export * from "./typography/Label";
+export * from "./typography/Paragraph";
+export * from "./typography/Placeholder";
+export * from "./typography/ValidationMessage";

package/dist/components/input/Input.d.ts

@@ -0,0 +1,61 @@
+import React from "react";
+import { type VariantProps } from "tailwind-variants";
+import type { IconBaseProps } from "../icons/IconBase";
+declare const inputStyles: import("tailwind-variants").TVReturnType<{
+    hasIcon: {
+        true: {
+            control: string[];
+        };
+        false: {
+            control: string[];
+        };
+    };
+}, {
+    base: string[];
+    controlContainer: string[];
+    control: string[];
+    icon: string[];
+    message: string[];
+}, undefined, {
+    hasIcon: {
+        true: {
+            control: string[];
+        };
+        false: {
+            control: string[];
+        };
+    };
+}, {
+    base: string[];
+    controlContainer: string[];
+    control: string[];
+    icon: string[];
+    message: string[];
+}, import("tailwind-variants").TVReturnType<{
+    hasIcon: {
+        true: {
+            control: string[];
+        };
+        false: {
+            control: string[];
+        };
+    };
+}, {
+    base: string[];
+    controlContainer: string[];
+    control: string[];
+    icon: string[];
+    message: string[];
+}, undefined, unknown, unknown, undefined>>;
+type InputVariants = VariantProps<typeof inputStyles>;
+interface InputProps extends InputVariants {
+    label: string;
+    name: string;
+    placeholder: string;
+    type?: string;
+    isRequired?: boolean;
+    children?: React.ReactElement<IconBaseProps>;
+    onChange: (value: string) => void;
+}
+export declare const Input: ({ type, isRequired, ...props }: InputProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/input/Input.js

@@ -0,0 +1,47 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as RadixForm from "@radix-ui/react-form";
+import React, { useState } from "react";
+import { tv } from "tailwind-variants";
+import { Label } from "../typography/Label";
+import { labelStyles, placeholderStyles } from "../typography/styles";
+import { ValidationMessage } from "../typography/ValidationMessage";
+const inputStyles = tv({
+    slots: {
+        base: ["flex", "flex-col", "gap-1"],
+        controlContainer: ["relative", "inline-block"],
+        control: [
+            "w-full",
+            "ring",
+            "focus:ring-2",
+            "ring-slate-200",
+            "hover:ring-violet-600",
+            "focus-visible:ring-violet-600",
+            "focus-within:ring-violet-600",
+            "focus-visible:outline-none",
+            "bg-slate-50",
+            "rounded-lg",
+            "p-4",
+            "text-slate-700",
+            "transition",
+            "duration-300",
+            "ease-in-out",
+        ],
+        icon: ["absolute", "w-4", "h-4", "right-4", "top-4.5"],
+        message: ["text-error"],
+    },
+    variants: {
+        hasIcon: {
+            true: { control: ["pr-10"] },
+            false: { control: ["pr-4"] },
+        },
+    },
+});
+export const Input = ({ type = "text", isRequired = false, ...props }) => {
+    const { base, controlContainer, control, message, icon } = inputStyles({
+        hasIcon: !!props.children,
+        ...props,
+    });
+    const [value, setValue] = useState("");
+    return (_jsxs(RadixForm.Field, { name: props.name, className: base(props), children: [_jsx(RadixForm.Label, { children: _jsx(Label, { size: "md", children: props.label }) }), _jsxs("div", { className: controlContainer(props), children: [_jsx(RadixForm.Control, { asChild: true, children: _jsx("input", { className: `${control(props)} ${labelStyles({ size: "md" })} ${placeholderStyles()}`, type: type, required: isRequired, placeholder: props.placeholder, onChange: (e) => setValue(e.target.value), onBlur: () => props.onChange(value) }) }), props.children &&
+                        React.cloneElement(props.children, { className: icon(props) })] }), _jsxs("div", { className: message(props), children: [isRequired && (_jsx(RadixForm.Message, { match: "valueMissing", children: _jsx(ValidationMessage, { children: `${props.name} is required` }) })), _jsx(RadixForm.Message, { match: "typeMismatch", children: _jsx(ValidationMessage, { children: `${props.name} is invalid` }) })] })] }));
+};

package/dist/components/like-toggle/LikeToggle.d.ts

@@ -0,0 +1,97 @@
+import { type VariantProps } from "tailwind-variants";
+declare const toggleStyles: import("tailwind-variants").TVReturnType<{
+    pressed: {
+        false: {
+            base: string[];
+            icon: string[];
+            label: string[];
+        };
+        true: {
+            base: never[];
+            icon: string[];
+            label: string[];
+        };
+    };
+    hasLikes: {
+        true: {
+            base: string[];
+            icon: string[];
+            label: string[];
+        };
+        false: string;
+    };
+    animating: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+    icon: string[];
+    label: never[];
+}, undefined, {
+    pressed: {
+        false: {
+            base: string[];
+            icon: string[];
+            label: string[];
+        };
+        true: {
+            base: never[];
+            icon: string[];
+            label: string[];
+        };
+    };
+    hasLikes: {
+        true: {
+            base: string[];
+            icon: string[];
+            label: string[];
+        };
+        false: string;
+    };
+    animating: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+    icon: string[];
+    label: never[];
+}, import("tailwind-variants").TVReturnType<{
+    pressed: {
+        false: {
+            base: string[];
+            icon: string[];
+            label: string[];
+        };
+        true: {
+            base: never[];
+            icon: string[];
+            label: string[];
+        };
+    };
+    hasLikes: {
+        true: {
+            base: string[];
+            icon: string[];
+            label: string[];
+        };
+        false: string;
+    };
+    animating: {
+        true: {};
+        false: {};
+    };
+}, {
+    base: string[];
+    icon: string[];
+    label: never[];
+}, undefined, unknown, unknown, undefined>>;
+type LikeToggleVariants = VariantProps<typeof toggleStyles>;
+interface LikeToggleProps extends LikeToggleVariants {
+    pressed?: boolean;
+    likes?: number;
+    onLikeChange: (liked: boolean) => void;
+}
+export declare const LikeToggle: ({ pressed, likes, onLikeChange, }: LikeToggleProps) => import("react/jsx-runtime").JSX.Element;
+export {};