@dan or @ben I know you guys are very busy, but is there any chance I can see an example of how to set up the THEME SIZING as used with the standard components?
There is no example that I can find in the UI controls, and I want to be able to support the standard option typically offered in these properties (Auto, Full, etc.).
Much appreciated.
Additionally, I would also like to see how the FONT WEIGHT property control is set up.
We do plan on making most of our components open-source and available on GitHub, however we have some work to do before we can do that. So for now, I nipped into the source and have copied out the properties for both of your requests…
Not sure how helpful these will be, but if you have any more questions let us know, and I’m sure @ben will be able to guide you further on the implementation 
Sizing:
{
"title": "Sizing",
"icon": "arrow.down.backward.and.arrow.up.forward.square",
"properties": [
{
"title": "Size",
"heading": {}
},
{
"title": "Width",
"id": "globalWidthType",
"responsive": false,
"select": {
"default": "full",
"items": [
{
"title": "Auto",
"value": "auto"
},
{
"title": "Full",
"value": "full"
},
{
"title": "Screen",
"value": "screen"
},
{
"title": "Breakpoint",
"value": "container"
},
{
"title": "Theme Spacing",
"value": "theme"
}
]
}
},
{
"title": "",
"id": "globalWidth",
"format": "w-{{value}}",
"themeSpacing": {
"mode": "single",
"default": {
"base": {
"custom": false,
"value": "auto"
}
}
},
"visible": "globalWidthType == 'theme'"
},
{
"title": "Height",
"id": "globalHeightType",
"responsive": false,
"select": {
"default": "auto",
"items": [
{
"title": "Auto",
"value": "auto"
},
{
"title": "Full",
"value": "full"
},
{
"title": "Screen",
"value": "screen"
},
{
"title": "Theme",
"value": "theme"
}
]
}
},
{
"title": "",
"id": "globalHeight",
"format": "h-{{value}}",
"themeSpacing": {
"mode": "single",
"default": {
"base": {
"custom": false,
"value": "auto"
}
}
},
"visible": "globalHeightType == 'theme'"
},
{
"divider": {}
},
{
"title": "Min & Max Settings",
"heading": {}
},
{
"information": {},
"title": "Enable this to set both min and max height and width settings."
},
{
"title": "Enable",
"id": "globalSizingMinMaxEnabled",
"switch": {
"default": false
}
},
{
"visible": "globalSizingMinMaxEnabled == true",
"title": "Width",
"heading": {}
},
{
"title": "Min",
"id": "globalMinWidth",
"format": "min-w-{{value}}",
"themeSpacing": {
"mode": "single",
"default": {
"base": {
"custom": false,
"value": "0"
}
}
},
"visible": "globalSizingMinMaxEnabled == true"
},
{
"title": "Max",
"id": "globalMaxWidth",
"format": "max-w-{{value}}",
"themeSpacing": {
"mode": "single",
"default": {
"base": {
"custom": false,
"value": "auto"
}
}
},
"visible": "globalSizingMinMaxEnabled == true"
},
{
"visible": "globalSizingMinMaxEnabled == true",
"title": "Height",
"heading": {}
},
{
"title": "Min",
"id": "globalMinHeight",
"format": "min-h-{{value}}",
"themeSpacing": {
"mode": "single",
"default": {
"base": {
"custom": false,
"value": "0"
}
}
},
"visible": "globalSizingMinMaxEnabled == true"
},
{
"title": "Max",
"id": "globalMaxHeight",
"format": "max-h-{{value}}",
"themeSpacing": {
"mode": "single",
"default": {
"base": {
"custom": false,
"value": "auto"
}
}
},
"visible": "globalSizingMinMaxEnabled == true"
}
]
},
Weight:
{
"title": "Weight",
"id": "globalTextFontWeight",
"format": "font-[{{value}}]",
"slider": {
"default": "400",
"items": [
{
"value": "100",
"title": "Thin"
},
{
"value": "200",
"title": "Extra Light"
},
{
"value": "300",
"title": "Light"
},
{
"value": "400",
"title": "Normal"
},
{
"value": "500",
"title": "Medium"
},
{
"value": "600",
"title": "Semi Bold"
},
{
"value": "700",
"title": "Bold"
},
{
"value": "800",
"title": "Extra Bold"
},
{
"value": "900",
"title": "Black"
}
]
}
},
Aloha @dan these will be incredibly useful. I should be able to figure them out, but I will ask if I run into any problems.
Awesome 
@dan @ben I can get the font weight to work with no problems. But I’m having trouble with the sizing. It works fine if I use the Theme setting, as the value I enter gets applied. But when I then choose any of the other options, the output is always the last value I entered for the THEME setting.
Is there some logic somewhere that looks at the result of the TYPE choice and then sets the value? For example, if I choose FULL for the width, I get the result that was last selected when it was displaying THEME. It looks to me like there needs to be something that sets the value to w-fullwhen FULL is chosen or w-autowhen AUTO is chosen. I’m assuming the same is true for BREAKPOINT.
Where is the logic being handled, in the hooks.js file, or somewhere else?
Beyond me, but I’m interested…
Can you possibly explain a little - if you want - what your doing - and what your using this for?
Didn’t mean to bother you - disregard if annoyed
No problem.
This is all part of the 3D Flip Card that I have been working on. A lot of the properties for the card were initially hardcoded into the code. I wanted to make it as flexible as possible to setup so I started adding property controls that allow one to easily set up the key properties for the card.
I needed to mimic the way Elements handles some of these properties so they would be familiar to someone using the card. There were no good examples of how to handle these properties, so I thought it best to ask for some guidance.
This is now mostly working except for the issues mentioned above.
Once I get this all fleshed out I will make it available for free in the marketplace.
yes, exactly this. The hooks file checks the globalWidthType and applies the globalWidth appropriately, something like:
const { globalWidthType, globalWidth } = rw.props;
const finalWidth =
globalWidthType != 'theme'
? globalWidthType
: globalWidth;
// you could then build up a class string for you template
const classes = [finalWidth, "some", "other", "classes"].join(" ");
// pass through the props you need in your template file
rw.setProps({
finalWidth, // <div class="{{finalWidth}}">...
classes // or: <div class="{{classes}}">...
})
You can them use either finalWidth or classes in your template, just depends how you want to handle setting the classes