Skip to content

Commit

Permalink
feat: create listbox plugin component (#43)
Browse files Browse the repository at this point in the history
  • Loading branch information
@bpsmartdesign
bpsmartdesign authored Jul 23, 2023
1 parent 20c1809 commit 076af1f
Show file tree
Hide file tree
Showing 3 changed files with 1,000 additions and 0 deletions.
279 changes: 279 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,285 @@ export default withShurikenUI({
text: 'muted-400',
textDark: 'muted-400/80',
},
listbox: {
labelFloat: {
text: 'primary-500',
size: '5',
duration: '300',
},
button: {
size: 'full',
text: 'sm',
textPosition: 'start',
font: 'sans',
},
icon: {
text: 'muted-400',
duration: '300',
},
chevron: {
inner: {
size: '4',
text: 'muted-400',
duration: '300',
},
},
options: {
ringFocus: 'primary-500/50',
space: '2',
text: 'base',
shadowSize: 'lg',
shadow: 'muted-500/10',
shadowDark: 'muted-800/10'
},
option: {
duration: '300',
icon: {
text: 'primary-600',
},
iconInner: {
size: '4',
},
activeOrHover: {
text: 'primary-600',
bg: 'primary-500/10',
},
},
errorText: {
text: 'danger-600',
textSize: '[0.65rem]',
font: 'sans',
fontWeight: 'medium',
},
sm: {
text: 'xs',
icon: {
size: '8',
innerSize: '4',
},
placeload: {
size: '8',
},
chevron: {
size: '8',
innerSize: '3',
},
},
md: {
text: '[0.825rem]',
icon: {
size: '10',
innerSize: '[1.15rem]',
},
placeload: {
size: '10',
},
chevron: {
size: '10',
innerSize: '4',
},
},
lg: {
text: 'sm',
icon: {
size: '12',
innerSize: '5',
},
placeload: {
size: '12',
},
chevron: {
size: '12',
innerSize: '4',
},
},
rounded: {
default: 'md',
smooth: 'lg',
curved: 'xl',
full: {
button: 'full',
option: 'xl',
},
},
default: {
bg: 'white',
bgDark: 'muted-900/75',
border: 'muted-300',
borderDark: 'muted-700',
borderFocus: 'muted-300',
borderFocusDark: 'muted-700',
shadowFocus: 'muted-300/50',
shadowFocusDark: 'muted-800/50',
text: 'muted-600',
textDark: 'muted-200',
textPlaceholder: 'muted-300',
textPlaceholderDark: 'muted-500',
chevron: {
border: 'muted-200',
borderDark: 'muted-700',
},
option: {
border: 'muted-200',
borderDark: 'muted-600',
bg: 'white',
bgDark: 'muted-700',
},
},
defaultContrast: {
bg: 'white',
bgDark: 'muted-950/75',
border: 'muted-300',
borderDark: 'muted-800',
borderFocus: 'muted-300',
borderFocusDark: 'muted-700',
shadowFocus: 'muted-300/50',
shadowFocusDark: 'muted-800/50',
text: 'muted-600',
textDark: 'muted-200',
textPlaceholder: 'muted-300',
textPlaceholderDark: 'muted-600',
chevron: {
border: 'muted-300',
borderDark: 'muted-800',
},
option: {
border: 'muted-200',
borderDark: 'muted-800',
bg: 'white',
bgDark: 'muted-950/70',
},
},
muted: {
bg: 'muted-200',
bgDark: 'muted-900/75',
border: 'muted-300',
borderDark: 'muted-700',
borderFocus: 'muted-300',
borderFocusDark: 'muted-700',
shadowFocus: 'muted-300/50',
shadowFocusDark: 'muted-800/50',
text: 'muted-600',
textDark: 'muted-200',
textPlaceholder: 'muted-300',
textPlaceholderDark: 'muted-500',
chevron: {
border: 'muted-300',
borderDark: 'muted-700',
},
option: {
border: 'muted-200',
borderDark: 'muted-600',
bg: 'white',
bgDark: 'muted-700',
},
},
mutedContrast: {
bg: 'muted-200',
bgDark: 'muted-950/75',
border: 'muted-300',
borderDark: 'muted-800',
borderFocus: 'muted-300',
borderFocusDark: 'muted-700',
shadowFocus: 'muted-300/50',
shadowFocusDark: 'muted-800/50',
text: 'muted-600',
textDark: 'muted-200',
textPlaceholder: 'muted-300',
textPlaceholderDark: 'muted-500',
chevron: {
border: 'muted-300',
borderDark: 'muted-800',
},
option: {
border: 'muted-200',
borderDark: 'muted-800',
bg: 'white',
bgDark: 'muted-950/70',
},
},
notLoading: {
text: 'muted-300',
textDark: 'muted-600',
},
error: {
border: 'danger-500',
borderDark: 'danger-500',
icon: {
text: 'danger-500',
},
},
hasNotIcon: {
text: {
sm: 'xs',
md: 'sm',
lg: 'sm',
},
labelFloat: {
sm: {
text: 'xs',
focusVisible: {
textColor: 'primary-500',
},
},
md: {
text: 'xs',
focusVisible: {
text: 'xs',
textColor: 'primary-500',
},
button: {
text: '[0.825rem]',
},
},
lg: {
text: 'xs',
focusVisible: {
text: 'xs',
textColor: 'primary-500',
},
button: {
text: '[0.825rem]',
},
},
},
},
hasIcon: {
text: {
sm: 'xs',
md: 'sm',
lg: 'base',
},
labelFloat: {
sm: {
text: 'xs',
focusVisible: {
textColor: 'primary-500',
},
},
md: {
text: 'xs',
focusVisible: {
text: 'xs',
textColor: 'primary-500',
},
button: {
text: '[0.825rem]',
},
},
lg: {
text: 'xs',
focusVisible: {
text: 'xs',
textColor: 'primary-500',
},
button: {
text: '[0.825rem]',
},
},
},
},
},
mark: {
bg: 'primary-100',
bgDark: 'primary-800',
Expand Down
2 changes: 2 additions & 0 deletions src/plugins/components/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import dropdown from './dropdown'
import focus from './focus'
import inputFileRegular from './input-file-regular'
import label from './label'
import listbox from './listbox'
import mark from './mark'
import mask from './mask'
import placeload from './placeload'
Expand All @@ -23,6 +24,7 @@ const components = [
focus,
inputFileRegular,
label,
listbox,
mark,
mask,
placeload,
Expand Down
Loading

0 comments on commit 076af1f

Please sign in to comment.