@nlabs/lex
Version:
99 lines (98 loc) • 8.05 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import React from 'react';
const Button = ({ children, disabled = false, onClick, size = 'md', variant = 'primary' })=>{
const baseClasses = 'font-medium rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2';
const variantClasses = {
outline: 'border-2 border-blue-600 text-blue-600 hover:bg-blue-50 focus:ring-blue-500',
primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500',
secondary: 'bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500'
};
const sizeClasses = {
lg: 'px-6 py-3 text-lg',
md: 'px-4 py-2 text-base',
sm: 'px-3 py-1.5 text-sm'
};
const disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer';
const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${disabledClasses}`;
return /*#__PURE__*/ _jsx("button", {
className: classes,
disabled: disabled,
onClick: onClick,
children: children
});
};
const meta = {
argTypes: {
disabled: {
control: {
type: 'boolean'
}
},
size: {
control: {
type: 'select'
},
options: [
'sm',
'md',
'lg'
]
},
variant: {
control: {
type: 'select'
},
options: [
'primary',
'secondary',
'outline'
]
}
},
component: Button,
parameters: {
layout: 'centered'
},
tags: [
'autodocs'
],
title: 'Components/Button'
};
export default meta;
export const Primary = {
args: {
children: 'Primary Button',
variant: 'primary'
}
};
export const Secondary = {
args: {
children: 'Secondary Button',
variant: 'secondary'
}
};
export const Outline = {
args: {
children: 'Outline Button',
variant: 'outline'
}
};
export const Small = {
args: {
children: 'Small Button',
size: 'sm'
}
};
export const Large = {
args: {
children: 'Large Button',
size: 'lg'
}
};
export const Disabled = {
args: {
children: 'Disabled Button',
disabled: true
}
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9CdXR0b24uc3Rvcmllcy50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHR5cGUge01ldGEsIFN0b3J5T2JqfSBmcm9tICdAc3Rvcnlib29rL3JlYWN0JztcblxuaW50ZXJmYWNlIEJ1dHRvblByb3BzIHtcbiAgY2hpbGRyZW46IFJlYWN0LlJlYWN0Tm9kZTtcbiAgZGlzYWJsZWQ/OiBib29sZWFuO1xuICBvbkNsaWNrPzogKCk9PiB2b2lkO1xuICBzaXplPzogJ2xnJyB8ICdtZCcgfCAnc20nO1xuICB2YXJpYW50PzogJ291dGxpbmUnIHwgJ3ByaW1hcnknIHwgJ3NlY29uZGFyeSc7XG59XG5cbmNvbnN0IEJ1dHRvbjogUmVhY3QuRkM8QnV0dG9uUHJvcHM+ID0gKHtcbiAgY2hpbGRyZW4sXG4gIGRpc2FibGVkID0gZmFsc2UsXG4gIG9uQ2xpY2ssXG4gIHNpemUgPSAnbWQnLFxuICB2YXJpYW50ID0gJ3ByaW1hcnknXG59KSA9PiB7XG4gIGNvbnN0IGJhc2VDbGFzc2VzID0gJ2ZvbnQtbWVkaXVtIHJvdW5kZWQtbGcgdHJhbnNpdGlvbi1jb2xvcnMgZHVyYXRpb24tMjAwIGZvY3VzOm91dGxpbmUtbm9uZSBmb2N1czpyaW5nLTIgZm9jdXM6cmluZy1vZmZzZXQtMic7XG5cbiAgY29uc3QgdmFyaWFudENsYXNzZXMgPSB7XG4gICAgb3V0bGluZTogJ2JvcmRlci0yIGJvcmRlci1ibHVlLTYwMCB0ZXh0LWJsdWUtNjAwIGhvdmVyOmJnLWJsdWUtNTAgZm9jdXM6cmluZy1ibHVlLTUwMCcsXG4gICAgcHJpbWFyeTogJ2JnLWJsdWUtNjAwIHRleHQtd2hpdGUgaG92ZXI6YmctYmx1ZS03MDAgZm9jdXM6cmluZy1ibHVlLTUwMCcsXG4gICAgc2Vjb25kYXJ5OiAnYmctZ3JheS02MDAgdGV4dC13aGl0ZSBob3ZlcjpiZy1ncmF5LTcwMCBmb2N1czpyaW5nLWdyYXktNTAwJ1xuICB9O1xuXG4gIGNvbnN0IHNpemVDbGFzc2VzID0ge1xuICAgIGxnOiAncHgtNiBweS0zIHRleHQtbGcnLFxuICAgIG1kOiAncHgtNCBweS0yIHRleHQtYmFzZScsXG4gICAgc206ICdweC0zIHB5LTEuNSB0ZXh0LXNtJ1xuICB9O1xuXG4gIGNvbnN0IGRpc2FibGVkQ2xhc3NlcyA9IGRpc2FibGVkID8gJ29wYWNpdHktNTAgY3Vyc29yLW5vdC1hbGxvd2VkJyA6ICdjdXJzb3ItcG9pbnRlcic7XG5cbiAgY29uc3QgY2xhc3NlcyA9IGAke2Jhc2VDbGFzc2VzfSAke3ZhcmlhbnRDbGFzc2VzW3ZhcmlhbnRdfSAke3NpemVDbGFzc2VzW3NpemVdfSAke2Rpc2FibGVkQ2xhc3Nlc31gO1xuXG4gIHJldHVybiAoXG4gICAgPGJ1dHRvblxuICAgICAgY2xhc3NOYW1lPXtjbGFzc2VzfVxuICAgICAgZGlzYWJsZWQ9e2Rpc2FibGVkfVxuICAgICAgb25DbGljaz17b25DbGlja31cbiAgICA+XG4gICAgICB7Y2hpbGRyZW59XG4gICAgPC9idXR0b24+XG4gICk7XG59O1xuXG5jb25zdCBtZXRhOiBNZXRhPHR5cGVvZiBCdXR0b24+ID0ge1xuICBhcmdUeXBlczoge1xuICAgIGRpc2FibGVkOiB7XG4gICAgICBjb250cm9sOiB7dHlwZTogJ2Jvb2xlYW4nfVxuICAgIH0sXG4gICAgc2l6ZToge1xuICAgICAgY29udHJvbDoge3R5cGU6ICdzZWxlY3QnfSxcbiAgICAgIG9wdGlvbnM6IFsnc20nLCAnbWQnLCAnbGcnXVxuICAgIH0sXG4gICAgdmFyaWFudDoge1xuICAgICAgY29udHJvbDoge3R5cGU6ICdzZWxlY3QnfSxcbiAgICAgIG9wdGlvbnM6IFsncHJpbWFyeScsICdzZWNvbmRhcnknLCAnb3V0bGluZSddXG4gICAgfVxuICB9LFxuICBjb21wb25lbnQ6IEJ1dHRvbixcbiAgcGFyYW1ldGVyczoge1xuICAgIGxheW91dDogJ2NlbnRlcmVkJ1xuICB9LFxuICB0YWdzOiBbJ2F1dG9kb2NzJ10sXG4gIHRpdGxlOiAnQ29tcG9uZW50cy9CdXR0b24nXG59O1xuXG5leHBvcnQgZGVmYXVsdCBtZXRhO1xudHlwZSBTdG9yeSA9IFN0b3J5T2JqPHR5cGVvZiBtZXRhPjtcblxuZXhwb3J0IGNvbnN0IFByaW1hcnk6IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgY2hpbGRyZW46ICdQcmltYXJ5IEJ1dHRvbicsXG4gICAgdmFyaWFudDogJ3ByaW1hcnknXG4gIH1cbn07XG5cbmV4cG9ydCBjb25zdCBTZWNvbmRhcnk6IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgY2hpbGRyZW46ICdTZWNvbmRhcnkgQnV0dG9uJyxcbiAgICB2YXJpYW50OiAnc2Vjb25kYXJ5J1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgT3V0bGluZTogU3RvcnkgPSB7XG4gIGFyZ3M6IHtcbiAgICBjaGlsZHJlbjogJ091dGxpbmUgQnV0dG9uJyxcbiAgICB2YXJpYW50OiAnb3V0bGluZSdcbiAgfVxufTtcblxuZXhwb3J0IGNvbnN0IFNtYWxsOiBTdG9yeSA9IHtcbiAgYXJnczoge1xuICAgIGNoaWxkcmVuOiAnU21hbGwgQnV0dG9uJyxcbiAgICBzaXplOiAnc20nXG4gIH1cbn07XG5cbmV4cG9ydCBjb25zdCBMYXJnZTogU3RvcnkgPSB7XG4gIGFyZ3M6IHtcbiAgICBjaGlsZHJlbjogJ0xhcmdlIEJ1dHRvbicsXG4gICAgc2l6ZTogJ2xnJ1xuICB9XG59O1xuXG5leHBvcnQgY29uc3QgRGlzYWJsZWQ6IFN0b3J5ID0ge1xuICBhcmdzOiB7XG4gICAgY2hpbGRyZW46ICdEaXNhYmxlZCBCdXR0b24nLFxuICAgIGRpc2FibGVkOiB0cnVlXG4gIH1cbn07Il0sIm5hbWVzIjpbIlJlYWN0IiwiQnV0dG9uIiwiY2hpbGRyZW4iLCJkaXNhYmxlZCIsIm9uQ2xpY2siLCJzaXplIiwidmFyaWFudCIsImJhc2VDbGFzc2VzIiwidmFyaWFudENsYXNzZXMiLCJvdXRsaW5lIiwicHJpbWFyeSIsInNlY29uZGFyeSIsInNpemVDbGFzc2VzIiwibGciLCJtZCIsInNtIiwiZGlzYWJsZWRDbGFzc2VzIiwiY2xhc3NlcyIsImJ1dHRvbiIsImNsYXNzTmFtZSIsIm1ldGEiLCJhcmdUeXBlcyIsImNvbnRyb2wiLCJ0eXBlIiwib3B0aW9ucyIsImNvbXBvbmVudCIsInBhcmFtZXRlcnMiLCJsYXlvdXQiLCJ0YWdzIiwidGl0bGUiLCJQcmltYXJ5IiwiYXJncyIsIlNlY29uZGFyeSIsIk91dGxpbmUiLCJTbWFsbCIsIkxhcmdlIiwiRGlzYWJsZWQiXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPQSxXQUFXLFFBQVE7QUFZMUIsTUFBTUMsU0FBZ0MsQ0FBQyxFQUNyQ0MsUUFBUSxFQUNSQyxXQUFXLEtBQUssRUFDaEJDLE9BQU8sRUFDUEMsT0FBTyxJQUFJLEVBQ1hDLFVBQVUsU0FBUyxFQUNwQjtJQUNDLE1BQU1DLGNBQWM7SUFFcEIsTUFBTUMsaUJBQWlCO1FBQ3JCQyxTQUFTO1FBQ1RDLFNBQVM7UUFDVEMsV0FBVztJQUNiO0lBRUEsTUFBTUMsY0FBYztRQUNsQkMsSUFBSTtRQUNKQyxJQUFJO1FBQ0pDLElBQUk7SUFDTjtJQUVBLE1BQU1DLGtCQUFrQmIsV0FBVyxrQ0FBa0M7SUFFckUsTUFBTWMsVUFBVSxHQUFHVixZQUFZLENBQUMsRUFBRUMsY0FBYyxDQUFDRixRQUFRLENBQUMsQ0FBQyxFQUFFTSxXQUFXLENBQUNQLEtBQUssQ0FBQyxDQUFDLEVBQUVXLGlCQUFpQjtJQUVuRyxxQkFDRSxLQUFDRTtRQUNDQyxXQUFXRjtRQUNYZCxVQUFVQTtRQUNWQyxTQUFTQTtrQkFFUkY7O0FBR1A7QUFFQSxNQUFNa0IsT0FBNEI7SUFDaENDLFVBQVU7UUFDUmxCLFVBQVU7WUFDUm1CLFNBQVM7Z0JBQUNDLE1BQU07WUFBUztRQUMzQjtRQUNBbEIsTUFBTTtZQUNKaUIsU0FBUztnQkFBQ0MsTUFBTTtZQUFRO1lBQ3hCQyxTQUFTO2dCQUFDO2dCQUFNO2dCQUFNO2FBQUs7UUFDN0I7UUFDQWxCLFNBQVM7WUFDUGdCLFNBQVM7Z0JBQUNDLE1BQU07WUFBUTtZQUN4QkMsU0FBUztnQkFBQztnQkFBVztnQkFBYTthQUFVO1FBQzlDO0lBQ0Y7SUFDQUMsV0FBV3hCO0lBQ1h5QixZQUFZO1FBQ1ZDLFFBQVE7SUFDVjtJQUNBQyxNQUFNO1FBQUM7S0FBVztJQUNsQkMsT0FBTztBQUNUO0FBRUEsZUFBZVQsS0FBSztBQUdwQixPQUFPLE1BQU1VLFVBQWlCO0lBQzVCQyxNQUFNO1FBQ0o3QixVQUFVO1FBQ1ZJLFNBQVM7SUFDWDtBQUNGLEVBQUU7QUFFRixPQUFPLE1BQU0wQixZQUFtQjtJQUM5QkQsTUFBTTtRQUNKN0IsVUFBVTtRQUNWSSxTQUFTO0lBQ1g7QUFDRixFQUFFO0FBRUYsT0FBTyxNQUFNMkIsVUFBaUI7SUFDNUJGLE1BQU07UUFDSjdCLFVBQVU7UUFDVkksU0FBUztJQUNYO0FBQ0YsRUFBRTtBQUVGLE9BQU8sTUFBTTRCLFFBQWU7SUFDMUJILE1BQU07UUFDSjdCLFVBQVU7UUFDVkcsTUFBTTtJQUNSO0FBQ0YsRUFBRTtBQUVGLE9BQU8sTUFBTThCLFFBQWU7SUFDMUJKLE1BQU07UUFDSjdCLFVBQVU7UUFDVkcsTUFBTTtJQUNSO0FBQ0YsRUFBRTtBQUVGLE9BQU8sTUFBTStCLFdBQWtCO0lBQzdCTCxNQUFNO1FBQ0o3QixVQUFVO1FBQ1ZDLFVBQVU7SUFDWjtBQUNGLEVBQUUifQ==