diff --git a/src/plugins/components/input-file-regular/index.ts b/src/plugins/components/input-file-regular/index.ts index 789465d..9a9425d 100644 --- a/src/plugins/components/input-file-regular/index.ts +++ b/src/plugins/components/input-file-regular/index.ts @@ -258,6 +258,36 @@ export default plugin(({ addComponents, theme }) => { '@apply top-[1.2rem]': {}, }, }, + //Without icon && Size:xl + '&.nui-input-xl:not(.nui-has-icon)': { + [`@apply text-${config.icon.disabled.xl.font.size} leading-5`]: {}, + '.nui-input-file-inner': { + '@apply h-14 gap-2': {}, + }, + '.nui-input-file-addon': { + '@apply h-14 px-5': {}, + }, + '.nui-input-file-placeload': { + '@apply top-[1.4rem]': {}, + }, + }, + //With icon && Size:xl + '&.nui-input-xl.nui-has-icon': { + [`@apply text-${config.icon.enabled.xl.font.size} leading-5`]: {}, + '.nui-input-file-inner': { + '@apply h-14 pe-4': {}, + }, + '.nui-input-file-addon': { + '@apply h-14 px-5': {}, + }, + '.nui-input-file-icon': { + [`@apply w-${config.icon.enabled.xl.icon.size} h-${config.icon.enabled.xl.icon.size}`]: + {}, + }, + '.nui-input-file-placeload': { + '@apply top-[1.4rem]': {}, + }, + }, //Input:hover '&:hover': { '.nui-input-file-addon': { diff --git a/src/plugins/components/input-file-regular/input-file-regular.config.ts b/src/plugins/components/input-file-regular/input-file-regular.config.ts index 4f88671..d89a315 100644 --- a/src/plugins/components/input-file-regular/input-file-regular.config.ts +++ b/src/plugins/components/input-file-regular/input-file-regular.config.ts @@ -167,6 +167,11 @@ export const defaultConfig = { size: 'sm', }, }, + xl: { + font: { + size: 'sm', + }, + }, }, enabled: { sm: { @@ -193,6 +198,14 @@ export const defaultConfig = { size: '5', }, }, + xl: { + font: { + size: 'sm', + }, + icon: { + size: '6', + }, + }, }, }, } diff --git a/src/plugins/components/input-file-regular/input-file-regular.doc.mdx b/src/plugins/components/input-file-regular/input-file-regular.doc.mdx index 79260e1..a16108c 100644 --- a/src/plugins/components/input-file-regular/input-file-regular.doc.mdx +++ b/src/plugins/components/input-file-regular/input-file-regular.doc.mdx @@ -70,10 +70,11 @@ File input shapes allow you to change the border radiuses. Below is an example o File input size allows you to change the input size. -
+
+

@@ -85,20 +86,22 @@ File input size allows you to change the input size. File inputs can be configured to have a colored border when being focused. -
+
+
### State: disabled File inputs can be shown in a disabled state. -
+
+

@@ -107,20 +110,22 @@ File inputs can be shown in a disabled state. File inputs can be shown in a loading state. -
+
+
### State: error File inputs can be shown in an error state. This indicates that the input value contains an error. -
+
+

diff --git a/src/plugins/components/input-file-regular/input-file-regular.stories.ts b/src/plugins/components/input-file-regular/input-file-regular.stories.ts index d8d9c9c..45aba29 100644 --- a/src/plugins/components/input-file-regular/input-file-regular.stories.ts +++ b/src/plugins/components/input-file-regular/input-file-regular.stories.ts @@ -22,7 +22,7 @@ const meta = { }, size: { control: { type: 'select' }, - options: ['sm', 'md', 'lg'], + options: ['sm', 'md', 'lg', 'xl'], defaultValue: 'md', }, rounded: { @@ -193,6 +193,20 @@ export const SizeLg: Story = { }, }, } + +export const SizeXl: Story = { + name: 'Size: xl', + args: { + id: 'input-file', + label: 'Upload files', + size: 'xl', + rounded: 'sm', + placeholder: 'Select files', + classes: { + wrapper: 'min-w-[260px] max-w-[260px]', + }, + }, +} // #endregion // #region State: color focus @@ -240,6 +254,21 @@ export const ColorFocusLg: Story = { }, }, } + +export const ColorFocusXl: Story = { + name: 'Color focus: xl', + args: { + id: 'input-file', + label: 'Upload files', + size: 'xl', + rounded: 'sm', + colorFocus: true, + placeholder: 'Select file', + classes: { + wrapper: 'min-w-[260px] max-w-[260px]', + }, + }, +} // #endregion // #region State: disabled @@ -287,6 +316,21 @@ export const DisabledLg: Story = { }, }, } + +export const DisabledXl: Story = { + name: 'Disabled: xl', + args: { + id: 'input-file', + label: 'Upload files', + size: 'xl', + rounded: 'sm', + '?disabled': true, + placeholder: 'Select file', + classes: { + wrapper: 'min-w-[260px] max-w-[260px]', + }, + }, +} // #endregion // #region State: loading @@ -334,6 +378,21 @@ export const LoadingLg: Story = { }, }, } + +export const LoadingXl: Story = { + name: 'Loading: xl', + args: { + id: 'input-file', + label: 'Upload files', + size: 'xl', + rounded: 'sm', + loading: true, + placeholder: 'Select file', + classes: { + wrapper: 'min-w-[260px] max-w-[260px]', + }, + }, +} // #endregion // #region State: error @@ -381,4 +440,19 @@ export const ErrorLg: Story = { }, }, } + +export const ErrorXl: Story = { + name: 'Error: xl', + args: { + id: 'input-file', + label: 'Upload files', + size: 'xl', + rounded: 'sm', + error: 'Please select valid files', + placeholder: 'Select file', + classes: { + wrapper: 'min-w-[260px] max-w-[260px]', + }, + }, +} // #endregion diff --git a/src/plugins/components/input-file-regular/input-file-regular.types.ts b/src/plugins/components/input-file-regular/input-file-regular.types.ts index 2bd9ad7..1fbdc1d 100644 --- a/src/plugins/components/input-file-regular/input-file-regular.types.ts +++ b/src/plugins/components/input-file-regular/input-file-regular.types.ts @@ -7,7 +7,7 @@ export interface InputFileRegularProps extends Record { placeholder?: string colorFocus?: boolean loading?: boolean - size?: 'sm' | 'md' | 'lg' + size?: 'sm' | 'md' | 'lg' | 'xl' contrast?: 'default' | 'default-contrast' error?: string | boolean textValue?: (fileList?: FileList | null) => string diff --git a/src/plugins/components/input-file-regular/input-file-regular.variants.ts b/src/plugins/components/input-file-regular/input-file-regular.variants.ts index da9cb59..d2f4ee2 100644 --- a/src/plugins/components/input-file-regular/input-file-regular.variants.ts +++ b/src/plugins/components/input-file-regular/input-file-regular.variants.ts @@ -12,6 +12,7 @@ export const size = { sm: 'nui-input-sm', md: 'nui-input-md', lg: 'nui-input-lg', + xl: 'nui-input-xl', } as const satisfies InputFileRegularVariant<'size'> export const contrast = {