Improve UI

packages/toolbox/package.json

@@ -44,7 +44,7 @@
     "@types/object-hash": "^3.0.6",
     "@types/react-router-dom": "^5.3.3",
     "classnames": "^2.5.1",
-    "framer-motion": "^11.10.0",
+    "framer-motion": "^11.11.1",
     "localforage": "^1.10.0",
     "lodash.debounce": "^4.0.8",
     "object-hash": "^3.0.0",

packages/toolbox/src/components/icons.ts

@@ -19,6 +19,8 @@ export const icons = {
   'plus': 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PHBhdGggZD0iTSA0IDAuNzUgQyA0IDAuMzM2IDQuMzM2IDAgNC43NSAwIEMgNS4xNjQgMCA1LjUgMC4zMzYgNS41IDAuNzUgTCA1LjUgNCBMIDguNzUgNCBDIDkuMTY0IDQgOS41IDQuMzM2IDkuNSA0Ljc1IEMgOS41IDUuMTY0IDkuMTY0IDUuNSA4Ljc1IDUuNSBMIDUuNSA1LjUgTCA1LjUgOC43NSBDIDUuNSA5LjE2NCA1LjE2NCA5LjUgNC43NSA5LjUgQyA0LjMzNiA5LjUgNCA5LjE2NCA0IDguNzUgTCA0IDUuNSBMIDAuNzUgNS41IEMgMC4zMzYgNS41IDAgNS4xNjQgMCA0Ljc1IEMgMCA0LjMzNiAwLjMzNiA0IDAuNzUgNCBMIDQgNCBaIiBmaWxsPSJyZ2IoMTUzLCAxNTMsIDE1MykiPjwvcGF0aD48L3N2Zz4=',
   'cross':
     'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI4IiBoZWlnaHQ9IjgiPjxwYXRoIGQ9Ik0gMS41IDYuNSBMIDYuNSAxLjUiIGZpbGw9InRyYW5zcGFyZW50IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2UtbGluZWNhcD0icm91bmQiPjwvcGF0aD48cGF0aCBkPSJNIDYuNSA2LjUgTCAxLjUgMS41IiBmaWxsPSJ0cmFuc3BhcmVudCIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZT0iIzk5OTk5OSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj48L3BhdGg+PC9zdmc+',
+  'arrow-left':
+    'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTUgMkwxLjUgNkw1IDkuNSIgc3Ryb2tlPSIjOTk5OTk5IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBzdHJva2UtbGluZWNhcD0icm91bmQiLz4KPC9zdmc+Cg==',
 }
 
 /**

packages/toolbox/src/components/ui/back.module.css

@@ -0,0 +1,24 @@
+.back {
+  display: flex;
+  flex-direction: column;
+  align-items: left;
+  gap: 19px;
+  width: 100%;
+}
+
+.backContent {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+
+  color: var(--framer-color-text, #333);
+  font-weight: 600;
+}
+
+.backContent:hover {
+  cursor: pointer;
+}
+
+.backIcon {
+  color: #999;
+}

packages/toolbox/src/components/ui/back.tsx

@@ -0,0 +1,46 @@
+import { Icon } from './icon'
+import { Separator } from './separator'
+
+import classes from './back.module.css'
+
+/**
+ * The props of the Back component.
+ *
+ * @public
+ */
+export interface BackProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** The title of the current page. */
+  title: string
+  /** The function to call when the back button is clicked. */
+  onClick?: () => void
+}
+
+/**
+ * A component that renders a horizontal separator line (`<hr>` element) with customizable styles.
+ *
+ * @example
+ * ```tsx
+ * <Back onClick={() => {}} />
+ * ```
+ *
+ * @public
+ * @kind component
+ */
+const Back: React.FC<BackProps> = ({
+  title,
+  onClick,
+  ...props
+}) => {
+  return (
+    <div className={classes.back} {...props}>
+      <Separator style={{ margin: 0 }} />
+      <div className={classes.backContent} onClick={onClick}>
+        <Icon className={classes.backIcon} icon="arrow-left" size={12} />
+        <span className={classes.backText}>{title}</span>
+      </div>
+      <Separator style={{ margin: 0 }} />
+    </div>
+  )
+}
+
+export { Back }

packages/toolbox/src/components/ui/controls/number-controls.tsx

@@ -78,6 +78,8 @@ export const NumberControls: React.FC<NumberControlsProps> = ({
     if (props.max !== undefined)
       newValue = Math.min(+props.max, newValue)
 
+    newValue = Math.round(newValue * 100) / 100
+
     if (currentValue === newValue)
       return
 

packages/toolbox/src/components/ui/controls/segmented-controls.module.css

@@ -25,10 +25,22 @@
   overflow: visible;
   background-color: var(--framer-segmented-control-background-color);
   padding: 2px;
-  height: 30px;
   color: var(--framer-segmented-control-item-text-color);
 }
 
+.horizontal {
+  flex-direction: row;
+  height: 30px;
+}
+
+.vertical {
+  flex-direction: column;
+  height: min-content;
+  width: 100%;
+
+  text-align: left !important;
+}
+
 .segmentedControls span {
   position: relative;
   display: flex;
@@ -39,8 +51,9 @@
   cursor: pointer;
   border-radius: 5px;
   border: 1px solid transparent;
-  transition: color 0.2s;
+  transition: color 150ms;
   z-index: 1;
+  padding: 0 4px;
 }
 
 /*
@@ -84,3 +97,9 @@
   z-index: 0;
   box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
 }
+
+.vertical span {
+  justify-content: flex-start;
+  padding: 0 10px;
+  height: 30px;
+}

packages/toolbox/src/components/ui/controls/segmented-controls.tsx

@@ -56,6 +56,8 @@ export interface SegmentedControlsProps<Value> {
   onChange?: (value: Value, event: React.MouseEvent<HTMLSpanElement>) => void
   /** Whether the segmented controls are disabled. */
   disabled?: boolean
+  /** The direction of the segmented controls. */
+  direction?: 'horizontal' | 'vertical'
 }
 
 /**
@@ -103,6 +105,7 @@ export function SegmentedControls<Value>({
   defaultValue,
   disabled,
   onChange,
+  direction = 'horizontal',
 }: SegmentedControlsProps<Value>) {
   const segmentedControlsRef = useRef<HTMLDivElement>(null)
   const [selectedValue, setSelectedValue] = useState(value ?? defaultValue ?? (items.length > 0 ? items[0].value : false))
@@ -128,21 +131,29 @@ export function SegmentedControls<Value>({
   }, [segmentedControlsRef])
 
   const indicatorDimensions = useMemo(() => {
-    return {
-      width: `calc((100% - ${padding.left} - ${padding.right}) / ${items.length})`,
-      height: `calc(100% - ${padding.top} - ${padding.bottom})`,
-    }
-  }, [padding, items.length])
-
-  const animateX = useMemo(() => {
-    return {
-      left: `calc(${items.findIndex(
-        item => item.value === selectedValue,
-      )} * (100% - ${padding.left} - ${padding.right}) / ${items.length} + ${
-        padding.left
-      })`,
-    }
-  }, [selectedValue, items, padding])
+    return direction === 'horizontal'
+      ? {
+          width: `calc((100% - ${padding.left} - ${padding.right}) / ${items.length})`,
+          height: `calc(100% - ${padding.top} - ${padding.bottom})`,
+        }
+      : {
+          width: `calc(100% - ${padding.left} - ${padding.right})`,
+          height: `calc((100% - ${padding.top} - ${padding.bottom}) / ${items.length})`,
+        }
+  }, [padding, items.length, direction])
+
+  const animatePosition = useMemo(() => {
+    const index = items.findIndex(item => item.value === selectedValue)
+    return direction === 'horizontal'
+      ? {
+          left: `calc(${index} * (100% - ${padding.left} - ${padding.right}) / ${items.length} + ${padding.left})`,
+          top: padding.top,
+        }
+      : {
+          left: padding.left,
+          top: `calc(${index} * (100% - ${padding.top} - ${padding.bottom}) / ${items.length} + ${padding.top})`,
+        }
+  }, [selectedValue, items, padding, direction])
 
   const handleChange = (event: React.MouseEvent<HTMLSpanElement>, value: Value) => {
     if (disabled) {
@@ -173,8 +184,8 @@ export function SegmentedControls<Value>({
   }, [value])
 
   return (
-    <InputGroup title={title}>
-      <div ref={segmentedControlsRef} className={classes.segmentedControls}>
+    <InputGroup title={title} multiline={direction === 'vertical'}>
+      <div ref={segmentedControlsRef} className={cx(classes.segmentedControls, classes[direction])}>
         {items.map((item, idx) => (
           <span
             key={`${title}-${item.value}`}
@@ -199,8 +210,8 @@ export function SegmentedControls<Value>({
         ))}
         <motion.div
           className={classes.indicator}
-          initial={animateX}
-          animate={animateX}
+          initial={animatePosition}
+          animate={animatePosition}
           style={indicatorDimensions}
         />
       </div>

packages/toolbox/src/components/ui/index.ts

@@ -4,3 +4,4 @@ export * from './controls'
 export * from './spinner'
 export * from './icon'
 export * from './separator'
+export * from './back'

packages/toolbox/src/components/ui/input-group.module.css

@@ -13,6 +13,17 @@
   width: 100%;
 }
 
+.multiline {
+  height: auto;
+}
+
+.multiline > label {
+  display: flex;
+  align-items: center;
+  align-self: start;
+  height: 30px;
+}
+
 .full > :nth-child(2) {
   grid-column: 2 / -1;
 }

packages/toolbox/src/components/ui/input-group.tsx

@@ -15,6 +15,12 @@ export interface InputGroupProps {
   title?: string
   /** The children of the input group. */
   children: React.ReactNode
+  /**
+   * The boolean to determine if the input group is multiline.
+   *
+   * @defaultValue false
+   */
+  multiline?: boolean
 }
 
 /**
@@ -33,14 +39,14 @@ export interface InputGroupProps {
  * @internal
  * @kind component
  */
-const InputGroup: React.FC<InputGroupProps> = ({ title, children }) => {
+const InputGroup: React.FC<InputGroupProps> = ({ title, children, multiline }) => {
   const hasMultipleChildren = useMemo(
     () => React.Children.count(children) > 1,
     [children],
   )
 
   return (
-    <div className={cx(classes.inputGroup, !hasMultipleChildren && classes.full)}>
+    <div className={cx(classes.inputGroup, !hasMultipleChildren && classes.full, multiline && classes.multiline)}>
       {title && <label title={capitalizeWords(title)}>{capitalizeWords(title)}</label>}
       {children}
     </div>

packages/toolbox/src/components/ui/separator.module.css

@@ -1,4 +1,5 @@
 .separator {
+  height: 1px;
   margin-top: 5px;
   margin-bottom: 5px;
 }

plugins/basic/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@triozer/framer-toolbox": "workspace:*",
-    "framer-motion": "^11.10.0",
+    "framer-motion": "^11.11.1",
     "framer-plugin": "^1",
     "localforage": "^1.10.0",
     "react": "^18",

plugins/basic/src/App.tsx

@@ -99,6 +99,15 @@ export function App() {
         ]}
         defaultValue="plus"
       />
+      <SegmentedControls
+        direction="vertical"
+        title="Vertical Segmented Controls"
+        items={[
+          { value: 'label-1', label: 'Label 1' },
+          { value: 'label-2', label: 'Label 2' },
+          { value: 'label-3', label: 'Label 3' },
+        ]}
+      />
       <TextControls
         title="Text Controls"
         placeholder="Type something..."

plugins/palette/package.json

@@ -15,7 +15,7 @@
     "clsx": "^2.1.0",
     "color-scheme": "^1.0.1",
     "dom-to-svg": "^0.12.2",
-    "framer-motion": "^11.10.0",
+    "framer-motion": "^11.11.1",
     "framer-plugin": "^1",
     "hex-rgb": "^5.0.0",
     "html-to-image": "^1.11.11",