feat: add hasBorderWidth utility function to use-box-control hook

[Rish-it]

Description

This PR fixes the border controls visibility issue where border width and color controls were always displayed even when no border was defined. The solution implements conditional rendering for border-related controls, making them behave consistently with padding and margin controls.

Changes made:

• Added hasBorderWidth utility function to use-box-control.ts hook to check if a border width is defined and greater than 0
• Updated border.tsx to conditionally display border width value only when a border exists
• Updated border-color.tsx to conditionally render the color picker (pencil icon) only when a border is defined
• Implemented clean conditional logic that handles both px and non-px units properly

The UI now only shows border controls when they are relevant, eliminating the confusing "0" display and unnecessary color picker when no border is set.

Related Issues

Closes #2106

Type of Change

• [x] Bug fix
• [ ] New feature
• [ ] Documentation update
• [ ] Release
• [ ] Refactor
• [ ] Other (please describe):

Testing

Steps to verify the changes:

1. Open the Onlook editor
2. Select an element with no border defined
3. Before: Border width showed "0" and color picker (pencil) was visible
4. After: Border width and color picker are now hidden
5. Set a border width > 0 on the element
6. Verify: Border width value and color picker now appear
7. Set border width back to 0
8. Verify: Controls disappear again

Test different scenarios:

• Elements with no border-width CSS property
• Elements with border-width: 0px
• Elements with border-width: -- (undefined)
• Elements with various unit types (px, em, rem, etc.)

Screenshots (if applicable)

Behaviour after fix:

https://github.com/user-attachments/assets/1e702b94-cc30-489d-8b71-37ab1d71652c

Additional Notes

• This change aligns border control behavior with existing padding and margin control patterns
• The hasBorderWidth utility function is reusable and exported from the existing use-box-control hook
• The solution handles edge cases like empty strings, '--' values, and different CSS units
• Maintains backward compatibility and doesn't affect existing functionality

---

[!IMPORTANT] Adds hasBorderWidth utility to conditionally render border controls based on border presence, improving UI consistency.

• Behavior:
  • Adds hasBorderWidth function in use-box-control.ts to check if border width is defined and > 0.
  • Updates border.tsx to show border width only when a border exists.
  • Updates border-color.tsx to render color picker only when a border is defined.
• Logic:
  • Handles both px and non-px units in hasBorderWidth.
  • Ensures border controls align with padding and margin control behavior.
• Misc:
  • No new files; changes utilize existing infrastructure.
  • Handles edge cases like empty strings, '--' values, and different CSS units.

^{This description was created by for 6419c598a35322cd67a6bfbe829658729ce7369a. You can customize this summary. It will automatically update as commits are pushed.}

[vercel[bot]]

@Rish-it is attempting to deploy a commit to the Onlook Team on Vercel.

A member of the Team first needs to authorize it.