npm - klip-components - Versions diffs - 0.7.0 → 0.11.0 - Mend

klip-components 0.7.0 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/dist/index.d.ts +226 -1
package/dist/klip-components.cjs.js +1 -1
package/dist/klip-components.css +1 -1
package/dist/klip-components.es.js +240 -14
package/dist/klip-components.umd.js +1 -1
package/package.json +1 -1

package/dist/index.d.ts CHANGED Viewed

@@ -1,6 +1,14 @@
 import { ClassValue } from 'clsx';
 import { clsx } from 'clsx';
 import { default as default_2 } from 'react';
+import { JSX } from 'react/jsx-runtime';
+export declare interface BorderRadius {
+    sm: string;
+    base: string;
+    lg: string;
+    full: string;
+}
 /**
  * A flexible and reusable Button component with multiple variants, sizes, and styling options.
@@ -10,6 +18,7 @@ import { default as default_2 } from 'react';
  * @param {ButtonProps} props - The props for the Button component
  * @param {('primary'|'secondary'|'success'|'danger')} [props.variant='primary'] - Visual style variant
  * @param {('sm'|'md'|'lg')} [props.size='md'] - Button size
+ * @param {('rectangle'|'square'|'circle')} [props.shape='rectangle'] - Button shape
  * @param {boolean} [props.block=false] - Whether button should be full width
  * @param {string} [props.className=''] - Additional CSS classes to apply
  * @param {React.ReactNode} props.children - Content to render inside the button
@@ -44,6 +53,32 @@ import { default as default_2 } from 'react';
  * >
  *   Save Changes
  * </Button>
+ *
+ * @example
+ * // Loading button
+ * <Button loading>
+ *   Processing...
+ * </Button>
+ *
+ * @example
+ * // Square button with icon
+ * <Button
+ *   variant="primary"
+ *   shape="square"
+ *   startIcon={<Icon />}
+ * >
+ *   S
+ * </Button>
+ *
+ * @example
+ * // Circular button
+ * <Button
+ *   variant="info"
+ *   shape="circle"
+ *   size="lg"
+ * >
+ *   +
+ * </Button>
  */
 export declare const Button: default_2.FC<ButtonProps>;
@@ -52,10 +87,14 @@ export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTML
     variant?: ButtonVariant;
     /** Size of the button */
     size?: ButtonSize;
+    /** Shape of the button */
+    shape?: ButtonShape;
     /** Icon to display at the start of the button */
     startIcon?: default_2.ReactNode;
     /** Icon to display at the end of the button */
     endIcon?: default_2.ReactNode;
+    /** Whether the button is in a loading state */
+    loading?: boolean;
     /** Content to be rendered inside the button */
     children: default_2.ReactNode;
 }
@@ -77,14 +116,56 @@ export declare interface ButtonSelectProps {
 export declare type ButtonSelectValue = string | string[];
+declare type ButtonShape = 'rectangle' | 'pill' | 'square' | 'circle';
 declare type ButtonSize = 'sm' | 'md' | 'lg';
 /**
- * Props interface for the Button component.
+ * Props interface for theexport const Button: React.FC<ButtonProps> = ({
+ variant = 'primary',
+ size = 'md',
+ shape = 'rectangle',
+ startIcon,
+ endIcon,
+ loading = false,
+ className = '',
+ children,
+ disabled,
+ ...props
+ }) => {
+ return (
+ <button
+ className={cn(
+ 'btn',
+ `btn-${variant}`,
+ `btn-${size}`,
+ `btn-${shape}`,
+ { 'btn-loading': loading },
+ className
+ )}
+ disabled={disabled || loading}
+ {...props}
+ >
+ {loading ? (
+ <Spinner />
+ ) : (
+ <>
+ {startIcon && <span className="btn-icon-start">{startIcon}</span>}
+ {children}
+ {endIcon && <span className="btn-icon-end">{endIcon}</span>}
+ </>
+ )}
+ </button>
+ );
+ };
  * Extends standard HTML button attributes with additional styling options.
  */
 declare type ButtonVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'link' | 'outline' | 'ghost' | 'icon';
+export declare const ChevronLeft: React.FC<Props>;
+export declare const ChevronRight: React.FC<Props_2>;
 export { ClassValue }
 export { clsx }
@@ -107,6 +188,35 @@ export { clsx }
  */
 export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Theme system type definitions for klip-components
+ * Provides type safety for color palettes and design tokens
+ */
+export declare interface ColorPalette {
+    /** Primary color variants */
+    primary: {
+        main: string;
+        hover: string;
+    };
+    /** Secondary color variants */
+    secondary: {
+        main: string;
+        hover: string;
+    };
+    /** Semantic colors */
+    semantic: {
+        success: string;
+        danger: string;
+        warning: string;
+        info: string;
+        light: string;
+        dark: string;
+        link: string;
+    };
+}
+export declare const DOTS = "...";
 export declare type HtmlInput = Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'prefix' | 'suffix' | 'type' | 'onChange'>;
 /**
@@ -163,6 +273,17 @@ declare type HtmlToggle = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'typ
  *     />
  *   );
  * };
+ *
+ * @example
+ * // Loading input
+ * const LoadingExample = () => (
+ *   <Input
+ *     label="Processing"
+ *     placeholder="Please wait..."
+ *     loading={true}
+ *     disabled={true}
+ *   />
+ * );
  */
 export declare const Input: default_2.FC<InputProps>;
@@ -187,6 +308,8 @@ export declare interface InputProps extends HtmlInput {
     helperTextClass?: default_2.HTMLAttributes<HTMLInputElement>['className'];
     /** Whether the input has an error */
     hasError?: boolean;
+    /** Whether the input is in a loading state */
+    loading?: boolean;
 }
 export declare type InputVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'ghost';
@@ -209,6 +332,91 @@ export declare type InputVariant = 'primary' | 'secondary' | 'success' | 'danger
  */
 export declare function mergeClasses(...classes: string[]): string;
+export declare const Pagination: default_2.FC<PaginationProps>;
+export declare interface PaginationProps {
+    /** Current active page (1-based) */
+    currentPage: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Callback function called when page changes */
+    onPageChange: (page: number) => void;
+    /** Number of pages to show before and after current page */
+    siblingCount?: number;
+    /** Whether to hide previous button */
+    hidePrevButton?: boolean;
+    /** Whether to hide next button */
+    hideNextButton?: boolean;
+    /** Size of the pagination buttons */
+    size?: 'sm' | 'md' | 'lg';
+    /** Variant of the pagination buttons */
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+    /** Additional CSS class */
+    className?: string;
+    /** Whether pagination buttons should be disabled */
+    disabled?: boolean;
+    /** Enable mobile view with only arrows and page indicator */
+    mobile?: boolean;
+}
+declare interface Props {
+    width?: number;
+    height?: number;
+}
+declare interface Props_2 {
+    width?: number;
+    height?: number;
+}
+export declare interface Shadows {
+    sm: string;
+    md: string;
+    lg: string;
+}
+export declare interface SpacingScale {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+}
+export declare const Spinner: ({ color, size }: SpinnerProps) => JSX.Element;
+declare interface SpinnerProps {
+    color?: string;
+    size?: number;
+}
+/**
+ * Complete theme configuration
+ */
+export declare interface Theme {
+    colors: ColorPalette;
+    spacing: SpacingScale;
+    borderRadius: BorderRadius;
+    typography: Typography;
+    shadows: Shadows;
+}
+/**
+ * Theme mode options
+ */
+export declare type ThemeMode = 'light' | 'dark' | 'auto';
+/**
+ * Partial theme for customization - allows users to override only specific parts
+ */
+export declare type ThemeOverride = {
+    colors?: Partial<ColorPalette>;
+    spacing?: Partial<SpacingScale>;
+    borderRadius?: Partial<BorderRadius>;
+    typography?: Partial<Typography>;
+    shadows?: Partial<Shadows>;
+};
 /**
  * A customizable toggle component.
  *
@@ -254,4 +462,21 @@ export declare interface ToggleProps extends HtmlToggle {
     labelPosition?: 'left' | 'right' | 'top' | 'bottom';
 }
+export declare interface Typography {
+    fontFamily: string;
+    fontSize: {
+        sm: string;
+        base: string;
+        lg: string;
+    };
+}
+export declare const usePagination: ({ currentPage, totalPages, siblingCount }: UsePaginationProps) => (string | number)[];
+declare interface UsePaginationProps {
+    currentPage: number;
+    totalPages: number;
+    siblingCount?: number;
+}
 export { }

package/dist/klip-components.cjs.js CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";var e=Object.defineProperty,r=Object.defineProperties,t=Object.getOwnPropertyDescriptors,s=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,n=(r,t,s)=>t in r?e(r,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):r[t]=s,i=(e,r)=>{for(var t in r\|\|(r={}))a.call(r,t)&&n(e,t,r[t]);if(s)for(var t of s(r))l.call(r,t)&&n(e,t,r[t]);return e},c=(e,r)=>{var t={};for(var n in e)a.call(e,n)&&r.indexOf(n)<0&&(t[n]=e[n]);if(null!=e&&s)for(var n of s(e))r.indexOf(n)<0&&l.call(e,n)&&(t[n]=e[n]);return t};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),p=require("react");function u(e){var r,t,s="";if("string"==typeof e\|\|"number"==typeof e)s+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(r=0;r<a;r++)e[r]&&(t=u(e[r]))&&(s&&(s+=" "),s+=t)}else for(t in e)e[t]&&(s&&(s+=" "),s+=t);return s}function d(){for(var e,r,t=0,s="",a=arguments.length;t<a;t++)(e=arguments[t])&&(r=u(e))&&(s&&(s+=" "),s+=r);return s}function h(...e){const r=e.join(" ").split(" ").filter(Boolean);return[...new Set(r)].join(" ")}function f(...e){return h(d(~~...~~e))}~~exports~~.~~Button~~=e=>{var s,a=e,{variant:l="primary",size:n="md",~~startIcon~~:p,endIcon:u,className:d="",children:h}=a,x=c(a,["variant","size","startIcon","endIcon","className","children"]);return o.~~jsxs~~("button",(s=i({className:f("~~rounded~~ btn",`btn-${l}`,`btn-${n}`,d)},x),r(s,t({children:[p&&o.jsx("span",{className:"btn-icon-start",children:p}),h,u&&o.jsx("span",{className:"btn-icon-end",children:u})]}))))},exports.ButtonSelect=({options:e,value:r,onChange:t,disabled:s=!1,multiple:a=!1})=>{const l=e=>Array.isArray(r)?r.includes(e):e===r;return o.jsx("div",{className:"button-select "+(s?"disabled":""),children:e.map(({value:e,child:n})=>o.jsx("button",{className:"button-select-option "+(l(e)?"selected":""),onClick:()=>(e=>{if(s)return;if(!a)return void t(e);const l=Array.isArray(r)?r:[],n=l.includes(e)?l.filter(r=>r!==e):[...l,e];t(n)})(e),disabled:s,type:"button",children:n},e))})},exports.Input=e=>{var r=e,{variant:t="primary",type:s="text",label:a,prefix:l,suffix:n,helperText:u,className:d,labelClass:h,helperTextClass:x,onChange:b,id:m,hasError:v}=r,y=c(r,["variant","type","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError"]);const j=p.useId(),g=m\|\|`input-${j}`,N=f("form-field",{"has-prefix":!!l,"has-suffix":!!n},{[`variant-${t}`]:t},d);return o.jsxs("article",{className:"input-container",children:[a&&o.jsx("label",{htmlFor:g,className:f("input-label",h),children:a}),o.jsxs("section",{className:"input-wrapper",children:[l&&o.jsx("article",{className:"input-prefix",children:l}),o.jsx("input",i({id:g,type:s,className:N,onChange:e=>null==b?void 0:b(e.target.value)},y)),n&&o.jsx("article",{className:"input-suffix",children:n})]}),u&&o.jsx("small",{className:f("input-helper-text",x),style:{color:v?"var(--color-danger)":"inherit"},children:u})]})},exports.Toggle=e=>{var r=e,{color:t="var(--color-primary)",size:s="3.75rem",checked:a=!1,onChange:l,label:n,labelPosition:p="right",className:u}=r,d=c(r,["color","size","checked","onChange","label","labelPosition","className"]);return o.jsxs("label",{className:f("switch-container",p,u),children:[o.jsxs("div",{className:"toggle-switch",style:{"--switch-size":s,"--switch-color":t},children:[o.jsx("input",i({type:"checkbox",role:"switch",checked:a,onChange:e=>null==l?void 0:l(e.target.checked)},d)),o.jsx("span",{className:"slider"})]}),n&&o.jsx("span",{className:"switch-label",children:n})]})},exports.clsx=d,exports.cn=f,exports.mergeClasses=h;
1	+ "use strict";var e=Object.defineProperty,r=Object.defineProperties,a=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,t=(r,a,n)=>a in r?e(r,a,{enumerable:!0,configurable:!0,writable:!0,value:n}):r[a]=n,l=(e,r)=>{for(var a in r\|\|(r={}))s.call(r,a)&&t(e,a,r[a]);if(n)for(var a of n(r))i.call(r,a)&&t(e,a,r[a]);return e},o=(e,r)=>{var a={};for(var t in e)s.call(e,t)&&r.indexOf(t)<0&&(a[t]=e[t]);if(null!=e&&n)for(var t of n(e))r.indexOf(t)<0&&i.call(e,t)&&(a[t]=e[t]);return a};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),d=require("react");function p(e){var r,a,n="";if("string"==typeof e\|\|"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var s=e.length;for(r=0;r<s;r++)e[r]&&(a=p(e[r]))&&(n&&(n+=" "),n+=a)}else for(a in e)e[a]&&(n&&(n+=" "),n+=a);return n}function h(){for(var e,r,a=0,n="",s=arguments.length;a<s;a++)(e=arguments[a])&&(r=p(e))&&(n&&(n+=" "),n+=r);return n}function u(...e){const r=e.join(" ").split(" ").filter(Boolean);return[...new Set(r)].join(" ")}function g(...e){return u(h(...e))}const x=({width:e=24,height:r=24})=>c.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:r,viewBox:"0 0 24 24",children:c.jsx("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m15 6l-6 6l6 6"})}),f=({width:e=24,height:r=24})=>c.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:r,viewBox:"0 0 24 24",children:c.jsx("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m9 6l6 6l-6 6"})}),m=({color:e="currentColor",size:r=24})=>c.jsxs("svg",{width:r,height:r,stroke:e,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:[c.jsx("style",{children:"\n .spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}\n .spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}\n @keyframes spinner_zKoa{100%{transform:rotate(360deg)}}\n @keyframes spinner_YpZS{\n 0%{stroke-dasharray:0 150;stroke-dashoffset:0}\n 47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}\n 95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}\n }\n "}),c.jsx("g",{className:"spinner_V8m1",children:c.jsx("circle",{cx:"12",cy:"12",r:"9.5",fill:"none",strokeWidth:"3"})})]}),b=e=>{var n,s,i=e,{variant:t="primary",size:d="md",shape:p="rectangle",startIcon:h,endIcon:u,className:x="",children:f,loading:b,disabled:j}=i,v=o(i,["variant","size","shape","startIcon","endIcon","className","children","loading","disabled"]);return c.jsx("button",(n=l({className:g("btn",`btn-${t}`,`btn-${d}`,`btn-${p}`,{"btn-loading":b},x),disabled:j\|\|b},v),s={children:b?c.jsx(m,{}):c.jsxs(c.Fragment,{children:[h&&c.jsx("span",{className:"btn-icon-start",children:h}),f,u&&c.jsx("span",{className:"btn-icon-end",children:u})]})},r(n,a(s))))},j="...",v=({currentPage:e,totalPages:r,siblingCount:a=1})=>d.useMemo(()=>{if(r<=7)return Array.from({length:r},(e,r)=>r+1);const n=Math.max(e-a,1),s=Math.min(e+a,r),i=n>2,t=s<r-1;if(!i&&!t)return Array.from({length:r},(e,r)=>r+1);if(!i&&t){const e=3+2a;return[...Array.from({length:e},(e,r)=>r+1),j,r]}if(i&&!t){const e=3+2a;return[1,j,...Array.from({length:e},(a,n)=>r-e+n+1)]}return[1,j,...Array.from({length:s-n+1},(e,r)=>n+r),j,r]},[e,r,a]);exports.Button=b,exports.ButtonSelect=({options:e,value:r,onChange:a,disabled:n=!1,multiple:s=!1})=>{const i=e=>Array.isArray(r)?r.includes(e):e===r;return c.jsx("div",{className:"button-select "+(n?"disabled":""),children:e.map(({value:e,child:t})=>c.jsx("button",{className:"button-select-option "+(i(e)?"selected":""),onClick:()=>(e=>{if(n)return;if(!s)return void a(e);const i=Array.isArray(r)?r:[],t=i.includes(e)?i.filter(r=>r!==e):[...i,e];a(t)})(e),disabled:n,type:"button",children:t},e))})},exports.ChevronLeft=x,exports.ChevronRight=f,exports.DOTS=j,exports.Input=e=>{var r=e,{variant:a="primary",type:n="text",label:s,prefix:i,suffix:t,helperText:p,className:h,labelClass:u,helperTextClass:x,onChange:f,id:b,hasError:j,loading:v=!1,disabled:y}=r,w=o(r,["variant","type","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled"]);const k=d.useId(),N=b\|\|`input-${k}`,C=g("form-field",{"has-prefix":!!i,"has-suffix":!!t},{[`variant-${a}`]:a},{loading:v},h);return c.jsxs("article",{className:"input-container",children:[s&&c.jsx("label",{htmlFor:N,className:g("input-label",u),children:s}),c.jsxs("section",{className:g("input-wrapper",{loading:v}),children:[i&&c.jsx("article",{className:"input-prefix",children:i}),c.jsx("input",l({id:N,type:n,className:C,onChange:e=>null==f?void 0:f(e.target.value),disabled:y\|\|v},w)),v?c.jsx("article",{className:"input-suffix",children:c.jsx(m,{})}):t&&c.jsx("article",{className:"input-suffix",children:t})]}),p&&c.jsx("small",{className:g("input-helper-text",x),style:{color:j?"var(--color-danger)":"inherit"},children:p})]})},exports.Pagination=({currentPage:e,totalPages:r,onPageChange:a,siblingCount:n=1,hidePrevButton:s=!1,hideNextButton:i=!1,size:t="md",variant:l="secondary",className:o="",disabled:d=!1,mobile:p=!1})=>{const h=v({currentPage:e,totalPages:r,siblingCount:n});if(0===e\|\|0===r)return null;const u=()=>{e<r&&!d&&a(e+1)},m=()=>{e>1&&!d&&a(e-1)},y=h[h.length-1];return p?c.jsxs("article",{className:g("pagination","pagination--mobile",o),"aria-label":"pagination navigation",children:[!s&&c.jsx(b,{variant:l,size:t,onClick:m,disabled:1===e\|\|d,"aria-label":"Go to previous page",shape:"square",children:c.jsx(x,{})}),c.jsxs("span",{className:"pagination__page-indicator","aria-live":"polite",children:[e," / ",r," pages"]}),!i&&c.jsx(b,{variant:l,size:t,onClick:u,disabled:e===y\|\|d,"aria-label":"Go to next page",shape:"square",children:c.jsx(f,{})})]}):c.jsxs("article",{className:g("pagination",o),"aria-label":"pagination navigation",children:[!s&&c.jsx(b,{variant:l,size:t,onClick:m,disabled:1===e\|\|d,"aria-label":"Go to previous page",shape:"square",children:c.jsx(x,{})}),h.map((n,s)=>n===j?c.jsx(b,{variant:l,size:t,"aria-label":"More pages",shape:"square",disabled:d,children:"…"},s):c.jsx(b,{variant:n===e?"primary":l,size:t,onClick:()=>!d&&a(n),disabled:d\|\|1===r,"aria-label":n===e?`Current page, page ${n}`:`Go to page ${n}`,"aria-current":n===e?"page":void 0,shape:"square",children:n},s)),!i&&c.jsx(b,{variant:l,size:t,onClick:u,disabled:e===y\|\|d,"aria-label":"Go to next page",shape:"square",children:c.jsx(f,{})})]})},exports.Spinner=m,exports.Toggle=e=>{var r=e,{color:a="var(--color-primary)",size:n="3.75rem",checked:s=!1,onChange:i,label:t,labelPosition:d="right",className:p}=r,h=o(r,["color","size","checked","onChange","label","labelPosition","className"]);return c.jsxs("label",{className:g("switch-container",d,p),children:[c.jsxs("div",{className:"toggle-switch",style:{"--switch-size":n,"--switch-color":a},children:[c.jsx("input",l({type:"checkbox",role:"switch",checked:s,onChange:e=>null==i?void 0:i(e.target.checked)},h)),c.jsx("span",{className:"slider"})]}),t&&c.jsx("span",{className:"switch-label",children:t})]})},exports.clsx=h,exports.cn=g,exports.mergeClasses=u,exports.usePagination=v;