import React from 'react' ; import type { TComponentConfig } from 'autoprops' ; import { Block } from '@primitives/block' ; import { Border } from '@primitives/border' ; import type { TBorder } from '@primitives/border' ; import type { TComponentControls } from '@revert/sandbox' ; import { SYMBOL_CONTROL_SWITCH } from '@revert/sandbox' ; import { setupBorderTheme } from './src' ; import type { TThemeableBorders } from './src' ; type TDemo = { status : 'default' | 'error' ; } ; type Mappings = { demo : TDemo ; } ; const defaultTheme = { demo : ( { status } ) => ( { color : status === 'default' ? [ 0xF0 , 0xF0 , 0xF0 , 1 ] : [ 0xFF , 0x99 , 0x99 , 1 ] , bottomLeftRadius : 10 , bottomRightRadius : 10 , topLeftRadius : 10 , topRightRadius : 10 , topWidth : 2 , bottomWidth : 2 , leftWidth : 2 , rightWidth : 2 , overflowBottom : - 4 , overflowLeft : - 4 , overflowRight : - 4 , overflowTop : - 4 , } ) , } ; const { BorderTheme , createThemeableBorder } = setupBorderTheme ( ) ; const DemoThemeableBorder = createThemeableBorder < TBorder , Mappings > ( 'demo' , Border ) ; const newTheme = { demo : ( { status } ) => ( { color : status === 'default' ? [ 0x00 , 0x00 , 0x00 , 1 ] : [ 0xFF , 0x00 , 0x00 , 1 ] , bottomLeftRadius : 10 , bottomRightRadius : 10 , topLeftRadius : 10 , topRightRadius : 10 , topWidth : 1 , bottomWidth : 1 , leftWidth : 1 , rightWidth : 1 , overflowBottom : - 2 , overflowLeft : - 2 , overflowRight : - 2 , overflowTop : - 2 , } ) , } ; type TDemoComponent = TDemo & { hasTheme : boolean ; } ; export const Component = ( { status , hasTheme } ) => ( < Block style = { { width : 100 , height : 100 , } } > < BorderTheme . Provider value = { hasTheme ? newTheme : defaultTheme } > < DemoThemeableBorder status = { status } /> < /BorderTheme.Provider> < /Block>); Component . displayName = 'ThemeableBorder' ; export const config = { props : { hasTheme : [ true ] , status : [ 'default' , 'error' ] , } , } ; export { default as readme } from './readme.md' ; export const controls = { hasTheme : SYMBOL_CONTROL_SWITCH , } ;