SrJuggernaut/srjuggernaut-panda-preset
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance UI components and update build configuration

Browse Source
This commit is contained in:
SrJuggernaut
2025-09-29 12:31:59 -06:00
parent 9c49f46ee7
commit cb3f7fb701
8 changed files with 125 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
src/recipes/button.ts
View File

@@ -1,6 +1,7 @@
import { defineRecipe } from '@pandacss/dev'
export const buttonVariants = ['solid', 'outline', 'ghost'] as const
export const buttonSizes = ['small', 'medium', 'large'] as const
interface ButtonRecipeArg {
semanticColorNames: string[]
@@ -12,6 +13,7 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
return defineRecipe({
className: 'button',
base: {
all: 'unset',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
@@ -23,28 +25,54 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
cursor: 'pointer',
transitionProperty: 'color, background-color, border-color',
transitionDuration: 'normal',
transitionTimingFunction: 'easeOut'
transitionTimingFunction: 'easeOut',
_disabled: {
cursor: 'not-allowed',
_hover: {
cursor: 'not-allowed'
}
}
},
variants: {
color: {
...Object.fromEntries(colorVariants.map((color) => [color, {}]))
},
size: {
small: {
paddingBlock: 'calc({spacing.xs} * 0.5)',
paddingInline: 'calc({spacing.xs} * 1)',
fontSize: 'sm'
},
medium: {
paddingBlock: 'calc({spacing.xs} * 0.75)',
paddingInline: 'calc({spacing.xs} * 1.25)',
fontSize: 'base'
},
large: {
paddingBlock: 'calc({spacing.xs} * 1)',
paddingInline: 'calc({spacing.xs} * 1.5)',
fontSize: 'lg'
}
...Object.fromEntries(
buttonSizes.map((size) => {
switch (size) {
case 'small':
return [
size,
{
paddingBlock: 'calc({spacing.xs} * 0.5)',
paddingInline: 'calc({spacing.xs} * 1)',
fontSize: 'sm'
}
]
case 'medium':
return [
size,
{
paddingBlock: 'calc({spacing.xs} * 0.75)',
paddingInline: 'calc({spacing.xs} * 1.25)',
fontSize: 'base'
}
]
case 'large':
return [
size,
{
paddingBlock: 'calc({spacing.xs} * 1)',
paddingInline: 'calc({spacing.xs} * 1.5)',
fontSize: 'lg'
}
]
default:
return [size, {}]
}
})
)
},
variant: {
...Object.fromEntries(buttonVariants.map((variant) => [variant, {}]))
@@ -74,8 +102,6 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
borderColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
cursor: 'not-allowed',
pointerEvents: 'none',
_hover: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
color: `${color}.4/50`
@@ -102,14 +128,13 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
_disabled: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
cursor: 'not-allowed',
pointerEvents: 'none',
_hover: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`
}
}
}
}
// case 'solid' or unmatched:
default:
return {
color,
@@ -129,8 +154,6 @@ const buttonRecipe = ({ semanticColorNames }: ButtonRecipeArg) => {
_disabled: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 40%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
cursor: 'not-allowed',
pointerEvents: 'none',
_hover: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 40%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`

53
src/recipes/chip.ts
View File

@@ -1,6 +1,7 @@
import { defineRecipe } from '@pandacss/dev'
import { defineRecipe, type SystemStyleObject } from '@pandacss/dev'
export const chipVariants = ['solid', 'outline', 'ghost'] as const
export const chipSizes = ['small', 'medium', 'large'] as const
interface ChipRecipeArg {
semanticColorNames: string[]
@@ -29,21 +30,41 @@ const chipRecipe = ({ semanticColorNames }: ChipRecipeArg) => {
...Object.fromEntries(chipVariants.map((variant) => [variant, {}]))
},
size: {
small: {
paddingBlock: 'calc({spacing.sm} * 0.5)',
paddingInline: 'calc({spacing.sm} * 0.75)',
fontSize: 'xs'
},
medium: {
paddingBlock: 'calc({spacing.sm} * 0.75)',
paddingInline: 'calc({spacing.sm})',
fontSize: 'sm'
},
large: {
paddingBlock: 'calc({spacing.sm})',
paddingInline: 'calc({spacing.sm} * 1.25)',
fontSize: 'base'
}
...Object.fromEntries(
chipSizes.map((size) => {
switch (size) {
case 'small':
return [
size,
{
paddingBlock: 'calc({spacing.sm} * 0.5)',
paddingInline: 'calc({spacing.sm} * 0.75)',
fontSize: 'xs'
} as SystemStyleObject
]
case 'medium':
return [
size,
{
paddingBlock: 'calc({spacing.sm} * 0.75)',
paddingInline: 'calc({spacing.sm})',
fontSize: 'sm'
} as SystemStyleObject
]
case 'large':
return [
size,
{
paddingBlock: 'calc({spacing.sm})',
paddingInline: 'calc({spacing.sm} * 1.25)',
fontSize: 'base'
} as SystemStyleObject
]
default:
return [size, {}]
}
})
)
}
},
compoundVariants: colors.flatMap((color) => {

4
src/recipes/details.ts
View File

@@ -1,5 +1,7 @@
import { defineSlotRecipe } from '@pandacss/dev'
export const detailsSlots = ['summary', 'details'] as const
export interface DetailsRecipeArg {
semanticColorNames: string[]
}
@@ -8,7 +10,7 @@ const detailsRecipe = ({ semanticColorNames }: DetailsRecipeArg) => {
const colorVariants = ['neutral', ...semanticColorNames]
const recipe = defineSlotRecipe({
className: 'details',
slots: ['summary', 'details'],
slots: detailsSlots,
base: {
details: {
display: 'block',

35
src/recipes/iconButton.ts
View File

@@ -2,6 +2,7 @@ import { defineRecipe, type SystemStyleObject } from '@pandacss/dev'
export const iconButtonVariants = ['solid', 'outline', 'ghost'] as const
export const iconButtonShapes = ['circle', 'square'] as const
export const iconButtonSizes = ['small', 'medium', 'large'] as const
interface IconButtonRecipeArg {
semanticColorNames: string[]
@@ -23,7 +24,10 @@ const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
transitionDuration: 'normal',
transitionTimingFunction: 'easeOut',
_disabled: {
cursor: 'not-allowed'
cursor: 'not-allowed',
_hover: {
cursor: 'not-allowed'
}
}
},
variants: {
@@ -58,15 +62,20 @@ const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
...Object.fromEntries(iconButtonVariants.map((variant) => [variant, {}]))
},
size: {
small: {
padding: 'calc({spacing.sm} * 0.5)'
},
medium: {
padding: 'calc({spacing.sm} * 0.75)'
},
large: {
padding: 'calc({spacing.sm})'
}
...Object.fromEntries(
iconButtonSizes.map((size) => {
switch (size) {
case 'small':
return [size, { padding: 'calc({spacing.sm} * 0.5)' }]
case 'medium':
return [size, { padding: 'calc({spacing.sm} * 0.75)' }]
case 'large':
return [size, { padding: 'calc({spacing.sm})' }]
default:
return [size, {}]
}
})
)
}
},
compoundVariants: colors.flatMap((color) =>
@@ -89,8 +98,6 @@ const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
_disabled: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 40%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
cursor: 'not-allowed',
pointerEvents: 'none',
_hover: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 40%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`
@@ -119,8 +126,6 @@ const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
borderColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
cursor: 'not-allowed',
pointerEvents: 'none',
_hover: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
color: `${color}.4/50`
@@ -147,8 +152,6 @@ const iconButtonRecipe = ({ semanticColorNames }: IconButtonRecipeArg) => {
_disabled: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`,
color: `color-mix(in srgb, {colors.${color}.foreground} 40%, transparent)`,
cursor: 'not-allowed',
pointerEvents: 'none',
_hover: {
backgroundColor: `color-mix(in srgb, {colors.${color}.9} 10%, transparent)`
}

2
src/recipes/mark.ts
View File

@@ -100,7 +100,7 @@ const markRecipe = ({ semanticColorNames }: MarkRecipeArg) => {
),
defaultVariants: {
color: 'primary',
variant: 'highlight'
variant: 'bold'
}
})
}