@appkit/dek-ui 0.36.0 → 0.43.0

package/README.md

@@ -1,3 +1,40 @@
-# Dek UI
+# @appkit/dek-ui
 
-Component library for Dek
+React component library for DEK. Provides styled, composable UI primitives for building plugin components and board layouts.
+
+## Installation
+
+```bash
+npm install @appkit/dek-ui styled-components
+```
+
+## Usage
+
+```typescript
+import { Card, TitleBar, Grid, Cell } from '@appkit/dek-ui';
+
+function MyWidget({ title }: { title: string }) {
+  return (
+    <Card>
+      <TitleBar title={title} />
+      <Grid columns={2}>
+        <Cell>Left content</Cell>
+        <Cell>Right content</Cell>
+      </Grid>
+    </Card>
+  );
+}
+```
+
+## Storybook
+
+Browse all components interactively:
+
+```bash
+# From dek-packages root
+npm run storybook   # http://localhost:6006
+```
+
+## Documentation
+
+- [Component Catalog](docs/components.md) — All components with usage examples and props

package/dist/index.es.js

@@ -23541,6 +23541,7 @@ const cq1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty(
   margin: ${({ $margin: t }) => t}px;
   background-color: ${({ $backColor: t }) => t};
   border-radius: 50%;
+  box-sizing: content-box;
 `, oq1 = v2.div``, vq1 = ({
   loading: t = !1,
   active: e = !1,

package/dist/index.umd.js

@@ -74,6 +74,7 @@ React keys must be passed directly to JSX without using spread:
   margin: ${({$margin:t})=>t}px;
   background-color: ${({$backColor:t})=>t};
   border-radius: 50%;
+  box-sizing: content-box;
 `,vq1=t2.div``,sq1=({loading:t=!1,active:e=!1,iconName:r,iconColor:n,iconColorActive:i,iconSize:h=32,iconPadding:c=2,iconBackColor:l=""})=>{const v=e?i:n||x1.button.normal.color,d=l?h-4:h,u=c,f=l?2:0;return s1.jsxs(oq1,{$size:d,$backColor:l,$padding:u,$margin:f,"aria-label":"button-icon",children:[!t&&s1.jsx(v4,{name:r,size:d,style:{color:v}}),t&&s1.jsx(vq1,{children:s1.jsx(v4,{name:"IoReload",spinDuration:2,size:d-10,style:{color:v,margin:5}})})]})},x1={text:{size:{xxsmall:10,xsmall:12,small:14,normal:16,large:22,xlarge:28,xxlarge:34,heading:26},height:{xxsmall:10+5,xsmall:12+5,small:14+5,normal:16+5,large:22+5,xlarge:28+5,xxlarge:34+3,heading:26+5},weight:{xxthin:100,xthin:100,thin:200,normal:300,bold:400,xbold:500,xxbold:600,heavy:700,xheavy:800,xxheavy:900,heading:500},family:{normal:"Heebo",condensed:"Roboto Condensed",mono:"Roboto Mono",slab:"Roboto Slab",flex:"Roboto Flex",heading:"Heebo"},color:{normal:"#fff",xxsubtle:"rgba(255, 255, 255, 0.2)",xsubtle:"rgba(255, 255, 255, 0.5)",subtle:"rgba(255, 255, 255, 0.7)",tint:"#36B2BC",reverse:"#000"}},view:{backColor:{none:"transparent",light:"#ffffff11",lighter:"#ffffff33",lightest:"#ffffff55",dark:"#00000055",darker:"#00000099",darkest:"#000000bb",tile:"rgba(51, 51, 51, 0.8)",card:"#2d2d2d",clear:"rgba(255, 255, 255, 0.13)"}},card:{width:162,height:104,borderRadius:12},button:{clear:{backColor:"#ffffff22",backColorActive:"#ffffff22",color:"#ffffffff",colorActive:"#ffffffff"},toggle:{backColor:"#ffffff22",backColorActive:"#ffffffff",color:"#ffffffff",colorActive:"#000000"},normal:{backColor:"#1B75D0",backColorActive:"#1B75D0",color:"#ffffffff",colorActive:"#ffffffff"},brightnessPressed:.8,brightnessDisabled:.6}};function o5(t){switch(t){case"xxsubtle":return x1.text.color.xxsubtle;case"xsubtle":return x1.text.color.xsubtle;case"subtle":return x1.text.color.subtle;case"tint":return x1.text.color.tint;case"normal":return x1.text.color.normal;default:return t}}function Z5(t){switch(t){case"normal":return x1.text.family.normal;case"condensed":return x1.text.family.condensed;case"mono":return x1.text.family.mono;case"slab":return x1.text.family.slab;case"flex":return x1.text.family.flex;case"heading":return x1.text.family.heading;default:return t}}function F4(t){if(t===void 0)return x1.text.size.normal;if(typeof t=="number")return t;switch(t){case"xxsmall":return x1.text.size.xxsmall;case"xsmall":return x1.text.size.xsmall;case"small":return x1.text.size.small;case"normal":return x1.text.size.normal;case"large":return x1.text.size.large;case"xlarge":return x1.text.size.xlarge;case"xxlarge":return x1.text.size.xxlarge;case"heading":return x1.text.size.heading}}function a8(t){if(t===void 0)return x1.text.height.normal;if(typeof t=="number")return t+5;switch(t){case"xxsmall":return x1.text.height.xxsmall;case"xsmall":return x1.text.height.xsmall;case"small":return x1.text.height.small;case"normal":return x1.text.height.normal;case"large":return x1.text.height.large;case"xlarge":return x1.text.height.xlarge;case"xxlarge":return x1.text.height.xxlarge;case"heading":return x1.text.height.heading}}function v5(t){if(t===void 0)return x1.text.weight.normal;if(typeof t=="number")return t;switch(t){case"xxthin":return x1.text.weight.xxthin;case"xthin":return x1.text.weight.xthin;case"thin":return x1.text.weight.thin;case"normal":return x1.text.weight.normal;case"bold":return x1.text.weight.bold;case"xbold":return x1.text.weight.xbold;case"xxbold":return x1.text.weight.xxbold;case"heavy":return x1.text.weight.heavy;case"xheavy":return x1.text.weight.xheavy;case"xxheavy":return x1.text.weight.xxheavy;case"heading":return x1.text.weight.heading}}const dq1=t2.div`
   font-size: ${({$size:t})=>F4(t)}px;
   font-weight: ${({$weight:t})=>v5(t)};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@appkit/dek-ui",
   "private": false,
-  "version": "0.36.0",
+  "version": "0.43.0",
   "type": "module",
   "scripts": {
     "build": "tsc && vite build",