@symbo.ls/preview 0.0.98 → 2.0.7

package/src/data/_Symbols.sketch/pages/D6F5EB10-9D31-47AC-9077-1CE8CB2C2448.json

@@ -0,0 +1 @@
+{"_class":"page","do_objectID":"D6F5EB10-9D31-47AC-9077-1CE8CB2C2448","booleanOperation":-1,"isFixedToViewport":false,"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"Hello","nameIsFixed":true,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"exportOptions":{"_class":"exportOptions","includedLayerIds":[],"layerOptions":0,"shouldTrim":false,"exportFormats":[]},"frame":{"_class":"rect","constrainProportions":false,"height":0,"width":0,"x":0,"y":0},"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","do_objectID":"326E8322-C012-43DF-A8AE-967A7FE8566C","endMarkerType":0,"miterLimit":10,"startMarkerType":0,"windingRule":1,"blur":{"_class":"blur","isEnabled":false,"center":"{0.5, 0.5}","motionAngle":0,"radius":10,"saturation":1,"type":0},"borderOptions":{"_class":"borderOptions","isEnabled":true,"dashPattern":[],"lineCapStyle":0,"lineJoinStyle":0},"borders":[],"colorControls":{"_class":"colorControls","isEnabled":false,"brightness":0,"contrast":1,"hue":0,"saturation":1},"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":1},"fills":[],"innerShadows":[],"shadows":[]},"hasClickThrough":true,"groupLayout":{"_class":"MSImmutableFreeformGroupLayout"},"layers":[{"_class":"artboard","do_objectID":"EA6ACC18-A308-4ECD-83F2-5E33B2B1EA6F","booleanOperation":-1,"isFixedToViewport":false,"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":2,"name":"Logo","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":true,"exportOptions":{"_class":"exportOptions","includedLayerIds":[],"layerOptions":0,"shouldTrim":false,"exportFormats":[]},"frame":{"_class":"rect","constrainProportions":false,"height":132,"width":132,"x":-67,"y":-67},"clippingMaskMode":0,"hasClippingMask":false,"style":{"_class":"style","do_objectID":"F4918C22-BCBE-4BCE-8E92-7F1B7D9CFE9A","endMarkerType":0,"miterLimit":10,"startMarkerType":0,"windingRule":1,"blur":{"_class":"blur","isEnabled":false,"center":"{0.5, 0.5}","motionAngle":0,"radius":10,"saturation":1,"type":0},"borderOptions":{"_class":"borderOptions","isEnabled":true,"dashPattern":[],"lineCapStyle":0,"lineJoinStyle":0},"borders":[],"colorControls":{"_class":"colorControls","isEnabled":false,"brightness":0,"contrast":1,"hue":0,"saturation":1},"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":1},"fills":[],"innerShadows":[],"shadows":[]},"hasClickThrough":false,"groupLayout":{"_class":"MSImmutableFreeformGroupLayout"},"layers":[{"_class":"shapePath","do_objectID":"988222E0-EDEB-4648-9237-5F3FF9438488","booleanOperation":-1,"isFixedToViewport":false,"isFlippedHorizontal":false,"isFlippedVertical":false,"isLocked":false,"isVisible":true,"layerListExpandedType":0,"name":"Path","nameIsFixed":false,"resizingConstraint":63,"resizingType":0,"rotation":0,"shouldBreakMaskChain":false,"exportOptions":{"_class":"exportOptions","includedLayerIds":[],"layerOptions":0,"shouldTrim":false,"exportFormats":[]},"frame":{"_class":"rect","constrainProportions":false,"height":62.33333333333332,"width":60.97658626796441,"x":37.10000000000016,"y":35.33060647712634},"clippingMaskMode":0,"hasClippingMask":false,"sharedStyleID":"EB7B4C26-CC4F-4AEB-A101-2E80BA0A7D42","style":{"_class":"style","do_objectID":"33D742BD-B978-43A5-9CD0-0926BBD1B982","endMarkerType":0,"miterLimit":10,"startMarkerType":0,"windingRule":1,"blur":{"_class":"blur","isEnabled":false,"center":"{0.5, 0.5}","motionAngle":0,"radius":10,"saturation":1,"type":0},"borderOptions":{"_class":"borderOptions","isEnabled":true,"dashPattern":[],"lineCapStyle":0,"lineJoinStyle":0},"borders":[],"colorControls":{"_class":"colorControls","isEnabled":false,"brightness":0,"contrast":1,"hue":0,"saturation":1},"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":1},"fills":[{"_class":"fill","isEnabled":true,"fillType":0,"color":{"_class":"color","alpha":1,"blue":1,"green":1,"red":1},"contextSettings":{"_class":"graphicsContextSettings","blendMode":0,"opacity":1},"gradient":{"_class":"gradient","elipseLength":0,"from":"{0.5, 0}","gradientType":0,"to":"{0.5, 1}","stops":[{"_class":"gradientStop","position":0,"color":{"_class":"color","alpha":1,"blue":1,"green":1,"red":1}},{"_class":"gradientStop","position":1,"color":{"_class":"color","alpha":1,"blue":0,"green":0,"red":0}}]},"noiseIndex":0,"noiseIntensity":0,"patternFillType":1,"patternTileScale":1}],"innerShadows":[],"shadows":[]},"edited":true,"isClosed":true,"pointRadiusBehaviour":1,"points":[{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.12047362409114311, 0.89890974871066665}","curveMode":4,"curveTo":"{0.22448525235103942, 0.97416066041951233}","hasCurveFrom":true,"hasCurveTo":false,"point":"{0.22448525235103942, 0.97416066041951233}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{-0.0046653661590444744, 0.60055578186503356}","curveMode":3,"curveTo":"{0.046798720740383881, 0.791332741126895}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.012669905217605117, 0.66520797361488682}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.071718173344317446, 0.19303499944177951}","curveMode":3,"curveTo":"{-0.0041236389285240586, 0.47655075834482369}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.013753359678645948, 0.41030875860112176}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.53326977374760587, -0.004101191795477601}","curveMode":3,"curveTo":"{0.24940470495497297, 0.036173944048693278}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.47422150562089416, 0.0038478481737666279}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.73695921242323581, 0.02822490407944905}","curveMode":4,"curveTo":"{0.62698858462761675, 0.00066823218606881589}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.68332821660172705, 0.014446568132758932}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.92168819803065549, 0.14852037561401135}","curveMode":3,"curveTo":"{0.81388447915711748, 0.064790487937972388}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.85505574867665979, 0.0965866478149493}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{1.0056559187613008, 0.36685400676925306}","curveMode":3,"curveTo":"{0.97423573939112407, 0.23013051929825259}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.99265446522881384, 0.31068079098659374}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.93794001494626489, 0.62281309377891703}","curveMode":3,"curveTo":"{1.0007803736866183, 0.45482338242888931}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.98290337507944892, 0.50357749424025355}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.61615404001721097, 0.69859394148571174}","curveMode":3,"curveTo":"{0.8263442054590846, 0.69859394148571174}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.69578794290369406, 0.69859394148571174}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.47855532346505686, 0.60532520584657934}","curveMode":3,"curveTo":"{0.55764749912101963, 0.67845637356362665}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.51105895729627437, 0.6355315577297076}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.42113223702990643, 0.41825779857036538}","curveMode":3,"curveTo":"{0.46284523377996856, 0.57829846995114942}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.44984378024748167, 0.52901442214183492}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.66761812691663924, 0.28842347907270965}","curveMode":3,"curveTo":"{0.50618341222159191, 0.29955213502965172}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.62157131232241447, 0.29160309506040749}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.72287430442970935, 0.30644130300299643}","curveMode":4,"curveTo":"{0.70066348797837719, 0.29319290305425605}","hasCurveFrom":false,"hasCurveTo":true,"point":"{0.72287430442970935, 0.30644130300299643}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.74075130303687875, 0.31704002296198874}","curveMode":1,"curveTo":"{0.74075130303687875, 0.31704002296198874}","hasCurveFrom":false,"hasCurveTo":false,"point":"{0.74075130303687875, 0.31704002296198874}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.70445557859201891, 0.38010240671799284}","curveMode":4,"curveTo":"{0.72937503119595248, 0.3371775908840739}","hasCurveFrom":true,"hasCurveTo":false,"point":"{0.72937503119595248, 0.3371775908840739}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.5869007695691153, 0.35360560682051212}","curveMode":3,"curveTo":"{0.70174694243941749, 0.38222215070979121}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.67466058091340286, 0.37533298273644644}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.57660795218922989, 0.54014307809877693}","curveMode":3,"curveTo":"{0.51810141129303855, 0.45376351043298924}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.5690237709619459, 0.52901442214183492}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.63132240247177951, 0.57776853395319971}","curveMode":4,"curveTo":"{0.59448495079639985, 0.5565710940352151}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.60856985878992698, 0.56452013400445933}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.71908221381606641, 0.57935834194704827}","curveMode":2,"curveTo":"{0.63999003816010369, 0.57935834194704827}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.68061958044912552, 0.57935834194704827}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.85451402144613942, 0.52000551017669117}","curveMode":3,"curveTo":"{0.73154194011803286, 0.57723859795525001}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.75646139272196644, 0.56558000600035818}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.82038520592336062, 0.2545075752039338}","curveMode":3,"curveTo":"{0.89243492758255982, 0.39441067866263269}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.83934565899157088, 0.29160309506040688}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.54627122728009281, 0.10665543177599127}","curveMode":3,"curveTo":"{0.77054630071549357, 0.20893307938026676}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.72774984950439059, 0.18932544745613136}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.24669606880237152, 0.43945523848835}","curveMode":3,"curveTo":"{0.32470478999729346, 0.20257384740487175}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.26294788571798028, 0.3912310626749349}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.27324070309786569, 0.64454046969485079}","curveMode":3,"curveTo":"{0.24344570541924965, 0.52053544617464087}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.25482197726017591, 0.56875962198805596}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.42709123656562914, 0.79186267712484415}","curveMode":3,"curveTo":"{0.32903860784145617, 0.72562067738114222}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.39133723935128972, 0.76801555721711146}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.28082488432515029, 1.0160256042575311}","curveMode":2,"curveTo":"{0.42492432764354809, 0.79875184509818886}","hasCurveFrom":true,"hasCurveTo":true,"point":"{0.35395806044538969, 0.90579891668401147}"},{"_class":"curvePoint","cornerRadius":0,"curveFrom":"{0.22448525235104003, 0.97416066041951166}","curveMode":4,"curveTo":"{0.28136661155567072, 1.0160256042575311}","hasCurveFrom":false,"hasCurveTo":true,"point":"{0.22448525235104003, 0.97416066041951166}"}]}],"hasBackgroundColor":true,"includeBackgroundColorInExport":true,"isFlowHome":false,"presetDictionary":{},"resizesContent":false,"backgroundColor":{"_class":"color","alpha":1,"blue":0,"green":0,"red":0},"horizontalRulerData":{"_class":"rulerData","base":0,"guides":[]},"verticalRulerData":{"_class":"rulerData","base":0,"guides":[]}}],"horizontalRulerData":{"_class":"rulerData","base":-606,"guides":[]},"verticalRulerData":{"_class":"rulerData","base":-488,"guides":[]}}

package/src/data/_Symbols.sketch/user.json

@@ -0,0 +1 @@
+{"D6F5EB10-9D31-47AC-9077-1CE8CB2C2448":{"scrollOrigin":"{605, 487}","zoomValue":1},"35BD91AD-F0ED-4002-891D-F1B3250E88C1":{"scrollOrigin":"{0, 0}","zoomValue":1},"783F0479-7D85-4CA7-993C-F9B0D03B1861":{"scrollOrigin":"{0, 0}","zoomValue":1},"document":{"pageListHeight":272,"cloudShare":{"viewerCanUpdate":1,"id":"4c370584-e598-4226-963f-5ae9ba72b5fa","updatedAt":"2021-05-23T21:07:56.073Z","previewThumbnails":[{"height":167,"id":"8131eefd-b590-4f07-9f6d-acde2b58e9ff","width":250,"size":0,"identifier":"8131eefd-b590-4f07-9f6d-acde2b58e9ff","updatedAt":"2021-07-02T11:50:17.652Z","createdAt":"2021-07-02T11:50:17.652Z","url":"https:\/\/resources-live.sketch.cloud\/files\/4003e243-ac30-4c91-b65f-b5274001cb72.m.png?Expires=1625486400&Signature=Jj6ABtCYrCcxASrJeHd2AYQ~bfAg3-9E9W7hCt8QQmntic6N5IfBCQqKpXE09GCiRpsz9NSCsd5xQb4dLxjEkKqyO1MbUZHyIhyGNYmdLCujpz0OiH62q~tbFO~-ArwcHfKgiu7CnOjOxTSPbf4oozukv3jPzXoOuXwjoaAqGdg_&Key-Pair-Id=APKAJOITMW3RWOLNNPYA"},{"height":499,"id":"d7327c99-0ae3-402b-b567-bc0e29345f79","width":750,"size":0,"identifier":"d7327c99-0ae3-402b-b567-bc0e29345f79","updatedAt":"2021-07-02T11:50:17.652Z","createdAt":"2021-07-02T11:50:17.652Z","url":"https:\/\/resources-live.sketch.cloud\/files\/4003e243-ac30-4c91-b65f-b5274001cb72.l.png?Expires=1625486400&Signature=R8NtTZAP7ZdsswulVK1g1mh9lY4gYt-gZ8sf3~k2WgNJD3uUcg2NR4XBcrh3Wj5uUT50q9AqDnJOeCukkkYhbll67lh2R5Djk~FcZC3UndCN-ArHuZIwGJGAu23c8EPUGZ~dela0KpzkIF4089bzVgxmE9SjFt2s308lkh08gMA_&Key-Pair-Id=APKAJOITMW3RWOLNNPYA"}],"project":{"name":"Libraries","id":"2a941ce1-a8bf-49bb-8210-690ed094e32e","updatedAt":"2021-07-02T11:50:17.653Z","identifier":"2a941ce1-a8bf-49bb-8210-690ed094e32e","shortId":"4Vkrz","createdAt":"2021-07-02T11:50:17.653Z"},"workspace":{"status":"INACTIVE","userHasEditableContent":0,"__typename":"PublicWorkspace","id":"82a509a6-11c7-4bed-b8d4-ffaa54147c50","userCanEdit":0,"identifier":"82a509a6-11c7-4bed-b8d4-ffaa54147c50","updatedAt":"2021-07-02T11:50:17.652Z","createdAt":"2021-07-02T11:50:17.652Z","customer":{"billing":{},"ssoEnabled":0},"name":"Scratch","userIsOwner":0},"publishedVersion":{"document":{"contents":{},"id":"ab6b9fc7-7ff8-476b-bbe6-8e32b9028c28","updatedAt":"2021-07-02T11:50:17.653Z","identifier":"ab6b9fc7-7ff8-476b-bbe6-8e32b9028c28","name":"Symbols","createdAt":"2021-07-02T11:50:17.653Z"},"id":"ce47575c-52f4-46bc-99ed-9925367267f1","updatedAt":"2021-05-23T21:07:40.000Z","identifier":"ce47575c-52f4-46bc-99ed-9925367267f1","shortId":"GJGDxD","createdAt":"2021-05-23T21:07:40.000Z"},"publicUrl":"https:\/\/sketch.cloud\/s\/4c370584-e598-4226-963f-5ae9ba72b5fa","shortId":"4c370584-e598-4226-963f-5ae9ba72b5fa","identifier":"4c370584-e598-4226-963f-5ae9ba72b5fa","isPrivate":1,"userIsMember":0,"userCanEdit":1,"currentVersion":{"document":{"id":"B3A7D30E-BC86-4B95-9443-798C791B2F33","uuid":"B3A7D30E-BC86-4B95-9443-798C791B2F33","contents":{},"updatedAt":"2021-07-02T11:50:17.652Z","createdAt":"2021-07-02T11:50:17.652Z","identifier":"ab6b9fc7-7ff8-476b-bbe6-8e32b9028c28","name":"Symbols"},"id":"ce47575c-52f4-46bc-99ed-9925367267f1","updatedAt":"2021-05-23T21:07:40.000Z","identifier":"ce47575c-52f4-46bc-99ed-9925367267f1","createdAt":"2021-05-23T21:07:40.000Z"},"createdAt":"2020-12-08T01:35:45.130Z","name":"Symbols","libraryEnabled":1},"pageListCollapsed":0},"E6BC0E90-2992-4698-ADED-9A00E21EC238":{"scrollOrigin":"{0, 0}","zoomValue":1},"B314C0F3-0038-473F-A127-536AF28E5272":{"scrollOrigin":"{0, 0}","zoomValue":1},"B6798E64-F7E9-40F5-9BD0-88A548478438":{"scrollOrigin":"{1240, 541}","zoomValue":0.507985248901646}}

package/src/data/categories.js

@@ -0,0 +1,44 @@
+'use strict'
+
+export default [
+  {
+    key: 'basic',
+    text: 'Basic'
+  }, {
+    key: 'button',
+    text: 'Button'
+  }, {
+    key: 'form',
+    text: 'Form'
+  }, {
+    key: 'navigation',
+    text: 'Navigation'
+  }, {
+    key: 'notification',
+    text: 'Notification'
+  }, {
+    key: 'dropdown',
+    text: 'Dropdown'
+  }, {
+    key: 'badge',
+    text: 'Badge'
+  }, {
+    key: 'datepicker',
+    text: 'Datepicker'
+  }, {
+    key: 'tooltip',
+    text: 'Tooltip'
+  }, {
+    key: 'table',
+    text: 'Table'
+  }, {
+    key: 'toggle',
+    text: 'Toggle'
+  }, {
+    key: 'user',
+    text: 'User'
+  }, {
+    key: 'misc',
+    text: 'Miscellaneous'
+  }
+]

package/src/data/components/button-archived/index.js

@@ -0,0 +1,63 @@
+'use strict'
+
+import CATEGORIES from '../../categories'
+
+import style from './style'
+import { Button } from '@symbo.ls/all'
+
+const key = 'button-archived'
+const title = 'Button Archived'
+const description = ''
+const category = CATEGORIES[1]
+
+const component = {
+  proto: Button,
+  style,
+
+  props: {
+    icon: 'star',
+    text: 'Archived',
+    theme: 'label',
+    padding: 'X1 Z2',
+    gap: 'X',
+    round: 'A'
+  }
+}
+
+const code = `{
+  proto: Button,
+  props: {
+    round: 'A',
+    padding: 'Z A',
+    icon: 'star',
+    text: 'Archived',
+    theme: 'label'
+  }
+}`
+
+const defaultState = {}
+const defaultProps = {
+  icon: 'star',
+  text: 'Archived',
+  theme: 'label',
+  spacingRatio: '1.618',
+  round: 'A'
+}
+
+const settings = {
+  gridOptions: { colspan: 3, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+  defaultProps,
+  settings,
+  interactivity: [],
+  dataTypes: []
+}

package/src/data/components/button-archived/style.js

@@ -0,0 +1,5 @@
+'use strict'
+
+export default {
+  fontWeight: 'bold'
+}

package/src/data/components/button-circle/index.js

@@ -0,0 +1,54 @@
+'use strict'
+
+import CATEGORIES from '../../categories'
+
+import { CircleButton } from '@symbo.ls/all'
+
+const key = 'button-circle'
+const title = 'Circle Button'
+const description = ''
+const category = CATEGORIES[1]
+
+const component = {
+  proto: CircleButton,
+  props: {
+    theme: 'secondary',
+    icon: null,
+    text: '3'
+  }
+}
+
+const code = `{
+  proto: CircleButton,
+  props: {
+    theme: 'secondary',
+    padding: 'Y2',
+    text: '3'
+  }
+}`
+
+const defaultState = {}
+const defaultProps = {
+  theme: 'secondary',
+  padding: 'Y2',
+  spacingRatio: '1.618',
+  text: '3'
+}
+
+const settings = {
+  gridOptions: { colspan: 2, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+  defaultProps,
+  settings,
+  interactivity: ['click'],
+  dataTypes: ['object']
+}

package/src/data/components/button-contacts/index.js

@@ -0,0 +1,56 @@
+'use strict'
+
+import CATEGORIES from '../../categories'
+import style from './style'
+
+import { Button, UserBundle } from '@symbo.ls/all'
+
+const key = 'button-contacts'
+const title = 'Contacts Button'
+const description = ''
+const category = CATEGORIES[1]
+
+const component = {
+  proto: [Button, UserBundle],
+  style,
+  props: {
+    icon: '',
+    round: 42
+  },
+  users: {
+    ...[{}, {}, {}]
+  },
+  span: 'View all Contacts'
+}
+
+const code = `{
+  round: 42,
+  users: [{}, {}, {}],
+  caption: 'View all Contacts'
+}`
+
+const defaultState = {}
+const defaultProps = {
+  round: 42,
+  users: [{}, {}, {}],
+  caption: 'View all Contacts'
+}
+
+const settings = {
+  gridOptions: { colspan: 5, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+
+  defaultProps,
+  settings,
+  interactivity: [],
+  dataTypes: []
+}

package/src/data/components/button-contacts/style.js

@@ -0,0 +1,13 @@
+'use strict'
+
+export default {
+  padding: `${8 / 14}em`,
+  paddingRight: `${26 / 14}em`,
+  span: {
+    paddingLeft: '.4em',
+    whiteSpace: 'nowrap'
+  },
+  img: {
+    border: '2px solid white'
+  }
+}

package/src/data/components/button-download/index.js

@@ -0,0 +1,63 @@
+'use strict'
+
+import CATEGORIES from '../../categories'
+
+import { Button } from '@symbo.ls/all'
+
+const key = 'button-download'
+const title = 'Download Button'
+const description = ''
+const category = CATEGORIES[1]
+
+const component = {
+  proto: Button,
+  state: {},
+  style: {
+    svg: { marginRight: `${6 / 16}em` }
+  },
+  props: {
+    icon: 'arrowDown',
+    theme: 'primary',
+    text: 'Download',
+    padding: ['Z2', 'A2'],
+    round: 'C'
+  }
+}
+
+const code = `{
+  proto: Button,
+  props: {
+    icon: 'arrowDown',
+    theme: 'primary',
+    text: 'Download',
+    round: 'C'
+  }
+}`
+
+const defaultState = {}
+const defaultProps = {
+  icon: 'arrowDown',
+  theme: 'primary',
+  text: 'Download',
+  spacingRatio: '1.618',
+  round: 'C'
+}
+
+const settings = {
+  gridOptions: { colspan: 4, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+
+  defaultProps,
+  settings,
+  interactivity: ['click'],
+  dataTypes: ['object']
+}

package/src/data/components/button-pro/index.js

@@ -0,0 +1,98 @@
+'use strict'
+
+import CATEGORIES from '../../categories'
+
+import style from './style'
+import { Block, KangorooButton } from '@symbo.ls/all'
+
+const key = 'button-pro'
+const title = 'Pro Button'
+const description = ''
+const category = CATEGORIES[1]
+
+const component = {
+  style,
+  proto: KangorooButton,
+
+  props: {
+    theme: 'lightDark',
+    round: 'Z2',
+    padding: ['X1', 'X1', 'X1', 'A'],
+    size: 'A',
+    gap: 'Z',
+
+    iconText: {
+      gap: 'X1',
+      icon: 'star',
+      text: 'Become PRO',
+      alignItems: 'center'
+    },
+
+    label: {
+      round: 12,
+      theme: ['lightDark', 'inverse'],
+      size: 'Z',
+      padding: 'Z A2',
+      text: '1 month free'
+    }
+  },
+
+  iconText: {
+    proto: Block,
+    props: el => el.parent.props.iconText
+  },
+
+  child: {
+    props: el => el.parent.props.label
+  }
+}
+
+const code = `{
+  proto: Button,
+  props: {
+    theme: 'lightDark',
+    round: 12,
+    padding: ['X1', 'X1', 'X1', 'A'],
+    size: 'A',
+    icon: 'info',
+    text: 'Become PRO',
+
+    label: {
+      round: 12,
+      theme: ['lightDark', 'inverse'],
+      size: 'Z',
+      gap: 'A',
+      padding: 'Z A2',
+      text: '1 month free'
+    }
+  }
+}`
+
+const defaultState = {}
+const defaultProps = {
+  theme: 'lightDark',
+  round: 12,
+  padding: ['X1', 'X1', 'X1', 'A'],
+  size: 'A',
+  icon: 'info',
+  text: 'Become PRO'
+}
+
+const settings = {
+  gridOptions: { colspan: 6, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+
+  defaultProps,
+  settings,
+  interactivity: ['click'],
+  dataTypes: ['object']
+}

package/src/data/components/button-pro/style.js

@@ -0,0 +1,19 @@
+'use strict'
+
+export default {
+  color: '#241C39',
+  fontWeight: 'bold',
+
+  '> svg': {
+    borderRadius: '100%',
+    padding: '.2em',
+    background: '#241C39',
+    color: 'white',
+    marginRight: `${6 / 16}em`
+  },
+
+  span: {
+    alignItems: 'center',
+    marginLeft: '8px'
+  }
+}

package/src/data/components/button-theme-switcher/index.js

@@ -0,0 +1,104 @@
+'use strict'
+
+import CATEGORIES from '../../categories'
+
+import style from './style'
+import { KangorooButton } from '@symbo.ls/all'
+
+const key = 'button-theme-switcher'
+const title = 'Theme Switcher'
+const description = ''
+const category = CATEGORIES[1]
+
+const component = {
+  style: style,
+  proto: KangorooButton,
+
+  props: {
+    round: 'C',
+    theme: 'lightDark',
+    size: 'A',
+    padding: 'X1 Y X1 A1',
+    gap: 'Z1',
+    depth: 16,
+
+    light: {
+      icon: 'sun',
+      text: 'Light Mode'
+    },
+
+    dark: {
+      theme: ['lightDark', 'inverse'],
+      round: 'C',
+      icon: 'moon',
+      padding: 'Z Z1',
+      text: 'Dark Mode'
+    }
+  },
+
+  iconText: {
+    props: el => el.parent.props.light
+  },
+
+  child: {
+    props: el => el.parent.props.dark
+  }
+}
+
+const code = `{
+  proto: KangorooButton,
+  props: {
+    round: 'C',
+    theme: 'lightDark',
+    size: 'Z',
+
+    light: {
+      icon: 'sun',
+      text: 'Light Mode'
+    },
+
+    dark: {
+      theme: ['lightDark', 'inverse'],
+      round: 'C',
+      icon: 'moon',
+      text: 'Dark Mode'
+    }
+  }
+}`
+
+const defaultState = {}
+const defaultProps = {
+  round: 'C',
+  theme: 'lightDark',
+  size: 'Z',
+
+  light: {
+    icon: 'sun',
+    text: 'Light Mode'
+  },
+
+  dark: {
+    theme: ['lightDark', 'inverse'],
+    round: 'C',
+    icon: 'moon',
+    text: 'Dark Mode'
+  }
+}
+
+const settings = {
+  gridOptions: { colspan: 5, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+  defaultProps,
+  settings,
+  interactivity: [],
+  dataTypes: []
+}

package/src/data/components/button-theme-switcher/style.js

@@ -0,0 +1,16 @@
+'use strict'
+
+export default {
+  fontWeight: 'bold',
+
+  svg: {
+    color: '#EDCB38',
+    marginRight: `${4 / 16}em`
+  },
+
+  span: {
+    maxHeight: '32px',
+    padding: `${9 / 14}em ${16 / 14}em`,
+    marginLeft: `${16 / 14}em`
+  }
+}

package/src/data/components/button-user/index.js

@@ -0,0 +1,82 @@
+'use strict'
+
+import CATEGORIES from '../../categories'
+
+import style from './style'
+import { Button, User } from '@symbo.ls/all'
+
+const key = 'button-user'
+const title = 'User Button'
+const description = ''
+const category = CATEGORIES[1]
+
+const component = {
+  proto: Button,
+  tag: 'label',
+  style,
+
+  props: (el, s) => ({
+    size: 'A',
+    round: 'C',
+    depth: 16,
+    gap: 'Y2',
+    padding: 'W2 A W2 W2',
+    icon: 'arrowAngleDown',
+    theme: s.sceneTheme === 'light' ? 'lightDark' : 'quaternary'
+  }),
+
+  user: {
+    proto: User,
+    props: { boxSize: 'B1 B1' },
+    class: { dis: { pointerEvents: 'none' } }
+  },
+  select: {
+    attr: {
+      name: 'user',
+      id: 'user'
+    },
+    childProto: { tag: 'option' },
+    ...[
+      { text: 'Kevin' },
+      { text: 'Jay' }
+    ]
+  }
+}
+
+const code = `{
+  round: 'C',
+  icon: 'arrowAngleDown',
+  name: 'user',
+  id: 'user',
+  options: [
+    { text: 'adam' },
+    { text: 'jora' }
+  ]
+}`
+
+const defaultState = {}
+const defaultProps = {
+  size: 'A',
+  round: 'C',
+  depth: 16,
+  icon: 'arrowAngleDown',
+  theme: 'quaternary'
+}
+
+const settings = {
+  gridOptions: { colspan: 4, rowspan: 2 }
+}
+
+export default {
+  key,
+  title,
+  description,
+  category,
+  component,
+  code,
+  defaultState,
+  defaultProps,
+  settings,
+  interactivity: [],
+  dataTypes: []
+}